@paulirish/trace_engine 0.0.57 → 0.0.58

package/models/trace/insights/ImageDelivery.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageDelivery.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/ImageDelivery.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport type * as Platform from '../../../core/platform/platform.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type * as Types from '../types/types.js';\n\nimport {metricSavingsForWastedBytes} from './Common.js';\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that recommends ways to reduce the size of images downloaded and used on the page.\n   */\n  title: 'Improve image delivery',\n  /**\n   * @description Description of an insight that recommends ways to reduce the size of images downloaded and used on the page.\n   */\n  description:\n      'Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)',\n  /**\n   * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.\n   */\n  useCompression: 'Increasing the image compression factor could improve this image\\'s download size.',\n  /**\n   * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.\n   */\n  useModernFormat:\n      'Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image\\'s download size.',\n  /**\n   * @description Message displayed in a chip advising the user to use video formats instead of GIFs because videos generally have smaller file sizes.\n   */\n  useVideoFormat: 'Using video formats instead of GIFs can improve the download size of animated content.',\n  /**\n   * @description Message displayed in a chip explaining that an image was displayed on the page with dimensions much smaller than the image file dimensions.\n   * @example {1000x500} PH1\n   * @example {100x50} PH2\n   */\n  useResponsiveSize:\n      'This image file is larger than it needs to be ({PH1}) for its displayed dimensions ({PH2}). Use responsive images to reduce the image download size.',\n  /**\n   * @description Column header for a table column containing network requests for images which can improve their file size (e.g. use a different format, increase compression, etc).\n   */\n  optimizeFile: 'Optimize file size',\n  /**\n   * @description Table row value representing the remaining items not shown in the table due to size constraints. This row will always represent at least 2 items.\n   * @example {5} PH1\n   */\n  others: '{PH1} others',\n  /**\n   * @description Text status indicating that no potential optimizations were found for any image file\n   */\n  noOptimizableImages: 'No optimizable images',\n  /**\n   * @description Text describing the estimated number of bytes that an image file optimization can save. This text is appended to another block of text describing the image optimization in more detail. \"Est\" means \"Estimated\".\n   * @example {Use the correct image dimensions to reduce the image file size.} PH1\n   * @example {50 MB} PH2\n   */\n  estimatedSavings: '{PH1} (Est {PH2})',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/ImageDelivery.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\n/**\n * Even JPEGs with lots of detail can usually be compressed down to <1 byte per pixel\n * Using 4:2:2 subsampling already gets an uncompressed bitmap to 2 bytes per pixel.\n * The compression ratio for JPEG is usually somewhere around 10:1 depending on content, so\n * 8:1 is a reasonable expectation for web content which is 1.5MB for a 6MP image.\n *\n * WebP usually gives ~20% additional savings on top of that, so we will assume 10:1 for WebP.\n * This is quite pessimistic as their study shows a photographic compression ratio of ~29:1.\n * https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study#results\n *\n * AVIF usually gives ~20% additional savings on top of WebP, so we will use 12:1 for AVIF.\n * This is quite pessimistic as Netflix study shows a photographic compression ratio of ~40:1\n * (0.4 *bits* per pixel at SSIM 0.97).\n * https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4\n */\nconst TARGET_BYTES_PER_PIXEL_AVIF = 2 * 1 / 12;\n\n/**\n * If GIFs are above this size, we'll flag them\n * See https://github.com/GoogleChrome/lighthouse/pull/4885#discussion_r178406623 and https://github.com/GoogleChrome/lighthouse/issues/4696#issuecomment-370979920\n */\nconst GIF_SIZE_THRESHOLD = 100 * 1024;\n\nconst BYTE_SAVINGS_THRESHOLD = 4096;\n\n// Ignore up to 12KB of waste for responsive images if an effort was made with breakpoints.\nconst BYTE_SAVINGS_THRESHOLD_RESPONSIVE_BREAKPOINTS = 12288;\n\nexport enum ImageOptimizationType {\n  ADJUST_COMPRESSION = 'ADJUST_COMPRESSION',\n  MODERN_FORMAT_OR_COMPRESSION = 'MODERN_FORMAT_OR_COMPRESSION',\n  VIDEO_FORMAT = 'VIDEO_FORMAT',\n  RESPONSIVE_SIZE = 'RESPONSIVE_SIZE',\n}\n\nexport type ImageOptimization = {\n  type: Exclude<ImageOptimizationType, ImageOptimizationType.RESPONSIVE_SIZE>,\n  byteSavings: number,\n}|{\n  type: ImageOptimizationType.RESPONSIVE_SIZE,\n  byteSavings: number,\n  fileDimensions: {width: number, height: number},\n  displayDimensions: {width: number, height: number},\n};\n\nexport interface OptimizableImage {\n  request: Types.Events.SyntheticNetworkRequest;\n  optimizations: ImageOptimization[];\n  byteSavings: number;\n  /**\n   * If the an image resource has multiple `PaintImage`s, we compare its intrinsic size to the largest of the displayed sizes.\n   *\n   * It is theoretically possible for `PaintImage` events with the same URL to have different intrinsic sizes.\n   * However, this should be rare because it requires serving different images from the same URL.\n   */\n  largestImagePaint: Types.Events.PaintImage;\n}\n\nexport type ImageDeliveryInsightModel = InsightModel<typeof UIStrings, {\n  /** Sorted by potential byte savings, then by size of image. */\n  optimizableImages: OptimizableImage[],\n}>;\n\nexport function getOptimizationMessage(optimization: ImageOptimization): Platform.UIString.LocalizedString {\n  switch (optimization.type) {\n    case ImageOptimizationType.ADJUST_COMPRESSION:\n      return i18nString(UIStrings.useCompression);\n    case ImageOptimizationType.MODERN_FORMAT_OR_COMPRESSION:\n      return i18nString(UIStrings.useModernFormat);\n    case ImageOptimizationType.VIDEO_FORMAT:\n      return i18nString(UIStrings.useVideoFormat);\n    case ImageOptimizationType.RESPONSIVE_SIZE:\n      return i18nString(UIStrings.useResponsiveSize, {\n        PH1: `${optimization.fileDimensions.width}x${optimization.fileDimensions.height}`,\n        PH2: `${optimization.displayDimensions.width}x${optimization.displayDimensions.height}`,\n      });\n  }\n}\n\nexport function getOptimizationMessageWithBytes(optimization: ImageOptimization): Platform.UIString.LocalizedString {\n  const byteSavingsText = i18n.ByteUtilities.bytesToString(optimization.byteSavings);\n  const optimizationMessage = getOptimizationMessage(optimization);\n  return i18nString(UIStrings.estimatedSavings, {PH1: optimizationMessage, PH2: byteSavingsText});\n}\n\nfunction finalize(partialModel: PartialInsightModel<ImageDeliveryInsightModel>): ImageDeliveryInsightModel {\n  return {\n    insightKey: InsightKeys.IMAGE_DELIVERY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: partialModel.optimizableImages.length > 0 ? 'fail' : 'pass',\n    ...partialModel,\n    relatedEvents: new Map(partialModel.optimizableImages.map(\n        image => [image.request, image.optimizations.map(getOptimizationMessageWithBytes)])),\n  };\n}\n\n/**\n * Calculate rough savings percentage based on 1000 real gifs transcoded to video\n * https://github.com/GoogleChrome/lighthouse/issues/4696#issuecomment-380296510\n */\nfunction estimateGIFPercentSavings(request: Types.Events.SyntheticNetworkRequest): number {\n  return Math.round((29.1 * Math.log10(request.args.data.decodedBodyLength) - 100.7)) / 100;\n}\n\nfunction getDisplayedSize(\n    parsedTrace: Handlers.Types.ParsedTrace, paintImage: Types.Events.PaintImage): {width: number, height: number} {\n  // Note: for traces made prior to metadata.hostDPR (which means no data in\n  // paintEventToCorrectedDisplaySize), the displayed size unexpectedly ignores any\n  // emulated DPR and so the results may be very misleading.\n  return parsedTrace.ImagePainting.paintEventToCorrectedDisplaySize.get(paintImage) ?? {\n    width: paintImage.args.data.width,\n    height: paintImage.args.data.height,\n  };\n}\n\nfunction getPixelCounts(parsedTrace: Handlers.Types.ParsedTrace, paintImage: Types.Events.PaintImage):\n    {displayedPixels: number, filePixels: number} {\n  const {width, height} = getDisplayedSize(parsedTrace, paintImage);\n  return {\n    filePixels: paintImage.args.data.srcWidth * paintImage.args.data.srcHeight,\n    displayedPixels: width * height,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): ImageDeliveryInsightModel {\n  const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);\n\n  const contextRequests = parsedTrace.NetworkRequests.byTime.filter(isWithinContext);\n\n  const optimizableImages: OptimizableImage[] = [];\n  for (const request of contextRequests) {\n    if (request.args.data.resourceType !== 'Image') {\n      continue;\n    }\n\n    if (request.args.data.mimeType === 'image/svg+xml') {\n      continue;\n    }\n\n    // If the request was redirected, the image paints will have the pre-redirect URL.\n    const url = request.args.data.redirects[0]?.url ?? request.args.data.url;\n    const imagePaints = parsedTrace.ImagePainting.paintImageEventForUrl.get(url)?.filter(isWithinContext);\n\n    // This will filter out things like preloaded image requests where an image file is downloaded\n    // but never rendered on the page.\n    if (!imagePaints?.length) {\n      continue;\n    }\n\n    const largestImagePaint = imagePaints.reduce((prev, curr) => {\n      const prevPixels = getPixelCounts(parsedTrace, prev).displayedPixels;\n      const currPixels = getPixelCounts(parsedTrace, curr).displayedPixels;\n      return prevPixels > currPixels ? prev : curr;\n    });\n\n    const {\n      filePixels: imageFilePixels,\n      displayedPixels: largestImageDisplayPixels,\n    } = getPixelCounts(parsedTrace, largestImagePaint);\n\n    // Decoded body length is almost always the right one to be using because of the below:\n    //     `encodedDataLength = decodedBodyLength + headers`.\n    // HOWEVER, there are some cases where an image is compressed again over the network and transfer size\n    // is smaller (see https://github.com/GoogleChrome/lighthouse/pull/4968).\n    // Use the min of the two numbers to be safe.\n    const imageBytes = Math.min(request.args.data.decodedBodyLength, request.args.data.encodedDataLength);\n\n    const bytesPerPixel = imageBytes / imageFilePixels;\n\n    let optimizations: ImageOptimization[] = [];\n    if (request.args.data.mimeType === 'image/gif') {\n      if (imageBytes > GIF_SIZE_THRESHOLD) {\n        const percentSavings = estimateGIFPercentSavings(request);\n        const byteSavings = Math.round(imageBytes * percentSavings);\n        optimizations.push({type: ImageOptimizationType.VIDEO_FORMAT, byteSavings});\n      }\n    } else if (bytesPerPixel > TARGET_BYTES_PER_PIXEL_AVIF) {\n      const idealAvifImageSize = Math.round(TARGET_BYTES_PER_PIXEL_AVIF * imageFilePixels);\n      const byteSavings = imageBytes - idealAvifImageSize;\n      if (request.args.data.mimeType !== 'image/webp' && request.args.data.mimeType !== 'image/avif') {\n        optimizations.push({type: ImageOptimizationType.MODERN_FORMAT_OR_COMPRESSION, byteSavings});\n      } else {\n        optimizations.push({type: ImageOptimizationType.ADJUST_COMPRESSION, byteSavings});\n      }\n    }\n\n    // At this point (before looking at image size), the # of optimizations should only ever be 1 or 0\n    // Math.max handles both cases correctly, and is defensive against future patches that would add\n    // more than 1 format-specific optimization by this point.\n    const imageByteSavingsFromFormat = Math.max(0, ...optimizations.map(o => o.byteSavings));\n    let imageByteSavings = imageByteSavingsFromFormat;\n\n    const wastedPixelRatio = 1 - (largestImageDisplayPixels / imageFilePixels);\n\n    // Ignore CSS images because it's difficult to determine what is a spritesheet,\n    // and the reward-to-effort ratio for responsive CSS images is quite low https://css-tricks.com/responsive-images-css/.\n    if (wastedPixelRatio > 0 && !largestImagePaint.args.data.isCSS) {\n      const byteSavings = Math.round(wastedPixelRatio * imageBytes);\n\n      const hadBreakpoints = largestImagePaint.args.data.isPicture || largestImagePaint.args.data.srcsetAttribute;\n      if (!hadBreakpoints || byteSavings > BYTE_SAVINGS_THRESHOLD_RESPONSIVE_BREAKPOINTS) {\n        // This will compound the byte savings from any potential format changes with the image size\n        // optimization added here.\n        imageByteSavings += Math.round(wastedPixelRatio * (imageBytes - imageByteSavingsFromFormat));\n\n        const {width, height} = getDisplayedSize(parsedTrace, largestImagePaint);\n\n        optimizations.push({\n          type: ImageOptimizationType.RESPONSIVE_SIZE,\n          byteSavings,\n          fileDimensions: {\n            width: Math.round(largestImagePaint.args.data.srcWidth),\n            height: Math.round(largestImagePaint.args.data.srcHeight),\n          },\n          displayDimensions: {\n            width: Math.round(width),\n            height: Math.round(height),\n          },\n        });\n      }\n    }\n\n    optimizations = optimizations.filter(optimization => optimization.byteSavings > BYTE_SAVINGS_THRESHOLD);\n\n    if (optimizations.length > 0) {\n      optimizableImages.push({\n        request,\n        largestImagePaint,\n        optimizations,\n        byteSavings: imageByteSavings,\n      });\n    }\n  }\n\n  const wastedBytesByRequestId = new Map<string, number>();\n  for (const image of optimizableImages) {\n    wastedBytesByRequestId.set(image.request.args.data.requestId, image.byteSavings);\n  }\n\n  // Sort by savings, then by size of image.\n  optimizableImages.sort((a, b) => {\n    if (b.byteSavings !== a.byteSavings) {\n      return b.byteSavings - a.byteSavings;\n    }\n\n    return b.request.args.data.decodedBodyLength - a.request.args.data.decodedBodyLength;\n  });\n\n  return finalize({\n    optimizableImages,\n    metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),\n    wastedBytes: optimizableImages.reduce((total, img) => total + img.byteSavings, 0),\n  });\n}\n\nexport function createOverlayForRequest(request: Types.Events.SyntheticNetworkRequest): Types.Overlays.EntryOutline {\n  return {\n    type: 'ENTRY_OUTLINE',\n    entry: request,\n    outlineReason: 'ERROR',\n  };\n}\n\nexport function createOverlays(model: ImageDeliveryInsightModel): Types.Overlays.Overlay[] {\n  return model.optimizableImages.map(image => createOverlayForRequest(image.request));\n}\n"]}
+{"version":3,"file":"ImageDelivery.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/ImageDelivery.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,IAAI,MAAM,4BAA4B,CAAC;AAGnD,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAC,2BAA2B,EAAC,MAAM,aAAa,CAAC;AACxD,OAAO,EACL,eAAe,EACf,WAAW,GAIZ,MAAM,YAAY,CAAC;AAEpB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,wBAAwB;IAC/B;;OAEG;IACH,WAAW,EACP,yNAAyN;IAC7N;;OAEG;IACH,cAAc,EAAE,oFAAoF;IACpG;;OAEG;IACH,eAAe,EACX,yHAAyH;IAC7H;;OAEG;IACH,cAAc,EAAE,wFAAwF;IACxG;;;;OAIG;IACH,iBAAiB,EACb,sJAAsJ;IAC1J;;OAEG;IACH,YAAY,EAAE,oBAAoB;IAClC;;;OAGG;IACH,MAAM,EAAE,cAAc;IACtB;;OAEG;IACH,mBAAmB,EAAE,uBAAuB;IAC5C;;;;OAIG;IACH,gBAAgB,EAAE,mBAAmB;CAC7B,CAAC;AAEX,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,wCAAwC,EAAE,SAAS,CAAC,CAAC;AAC9F,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAE7E;;;;;;;;;;;;;;GAcG;AACH,MAAM,2BAA2B,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAE/C;;;GAGG;AACH,MAAM,kBAAkB,GAAG,GAAG,GAAG,IAAI,CAAC;AAEtC,MAAM,sBAAsB,GAAG,IAAI,CAAC;AAEpC,2FAA2F;AAC3F,MAAM,6CAA6C,GAAG,KAAK,CAAC;AAE5D,MAAM,CAAN,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC/B,kEAAyC,CAAA;IACzC,sFAA6D,CAAA;IAC7D,sDAA6B,CAAA;IAC7B,4DAAmC,CAAA;AACrC,CAAC,EALW,qBAAqB,KAArB,qBAAqB,QAKhC;AA+BD,MAAM,UAAU,eAAe,CAAC,KAAmB;IACjD,OAAO,KAAK,CAAC,UAAU,KAAK,eAAe,CAAC;AAC9C,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,YAA+B;IACpE,QAAQ,YAAY,CAAC,IAAI,EAAE,CAAC;QAC1B,KAAK,qBAAqB,CAAC,kBAAkB;YAC3C,OAAO,UAAU,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QAC9C,KAAK,qBAAqB,CAAC,4BAA4B;YACrD,OAAO,UAAU,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;QAC/C,KAAK,qBAAqB,CAAC,YAAY;YACrC,OAAO,UAAU,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QAC9C,KAAK,qBAAqB,CAAC,eAAe;YACxC,OAAO,UAAU,CAAC,SAAS,CAAC,iBAAiB,EAAE;gBAC7C,GAAG,EAAE,GAAG,YAAY,CAAC,cAAc,CAAC,KAAK,IAAI,YAAY,CAAC,cAAc,CAAC,MAAM,EAAE;gBACjF,GAAG,EAAE,GAAG,YAAY,CAAC,iBAAiB,CAAC,KAAK,IAAI,YAAY,CAAC,iBAAiB,CAAC,MAAM,EAAE;aACxF,CAAC,CAAC;IACP,CAAC;AACH,CAAC;AAED,MAAM,UAAU,+BAA+B,CAAC,YAA+B;IAC7E,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IACnF,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,YAAY,CAAC,CAAC;IACjE,OAAO,UAAU,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAC,GAAG,EAAE,mBAAmB,EAAE,GAAG,EAAE,eAAe,EAAC,CAAC,CAAC;AAClG,CAAC;AAED,SAAS,QAAQ,CAAC,YAA4D;IAC5E,OAAO;QACL,UAAU,EAAE,WAAW,CAAC,cAAc;QACtC,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK,CAAC;QAClC,WAAW,EAAE,UAAU,CAAC,SAAS,CAAC,WAAW,CAAC;QAC9C,QAAQ,EAAE,eAAe,CAAC,GAAG;QAC7B,KAAK,EAAE,YAAY,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;QAClE,GAAG,YAAY;QACf,aAAa,EAAE,IAAI,GAAG,CAAC,YAAY,CAAC,iBAAiB,CAAC,GAAG,CACrD,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC,CAAC,CAAC;KACzF,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,SAAS,yBAAyB,CAAC,OAA6C;IAC9E,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC;AAC5F,CAAC;AAED,SAAS,gBAAgB,CACrB,WAAuC,EAAE,UAAmC;IAC9E,0EAA0E;IAC1E,iFAAiF;IACjF,0DAA0D;IAC1D,OAAO,WAAW,CAAC,aAAa,CAAC,gCAAgC,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI;QACnF,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK;QACjC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM;KACpC,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,WAAuC,EAAE,UAAmC;IAElG,MAAM,EAAC,KAAK,EAAE,MAAM,EAAC,GAAG,gBAAgB,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;IAClE,OAAO;QACL,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS;QAC1E,eAAe,EAAE,KAAK,GAAG,MAAM;KAChC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAC3B,WAAuC,EAAE,OAA0B;IACrE,MAAM,eAAe,GAAG,CAAC,KAAyB,EAAW,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAEtH,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;IAEnF,MAAM,iBAAiB,GAAuB,EAAE,CAAC;IACjD,KAAK,MAAM,OAAO,IAAI,eAAe,EAAE,CAAC;QACtC,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,KAAK,OAAO,EAAE,CAAC;YAC/C,SAAS;QACX,CAAC;QAED,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,eAAe,EAAE,CAAC;YACnD,SAAS;QACX,CAAC;QAED,kFAAkF;QAClF,MAAM,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;QACzE,MAAM,WAAW,GAAG,WAAW,CAAC,aAAa,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC;QAEtG,8FAA8F;QAC9F,kCAAkC;QAClC,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;YACzB,SAAS;QACX,CAAC;QAED,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;YAC1D,MAAM,UAAU,GAAG,cAAc,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,eAAe,CAAC;YACrE,MAAM,UAAU,GAAG,cAAc,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,eAAe,CAAC;YACrE,OAAO,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QAC/C,CAAC,CAAC,CAAC;QAEH,MAAM,EACJ,UAAU,EAAE,eAAe,EAC3B,eAAe,EAAE,yBAAyB,GAC3C,GAAG,cAAc,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;QAEnD,uFAAuF;QACvF,yDAAyD;QACzD,sGAAsG;QACtG,yEAAyE;QACzE,6CAA6C;QAC7C,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAEtG,MAAM,aAAa,GAAG,UAAU,GAAG,eAAe,CAAC;QAEnD,IAAI,aAAa,GAAwB,EAAE,CAAC;QAC5C,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE,CAAC;YAC/C,IAAI,UAAU,GAAG,kBAAkB,EAAE,CAAC;gBACpC,MAAM,cAAc,GAAG,yBAAyB,CAAC,OAAO,CAAC,CAAC;gBAC1D,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,cAAc,CAAC,CAAC;gBAC5D,aAAa,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,qBAAqB,CAAC,YAAY,EAAE,WAAW,EAAC,CAAC,CAAC;YAC9E,CAAC;QACH,CAAC;aAAM,IAAI,aAAa,GAAG,2BAA2B,EAAE,CAAC;YACvD,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,2BAA2B,GAAG,eAAe,CAAC,CAAC;YACrF,MAAM,WAAW,GAAG,UAAU,GAAG,kBAAkB,CAAC;YACpD,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;gBAC/F,aAAa,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,qBAAqB,CAAC,4BAA4B,EAAE,WAAW,EAAC,CAAC,CAAC;YAC9F,CAAC;iBAAM,CAAC;gBACN,aAAa,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,qBAAqB,CAAC,kBAAkB,EAAE,WAAW,EAAC,CAAC,CAAC;YACpF,CAAC;QACH,CAAC;QAED,kGAAkG;QAClG,gGAAgG;QAChG,0DAA0D;QAC1D,MAAM,0BAA0B,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;QACzF,IAAI,gBAAgB,GAAG,0BAA0B,CAAC;QAElD,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,yBAAyB,GAAG,eAAe,CAAC,CAAC;QAE3E,+EAA+E;QAC/E,uHAAuH;QACvH,IAAI,gBAAgB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAC/D,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,UAAU,CAAC,CAAC;YAE9D,MAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;YAC5G,IAAI,CAAC,cAAc,IAAI,WAAW,GAAG,6CAA6C,EAAE,CAAC;gBACnF,4FAA4F;gBAC5F,2BAA2B;gBAC3B,gBAAgB,IAAI,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,CAAC,UAAU,GAAG,0BAA0B,CAAC,CAAC,CAAC;gBAE7F,MAAM,EAAC,KAAK,EAAE,MAAM,EAAC,GAAG,gBAAgB,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;gBAEzE,aAAa,CAAC,IAAI,CAAC;oBACjB,IAAI,EAAE,qBAAqB,CAAC,eAAe;oBAC3C,WAAW;oBACX,cAAc,EAAE;wBACd,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;wBACvD,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;qBAC1D;oBACD,iBAAiB,EAAE;wBACjB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;wBACxB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;qBAC3B;iBACF,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QAED,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,GAAG,sBAAsB,CAAC,CAAC;QAExG,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7B,iBAAiB,CAAC,IAAI,CAAC;gBACrB,OAAO;gBACP,iBAAiB;gBACjB,aAAa;gBACb,WAAW,EAAE,gBAAgB;aAC9B,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,MAAM,sBAAsB,GAAG,IAAI,GAAG,EAAkB,CAAC;IACzD,KAAK,MAAM,KAAK,IAAI,iBAAiB,EAAE,CAAC;QACtC,sBAAsB,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IACnF,CAAC;IAED,0CAA0C;IAC1C,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QAC9B,IAAI,CAAC,CAAC,WAAW,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;YACpC,OAAO,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,WAAW,CAAC;QACvC,CAAC;QAED,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;IACvF,CAAC,CAAC,CAAC;IAEH,OAAO,QAAQ,CAAC;QACd,iBAAiB;QACjB,aAAa,EAAE,2BAA2B,CAAC,sBAAsB,EAAE,OAAO,CAAC;QAC3E,WAAW,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;KAClF,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAC,OAA6C;IACnF,OAAO;QACL,IAAI,EAAE,eAAe;QACrB,KAAK,EAAE,OAAO;QACd,aAAa,EAAE,OAAO;KACvB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAgC;IAC7D,OAAO,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACtF,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport type * as Platform from '../../../core/platform/platform.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type * as Types from '../types/types.js';\n\nimport {metricSavingsForWastedBytes} from './Common.js';\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that recommends ways to reduce the size of images downloaded and used on the page.\n   */\n  title: 'Improve image delivery',\n  /**\n   * @description Description of an insight that recommends ways to reduce the size of images downloaded and used on the page.\n   */\n  description:\n      'Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)',\n  /**\n   * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.\n   */\n  useCompression: 'Increasing the image compression factor could improve this image\\'s download size.',\n  /**\n   * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.\n   */\n  useModernFormat:\n      'Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image\\'s download size.',\n  /**\n   * @description Message displayed in a chip advising the user to use video formats instead of GIFs because videos generally have smaller file sizes.\n   */\n  useVideoFormat: 'Using video formats instead of GIFs can improve the download size of animated content.',\n  /**\n   * @description Message displayed in a chip explaining that an image was displayed on the page with dimensions much smaller than the image file dimensions.\n   * @example {1000x500} PH1\n   * @example {100x50} PH2\n   */\n  useResponsiveSize:\n      'This image file is larger than it needs to be ({PH1}) for its displayed dimensions ({PH2}). Use responsive images to reduce the image download size.',\n  /**\n   * @description Column header for a table column containing network requests for images which can improve their file size (e.g. use a different format, increase compression, etc).\n   */\n  optimizeFile: 'Optimize file size',\n  /**\n   * @description Table row value representing the remaining items not shown in the table due to size constraints. This row will always represent at least 2 items.\n   * @example {5} PH1\n   */\n  others: '{PH1} others',\n  /**\n   * @description Text status indicating that no potential optimizations were found for any image file\n   */\n  noOptimizableImages: 'No optimizable images',\n  /**\n   * @description Text describing the estimated number of bytes that an image file optimization can save. This text is appended to another block of text describing the image optimization in more detail. \"Est\" means \"Estimated\".\n   * @example {Use the correct image dimensions to reduce the image file size.} PH1\n   * @example {50 MB} PH2\n   */\n  estimatedSavings: '{PH1} (Est {PH2})',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/ImageDelivery.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\n/**\n * Even JPEGs with lots of detail can usually be compressed down to <1 byte per pixel\n * Using 4:2:2 subsampling already gets an uncompressed bitmap to 2 bytes per pixel.\n * The compression ratio for JPEG is usually somewhere around 10:1 depending on content, so\n * 8:1 is a reasonable expectation for web content which is 1.5MB for a 6MP image.\n *\n * WebP usually gives ~20% additional savings on top of that, so we will assume 10:1 for WebP.\n * This is quite pessimistic as their study shows a photographic compression ratio of ~29:1.\n * https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study#results\n *\n * AVIF usually gives ~20% additional savings on top of WebP, so we will use 12:1 for AVIF.\n * This is quite pessimistic as Netflix study shows a photographic compression ratio of ~40:1\n * (0.4 *bits* per pixel at SSIM 0.97).\n * https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4\n */\nconst TARGET_BYTES_PER_PIXEL_AVIF = 2 * 1 / 12;\n\n/**\n * If GIFs are above this size, we'll flag them\n * See https://github.com/GoogleChrome/lighthouse/pull/4885#discussion_r178406623 and https://github.com/GoogleChrome/lighthouse/issues/4696#issuecomment-370979920\n */\nconst GIF_SIZE_THRESHOLD = 100 * 1024;\n\nconst BYTE_SAVINGS_THRESHOLD = 4096;\n\n// Ignore up to 12KB of waste for responsive images if an effort was made with breakpoints.\nconst BYTE_SAVINGS_THRESHOLD_RESPONSIVE_BREAKPOINTS = 12288;\n\nexport enum ImageOptimizationType {\n  ADJUST_COMPRESSION = 'ADJUST_COMPRESSION',\n  MODERN_FORMAT_OR_COMPRESSION = 'MODERN_FORMAT_OR_COMPRESSION',\n  VIDEO_FORMAT = 'VIDEO_FORMAT',\n  RESPONSIVE_SIZE = 'RESPONSIVE_SIZE',\n}\n\nexport type ImageOptimization = {\n  type: Exclude<ImageOptimizationType, ImageOptimizationType.RESPONSIVE_SIZE>,\n  byteSavings: number,\n}|{\n  type: ImageOptimizationType.RESPONSIVE_SIZE,\n  byteSavings: number,\n  fileDimensions: {width: number, height: number},\n  displayDimensions: {width: number, height: number},\n};\n\nexport interface OptimizableImage {\n  request: Types.Events.SyntheticNetworkRequest;\n  optimizations: ImageOptimization[];\n  byteSavings: number;\n  /**\n   * If the an image resource has multiple `PaintImage`s, we compare its intrinsic size to the largest of the displayed sizes.\n   *\n   * It is theoretically possible for `PaintImage` events with the same URL to have different intrinsic sizes.\n   * However, this should be rare because it requires serving different images from the same URL.\n   */\n  largestImagePaint: Types.Events.PaintImage;\n}\n\nexport type ImageDeliveryInsightModel = InsightModel<typeof UIStrings, {\n  /** Sorted by potential byte savings, then by size of image. */\n  optimizableImages: OptimizableImage[],\n  wastedBytes: number,\n}>;\n\nexport function isImageDelivery(model: InsightModel): model is ImageDeliveryInsightModel {\n  return model.insightKey === 'ImageDelivery';\n}\n\nexport function getOptimizationMessage(optimization: ImageOptimization): Platform.UIString.LocalizedString {\n  switch (optimization.type) {\n    case ImageOptimizationType.ADJUST_COMPRESSION:\n      return i18nString(UIStrings.useCompression);\n    case ImageOptimizationType.MODERN_FORMAT_OR_COMPRESSION:\n      return i18nString(UIStrings.useModernFormat);\n    case ImageOptimizationType.VIDEO_FORMAT:\n      return i18nString(UIStrings.useVideoFormat);\n    case ImageOptimizationType.RESPONSIVE_SIZE:\n      return i18nString(UIStrings.useResponsiveSize, {\n        PH1: `${optimization.fileDimensions.width}x${optimization.fileDimensions.height}`,\n        PH2: `${optimization.displayDimensions.width}x${optimization.displayDimensions.height}`,\n      });\n  }\n}\n\nexport function getOptimizationMessageWithBytes(optimization: ImageOptimization): Platform.UIString.LocalizedString {\n  const byteSavingsText = i18n.ByteUtilities.bytesToString(optimization.byteSavings);\n  const optimizationMessage = getOptimizationMessage(optimization);\n  return i18nString(UIStrings.estimatedSavings, {PH1: optimizationMessage, PH2: byteSavingsText});\n}\n\nfunction finalize(partialModel: PartialInsightModel<ImageDeliveryInsightModel>): ImageDeliveryInsightModel {\n  return {\n    insightKey: InsightKeys.IMAGE_DELIVERY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: partialModel.optimizableImages.length > 0 ? 'fail' : 'pass',\n    ...partialModel,\n    relatedEvents: new Map(partialModel.optimizableImages.map(\n        image => [image.request, image.optimizations.map(getOptimizationMessageWithBytes)])),\n  };\n}\n\n/**\n * Calculate rough savings percentage based on 1000 real gifs transcoded to video\n * https://github.com/GoogleChrome/lighthouse/issues/4696#issuecomment-380296510\n */\nfunction estimateGIFPercentSavings(request: Types.Events.SyntheticNetworkRequest): number {\n  return Math.round((29.1 * Math.log10(request.args.data.decodedBodyLength) - 100.7)) / 100;\n}\n\nfunction getDisplayedSize(\n    parsedTrace: Handlers.Types.ParsedTrace, paintImage: Types.Events.PaintImage): {width: number, height: number} {\n  // Note: for traces made prior to metadata.hostDPR (which means no data in\n  // paintEventToCorrectedDisplaySize), the displayed size unexpectedly ignores any\n  // emulated DPR and so the results may be very misleading.\n  return parsedTrace.ImagePainting.paintEventToCorrectedDisplaySize.get(paintImage) ?? {\n    width: paintImage.args.data.width,\n    height: paintImage.args.data.height,\n  };\n}\n\nfunction getPixelCounts(parsedTrace: Handlers.Types.ParsedTrace, paintImage: Types.Events.PaintImage):\n    {displayedPixels: number, filePixels: number} {\n  const {width, height} = getDisplayedSize(parsedTrace, paintImage);\n  return {\n    filePixels: paintImage.args.data.srcWidth * paintImage.args.data.srcHeight,\n    displayedPixels: width * height,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): ImageDeliveryInsightModel {\n  const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);\n\n  const contextRequests = parsedTrace.NetworkRequests.byTime.filter(isWithinContext);\n\n  const optimizableImages: OptimizableImage[] = [];\n  for (const request of contextRequests) {\n    if (request.args.data.resourceType !== 'Image') {\n      continue;\n    }\n\n    if (request.args.data.mimeType === 'image/svg+xml') {\n      continue;\n    }\n\n    // If the request was redirected, the image paints will have the pre-redirect URL.\n    const url = request.args.data.redirects[0]?.url ?? request.args.data.url;\n    const imagePaints = parsedTrace.ImagePainting.paintImageEventForUrl.get(url)?.filter(isWithinContext);\n\n    // This will filter out things like preloaded image requests where an image file is downloaded\n    // but never rendered on the page.\n    if (!imagePaints?.length) {\n      continue;\n    }\n\n    const largestImagePaint = imagePaints.reduce((prev, curr) => {\n      const prevPixels = getPixelCounts(parsedTrace, prev).displayedPixels;\n      const currPixels = getPixelCounts(parsedTrace, curr).displayedPixels;\n      return prevPixels > currPixels ? prev : curr;\n    });\n\n    const {\n      filePixels: imageFilePixels,\n      displayedPixels: largestImageDisplayPixels,\n    } = getPixelCounts(parsedTrace, largestImagePaint);\n\n    // Decoded body length is almost always the right one to be using because of the below:\n    //     `encodedDataLength = decodedBodyLength + headers`.\n    // HOWEVER, there are some cases where an image is compressed again over the network and transfer size\n    // is smaller (see https://github.com/GoogleChrome/lighthouse/pull/4968).\n    // Use the min of the two numbers to be safe.\n    const imageBytes = Math.min(request.args.data.decodedBodyLength, request.args.data.encodedDataLength);\n\n    const bytesPerPixel = imageBytes / imageFilePixels;\n\n    let optimizations: ImageOptimization[] = [];\n    if (request.args.data.mimeType === 'image/gif') {\n      if (imageBytes > GIF_SIZE_THRESHOLD) {\n        const percentSavings = estimateGIFPercentSavings(request);\n        const byteSavings = Math.round(imageBytes * percentSavings);\n        optimizations.push({type: ImageOptimizationType.VIDEO_FORMAT, byteSavings});\n      }\n    } else if (bytesPerPixel > TARGET_BYTES_PER_PIXEL_AVIF) {\n      const idealAvifImageSize = Math.round(TARGET_BYTES_PER_PIXEL_AVIF * imageFilePixels);\n      const byteSavings = imageBytes - idealAvifImageSize;\n      if (request.args.data.mimeType !== 'image/webp' && request.args.data.mimeType !== 'image/avif') {\n        optimizations.push({type: ImageOptimizationType.MODERN_FORMAT_OR_COMPRESSION, byteSavings});\n      } else {\n        optimizations.push({type: ImageOptimizationType.ADJUST_COMPRESSION, byteSavings});\n      }\n    }\n\n    // At this point (before looking at image size), the # of optimizations should only ever be 1 or 0\n    // Math.max handles both cases correctly, and is defensive against future patches that would add\n    // more than 1 format-specific optimization by this point.\n    const imageByteSavingsFromFormat = Math.max(0, ...optimizations.map(o => o.byteSavings));\n    let imageByteSavings = imageByteSavingsFromFormat;\n\n    const wastedPixelRatio = 1 - (largestImageDisplayPixels / imageFilePixels);\n\n    // Ignore CSS images because it's difficult to determine what is a spritesheet,\n    // and the reward-to-effort ratio for responsive CSS images is quite low https://css-tricks.com/responsive-images-css/.\n    if (wastedPixelRatio > 0 && !largestImagePaint.args.data.isCSS) {\n      const byteSavings = Math.round(wastedPixelRatio * imageBytes);\n\n      const hadBreakpoints = largestImagePaint.args.data.isPicture || largestImagePaint.args.data.srcsetAttribute;\n      if (!hadBreakpoints || byteSavings > BYTE_SAVINGS_THRESHOLD_RESPONSIVE_BREAKPOINTS) {\n        // This will compound the byte savings from any potential format changes with the image size\n        // optimization added here.\n        imageByteSavings += Math.round(wastedPixelRatio * (imageBytes - imageByteSavingsFromFormat));\n\n        const {width, height} = getDisplayedSize(parsedTrace, largestImagePaint);\n\n        optimizations.push({\n          type: ImageOptimizationType.RESPONSIVE_SIZE,\n          byteSavings,\n          fileDimensions: {\n            width: Math.round(largestImagePaint.args.data.srcWidth),\n            height: Math.round(largestImagePaint.args.data.srcHeight),\n          },\n          displayDimensions: {\n            width: Math.round(width),\n            height: Math.round(height),\n          },\n        });\n      }\n    }\n\n    optimizations = optimizations.filter(optimization => optimization.byteSavings > BYTE_SAVINGS_THRESHOLD);\n\n    if (optimizations.length > 0) {\n      optimizableImages.push({\n        request,\n        largestImagePaint,\n        optimizations,\n        byteSavings: imageByteSavings,\n      });\n    }\n  }\n\n  const wastedBytesByRequestId = new Map<string, number>();\n  for (const image of optimizableImages) {\n    wastedBytesByRequestId.set(image.request.args.data.requestId, image.byteSavings);\n  }\n\n  // Sort by savings, then by size of image.\n  optimizableImages.sort((a, b) => {\n    if (b.byteSavings !== a.byteSavings) {\n      return b.byteSavings - a.byteSavings;\n    }\n\n    return b.request.args.data.decodedBodyLength - a.request.args.data.decodedBodyLength;\n  });\n\n  return finalize({\n    optimizableImages,\n    metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),\n    wastedBytes: optimizableImages.reduce((total, img) => total + img.byteSavings, 0),\n  });\n}\n\nexport function createOverlayForRequest(request: Types.Events.SyntheticNetworkRequest): Types.Overlays.EntryOutline {\n  return {\n    type: 'ENTRY_OUTLINE',\n    entry: request,\n    outlineReason: 'ERROR',\n  };\n}\n\nexport function createOverlays(model: ImageDeliveryInsightModel): Types.Overlays.Overlay[] {\n  return model.optimizableImages.map(image => createOverlayForRequest(image.request));\n}\n"]}

package/models/trace/insights/LCPBreakdown.d.ts

@@ -4,7 +4,7 @@ import * as Types from '../types/types.js';
 import { type InsightModel, type InsightSetContext } from './types.js';
 export declare const UIStrings: {
     /**
-     *@description Title of an insight that provides details about the LCP metric, broken down by parts.
+     * @description Title of an insight that provides details about the LCP metric, broken down by parts.
      */
     readonly title: "LCP breakdown";
     /**
@@ -13,23 +13,23 @@ export declare const UIStrings: {
      */
     readonly description: "Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.";
     /**
-     *@description Time to first byte title for the Largest Contentful Paint's subparts timespan breakdown.
+     * @description Time to first byte title for the Largest Contentful Paint's subparts timespan breakdown.
      */
     readonly timeToFirstByte: "Time to first byte";
     /**
-     *@description Resource load delay title for the Largest Contentful Paint subparts timespan breakdown.
+     * @description Resource load delay title for the Largest Contentful Paint subparts timespan breakdown.
      */
     readonly resourceLoadDelay: "Resource load delay";
     /**
-     *@description Resource load duration title for the Largest Contentful Paint subparts timespan breakdown.
+     * @description Resource load duration title for the Largest Contentful Paint subparts timespan breakdown.
      */
     readonly resourceLoadDuration: "Resource load duration";
     /**
-     *@description Element render delay title for the Largest Contentful Paint subparts timespan breakdown.
+     * @description Element render delay title for the Largest Contentful Paint subparts timespan breakdown.
      */
     readonly elementRenderDelay: "Element render delay";
     /**
-     *@description Label used for the subpart (section) of a larger duration.
+     * @description Label used for the subpart (section) of a larger duration.
      */
     readonly subpart: "Subpart";
     /**

package/models/trace/insights/LCPBreakdown.js

@@ -8,7 +8,7 @@ import * as Types from '../types/types.js';
 import { InsightCategory, InsightKeys, InsightWarning, } from './types.js';
 export const UIStrings = {
     /**
-     *@description Title of an insight that provides details about the LCP metric, broken down by parts.
+     * @description Title of an insight that provides details about the LCP metric, broken down by parts.
      */
     title: 'LCP breakdown',
     /**
@@ -17,23 +17,23 @@ export const UIStrings = {
      */
     description: 'Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',
     /**
-     *@description Time to first byte title for the Largest Contentful Paint's subparts timespan breakdown.
+     * @description Time to first byte title for the Largest Contentful Paint's subparts timespan breakdown.
      */
     timeToFirstByte: 'Time to first byte',
     /**
-     *@description Resource load delay title for the Largest Contentful Paint subparts timespan breakdown.
+     * @description Resource load delay title for the Largest Contentful Paint subparts timespan breakdown.
      */
     resourceLoadDelay: 'Resource load delay',
     /**
-     *@description Resource load duration title for the Largest Contentful Paint subparts timespan breakdown.
+     * @description Resource load duration title for the Largest Contentful Paint subparts timespan breakdown.
      */
     resourceLoadDuration: 'Resource load duration',
     /**
-     *@description Element render delay title for the Largest Contentful Paint subparts timespan breakdown.
+     * @description Element render delay title for the Largest Contentful Paint subparts timespan breakdown.
      */
     elementRenderDelay: 'Element render delay',
     /**
-     *@description Label used for the subpart (section) of a larger duration.
+     * @description Label used for the subpart (section) of a larger duration.
      */
     subpart: 'Subpart',
     /**
@@ -79,7 +79,8 @@ function determineSubparts(nav, docRequest, lcpEvent, lcpRequest) {
     renderDelay.label = i18nString(UIStrings.elementRenderDelay);
     // If the LCP is text, we don't have a request, so just 2 subparts.
     if (!lcpRequest) {
-        /** Text LCP. 2 subparts, thus 3 timestamps
+        /**
+         * Text LCP. 2 subparts, thus 3 timestamps
          *
          *       |          ttfb           |             renderDelay              |
          *                                                                        ^ lcpEvent.ts
@@ -91,7 +92,8 @@ function determineSubparts(nav, docRequest, lcpEvent, lcpRequest) {
         }
         return { ttfb, renderDelay };
     }
-    /** Image LCP. 4 subparts means 5 timestamps
+    /**
+     * Image LCP. 4 subparts means 5 timestamps
      *
      *       |  ttfb   |    loadDelay     |     loadTime    |    renderDelay    |
      *                                                                          ^ lcpEvent.ts

package/models/trace/insights/LCPBreakdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"LCPBreakdown.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LCPBreakdown.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAG7B,OAAO,KAAK,IAAI,MAAM,4BAA4B,CAAC;AACnD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EACL,eAAe,EACf,WAAW,EAGX,cAAc,GAEf,MAAM,YAAY,CAAC;AAEpB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,eAAe;IACtB;;;OAGG;IACH,WAAW,EACP,qMAAqM;IACzM;;OAEG;IACH,eAAe,EAAE,oBAAoB;IACrC;;OAEG;IACH,iBAAiB,EAAE,qBAAqB;IACxC;;OAEG;IACH,oBAAoB,EAAE,wBAAwB;IAC9C;;OAEG;IACH,kBAAkB,EAAE,sBAAsB;IAC1C;;OAEG;IACH,OAAO,EAAE,SAAS;IAClB;;OAEG;IACH,QAAQ,EAAE,UAAU;IACpB;;OAEG;IACH,aAAa,EAAE,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,iBAAiB;CAChB,CAAC;AACX,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,uCAAuC,EAAE,SAAS,CAAC,CAAC;AAC7F,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AA0B7E,MAAM,UAAU,cAAc,CAAC,KAAmB;IAChD,OAAO,KAAK,CAAC,UAAU,KAAK,cAAc,CAAC;AAC7C,CAAC;AAUD,SAAS,YAAY,CAAC,GAAG,MAAgB;IACvC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3C,CAAC;AACD;;;;;GAKG;AACH,SAAS,iBAAiB,CACtB,GAAiC,EAAE,UAAgD,EACnF,QAAsD,EACtD,UAA0D;IAC5D,MAAM,YAAY,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IAEjD,IAAI,cAAc,CAAC;IACnB,IAAI,YAAY,EAAE,CAAC;QACjB,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAC/B,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,YAAY,CAAC,WAAW,CAAC;YACvD,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC,CAAC;IACrE,CAAC;SAAM,CAAC;QACN,cAAc,GAAG,UAAU,CAAC,EAAE,CAAC,CAAE,QAAQ;IAC3C,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,2BAA2B,CAAC,GAAG,CAAC,EAAE,EAAE,cAAc,CAAY,CAAC;IAC3F,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAEnD,IAAI,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,2BAA2B,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAY,CAAC;IAC/F,WAAW,CAAC,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAE7D,mEAAmE;IACnE,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB;;;;;;WAMG;QACH,IAAI,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;YAChD,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,EAAC,IAAI,EAAE,WAAW,EAAC,CAAC;IAC7B,CAAC;IAED;;;;;;;;OAQG;IACH,MAAM,UAAU,GAAG,UAAU,CAAC,EAAE,CAAC;IACjC,MAAM,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC;IAElE,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,2BAA2B,CAAC,IAAI,CAAC,GAAG,EAAE,UAAU,CAAY,CAAC;IAC9F,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,2BAA2B,CAAC,UAAU,EAAE,WAAW,CAAY,CAAC;IACpG,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,2BAA2B,CAAC,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAY,CAAC;IAC9F,SAAS,CAAC,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1D,YAAY,CAAC,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;IAChE,WAAW,CAAC,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAC7D,IAAI,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;QACrF,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO;QACL,IAAI;QACJ,SAAS;QACT,YAAY;QACZ,WAAW;KACZ,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,YAA2D;IAC3E,MAAM,aAAa,GAAG,EAAE,CAAC;IACzB,IAAI,YAAY,CAAC,QAAQ,EAAE,CAAC;QAC1B,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC;IACD,IAAI,YAAY,CAAC,UAAU,EAAE,CAAC;QAC5B,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAC9C,CAAC;IACD,OAAO;QACL,UAAU,EAAE,WAAW,CAAC,aAAa;QACrC,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK,CAAC;QAClC,WAAW,EAAE,UAAU,CAAC,SAAS,CAAC,WAAW,CAAC;QAC9C,QAAQ,EAAE,eAAe,CAAC,GAAG;QAC7B,KAAK,EAAE,YAAY,CAAC,QAAQ,IAAI,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;QAChF,GAAG,YAAY;QACf,aAAa;KACd,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAC3B,WAAuC,EAAE,OAA0B;IACrE,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QACxB,OAAO,QAAQ,CAAC,EAAE,CAAC,CAAC;IACtB,CAAC;IAED,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CAAC;IAEpD,MAAM,YAAY,GAAG,WAAW,CAAC,eAAe,CAAC,qBAAqB,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC5F,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC;IACtC,CAAC;IAED,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC1D,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC;IAC3C,CAAC;IACD,MAAM,WAAW,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;IAC1F,MAAM,QAAQ,GAAG,WAAW,EAAE,KAAK,CAAC;IACpC,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,iCAAiC,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC3E,OAAO,QAAQ,CAAC,EAAC,QAAQ,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,EAAC,CAAC,CAAC;IACvD,CAAC;IAED,qCAAqC;IACrC,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9D,0EAA0E;IAC1E,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACrG,MAAM,UAAU,GAAG,WAAW,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAEpG,MAAM,UAAU,GAAG,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAClE,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,QAAQ,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAC,CAAC,CAAC;IACxG,CAAC;IAED,OAAO,QAAQ,CAAC;QACd,KAAK;QACL,KAAK;QACL,QAAQ;QACR,UAAU;QACV,QAAQ,EAAE,iBAAiB,CAAC,OAAO,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,CAAC,IAAI,SAAS;KAC/F,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAA+B;IAC5D,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACpC,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,QAAQ,GAA6B;QACzC;YACE,IAAI,EAAE,oBAAoB;YAC1B,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC;iBACxB,GAAG,CAAC,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,EAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAC,CAAC,CAAC;SACxG;KACF,CAAC;IACF,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;QACrB,QAAQ,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,aAAa,EAAE,MAAM,EAAC,CAAC,CAAC;IACzF,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport type * as Common from '../../../core/common/common.js';\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   *@description Title of an insight that provides details about the LCP metric, broken down by parts.\n   */\n  title: 'LCP breakdown',\n  /**\n   * @description Description of a DevTools insight that presents a breakdown for the LCP metric by subparts.\n   * This is displayed after a user expands the section to see more. No character length limits.\n   */\n  description:\n      'Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',\n  /**\n   *@description Time to first byte title for the Largest Contentful Paint's subparts timespan breakdown.\n   */\n  timeToFirstByte: 'Time to first byte',\n  /**\n   *@description Resource load delay title for the Largest Contentful Paint subparts timespan breakdown.\n   */\n  resourceLoadDelay: 'Resource load delay',\n  /**\n   *@description Resource load duration title for the Largest Contentful Paint subparts timespan breakdown.\n   */\n  resourceLoadDuration: 'Resource load duration',\n  /**\n   *@description Element render delay title for the Largest Contentful Paint subparts timespan breakdown.\n   */\n  elementRenderDelay: 'Element render delay',\n  /**\n   *@description Label used for the subpart (section) of a larger duration.\n   */\n  subpart: 'Subpart',\n  /**\n   * @description Label used for the duration a single subpart (section) takes up of a larger duration.\n   */\n  duration: 'Duration',\n  /**\n   * @description Label used for the duration a single subpart (section) takes up of a larger duration. The value will be the 75th percentile of aggregate data. \"Field\" means that the data was collected from real users in the field as opposed to the developers local environment. \"Field\" is synonymous with \"Real user data\".\n   */\n  fieldDuration: 'Field p75',\n  /**\n   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcp: 'No LCP detected',\n} as const;\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPBreakdown.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\n// A TraceWindow plus its UIString.\nexport type Subpart = Types.Timing.TraceWindowMicro&{label: Common.UIString.LocalizedString};\ninterface LCPSubparts {\n  /**\n   * The time between when the user initiates loading the page until when\n   * the browser receives the first byte of the html response.\n   */\n  ttfb: Subpart;\n  /**\n   * The time between ttfb and the LCP request request being started.\n   * For a text LCP, this is undefined given no request is loaded.\n   */\n  loadDelay?: Subpart;\n  /**\n   * The time it takes to load the LCP request.\n   */\n  loadDuration?: Subpart;\n  /**\n   * The time between when the LCP request finishes loading and when\n   * the LCP element is rendered.\n   */\n  renderDelay: Subpart;\n}\n\nexport function isLCPBreakdown(model: InsightModel): model is LCPBreakdownInsightModel {\n  return model.insightKey === 'LCPBreakdown';\n}\nexport type LCPBreakdownInsightModel = InsightModel<typeof UIStrings, {\n  lcpMs?: Types.Timing.Milli,\n  lcpTs?: Types.Timing.Milli,\n  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,\n  /** The network request for the LCP image, if there was one. */\n  lcpRequest?: Types.Events.SyntheticNetworkRequest,\n  subparts?: LCPSubparts,\n}>;\n\nfunction anyValuesNaN(...values: number[]): boolean {\n  return values.some(v => Number.isNaN(v));\n}\n/**\n * Calculates the 2–4 subparts of an LCP as bounds.\n * Will return `null` if any required values were missing. We don't ever expect\n * them to be missing on newer traces, but old trace files may lack some of the\n * data we rely on, so we want to handle that case.\n */\nfunction determineSubparts(\n    nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest,\n    lcpEvent: Types.Events.LargestContentfulPaintCandidate,\n    lcpRequest: Types.Events.SyntheticNetworkRequest|undefined): LCPSubparts|null {\n  const docReqTiming = docRequest.args.data.timing;\n\n  let firstDocByteTs;\n  if (docReqTiming) {\n    firstDocByteTs = Types.Timing.Micro(\n        Helpers.Timing.secondsToMicro(docReqTiming.requestTime) +\n        Helpers.Timing.milliToMicro(docReqTiming.receiveHeadersStart));\n  } else {\n    firstDocByteTs = docRequest.ts;  // file:\n  }\n\n  const ttfb = Helpers.Timing.traceWindowFromMicroSeconds(nav.ts, firstDocByteTs) as Subpart;\n  ttfb.label = i18nString(UIStrings.timeToFirstByte);\n\n  let renderDelay = Helpers.Timing.traceWindowFromMicroSeconds(ttfb.max, lcpEvent.ts) as Subpart;\n  renderDelay.label = i18nString(UIStrings.elementRenderDelay);\n\n  // If the LCP is text, we don't have a request, so just 2 subparts.\n  if (!lcpRequest) {\n    /** Text LCP. 2 subparts, thus 3 timestamps\n     *\n     *       |          ttfb           |             renderDelay              |\n     *                                                                        ^ lcpEvent.ts\n     *                                 ^ firstDocByteTs\n     *       ^ navStartTs\n     */\n    if (anyValuesNaN(ttfb.range, renderDelay.range)) {\n      return null;\n    }\n    return {ttfb, renderDelay};\n  }\n\n  /** Image LCP. 4 subparts means 5 timestamps\n   *\n   *       |  ttfb   |    loadDelay     |     loadTime    |    renderDelay    |\n   *                                                                          ^ lcpEvent.ts\n   *                                                      ^ lcpReqEndTs\n   *                                    ^ lcpStartTs\n   *                 ^ ttfbTs\n   *       ^ navStartTs\n   */\n  const lcpStartTs = lcpRequest.ts;\n  const lcpReqEndTs = lcpRequest.args.data.syntheticData.finishTime;\n\n  const loadDelay = Helpers.Timing.traceWindowFromMicroSeconds(ttfb.max, lcpStartTs) as Subpart;\n  const loadDuration = Helpers.Timing.traceWindowFromMicroSeconds(lcpStartTs, lcpReqEndTs) as Subpart;\n  renderDelay = Helpers.Timing.traceWindowFromMicroSeconds(lcpReqEndTs, lcpEvent.ts) as Subpart;\n  loadDelay.label = i18nString(UIStrings.resourceLoadDelay);\n  loadDuration.label = i18nString(UIStrings.resourceLoadDuration);\n  renderDelay.label = i18nString(UIStrings.elementRenderDelay);\n  if (anyValuesNaN(ttfb.range, loadDelay.range, loadDuration.range, renderDelay.range)) {\n    return null;\n  }\n\n  return {\n    ttfb,\n    loadDelay,\n    loadDuration,\n    renderDelay,\n  };\n}\n\nfunction finalize(partialModel: PartialInsightModel<LCPBreakdownInsightModel>): LCPBreakdownInsightModel {\n  const relatedEvents = [];\n  if (partialModel.lcpEvent) {\n    relatedEvents.push(partialModel.lcpEvent);\n  }\n  if (partialModel.lcpRequest) {\n    relatedEvents.push(partialModel.lcpRequest);\n  }\n  return {\n    insightKey: InsightKeys.LCP_BREAKDOWN,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: partialModel.lcpEvent || partialModel.lcpRequest ? 'informative' : 'pass',\n    ...partialModel,\n    relatedEvents,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LCPBreakdownInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const networkRequests = parsedTrace.NetworkRequests;\n\n  const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);\n  if (!frameMetrics) {\n    throw new Error('no frame metrics');\n  }\n\n  const navMetrics = frameMetrics.get(context.navigationId);\n  if (!navMetrics) {\n    throw new Error('no navigation metrics');\n  }\n  const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);\n  const lcpEvent = metricScore?.event;\n  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {\n    return finalize({warnings: [InsightWarning.NO_LCP]});\n  }\n\n  // This helps calculate the subparts.\n  const lcpMs = Helpers.Timing.microToMilli(metricScore.timing);\n  // This helps position things on the timeline's UI accurately for a trace.\n  const lcpTs = metricScore.event?.ts ? Helpers.Timing.microToMilli(metricScore.event?.ts) : undefined;\n  const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId);\n\n  const docRequest = networkRequests.byId.get(context.navigationId);\n  if (!docRequest) {\n    return finalize({lcpMs, lcpTs, lcpEvent, lcpRequest, warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  return finalize({\n    lcpMs,\n    lcpTs,\n    lcpEvent,\n    lcpRequest,\n    subparts: determineSubparts(context.navigation, docRequest, lcpEvent, lcpRequest) ?? undefined,\n  });\n}\n\nexport function createOverlays(model: LCPBreakdownInsightModel): Types.Overlays.Overlay[] {\n  if (!model.subparts || !model.lcpTs) {\n    return [];\n  }\n\n  const overlays: Types.Overlays.Overlay[] = [\n    {\n      type: 'TIMESPAN_BREAKDOWN',\n      sections: Object.values(model.subparts)\n                    .map((subpart: Subpart) => ({bounds: subpart, label: subpart.label, showDuration: true})),\n    },\n  ];\n  if (model.lcpRequest) {\n    overlays.push({type: 'ENTRY_OUTLINE', entry: model.lcpRequest, outlineReason: 'INFO'});\n  }\n\n  return overlays;\n}\n"]}
+{"version":3,"file":"LCPBreakdown.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LCPBreakdown.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport type * as Common from '../../../core/common/common.js';\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that provides details about the LCP metric, broken down by parts.\n   */\n  title: 'LCP breakdown',\n  /**\n   * @description Description of a DevTools insight that presents a breakdown for the LCP metric by subparts.\n   * This is displayed after a user expands the section to see more. No character length limits.\n   */\n  description:\n      'Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',\n  /**\n   * @description Time to first byte title for the Largest Contentful Paint's subparts timespan breakdown.\n   */\n  timeToFirstByte: 'Time to first byte',\n  /**\n   * @description Resource load delay title for the Largest Contentful Paint subparts timespan breakdown.\n   */\n  resourceLoadDelay: 'Resource load delay',\n  /**\n   * @description Resource load duration title for the Largest Contentful Paint subparts timespan breakdown.\n   */\n  resourceLoadDuration: 'Resource load duration',\n  /**\n   * @description Element render delay title for the Largest Contentful Paint subparts timespan breakdown.\n   */\n  elementRenderDelay: 'Element render delay',\n  /**\n   * @description Label used for the subpart (section) of a larger duration.\n   */\n  subpart: 'Subpart',\n  /**\n   * @description Label used for the duration a single subpart (section) takes up of a larger duration.\n   */\n  duration: 'Duration',\n  /**\n   * @description Label used for the duration a single subpart (section) takes up of a larger duration. The value will be the 75th percentile of aggregate data. \"Field\" means that the data was collected from real users in the field as opposed to the developers local environment. \"Field\" is synonymous with \"Real user data\".\n   */\n  fieldDuration: 'Field p75',\n  /**\n   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcp: 'No LCP detected',\n} as const;\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPBreakdown.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\n// A TraceWindow plus its UIString.\nexport type Subpart = Types.Timing.TraceWindowMicro&{label: Common.UIString.LocalizedString};\ninterface LCPSubparts {\n  /**\n   * The time between when the user initiates loading the page until when\n   * the browser receives the first byte of the html response.\n   */\n  ttfb: Subpart;\n  /**\n   * The time between ttfb and the LCP request request being started.\n   * For a text LCP, this is undefined given no request is loaded.\n   */\n  loadDelay?: Subpart;\n  /**\n   * The time it takes to load the LCP request.\n   */\n  loadDuration?: Subpart;\n  /**\n   * The time between when the LCP request finishes loading and when\n   * the LCP element is rendered.\n   */\n  renderDelay: Subpart;\n}\n\nexport function isLCPBreakdown(model: InsightModel): model is LCPBreakdownInsightModel {\n  return model.insightKey === 'LCPBreakdown';\n}\nexport type LCPBreakdownInsightModel = InsightModel<typeof UIStrings, {\n  lcpMs?: Types.Timing.Milli,\n  lcpTs?: Types.Timing.Milli,\n  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,\n  /** The network request for the LCP image, if there was one. */\n  lcpRequest?: Types.Events.SyntheticNetworkRequest,\n  subparts?: LCPSubparts,\n}>;\n\nfunction anyValuesNaN(...values: number[]): boolean {\n  return values.some(v => Number.isNaN(v));\n}\n/**\n * Calculates the 2–4 subparts of an LCP as bounds.\n * Will return `null` if any required values were missing. We don't ever expect\n * them to be missing on newer traces, but old trace files may lack some of the\n * data we rely on, so we want to handle that case.\n */\nfunction determineSubparts(\n    nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest,\n    lcpEvent: Types.Events.LargestContentfulPaintCandidate,\n    lcpRequest: Types.Events.SyntheticNetworkRequest|undefined): LCPSubparts|null {\n  const docReqTiming = docRequest.args.data.timing;\n\n  let firstDocByteTs;\n  if (docReqTiming) {\n    firstDocByteTs = Types.Timing.Micro(\n        Helpers.Timing.secondsToMicro(docReqTiming.requestTime) +\n        Helpers.Timing.milliToMicro(docReqTiming.receiveHeadersStart));\n  } else {\n    firstDocByteTs = docRequest.ts;  // file:\n  }\n\n  const ttfb = Helpers.Timing.traceWindowFromMicroSeconds(nav.ts, firstDocByteTs) as Subpart;\n  ttfb.label = i18nString(UIStrings.timeToFirstByte);\n\n  let renderDelay = Helpers.Timing.traceWindowFromMicroSeconds(ttfb.max, lcpEvent.ts) as Subpart;\n  renderDelay.label = i18nString(UIStrings.elementRenderDelay);\n\n  // If the LCP is text, we don't have a request, so just 2 subparts.\n  if (!lcpRequest) {\n    /**\n     * Text LCP. 2 subparts, thus 3 timestamps\n     *\n     *       |          ttfb           |             renderDelay              |\n     *                                                                        ^ lcpEvent.ts\n     *                                 ^ firstDocByteTs\n     *       ^ navStartTs\n     */\n    if (anyValuesNaN(ttfb.range, renderDelay.range)) {\n      return null;\n    }\n    return {ttfb, renderDelay};\n  }\n\n  /**\n   * Image LCP. 4 subparts means 5 timestamps\n   *\n   *       |  ttfb   |    loadDelay     |     loadTime    |    renderDelay    |\n   *                                                                          ^ lcpEvent.ts\n   *                                                      ^ lcpReqEndTs\n   *                                    ^ lcpStartTs\n   *                 ^ ttfbTs\n   *       ^ navStartTs\n   */\n  const lcpStartTs = lcpRequest.ts;\n  const lcpReqEndTs = lcpRequest.args.data.syntheticData.finishTime;\n\n  const loadDelay = Helpers.Timing.traceWindowFromMicroSeconds(ttfb.max, lcpStartTs) as Subpart;\n  const loadDuration = Helpers.Timing.traceWindowFromMicroSeconds(lcpStartTs, lcpReqEndTs) as Subpart;\n  renderDelay = Helpers.Timing.traceWindowFromMicroSeconds(lcpReqEndTs, lcpEvent.ts) as Subpart;\n  loadDelay.label = i18nString(UIStrings.resourceLoadDelay);\n  loadDuration.label = i18nString(UIStrings.resourceLoadDuration);\n  renderDelay.label = i18nString(UIStrings.elementRenderDelay);\n  if (anyValuesNaN(ttfb.range, loadDelay.range, loadDuration.range, renderDelay.range)) {\n    return null;\n  }\n\n  return {\n    ttfb,\n    loadDelay,\n    loadDuration,\n    renderDelay,\n  };\n}\n\nfunction finalize(partialModel: PartialInsightModel<LCPBreakdownInsightModel>): LCPBreakdownInsightModel {\n  const relatedEvents = [];\n  if (partialModel.lcpEvent) {\n    relatedEvents.push(partialModel.lcpEvent);\n  }\n  if (partialModel.lcpRequest) {\n    relatedEvents.push(partialModel.lcpRequest);\n  }\n  return {\n    insightKey: InsightKeys.LCP_BREAKDOWN,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: partialModel.lcpEvent || partialModel.lcpRequest ? 'informative' : 'pass',\n    ...partialModel,\n    relatedEvents,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LCPBreakdownInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const networkRequests = parsedTrace.NetworkRequests;\n\n  const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);\n  if (!frameMetrics) {\n    throw new Error('no frame metrics');\n  }\n\n  const navMetrics = frameMetrics.get(context.navigationId);\n  if (!navMetrics) {\n    throw new Error('no navigation metrics');\n  }\n  const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);\n  const lcpEvent = metricScore?.event;\n  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {\n    return finalize({warnings: [InsightWarning.NO_LCP]});\n  }\n\n  // This helps calculate the subparts.\n  const lcpMs = Helpers.Timing.microToMilli(metricScore.timing);\n  // This helps position things on the timeline's UI accurately for a trace.\n  const lcpTs = metricScore.event?.ts ? Helpers.Timing.microToMilli(metricScore.event?.ts) : undefined;\n  const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId);\n\n  const docRequest = networkRequests.byId.get(context.navigationId);\n  if (!docRequest) {\n    return finalize({lcpMs, lcpTs, lcpEvent, lcpRequest, warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  return finalize({\n    lcpMs,\n    lcpTs,\n    lcpEvent,\n    lcpRequest,\n    subparts: determineSubparts(context.navigation, docRequest, lcpEvent, lcpRequest) ?? undefined,\n  });\n}\n\nexport function createOverlays(model: LCPBreakdownInsightModel): Types.Overlays.Overlay[] {\n  if (!model.subparts || !model.lcpTs) {\n    return [];\n  }\n\n  const overlays: Types.Overlays.Overlay[] = [\n    {\n      type: 'TIMESPAN_BREAKDOWN',\n      sections: Object.values(model.subparts)\n                    .map((subpart: Subpart) => ({bounds: subpart, label: subpart.label, showDuration: true})),\n    },\n  ];\n  if (model.lcpRequest) {\n    overlays.push({type: 'ENTRY_OUTLINE', entry: model.lcpRequest, outlineReason: 'INFO'});\n  }\n\n  return overlays;\n}\n"]}

package/models/trace/insights/LCPDiscovery.d.ts

@@ -3,11 +3,11 @@ import * as Types from '../types/types.js';
 import { type Checklist, type InsightModel, type InsightSetContext } from './types.js';
 export declare const UIStrings: {
     /**
-     *@description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)
+     * @description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)
      */
     readonly title: "LCP request discovery";
     /**
-     *@description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.
+     * @description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.
      */
     readonly description: "Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)";
     /**

package/models/trace/insights/LCPDiscovery.js

@@ -8,11 +8,11 @@ import * as Types from '../types/types.js';
 import { InsightCategory, InsightKeys, InsightWarning, } from './types.js';
 export const UIStrings = {
     /**
-     *@description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)
+     * @description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)
      */
     title: 'LCP request discovery',
     /**
-     *@description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.
+     * @description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.
      */
     description: 'Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)',
     /**
@@ -154,7 +154,7 @@ export function getImageData(model) {
 }
 export function createOverlays(model) {
     const imageResults = getImageData(model);
-    if (!imageResults || !imageResults.discoveryDelay) {
+    if (!imageResults?.discoveryDelay) {
         return [];
     }
     const delay = Helpers.Timing.traceWindowFromMicroSeconds(Types.Timing.Micro(imageResults.request.ts - imageResults.discoveryDelay), imageResults.request.ts);

package/models/trace/insights/LCPDiscovery.js.map

@@ -1 +1 @@
-{"version":3,"file":"LCPDiscovery.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LCPDiscovery.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  type Checklist,\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   *@description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)\n   */\n  title: 'LCP request discovery',\n  /**\n   *@description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.\n   */\n  description:\n      'Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)',\n  /**\n   * @description Text to tell the user how long after the earliest discovery time their LCP element loaded.\n   * @example {401ms} PH1\n   */\n  lcpLoadDelay: 'LCP image loaded {PH1} after earliest start point.',\n  /**\n   * @description Text to tell the user that a fetchpriority property value of \"high\" is applied to the LCP request.\n   */\n  fetchPriorityApplied: 'fetchpriority=high applied',\n  /**\n   * @description Text to tell the user that a fetchpriority property value of \"high\" should be applied to the LCP request.\n   */\n  fetchPriorityShouldBeApplied: 'fetchpriority=high should be applied',\n  /**\n   * @description Text to tell the user that the LCP request is discoverable in the initial document.\n   */\n  requestDiscoverable: 'Request is discoverable in initial document',\n  /**\n   * @description Text to tell the user that the LCP request does not have the lazy load property applied.\n   */\n  lazyLoadNotApplied: 'lazy load not applied',\n  /**\n   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcp: 'No LCP detected',\n  /**\n   * @description Text status indicating that the Largest Contentful Paint (LCP) metric was text rather than an image. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcpResource: 'No LCP resource detected because the LCP is not an image',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPDiscovery.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport function isLCPDiscovery(model: InsightModel): model is LCPDiscoveryInsightModel {\n  return model.insightKey === 'LCPDiscovery';\n}\nexport type LCPDiscoveryInsightModel = InsightModel<typeof UIStrings, {\n  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,\n  /** The network request for the LCP image, if there was one. */\n  lcpRequest?: Types.Events.SyntheticNetworkRequest,\n  earliestDiscoveryTimeTs?: Types.Timing.Micro,\n  checklist?: Checklist<'priorityHinted'|'requestDiscoverable'|'eagerlyLoaded'>,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<LCPDiscoveryInsightModel>): LCPDiscoveryInsightModel {\n  const relatedEvents = partialModel.lcpEvent && partialModel.lcpRequest ?\n      // TODO: add entire request initiator chain?\n      [partialModel.lcpEvent, partialModel.lcpRequest] :\n      [];\n  return {\n    insightKey: InsightKeys.LCP_DISCOVERY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: partialModel.lcpRequest && partialModel.checklist &&\n            (!partialModel.checklist.eagerlyLoaded.value || !partialModel.checklist.requestDiscoverable.value ||\n             !partialModel.checklist.priorityHinted.value) ?\n        'fail' :\n        'pass',\n    ...partialModel,\n    relatedEvents,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LCPDiscoveryInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const networkRequests = parsedTrace.NetworkRequests;\n\n  const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);\n  if (!frameMetrics) {\n    throw new Error('no frame metrics');\n  }\n\n  const navMetrics = frameMetrics.get(context.navigationId);\n  if (!navMetrics) {\n    throw new Error('no navigation metrics');\n  }\n  const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);\n  const lcpEvent = metricScore?.event;\n  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {\n    return finalize({warnings: [InsightWarning.NO_LCP]});\n  }\n\n  const docRequest = networkRequests.byId.get(context.navigationId);\n  if (!docRequest) {\n    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId);\n  if (!lcpRequest) {\n    return finalize({lcpEvent});\n  }\n\n  const initiatorUrl = lcpRequest.args.data.initiator?.url;\n  // TODO(b/372319476): Explore using trace event HTMLDocumentParser::FetchQueuedPreloads to determine if the request\n  // is discovered by the preload scanner.\n  const initiatedByMainDoc =\n      lcpRequest?.args.data.initiator?.type === 'parser' && docRequest.args.data.url === initiatorUrl;\n  const imgPreloadedOrFoundInHTML = lcpRequest?.args.data.isLinkPreload || initiatedByMainDoc;\n\n  const imageLoadingAttr = lcpEvent.args.data?.loadingAttr;\n  const imageFetchPriorityHint = lcpRequest?.args.data.fetchPriorityHint;\n  // This is the earliest discovery time an LCP request could have - it's TTFB.\n  const earliestDiscoveryTime = docRequest?.args.data.timing ?\n      Helpers.Timing.secondsToMicro(docRequest.args.data.timing.requestTime) +\n          Helpers.Timing.milliToMicro(docRequest.args.data.timing.receiveHeadersStart) :\n      undefined;\n\n  const priorityHintFound = imageFetchPriorityHint === 'high';\n\n  return finalize({\n    lcpEvent,\n    lcpRequest,\n    earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.Micro(earliestDiscoveryTime) : undefined,\n    checklist: {\n      priorityHinted: {\n        label: priorityHintFound ? i18nString(UIStrings.fetchPriorityApplied) :\n                                   i18nString(UIStrings.fetchPriorityShouldBeApplied),\n        value: priorityHintFound\n      },\n      requestDiscoverable: {label: i18nString(UIStrings.requestDiscoverable), value: imgPreloadedOrFoundInHTML},\n      eagerlyLoaded: {label: i18nString(UIStrings.lazyLoadNotApplied), value: imageLoadingAttr !== 'lazy'},\n    },\n  });\n}\n\ninterface LCPImageDiscoveryData {\n  checklist: Exclude<LCPDiscoveryInsightModel['checklist'], undefined>;\n  request: Types.Events.SyntheticNetworkRequest;\n  discoveryDelay: Types.Timing.Micro|null;\n  estimatedSavings: Types.Timing.Milli|null;\n}\n\n/**\n * TODO: this extra transformation (getImageData) should not be necessary.\n */\nexport function getImageData(model: LCPDiscoveryInsightModel): LCPImageDiscoveryData|null {\n  if (!model.lcpRequest || !model.checklist) {\n    return null;\n  }\n\n  const shouldIncreasePriorityHint = !model.checklist.priorityHinted.value;\n  const shouldPreloadImage = !model.checklist.requestDiscoverable.value;\n  const shouldRemoveLazyLoading = !model.checklist.eagerlyLoaded.value;\n\n  const imageLCP = shouldIncreasePriorityHint !== undefined && shouldPreloadImage !== undefined &&\n      shouldRemoveLazyLoading !== undefined;\n\n  // Shouldn't render anything if lcp insight is null or lcp is text.\n  if (!imageLCP) {\n    return null;\n  }\n\n  const data: LCPImageDiscoveryData = {\n    checklist: model.checklist,\n    request: model.lcpRequest,\n    discoveryDelay: null,\n    estimatedSavings: model.metricSavings?.LCP ?? null,\n  };\n\n  if (model.earliestDiscoveryTimeTs && model.lcpRequest) {\n    const discoveryDelay = model.lcpRequest.ts - model.earliestDiscoveryTimeTs;\n    data.discoveryDelay = Types.Timing.Micro(discoveryDelay);\n  }\n\n  return data;\n}\n\nexport function createOverlays(model: LCPDiscoveryInsightModel): Types.Overlays.Overlay[] {\n  const imageResults = getImageData(model);\n  if (!imageResults || !imageResults.discoveryDelay) {\n    return [];\n  }\n\n  const delay = Helpers.Timing.traceWindowFromMicroSeconds(\n      Types.Timing.Micro(imageResults.request.ts - imageResults.discoveryDelay),\n      imageResults.request.ts,\n  );\n\n  return [\n    {\n      type: 'ENTRY_OUTLINE',\n      entry: imageResults.request,\n      outlineReason: 'ERROR',\n    },\n    {\n      type: 'CANDY_STRIPED_TIME_RANGE',\n      bounds: delay,\n      entry: imageResults.request,\n    },\n    {\n      type: 'TIMESPAN_BREAKDOWN',\n      sections: [{\n        bounds: delay,\n        // This is overridden in the component.\n        label: `${imageResults.discoveryDelay} microseconds`,\n        showDuration: false,\n      }],\n      entry: imageResults.request,\n      renderLocation: 'ABOVE_EVENT',\n    },\n  ];\n}\n"]}
+{"version":3,"file":"LCPDiscovery.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LCPDiscovery.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,IAAI,MAAM,4BAA4B,CAAC;AACnD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAEL,eAAe,EACf,WAAW,EAGX,cAAc,GAEf,MAAM,YAAY,CAAC;AAEpB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,uBAAuB;IAC9B;;OAEG;IACH,WAAW,EACP,8NAA8N;IAClO;;;OAGG;IACH,YAAY,EAAE,oDAAoD;IAClE;;OAEG;IACH,oBAAoB,EAAE,4BAA4B;IAClD;;OAEG;IACH,4BAA4B,EAAE,sCAAsC;IACpE;;OAEG;IACH,mBAAmB,EAAE,6CAA6C;IAClE;;OAEG;IACH,kBAAkB,EAAE,uBAAuB;IAC3C;;OAEG;IACH,KAAK,EAAE,iBAAiB;IACxB;;OAEG;IACH,aAAa,EAAE,0DAA0D;CACjE,CAAC;AAEX,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,uCAAuC,EAAE,SAAS,CAAC,CAAC;AAC7F,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAE7E,MAAM,UAAU,cAAc,CAAC,KAAmB;IAChD,OAAO,KAAK,CAAC,UAAU,KAAK,cAAc,CAAC;AAC7C,CAAC;AASD,SAAS,QAAQ,CAAC,YAA2D;IAC3E,MAAM,aAAa,GAAG,YAAY,CAAC,QAAQ,IAAI,YAAY,CAAC,UAAU,CAAC,CAAC;QACpE,4CAA4C;QAC5C,CAAC,YAAY,CAAC,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC;QAClD,EAAE,CAAC;IACP,OAAO;QACL,UAAU,EAAE,WAAW,CAAC,aAAa;QACrC,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK,CAAC;QAClC,WAAW,EAAE,UAAU,CAAC,SAAS,CAAC,WAAW,CAAC;QAC9C,QAAQ,EAAE,eAAe,CAAC,GAAG;QAC7B,KAAK,EAAE,YAAY,CAAC,UAAU,IAAI,YAAY,CAAC,SAAS;YAChD,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,mBAAmB,CAAC,KAAK;gBAChG,CAAC,YAAY,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;YACpD,MAAM,CAAC,CAAC;YACR,MAAM;QACV,GAAG,YAAY;QACf,aAAa;KACd,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAC3B,WAAuC,EAAE,OAA0B;IACrE,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QACxB,OAAO,QAAQ,CAAC,EAAE,CAAC,CAAC;IACtB,CAAC;IAED,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CAAC;IAEpD,MAAM,YAAY,GAAG,WAAW,CAAC,eAAe,CAAC,qBAAqB,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC5F,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC;IACtC,CAAC;IAED,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC1D,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC;IAC3C,CAAC;IACD,MAAM,WAAW,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;IAC1F,MAAM,QAAQ,GAAG,WAAW,EAAE,KAAK,CAAC;IACpC,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,iCAAiC,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC3E,OAAO,QAAQ,CAAC,EAAC,QAAQ,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,EAAC,CAAC,CAAC;IACvD,CAAC;IAED,MAAM,UAAU,GAAG,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAClE,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,QAAQ,CAAC,EAAC,QAAQ,EAAE,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAC,CAAC,CAAC;IACpE,CAAC;IAED,MAAM,UAAU,GAAG,WAAW,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IACpG,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,QAAQ,CAAC,EAAC,QAAQ,EAAC,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM,YAAY,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC;IACzD,mHAAmH;IACnH,wCAAwC;IACxC,MAAM,kBAAkB,GACpB,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,KAAK,QAAQ,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,YAAY,CAAC;IACpG,MAAM,yBAAyB,GAAG,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,kBAAkB,CAAC;IAE5F,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC;IACzD,MAAM,sBAAsB,GAAG,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;IACvE,6EAA6E;IAC7E,MAAM,qBAAqB,GAAG,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACxD,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC;YAClE,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAClF,SAAS,CAAC;IAEd,MAAM,iBAAiB,GAAG,sBAAsB,KAAK,MAAM,CAAC;IAE5D,OAAO,QAAQ,CAAC;QACd,QAAQ;QACR,UAAU;QACV,uBAAuB,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,SAAS;QACtG,SAAS,EAAE;YACT,cAAc,EAAE;gBACd,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,CAAC;oBAC5C,UAAU,CAAC,SAAS,CAAC,4BAA4B,CAAC;gBAC7E,KAAK,EAAE,iBAAiB;aACzB;YACD,mBAAmB,EAAE,EAAC,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,KAAK,EAAE,yBAAyB,EAAC;YACzG,aAAa,EAAE,EAAC,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,kBAAkB,CAAC,EAAE,KAAK,EAAE,gBAAgB,KAAK,MAAM,EAAC;SACrG;KACF,CAAC,CAAC;AACL,CAAC;AASD;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAA+B;IAC1D,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,0BAA0B,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC;IACzE,MAAM,kBAAkB,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,KAAK,CAAC;IACtE,MAAM,uBAAuB,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC;IAErE,MAAM,QAAQ,GAAG,0BAA0B,KAAK,SAAS,IAAI,kBAAkB,KAAK,SAAS;QACzF,uBAAuB,KAAK,SAAS,CAAC;IAE1C,mEAAmE;IACnE,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,IAAI,GAA0B;QAClC,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,OAAO,EAAE,KAAK,CAAC,UAAU;QACzB,cAAc,EAAE,IAAI;QACpB,gBAAgB,EAAE,KAAK,CAAC,aAAa,EAAE,GAAG,IAAI,IAAI;KACnD,CAAC;IAEF,IAAI,KAAK,CAAC,uBAAuB,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;QACtD,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,EAAE,GAAG,KAAK,CAAC,uBAAuB,CAAC;QAC3E,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAC3D,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAA+B;IAC5D,MAAM,YAAY,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACzC,IAAI,CAAC,YAAY,EAAE,cAAc,EAAE,CAAC;QAClC,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,2BAA2B,CACpD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,GAAG,YAAY,CAAC,cAAc,CAAC,EACzE,YAAY,CAAC,OAAO,CAAC,EAAE,CAC1B,CAAC;IAEF,OAAO;QACL;YACE,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,YAAY,CAAC,OAAO;YAC3B,aAAa,EAAE,OAAO;SACvB;QACD;YACE,IAAI,EAAE,0BAA0B;YAChC,MAAM,EAAE,KAAK;YACb,KAAK,EAAE,YAAY,CAAC,OAAO;SAC5B;QACD;YACE,IAAI,EAAE,oBAAoB;YAC1B,QAAQ,EAAE,CAAC;oBACT,MAAM,EAAE,KAAK;oBACb,uCAAuC;oBACvC,KAAK,EAAE,GAAG,YAAY,CAAC,cAAc,eAAe;oBACpD,YAAY,EAAE,KAAK;iBACpB,CAAC;YACF,KAAK,EAAE,YAAY,CAAC,OAAO;YAC3B,cAAc,EAAE,aAAa;SAC9B;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  type Checklist,\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)\n   */\n  title: 'LCP request discovery',\n  /**\n   * @description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.\n   */\n  description:\n      'Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)',\n  /**\n   * @description Text to tell the user how long after the earliest discovery time their LCP element loaded.\n   * @example {401ms} PH1\n   */\n  lcpLoadDelay: 'LCP image loaded {PH1} after earliest start point.',\n  /**\n   * @description Text to tell the user that a fetchpriority property value of \"high\" is applied to the LCP request.\n   */\n  fetchPriorityApplied: 'fetchpriority=high applied',\n  /**\n   * @description Text to tell the user that a fetchpriority property value of \"high\" should be applied to the LCP request.\n   */\n  fetchPriorityShouldBeApplied: 'fetchpriority=high should be applied',\n  /**\n   * @description Text to tell the user that the LCP request is discoverable in the initial document.\n   */\n  requestDiscoverable: 'Request is discoverable in initial document',\n  /**\n   * @description Text to tell the user that the LCP request does not have the lazy load property applied.\n   */\n  lazyLoadNotApplied: 'lazy load not applied',\n  /**\n   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcp: 'No LCP detected',\n  /**\n   * @description Text status indicating that the Largest Contentful Paint (LCP) metric was text rather than an image. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcpResource: 'No LCP resource detected because the LCP is not an image',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPDiscovery.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport function isLCPDiscovery(model: InsightModel): model is LCPDiscoveryInsightModel {\n  return model.insightKey === 'LCPDiscovery';\n}\nexport type LCPDiscoveryInsightModel = InsightModel<typeof UIStrings, {\n  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,\n  /** The network request for the LCP image, if there was one. */\n  lcpRequest?: Types.Events.SyntheticNetworkRequest,\n  earliestDiscoveryTimeTs?: Types.Timing.Micro,\n  checklist?: Checklist<'priorityHinted'|'requestDiscoverable'|'eagerlyLoaded'>,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<LCPDiscoveryInsightModel>): LCPDiscoveryInsightModel {\n  const relatedEvents = partialModel.lcpEvent && partialModel.lcpRequest ?\n      // TODO: add entire request initiator chain?\n      [partialModel.lcpEvent, partialModel.lcpRequest] :\n      [];\n  return {\n    insightKey: InsightKeys.LCP_DISCOVERY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: partialModel.lcpRequest && partialModel.checklist &&\n            (!partialModel.checklist.eagerlyLoaded.value || !partialModel.checklist.requestDiscoverable.value ||\n             !partialModel.checklist.priorityHinted.value) ?\n        'fail' :\n        'pass',\n    ...partialModel,\n    relatedEvents,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LCPDiscoveryInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const networkRequests = parsedTrace.NetworkRequests;\n\n  const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);\n  if (!frameMetrics) {\n    throw new Error('no frame metrics');\n  }\n\n  const navMetrics = frameMetrics.get(context.navigationId);\n  if (!navMetrics) {\n    throw new Error('no navigation metrics');\n  }\n  const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);\n  const lcpEvent = metricScore?.event;\n  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {\n    return finalize({warnings: [InsightWarning.NO_LCP]});\n  }\n\n  const docRequest = networkRequests.byId.get(context.navigationId);\n  if (!docRequest) {\n    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId);\n  if (!lcpRequest) {\n    return finalize({lcpEvent});\n  }\n\n  const initiatorUrl = lcpRequest.args.data.initiator?.url;\n  // TODO(b/372319476): Explore using trace event HTMLDocumentParser::FetchQueuedPreloads to determine if the request\n  // is discovered by the preload scanner.\n  const initiatedByMainDoc =\n      lcpRequest?.args.data.initiator?.type === 'parser' && docRequest.args.data.url === initiatorUrl;\n  const imgPreloadedOrFoundInHTML = lcpRequest?.args.data.isLinkPreload || initiatedByMainDoc;\n\n  const imageLoadingAttr = lcpEvent.args.data?.loadingAttr;\n  const imageFetchPriorityHint = lcpRequest?.args.data.fetchPriorityHint;\n  // This is the earliest discovery time an LCP request could have - it's TTFB.\n  const earliestDiscoveryTime = docRequest?.args.data.timing ?\n      Helpers.Timing.secondsToMicro(docRequest.args.data.timing.requestTime) +\n          Helpers.Timing.milliToMicro(docRequest.args.data.timing.receiveHeadersStart) :\n      undefined;\n\n  const priorityHintFound = imageFetchPriorityHint === 'high';\n\n  return finalize({\n    lcpEvent,\n    lcpRequest,\n    earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.Micro(earliestDiscoveryTime) : undefined,\n    checklist: {\n      priorityHinted: {\n        label: priorityHintFound ? i18nString(UIStrings.fetchPriorityApplied) :\n                                   i18nString(UIStrings.fetchPriorityShouldBeApplied),\n        value: priorityHintFound\n      },\n      requestDiscoverable: {label: i18nString(UIStrings.requestDiscoverable), value: imgPreloadedOrFoundInHTML},\n      eagerlyLoaded: {label: i18nString(UIStrings.lazyLoadNotApplied), value: imageLoadingAttr !== 'lazy'},\n    },\n  });\n}\n\ninterface LCPImageDiscoveryData {\n  checklist: Exclude<LCPDiscoveryInsightModel['checklist'], undefined>;\n  request: Types.Events.SyntheticNetworkRequest;\n  discoveryDelay: Types.Timing.Micro|null;\n  estimatedSavings: Types.Timing.Milli|null;\n}\n\n/**\n * TODO: this extra transformation (getImageData) should not be necessary.\n */\nexport function getImageData(model: LCPDiscoveryInsightModel): LCPImageDiscoveryData|null {\n  if (!model.lcpRequest || !model.checklist) {\n    return null;\n  }\n\n  const shouldIncreasePriorityHint = !model.checklist.priorityHinted.value;\n  const shouldPreloadImage = !model.checklist.requestDiscoverable.value;\n  const shouldRemoveLazyLoading = !model.checklist.eagerlyLoaded.value;\n\n  const imageLCP = shouldIncreasePriorityHint !== undefined && shouldPreloadImage !== undefined &&\n      shouldRemoveLazyLoading !== undefined;\n\n  // Shouldn't render anything if lcp insight is null or lcp is text.\n  if (!imageLCP) {\n    return null;\n  }\n\n  const data: LCPImageDiscoveryData = {\n    checklist: model.checklist,\n    request: model.lcpRequest,\n    discoveryDelay: null,\n    estimatedSavings: model.metricSavings?.LCP ?? null,\n  };\n\n  if (model.earliestDiscoveryTimeTs && model.lcpRequest) {\n    const discoveryDelay = model.lcpRequest.ts - model.earliestDiscoveryTimeTs;\n    data.discoveryDelay = Types.Timing.Micro(discoveryDelay);\n  }\n\n  return data;\n}\n\nexport function createOverlays(model: LCPDiscoveryInsightModel): Types.Overlays.Overlay[] {\n  const imageResults = getImageData(model);\n  if (!imageResults?.discoveryDelay) {\n    return [];\n  }\n\n  const delay = Helpers.Timing.traceWindowFromMicroSeconds(\n      Types.Timing.Micro(imageResults.request.ts - imageResults.discoveryDelay),\n      imageResults.request.ts,\n  );\n\n  return [\n    {\n      type: 'ENTRY_OUTLINE',\n      entry: imageResults.request,\n      outlineReason: 'ERROR',\n    },\n    {\n      type: 'CANDY_STRIPED_TIME_RANGE',\n      bounds: delay,\n      entry: imageResults.request,\n    },\n    {\n      type: 'TIMESPAN_BREAKDOWN',\n      sections: [{\n        bounds: delay,\n        // This is overridden in the component.\n        label: `${imageResults.discoveryDelay} microseconds`,\n        showDuration: false,\n      }],\n      entry: imageResults.request,\n      renderLocation: 'ABOVE_EVENT',\n    },\n  ];\n}\n"]}

package/models/trace/insights/LegacyJavaScript.d.ts

@@ -29,6 +29,7 @@ type LegacyJavaScriptResults = Map<Handlers.ModelHandlers.Scripts.Script, Legacy
 export type LegacyJavaScriptInsightModel = InsightModel<typeof UIStrings, {
     legacyJavaScriptResults: LegacyJavaScriptResults;
 }>;
+export declare function isLegacyJavaScript(model: InsightModel): model is LegacyJavaScriptInsightModel;
 export declare function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LegacyJavaScriptInsightModel;
 export declare function createOverlays(model: LegacyJavaScriptInsightModel): Types.Overlays.Overlay[];
 export {};

package/models/trace/insights/LegacyJavaScript.js

@@ -37,11 +37,11 @@ function finalize(partialModel) {
         ...partialModel,
     };
 }
+export function isLegacyJavaScript(model) {
+    return model.insightKey === InsightKeys.LEGACY_JAVASCRIPT;
+}
 export function generateInsight(parsedTrace, context) {
     const scripts = parsedTrace.Scripts.scripts.filter(script => {
-        if (!context.navigation) {
-            return false;
-        }
         if (script.frame !== context.frameId) {
             return false;
         }

package/models/trace/insights/LegacyJavaScript.js.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyJavaScript.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LegacyJavaScript.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2025 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as LegacyJavaScriptLib from '../../../third_party/legacy-javascript/legacy-javascript.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type * as Types from '../types/types.js';\n\nimport {estimateCompressionRatioForScript, metricSavingsForWastedBytes} from './Common.js';\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n} from './types.js';\n\nconst {detectLegacyJavaScript} = LegacyJavaScriptLib.LegacyJavaScript;\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.\n   */\n  title: 'Legacy JavaScript',\n  /**\n   * @description Description of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.\n   */\n  description:\n      'Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren\\'t necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/articles/baseline-and-polyfills) features, unless you know you must support older browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://philipwalton.com/articles/the-state-of-es5-on-the-web/)',\n  /** Label for a column in a data table; entries will be the individual JavaScript scripts. */\n  columnScript: 'Script',\n  /** Label for a column in a data table; entries will be the number of wasted bytes (aka the estimated savings in terms of bytes). */\n  columnWastedBytes: 'Wasted bytes',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/LegacyJavaScript.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport interface PatternMatchResult {\n  name: string;\n  line: number;\n  column: number;\n}\n\ninterface LegacyJavaScriptResult {\n  matches: PatternMatchResult[];\n  estimatedByteSavings: number;\n}\n\ntype LegacyJavaScriptResults = Map<Handlers.ModelHandlers.Scripts.Script, LegacyJavaScriptResult>;\n\nexport type LegacyJavaScriptInsightModel = InsightModel<typeof UIStrings, {\n  legacyJavaScriptResults: LegacyJavaScriptResults,\n}>;\n\nconst BYTE_THRESHOLD = 5000;\n\nfunction finalize(partialModel: PartialInsightModel<LegacyJavaScriptInsightModel>): LegacyJavaScriptInsightModel {\n  const requests = [...partialModel.legacyJavaScriptResults.keys()].map(script => script.request).filter(e => !!e);\n\n  return {\n    insightKey: InsightKeys.LEGACY_JAVASCRIPT,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.ALL,\n    state: requests.length ? 'fail' : 'pass',\n    relatedEvents: [...new Set(requests)],\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LegacyJavaScriptInsightModel {\n  const scripts = parsedTrace.Scripts.scripts.filter(script => {\n    if (!context.navigation) {\n      return false;\n    }\n\n    if (script.frame !== context.frameId) {\n      return false;\n    }\n\n    if (script.url?.startsWith('chrome-extension://')) {\n      return false;\n    }\n\n    return Helpers.Timing.timestampIsInBounds(context.bounds, script.ts);\n  });\n\n  const legacyJavaScriptResults: LegacyJavaScriptResults = new Map();\n  const wastedBytesByRequestId = new Map<string, number>();\n\n  for (const script of scripts) {\n    if (!script.content || script.content.length < BYTE_THRESHOLD) {\n      continue;\n    }\n\n    const result = detectLegacyJavaScript(script.content, script.sourceMap);\n    if (result.estimatedByteSavings < BYTE_THRESHOLD) {\n      continue;\n    }\n\n    // Translate from resource size to transfer size.\n    const compressionRatio = estimateCompressionRatioForScript(script);\n    const transferSize = Math.round(result.estimatedByteSavings * compressionRatio);\n    result.estimatedByteSavings = transferSize;\n\n    legacyJavaScriptResults.set(script, result);\n\n    if (script.request) {\n      const requestId = script.request.args.data.requestId;\n      wastedBytesByRequestId.set(requestId, transferSize);\n    }\n  }\n\n  const sorted =\n      new Map([...legacyJavaScriptResults].sort((a, b) => b[1].estimatedByteSavings - a[1].estimatedByteSavings));\n\n  return finalize({\n    legacyJavaScriptResults: sorted,\n    metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),\n    wastedBytes: wastedBytesByRequestId.values().reduce((acc, cur) => acc + cur, 0),\n  });\n}\nexport function createOverlays(model: LegacyJavaScriptInsightModel): Types.Overlays.Overlay[] {\n  return [...model.legacyJavaScriptResults.keys()].map(script => script.request).filter(e => !!e).map(request => {\n    return {\n      type: 'ENTRY_OUTLINE',\n      entry: request,\n      outlineReason: 'ERROR',\n    };\n  });\n}\n"]}
+{"version":3,"file":"LegacyJavaScript.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LegacyJavaScript.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2025 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as LegacyJavaScriptLib from '../../../third_party/legacy-javascript/legacy-javascript.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type * as Types from '../types/types.js';\n\nimport {estimateCompressionRatioForScript, metricSavingsForWastedBytes} from './Common.js';\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n} from './types.js';\n\nconst {detectLegacyJavaScript} = LegacyJavaScriptLib.LegacyJavaScript;\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.\n   */\n  title: 'Legacy JavaScript',\n  /**\n   * @description Description of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.\n   */\n  description:\n      'Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren\\'t necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/articles/baseline-and-polyfills) features, unless you know you must support older browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://philipwalton.com/articles/the-state-of-es5-on-the-web/)',\n  /** Label for a column in a data table; entries will be the individual JavaScript scripts. */\n  columnScript: 'Script',\n  /** Label for a column in a data table; entries will be the number of wasted bytes (aka the estimated savings in terms of bytes). */\n  columnWastedBytes: 'Wasted bytes',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/LegacyJavaScript.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport interface PatternMatchResult {\n  name: string;\n  line: number;\n  column: number;\n}\n\ninterface LegacyJavaScriptResult {\n  matches: PatternMatchResult[];\n  estimatedByteSavings: number;\n}\n\ntype LegacyJavaScriptResults = Map<Handlers.ModelHandlers.Scripts.Script, LegacyJavaScriptResult>;\n\nexport type LegacyJavaScriptInsightModel = InsightModel<typeof UIStrings, {\n  legacyJavaScriptResults: LegacyJavaScriptResults,\n}>;\n\nconst BYTE_THRESHOLD = 5000;\n\nfunction finalize(partialModel: PartialInsightModel<LegacyJavaScriptInsightModel>): LegacyJavaScriptInsightModel {\n  const requests = [...partialModel.legacyJavaScriptResults.keys()].map(script => script.request).filter(e => !!e);\n\n  return {\n    insightKey: InsightKeys.LEGACY_JAVASCRIPT,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.ALL,\n    state: requests.length ? 'fail' : 'pass',\n    relatedEvents: [...new Set(requests)],\n    ...partialModel,\n  };\n}\n\nexport function isLegacyJavaScript(model: InsightModel): model is LegacyJavaScriptInsightModel {\n  return model.insightKey === InsightKeys.LEGACY_JAVASCRIPT;\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LegacyJavaScriptInsightModel {\n  const scripts = parsedTrace.Scripts.scripts.filter(script => {\n    if (script.frame !== context.frameId) {\n      return false;\n    }\n\n    if (script.url?.startsWith('chrome-extension://')) {\n      return false;\n    }\n\n    return Helpers.Timing.timestampIsInBounds(context.bounds, script.ts);\n  });\n\n  const legacyJavaScriptResults: LegacyJavaScriptResults = new Map();\n  const wastedBytesByRequestId = new Map<string, number>();\n\n  for (const script of scripts) {\n    if (!script.content || script.content.length < BYTE_THRESHOLD) {\n      continue;\n    }\n\n    const result = detectLegacyJavaScript(script.content, script.sourceMap);\n    if (result.estimatedByteSavings < BYTE_THRESHOLD) {\n      continue;\n    }\n\n    // Translate from resource size to transfer size.\n    const compressionRatio = estimateCompressionRatioForScript(script);\n    const transferSize = Math.round(result.estimatedByteSavings * compressionRatio);\n    result.estimatedByteSavings = transferSize;\n\n    legacyJavaScriptResults.set(script, result);\n\n    if (script.request) {\n      const requestId = script.request.args.data.requestId;\n      wastedBytesByRequestId.set(requestId, transferSize);\n    }\n  }\n\n  const sorted =\n      new Map([...legacyJavaScriptResults].sort((a, b) => b[1].estimatedByteSavings - a[1].estimatedByteSavings));\n\n  return finalize({\n    legacyJavaScriptResults: sorted,\n    metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),\n    wastedBytes: wastedBytesByRequestId.values().reduce((acc, cur) => acc + cur, 0),\n  });\n}\nexport function createOverlays(model: LegacyJavaScriptInsightModel): Types.Overlays.Overlay[] {\n  return [...model.legacyJavaScriptResults.keys()].map(script => script.request).filter(e => !!e).map(request => {\n    return {\n      type: 'ENTRY_OUTLINE',\n      entry: request,\n      outlineReason: 'ERROR',\n    };\n  });\n}\n"]}

package/models/trace/insights/ModernHTTP.js

@@ -180,7 +180,7 @@ export function generateInsight(parsedTrace, context) {
     const contextRequests = parsedTrace.NetworkRequests.byTime.filter(isWithinContext);
     const entityMappings = parsedTrace.NetworkRequests.entityMappings;
     const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;
-    const firstPartyEntity = Handlers.Helpers.getEntityForUrl(firstPartyUrl, entityMappings.createdEntityCache);
+    const firstPartyEntity = Handlers.Helpers.getEntityForUrl(firstPartyUrl, entityMappings);
     const http1Requests = determineHttp1Requests(contextRequests, entityMappings, firstPartyEntity ?? null);
     return finalize({
         http1Requests,

package/models/trace/insights/ModernHTTP.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModernHTTP.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/ModernHTTP.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2025 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Platform from '../../../core/platform/platform.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type * as Lantern from '../lantern/lantern.js';\nimport type * as Types from '../types/types.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type MetricSavings,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that recommends using HTTP/2 over HTTP/1.1 because of the performance benefits. \"HTTP\" should not be translated.\n   */\n  title: 'Modern HTTP',\n  /**\n   * @description Description of an insight that recommends recommends using HTTP/2 over HTTP/1.1 because of the performance benefits. \"HTTP\" should not be translated.\n   */\n  description:\n      'HTTP/2 and HTTP/3 offer many benefits over HTTP/1.1, such as multiplexing. [Learn more about using modern HTTP](https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2/).',\n  /**\n   * @description Column header for a table where each cell represents a network request.\n   */\n  request: 'Request',\n  /**\n   * @description Column header for a table where each cell represents the protocol of a network request.\n   */\n  protocol: 'Protocol',\n  /**\n   * @description Text explaining that there were not requests that were slowed down by using HTTP/1.1. \"HTTP/1.1\" should not be translated.\n   */\n  noOldProtocolRequests:\n      'No requests used HTTP/1.1, or its current use of HTTP/1.1 does not present a significant optimization opportunity. HTTP/1.1 requests are only flagged if six or more static assets originate from the same origin, and they are not served from a local development environment or a third-party source.'\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/ModernHTTP.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type ModernHTTPInsightModel = InsightModel<typeof UIStrings, {\n  http1Requests: Types.Events.SyntheticNetworkRequest[],\n}>;\n\nexport function isModernHTTP(model: InsightModel): model is ModernHTTPInsightModel {\n  return model.insightKey === InsightKeys.MODERN_HTTP;\n}\n\n/**\n * Determines whether a network request is a \"static resource\" that would benefit from H2 multiplexing.\n * XHRs, tracking pixels, etc generally don't benefit as much because they aren't requested en-masse\n * for the same origin at the exact same time.\n */\nfunction isMultiplexableStaticAsset(\n    request: Types.Events.SyntheticNetworkRequest, entityMappings: Handlers.Helpers.EntityMappings,\n    firstPartyEntity: Handlers.Helpers.Entity|null): boolean {\n  if (!Helpers.Network.STATIC_RESOURCE_TYPES.has(request.args.data.resourceType)) {\n    return false;\n  }\n\n  // Resources from third-parties that are less than 100 bytes are usually tracking pixels, not actual resources.\n  // They can masquerade as static types though (gifs, documents, etc)\n  if (request.args.data.decodedBodyLength < 100) {\n    const entity = entityMappings.entityByEvent.get(request);\n    if (entity) {\n      // Third-party assets are multiplexable in their first-party context.\n      if (firstPartyEntity?.name === entity.name) {\n        return true;\n      }\n      // Skip recognizable third-parties' requests.\n      if (!entity.isUnrecognized) {\n        return false;\n      }\n    }\n  }\n\n  return true;\n}\n\n/**\n * Determine the set of resources that aren't HTTP/2 but should be.\n * We're a little conservative about what we surface for a few reasons:\n *\n *    - The simulator approximation of HTTP/2 is a little more generous than reality.\n *    - There's a bit of debate surrounding HTTP/2 due to its worse performance in environments with high packet loss. [1][2][3]\n *    - It's something that you'd have absolutely zero control over with a third-party (can't defer to fix it for example).\n *\n * Therefore, we only surface requests that were...\n *\n *    - Served over HTTP/1.1 or earlier\n *    - Served over an origin that serves at least 6 static asset requests\n *      (if there aren't more requests than browser's max/host, multiplexing isn't as big a deal)\n *    - Not served on localhost (h2 is a pain to deal with locally & and CI)\n *\n * [1] https://news.ycombinator.com/item?id=19086639\n * [2] https://www.twilio.com/blog/2017/10/http2-issues.html\n * [3] https://www.cachefly.com/http-2-is-not-a-magic-bullet/\n */\nexport function determineHttp1Requests(\n    requests: Types.Events.SyntheticNetworkRequest[], entityMappings: Handlers.Helpers.EntityMappings,\n    firstPartyEntity: Handlers.Helpers.Entity|null): Types.Events.SyntheticNetworkRequest[] {\n  const http1Requests: Types.Events.SyntheticNetworkRequest[] = [];\n\n  const groupedByOrigin = new Map<string, Types.Events.SyntheticNetworkRequest[]>();\n  for (const record of requests) {\n    const url = new URL(record.args.data.url);\n    if (!isMultiplexableStaticAsset(record, entityMappings, firstPartyEntity)) {\n      continue;\n    }\n    if (Helpers.Network.isSyntheticNetworkRequestLocalhost(record)) {\n      continue;\n    }\n    const originRequests = Platform.MapUtilities.getWithDefault(groupedByOrigin, url.origin, () => []);\n    originRequests.push(record);\n  }\n\n  const seenURLs = new Set<string>();\n\n  for (const request of requests) {\n    // Skip duplicates.\n    if (seenURLs.has(request.args.data.url)) {\n      continue;\n    }\n\n    // Check if record is not served through the service worker, servicer worker uses http/1.1 as a protocol.\n    // These can generate false positives (bug: https://github.com/GoogleChrome/lighthouse/issues/7158).\n    if (request.args.data.fromServiceWorker) {\n      continue;\n    }\n\n    // Test the protocol to see if it was http/1.1.\n    const isOldHttp = /HTTP\\/[01][.\\d]?/i.test(request.args.data.protocol);\n    if (!isOldHttp) {\n      continue;\n    }\n\n    const url = new URL(request.args.data.url);\n\n    // Check if the origin has enough requests to bother flagging.\n    const group = groupedByOrigin.get(url.origin) || [];\n    if (group.length < 6) {\n      continue;\n    }\n\n    seenURLs.add(request.args.data.url);\n    http1Requests.push(request);\n  }\n\n  return http1Requests;\n}\n\n/**\n * Computes the estimated effect of all results being converted to http/2 on the provided graph.\n */\nfunction computeWasteWithGraph(\n    urlsToChange: Set<string>, graph: Lantern.Graph.Node, simulator: Lantern.Simulation.Simulator): Types.Timing.Milli {\n  const simulationBefore = simulator.simulate(graph);\n\n  // Update all the protocols to reflect implementing our recommendations\n  const originalProtocols = new Map();\n  graph.traverse(node => {\n    if (node.type !== 'network') {\n      return;\n    }\n    if (!urlsToChange.has(node.request.url)) {\n      return;\n    }\n\n    originalProtocols.set(node.request.requestId, node.request.protocol);\n    node.request.protocol = 'h2';\n  });\n\n  const simulationAfter = simulator.simulate(graph);\n\n  // Restore the original protocol after we've done our simulation\n  graph.traverse(node => {\n    if (node.type !== 'network') {\n      return;\n    }\n    const originalProtocol = originalProtocols.get(node.request.requestId);\n    if (originalProtocol === undefined) {\n      return;\n    }\n    node.request.protocol = originalProtocol;\n  });\n\n  const savings = simulationBefore.timeInMs - simulationAfter.timeInMs;\n\n  return Platform.NumberUtilities.floor(savings, 1 / 10) as Types.Timing.Milli;\n}\n\nfunction computeMetricSavings(\n    http1Requests: Types.Events.SyntheticNetworkRequest[], context: InsightSetContext): MetricSavings|undefined {\n  if (!context.navigation || !context.lantern) {\n    return;\n  }\n\n  const urlsToChange = new Set(http1Requests.map(r => r.args.data.url));\n\n  const fcpGraph = context.lantern.metrics.firstContentfulPaint.optimisticGraph;\n  const lcpGraph = context.lantern.metrics.largestContentfulPaint.optimisticGraph;\n\n  return {\n    FCP: computeWasteWithGraph(urlsToChange, fcpGraph, context.lantern.simulator),\n    LCP: computeWasteWithGraph(urlsToChange, lcpGraph, context.lantern.simulator),\n  };\n}\n\nfunction finalize(partialModel: PartialInsightModel<ModernHTTPInsightModel>): ModernHTTPInsightModel {\n  return {\n    insightKey: InsightKeys.MODERN_HTTP,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: partialModel.http1Requests.length > 0 ? 'fail' : 'pass',\n    ...partialModel,\n    relatedEvents: partialModel.http1Requests,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): ModernHTTPInsightModel {\n  const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);\n\n  const contextRequests = parsedTrace.NetworkRequests.byTime.filter(isWithinContext);\n\n  const entityMappings = parsedTrace.NetworkRequests.entityMappings;\n  const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;\n  const firstPartyEntity = Handlers.Helpers.getEntityForUrl(firstPartyUrl, entityMappings.createdEntityCache);\n  const http1Requests = determineHttp1Requests(contextRequests, entityMappings, firstPartyEntity ?? null);\n\n  return finalize({\n    http1Requests,\n    metricSavings: computeMetricSavings(http1Requests, context),\n  });\n}\n\nexport function createOverlayForRequest(request: Types.Events.SyntheticNetworkRequest): Types.Overlays.EntryOutline {\n  return {\n    type: 'ENTRY_OUTLINE',\n    entry: request,\n    outlineReason: 'ERROR',\n  };\n}\n\nexport function createOverlays(model: ModernHTTPInsightModel): Types.Overlays.Overlay[] {\n  return model.http1Requests.map(req => createOverlayForRequest(req)) ?? [];\n}\n"]}
+{"version":3,"file":"ModernHTTP.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/ModernHTTP.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2025 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Platform from '../../../core/platform/platform.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type * as Lantern from '../lantern/lantern.js';\nimport type * as Types from '../types/types.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type MetricSavings,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that recommends using HTTP/2 over HTTP/1.1 because of the performance benefits. \"HTTP\" should not be translated.\n   */\n  title: 'Modern HTTP',\n  /**\n   * @description Description of an insight that recommends recommends using HTTP/2 over HTTP/1.1 because of the performance benefits. \"HTTP\" should not be translated.\n   */\n  description:\n      'HTTP/2 and HTTP/3 offer many benefits over HTTP/1.1, such as multiplexing. [Learn more about using modern HTTP](https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2/).',\n  /**\n   * @description Column header for a table where each cell represents a network request.\n   */\n  request: 'Request',\n  /**\n   * @description Column header for a table where each cell represents the protocol of a network request.\n   */\n  protocol: 'Protocol',\n  /**\n   * @description Text explaining that there were not requests that were slowed down by using HTTP/1.1. \"HTTP/1.1\" should not be translated.\n   */\n  noOldProtocolRequests:\n      'No requests used HTTP/1.1, or its current use of HTTP/1.1 does not present a significant optimization opportunity. HTTP/1.1 requests are only flagged if six or more static assets originate from the same origin, and they are not served from a local development environment or a third-party source.'\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/ModernHTTP.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type ModernHTTPInsightModel = InsightModel<typeof UIStrings, {\n  http1Requests: Types.Events.SyntheticNetworkRequest[],\n}>;\n\nexport function isModernHTTP(model: InsightModel): model is ModernHTTPInsightModel {\n  return model.insightKey === InsightKeys.MODERN_HTTP;\n}\n\n/**\n * Determines whether a network request is a \"static resource\" that would benefit from H2 multiplexing.\n * XHRs, tracking pixels, etc generally don't benefit as much because they aren't requested en-masse\n * for the same origin at the exact same time.\n */\nfunction isMultiplexableStaticAsset(\n    request: Types.Events.SyntheticNetworkRequest, entityMappings: Handlers.Helpers.EntityMappings,\n    firstPartyEntity: Handlers.Helpers.Entity|null): boolean {\n  if (!Helpers.Network.STATIC_RESOURCE_TYPES.has(request.args.data.resourceType)) {\n    return false;\n  }\n\n  // Resources from third-parties that are less than 100 bytes are usually tracking pixels, not actual resources.\n  // They can masquerade as static types though (gifs, documents, etc)\n  if (request.args.data.decodedBodyLength < 100) {\n    const entity = entityMappings.entityByEvent.get(request);\n    if (entity) {\n      // Third-party assets are multiplexable in their first-party context.\n      if (firstPartyEntity?.name === entity.name) {\n        return true;\n      }\n      // Skip recognizable third-parties' requests.\n      if (!entity.isUnrecognized) {\n        return false;\n      }\n    }\n  }\n\n  return true;\n}\n\n/**\n * Determine the set of resources that aren't HTTP/2 but should be.\n * We're a little conservative about what we surface for a few reasons:\n *\n *    - The simulator approximation of HTTP/2 is a little more generous than reality.\n *    - There's a bit of debate surrounding HTTP/2 due to its worse performance in environments with high packet loss. [1][2][3]\n *    - It's something that you'd have absolutely zero control over with a third-party (can't defer to fix it for example).\n *\n * Therefore, we only surface requests that were...\n *\n *    - Served over HTTP/1.1 or earlier\n *    - Served over an origin that serves at least 6 static asset requests\n *      (if there aren't more requests than browser's max/host, multiplexing isn't as big a deal)\n *    - Not served on localhost (h2 is a pain to deal with locally & and CI)\n *\n * [1] https://news.ycombinator.com/item?id=19086639\n * [2] https://www.twilio.com/blog/2017/10/http2-issues.html\n * [3] https://www.cachefly.com/http-2-is-not-a-magic-bullet/\n */\nexport function determineHttp1Requests(\n    requests: Types.Events.SyntheticNetworkRequest[], entityMappings: Handlers.Helpers.EntityMappings,\n    firstPartyEntity: Handlers.Helpers.Entity|null): Types.Events.SyntheticNetworkRequest[] {\n  const http1Requests: Types.Events.SyntheticNetworkRequest[] = [];\n\n  const groupedByOrigin = new Map<string, Types.Events.SyntheticNetworkRequest[]>();\n  for (const record of requests) {\n    const url = new URL(record.args.data.url);\n    if (!isMultiplexableStaticAsset(record, entityMappings, firstPartyEntity)) {\n      continue;\n    }\n    if (Helpers.Network.isSyntheticNetworkRequestLocalhost(record)) {\n      continue;\n    }\n    const originRequests = Platform.MapUtilities.getWithDefault(groupedByOrigin, url.origin, () => []);\n    originRequests.push(record);\n  }\n\n  const seenURLs = new Set<string>();\n\n  for (const request of requests) {\n    // Skip duplicates.\n    if (seenURLs.has(request.args.data.url)) {\n      continue;\n    }\n\n    // Check if record is not served through the service worker, servicer worker uses http/1.1 as a protocol.\n    // These can generate false positives (bug: https://github.com/GoogleChrome/lighthouse/issues/7158).\n    if (request.args.data.fromServiceWorker) {\n      continue;\n    }\n\n    // Test the protocol to see if it was http/1.1.\n    const isOldHttp = /HTTP\\/[01][.\\d]?/i.test(request.args.data.protocol);\n    if (!isOldHttp) {\n      continue;\n    }\n\n    const url = new URL(request.args.data.url);\n\n    // Check if the origin has enough requests to bother flagging.\n    const group = groupedByOrigin.get(url.origin) || [];\n    if (group.length < 6) {\n      continue;\n    }\n\n    seenURLs.add(request.args.data.url);\n    http1Requests.push(request);\n  }\n\n  return http1Requests;\n}\n\n/**\n * Computes the estimated effect of all results being converted to http/2 on the provided graph.\n */\nfunction computeWasteWithGraph(\n    urlsToChange: Set<string>, graph: Lantern.Graph.Node, simulator: Lantern.Simulation.Simulator): Types.Timing.Milli {\n  const simulationBefore = simulator.simulate(graph);\n\n  // Update all the protocols to reflect implementing our recommendations\n  const originalProtocols = new Map();\n  graph.traverse(node => {\n    if (node.type !== 'network') {\n      return;\n    }\n    if (!urlsToChange.has(node.request.url)) {\n      return;\n    }\n\n    originalProtocols.set(node.request.requestId, node.request.protocol);\n    node.request.protocol = 'h2';\n  });\n\n  const simulationAfter = simulator.simulate(graph);\n\n  // Restore the original protocol after we've done our simulation\n  graph.traverse(node => {\n    if (node.type !== 'network') {\n      return;\n    }\n    const originalProtocol = originalProtocols.get(node.request.requestId);\n    if (originalProtocol === undefined) {\n      return;\n    }\n    node.request.protocol = originalProtocol;\n  });\n\n  const savings = simulationBefore.timeInMs - simulationAfter.timeInMs;\n\n  return Platform.NumberUtilities.floor(savings, 1 / 10) as Types.Timing.Milli;\n}\n\nfunction computeMetricSavings(\n    http1Requests: Types.Events.SyntheticNetworkRequest[], context: InsightSetContext): MetricSavings|undefined {\n  if (!context.navigation || !context.lantern) {\n    return;\n  }\n\n  const urlsToChange = new Set(http1Requests.map(r => r.args.data.url));\n\n  const fcpGraph = context.lantern.metrics.firstContentfulPaint.optimisticGraph;\n  const lcpGraph = context.lantern.metrics.largestContentfulPaint.optimisticGraph;\n\n  return {\n    FCP: computeWasteWithGraph(urlsToChange, fcpGraph, context.lantern.simulator),\n    LCP: computeWasteWithGraph(urlsToChange, lcpGraph, context.lantern.simulator),\n  };\n}\n\nfunction finalize(partialModel: PartialInsightModel<ModernHTTPInsightModel>): ModernHTTPInsightModel {\n  return {\n    insightKey: InsightKeys.MODERN_HTTP,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: partialModel.http1Requests.length > 0 ? 'fail' : 'pass',\n    ...partialModel,\n    relatedEvents: partialModel.http1Requests,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): ModernHTTPInsightModel {\n  const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);\n\n  const contextRequests = parsedTrace.NetworkRequests.byTime.filter(isWithinContext);\n\n  const entityMappings = parsedTrace.NetworkRequests.entityMappings;\n  const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;\n  const firstPartyEntity = Handlers.Helpers.getEntityForUrl(firstPartyUrl, entityMappings);\n  const http1Requests = determineHttp1Requests(contextRequests, entityMappings, firstPartyEntity ?? null);\n\n  return finalize({\n    http1Requests,\n    metricSavings: computeMetricSavings(http1Requests, context),\n  });\n}\n\nexport function createOverlayForRequest(request: Types.Events.SyntheticNetworkRequest): Types.Overlays.EntryOutline {\n  return {\n    type: 'ENTRY_OUTLINE',\n    entry: request,\n    outlineReason: 'ERROR',\n  };\n}\n\nexport function createOverlays(model: ModernHTTPInsightModel): Types.Overlays.Overlay[] {\n  return model.http1Requests.map(req => createOverlayForRequest(req)) ?? [];\n}\n"]}

package/models/trace/insights/RenderBlocking.d.ts

@@ -15,7 +15,7 @@ export declare const UIStrings: {
      */
     readonly renderBlockingRequest: "Request";
     /**
-     *@description Label used for a time duration.
+     * @description Label used for a time duration.
      */
     readonly duration: "Duration";
     /**

package/models/trace/insights/RenderBlocking.js

@@ -21,7 +21,7 @@ export const UIStrings = {
      */
     renderBlockingRequest: 'Request',
     /**
-     *@description Label used for a time duration.
+     * @description Label used for a time duration.
      */
     duration: 'Duration',
     /**