@paulirish/trace_engine 0.0.60 → 0.0.61

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

@@ -1 +1 @@
-{"version":3,"file":"DocumentLatency.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DocumentLatency.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors\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 Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {isRequestCompressed} from './Common.js';\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 a breakdown for how long it took to download the main document.\n   */\n  title: 'Document request latency',\n  /**\n   * @description Description of an insight that provides a breakdown for how long it took to download the main document.\n   */\n  description:\n      'Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.',\n  /**\n   * @description Text to tell the user that the document request does not have redirects.\n   */\n  passingRedirects: 'Avoids redirects',\n  /**\n   * @description Text to tell the user that the document request had redirects.\n   * @example {3} PH1\n   * @example {1000 ms} PH2\n   */\n  failedRedirects: 'Had redirects ({PH1} redirects, +{PH2})',\n  /**\n   * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.\n   * @example {600 ms} PH1\n   */\n  passingServerResponseTime: 'Server responds quickly (observed {PH1})',\n  /**\n   * @description Text to tell the user that the time starting the document request to when the server started responding is not acceptable.\n   * @example {601 ms} PH1\n   */\n  failedServerResponseTime: 'Server responded slowly (observed {PH1})',\n  /**\n   * @description Text to tell the user that text compression (like gzip) was applied.\n   */\n  passingTextCompression: 'Applies text compression',\n  /**\n   * @description Text to tell the user that text compression (like gzip) was not applied.\n   */\n  failedTextCompression: 'No compression applied',\n  /**\n   * @description Text for a label describing a network request event as having redirects.\n   */\n  redirectsLabel: 'Redirects',\n  /**\n   * @description Text for a label describing a network request event as taking too long to start delivery by the server.\n   */\n  serverResponseTimeLabel: 'Server response time',\n  /**\n   * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.\n   */\n  uncompressedDownload: 'Uncompressed download',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DocumentLatency.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\n// Due to the way that DevTools throttling works we cannot see if server response took less than ~570ms.\n// We set our failure threshold to 600ms to avoid those false positives but we want devs to shoot for 100ms.\nconst TOO_SLOW_THRESHOLD_MS = 600;\nconst TARGET_MS = 100;\n\n// Threshold for compression savings.\nconst IGNORE_THRESHOLD_IN_BYTES = 1400;\n\nexport function isDocumentLatencyInsight(x: InsightModel): x is DocumentLatencyInsightModel {\n  return x.insightKey === 'DocumentLatency';\n}\n\nexport type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {\n  data?: {\n    serverResponseTime: Types.Timing.Milli,\n    redirectDuration: Types.Timing.Milli,\n    uncompressedResponseBytes: number,\n    checklist: Checklist<'noRedirects'|'serverResponseIsFast'|'usesCompression'>,\n    documentRequest?: Types.Events.SyntheticNetworkRequest,\n  },\n}>;\n\nfunction getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.Milli|null {\n  // For technical reasons, Lightrider does not have `sendEnd` timing values. The\n  // closest we can get to the server response time is from a header that Lightrider\n  // sets.\n  // @ts-expect-error\n  const isLightrider = globalThis.isLightrider;\n  if (isLightrider) {\n    return request.args.data.lrServerResponseTime ?? null;\n  }\n\n  const timing = request.args.data.timing;\n  if (!timing) {\n    return null;\n  }\n\n  const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.serverResponseTime);\n  return Math.round(ms) as Types.Timing.Milli;\n}\n\nfunction getCompressionSavings(request: Types.Events.SyntheticNetworkRequest): number {\n  const isCompressed = isRequestCompressed(request);\n  if (isCompressed) {\n    return 0;\n  }\n\n  // We don't know how many bytes this asset used on the network, but we can guess it was\n  // roughly the size of the content gzipped.\n  // See https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer for specific CSS/Script examples\n  // See https://discuss.httparchive.org/t/file-size-and-compression-savings/145 for fallback multipliers\n  // See https://letstalkaboutwebperf.com/en/gzip-brotli-server-config/ for MIME types to compress\n  const originalSize = request.args.data.decodedBodyLength;\n  let estimatedSavings = 0;\n  switch (request.args.data.mimeType) {\n    case 'text/css':\n      // Stylesheets tend to compress extremely well.\n      estimatedSavings = Math.round(originalSize * 0.8);\n      break;\n    case 'text/html':\n    case 'text/javascript':\n      // Scripts and HTML compress fairly well too.\n      estimatedSavings = Math.round(originalSize * 0.67);\n      break;\n    case 'text/plain':\n    case 'text/xml':\n    case 'text/x-component':\n    case 'application/javascript':\n    case 'application/json':\n    case 'application/manifest+json':\n    case 'application/vnd.api+json':\n    case 'application/xml':\n    case 'application/xhtml+xml':\n    case 'application/rss+xml':\n    case 'application/atom+xml':\n    case 'application/vnd.ms-fontobject':\n    case 'application/x-font-ttf':\n    case 'application/x-font-opentype':\n    case 'application/x-font-truetype':\n    case 'image/svg+xml':\n    case 'image/x-icon':\n    case 'image/vnd.microsoft.icon':\n    case 'font/ttf':\n    case 'font/eot':\n    case 'font/otf':\n    case 'font/opentype':\n      // Use the average savings in HTTPArchive.\n      estimatedSavings = Math.round(originalSize * 0.5);\n      break;\n    default:  // Any other MIME types are likely already compressed.\n  }\n  // Check if the estimated savings are greater than the byte ignore threshold.\n  // Note that the estimated gzip savings are always more than 10%, so there is\n  // no percent threshold.\n  return estimatedSavings < IGNORE_THRESHOLD_IN_BYTES ? 0 : estimatedSavings;\n}\n\nfunction finalize(partialModel: PartialInsightModel<DocumentLatencyInsightModel>): DocumentLatencyInsightModel {\n  let hasFailure = false;\n  if (partialModel.data) {\n    hasFailure = !partialModel.data.checklist.usesCompression.value ||\n        !partialModel.data.checklist.serverResponseIsFast.value || !partialModel.data.checklist.noRedirects.value;\n  }\n\n  return {\n    insightKey: InsightKeys.DOCUMENT_LATENCY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.ALL,\n    state: hasFailure ? 'fail' : 'pass',\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    data: Handlers.Types.HandlerData, context: InsightSetContext): DocumentLatencyInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const millisToString = context.options.insightTimeFormatters?.milli ?? i18n.TimeUtilities.millisToString;\n\n  const documentRequest = data.NetworkRequests.byId.get(context.navigationId);\n  if (!documentRequest) {\n    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  const serverResponseTime = getServerResponseTime(documentRequest);\n  if (serverResponseTime === null) {\n    throw new Error('missing document request timing');\n  }\n\n  const serverResponseTooSlow = serverResponseTime > TOO_SLOW_THRESHOLD_MS;\n\n  let overallSavingsMs = 0;\n  if (serverResponseTime > TOO_SLOW_THRESHOLD_MS) {\n    overallSavingsMs = Math.max(serverResponseTime - TARGET_MS, 0);\n  }\n\n  const redirectDuration =\n      Math.round(documentRequest.args.data.syntheticData.redirectionDuration / 1000) as Types.Timing.Milli;\n  overallSavingsMs += redirectDuration;\n\n  const metricSavings = {\n    FCP: overallSavingsMs as Types.Timing.Milli,\n    LCP: overallSavingsMs as Types.Timing.Milli,\n  };\n\n  const uncompressedResponseBytes = getCompressionSavings(documentRequest);\n\n  const noRedirects = redirectDuration === 0;\n  const serverResponseIsFast = !serverResponseTooSlow;\n  const usesCompression = uncompressedResponseBytes === 0;\n\n  return finalize({\n    relatedEvents: [documentRequest],\n    data: {\n      serverResponseTime,\n      redirectDuration: Types.Timing.Milli(redirectDuration),\n      uncompressedResponseBytes,\n      documentRequest,\n      checklist: {\n        noRedirects: {\n          label: noRedirects ? i18nString(UIStrings.passingRedirects) : i18nString(UIStrings.failedRedirects, {\n            PH1: documentRequest.args.data.redirects.length,\n            PH2: millisToString(redirectDuration),\n          }),\n          value: noRedirects\n        },\n        serverResponseIsFast: {\n          label: serverResponseIsFast ?\n              i18nString(UIStrings.passingServerResponseTime, {PH1: millisToString(serverResponseTime)}) :\n              i18nString(UIStrings.failedServerResponseTime, {PH1: millisToString(serverResponseTime)}),\n          value: serverResponseIsFast\n        },\n        usesCompression: {\n          label: usesCompression ? i18nString(UIStrings.passingTextCompression) :\n                                   i18nString(UIStrings.failedTextCompression),\n          value: usesCompression\n        },\n      },\n    },\n    metricSavings,\n    wastedBytes: uncompressedResponseBytes,\n  });\n}\n\nexport function createOverlays(model: DocumentLatencyInsightModel): Types.Overlays.Overlay[] {\n  if (!model.data?.documentRequest) {\n    return [];\n  }\n\n  const overlays: Types.Overlays.Overlay[] = [];\n  const event = model.data.documentRequest;\n  const redirectDurationMicro = Helpers.Timing.milliToMicro(model.data.redirectDuration);\n\n  const sections = [];\n  if (model.data.redirectDuration) {\n    const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n        event.ts,\n        (event.ts + redirectDurationMicro) as Types.Timing.Micro,\n    );\n    sections.push({bounds, label: i18nString(UIStrings.redirectsLabel), showDuration: true});\n    overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});\n  }\n  if (!model.data.checklist.serverResponseIsFast.value) {\n    const serverResponseTimeMicro = Helpers.Timing.milliToMicro(model.data.serverResponseTime);\n    // NOTE: NetworkRequestHandlers never makes a synthetic network request event if `timing` is missing.\n    const sendEnd = event.args.data.timing?.sendEnd ?? Types.Timing.Milli(0);\n    const sendEndMicro = Helpers.Timing.milliToMicro(sendEnd);\n    const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n        sendEndMicro,\n        (sendEndMicro + serverResponseTimeMicro) as Types.Timing.Micro,\n    );\n    sections.push({bounds, label: i18nString(UIStrings.serverResponseTimeLabel), showDuration: true});\n  }\n  if (model.data.uncompressedResponseBytes) {\n    const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n        event.args.data.syntheticData.downloadStart,\n        (event.args.data.syntheticData.downloadStart + event.args.data.syntheticData.download) as Types.Timing.Micro,\n    );\n    sections.push({bounds, label: i18nString(UIStrings.uncompressedDownload), showDuration: true});\n    overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});\n  }\n\n  if (sections.length) {\n    overlays.push({\n      type: 'TIMESPAN_BREAKDOWN',\n      sections,\n      entry: model.data.documentRequest,\n      // Always render below because the document request is guaranteed to be\n      // the first request in the network track.\n      renderLocation: 'BELOW_EVENT',\n    });\n  }\n  overlays.push({\n    type: 'ENTRY_SELECTED',\n    entry: model.data.documentRequest,\n  });\n\n  return overlays;\n}\n"]}
+{"version":3,"file":"DocumentLatency.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DocumentLatency.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors\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 Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {isRequestCompressed} from './Common.js';\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 a breakdown for how long it took to download the main document.\n   */\n  title: 'Document request latency',\n  /**\n   * @description Description of an insight that provides a breakdown for how long it took to download the main document.\n   */\n  description:\n      'Your first network request is the most important. [Reduce its latency](https://developer.chrome.com/docs/performance/insights/document-latency) by avoiding redirects, ensuring a fast server response, and enabling text compression.',\n  /**\n   * @description Text to tell the user that the document request does not have redirects.\n   */\n  passingRedirects: 'Avoids redirects',\n  /**\n   * @description Text to tell the user that the document request had redirects.\n   * @example {3} PH1\n   * @example {1000 ms} PH2\n   */\n  failedRedirects: 'Had redirects ({PH1} redirects, +{PH2})',\n  /**\n   * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.\n   * @example {600 ms} PH1\n   */\n  passingServerResponseTime: 'Server responds quickly (observed {PH1})',\n  /**\n   * @description Text to tell the user that the time starting the document request to when the server started responding is not acceptable.\n   * @example {601 ms} PH1\n   */\n  failedServerResponseTime: 'Server responded slowly (observed {PH1})',\n  /**\n   * @description Text to tell the user that text compression (like gzip) was applied.\n   */\n  passingTextCompression: 'Applies text compression',\n  /**\n   * @description Text to tell the user that text compression (like gzip) was not applied.\n   */\n  failedTextCompression: 'No compression applied',\n  /**\n   * @description Text for a label describing a network request event as having redirects.\n   */\n  redirectsLabel: 'Redirects',\n  /**\n   * @description Text for a label describing a network request event as taking too long to start delivery by the server.\n   */\n  serverResponseTimeLabel: 'Server response time',\n  /**\n   * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.\n   */\n  uncompressedDownload: 'Uncompressed download',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DocumentLatency.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\n// Due to the way that DevTools throttling works we cannot see if server response took less than ~570ms.\n// We set our failure threshold to 600ms to avoid those false positives but we want devs to shoot for 100ms.\nconst TOO_SLOW_THRESHOLD_MS = 600;\nconst TARGET_MS = 100;\n\n// Threshold for compression savings.\nconst IGNORE_THRESHOLD_IN_BYTES = 1400;\n\nexport function isDocumentLatencyInsight(x: InsightModel): x is DocumentLatencyInsightModel {\n  return x.insightKey === 'DocumentLatency';\n}\n\nexport type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {\n  data?: {\n    serverResponseTime: Types.Timing.Milli,\n    redirectDuration: Types.Timing.Milli,\n    uncompressedResponseBytes: number,\n    checklist: Checklist<'noRedirects'|'serverResponseIsFast'|'usesCompression'>,\n    documentRequest?: Types.Events.SyntheticNetworkRequest,\n  },\n}>;\n\nfunction getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.Milli|null {\n  // For technical reasons, Lightrider does not have `sendEnd` timing values. The\n  // closest we can get to the server response time is from a header that Lightrider\n  // sets.\n  // @ts-expect-error\n  const isLightrider = globalThis.isLightrider;\n  if (isLightrider) {\n    return request.args.data.lrServerResponseTime ?? null;\n  }\n\n  const timing = request.args.data.timing;\n  if (!timing) {\n    return null;\n  }\n\n  const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.serverResponseTime);\n  return Math.round(ms) as Types.Timing.Milli;\n}\n\nfunction getCompressionSavings(request: Types.Events.SyntheticNetworkRequest): number {\n  const isCompressed = isRequestCompressed(request);\n  if (isCompressed) {\n    return 0;\n  }\n\n  // We don't know how many bytes this asset used on the network, but we can guess it was\n  // roughly the size of the content gzipped.\n  // See https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer for specific CSS/Script examples\n  // See https://discuss.httparchive.org/t/file-size-and-compression-savings/145 for fallback multipliers\n  // See https://letstalkaboutwebperf.com/en/gzip-brotli-server-config/ for MIME types to compress\n  const originalSize = request.args.data.decodedBodyLength;\n  let estimatedSavings = 0;\n  switch (request.args.data.mimeType) {\n    case 'text/css':\n      // Stylesheets tend to compress extremely well.\n      estimatedSavings = Math.round(originalSize * 0.8);\n      break;\n    case 'text/html':\n    case 'text/javascript':\n      // Scripts and HTML compress fairly well too.\n      estimatedSavings = Math.round(originalSize * 0.67);\n      break;\n    case 'text/plain':\n    case 'text/xml':\n    case 'text/x-component':\n    case 'application/javascript':\n    case 'application/json':\n    case 'application/manifest+json':\n    case 'application/vnd.api+json':\n    case 'application/xml':\n    case 'application/xhtml+xml':\n    case 'application/rss+xml':\n    case 'application/atom+xml':\n    case 'application/vnd.ms-fontobject':\n    case 'application/x-font-ttf':\n    case 'application/x-font-opentype':\n    case 'application/x-font-truetype':\n    case 'image/svg+xml':\n    case 'image/x-icon':\n    case 'image/vnd.microsoft.icon':\n    case 'font/ttf':\n    case 'font/eot':\n    case 'font/otf':\n    case 'font/opentype':\n      // Use the average savings in HTTPArchive.\n      estimatedSavings = Math.round(originalSize * 0.5);\n      break;\n    default:  // Any other MIME types are likely already compressed.\n  }\n  // Check if the estimated savings are greater than the byte ignore threshold.\n  // Note that the estimated gzip savings are always more than 10%, so there is\n  // no percent threshold.\n  return estimatedSavings < IGNORE_THRESHOLD_IN_BYTES ? 0 : estimatedSavings;\n}\n\nfunction finalize(partialModel: PartialInsightModel<DocumentLatencyInsightModel>): DocumentLatencyInsightModel {\n  let hasFailure = false;\n  if (partialModel.data) {\n    hasFailure = !partialModel.data.checklist.usesCompression.value ||\n        !partialModel.data.checklist.serverResponseIsFast.value || !partialModel.data.checklist.noRedirects.value;\n  }\n\n  return {\n    insightKey: InsightKeys.DOCUMENT_LATENCY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    docs: 'https://developer.chrome.com/docs/performance/insights/document-latency',\n    category: InsightCategory.ALL,\n    state: hasFailure ? 'fail' : 'pass',\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    data: Handlers.Types.HandlerData, context: InsightSetContext): DocumentLatencyInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const millisToString = context.options.insightTimeFormatters?.milli ?? i18n.TimeUtilities.millisToString;\n\n  const documentRequest = data.NetworkRequests.byId.get(context.navigationId);\n  if (!documentRequest) {\n    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  const serverResponseTime = getServerResponseTime(documentRequest);\n  if (serverResponseTime === null) {\n    throw new Error('missing document request timing');\n  }\n\n  const serverResponseTooSlow = serverResponseTime > TOO_SLOW_THRESHOLD_MS;\n\n  let overallSavingsMs = 0;\n  if (serverResponseTime > TOO_SLOW_THRESHOLD_MS) {\n    overallSavingsMs = Math.max(serverResponseTime - TARGET_MS, 0);\n  }\n\n  const redirectDuration =\n      Math.round(documentRequest.args.data.syntheticData.redirectionDuration / 1000) as Types.Timing.Milli;\n  overallSavingsMs += redirectDuration;\n\n  const metricSavings = {\n    FCP: overallSavingsMs as Types.Timing.Milli,\n    LCP: overallSavingsMs as Types.Timing.Milli,\n  };\n\n  const uncompressedResponseBytes = getCompressionSavings(documentRequest);\n\n  const noRedirects = redirectDuration === 0;\n  const serverResponseIsFast = !serverResponseTooSlow;\n  const usesCompression = uncompressedResponseBytes === 0;\n\n  return finalize({\n    relatedEvents: [documentRequest],\n    data: {\n      serverResponseTime,\n      redirectDuration: Types.Timing.Milli(redirectDuration),\n      uncompressedResponseBytes,\n      documentRequest,\n      checklist: {\n        noRedirects: {\n          label: noRedirects ? i18nString(UIStrings.passingRedirects) : i18nString(UIStrings.failedRedirects, {\n            PH1: documentRequest.args.data.redirects.length,\n            PH2: millisToString(redirectDuration),\n          }),\n          value: noRedirects\n        },\n        serverResponseIsFast: {\n          label: serverResponseIsFast ?\n              i18nString(UIStrings.passingServerResponseTime, {PH1: millisToString(serverResponseTime)}) :\n              i18nString(UIStrings.failedServerResponseTime, {PH1: millisToString(serverResponseTime)}),\n          value: serverResponseIsFast\n        },\n        usesCompression: {\n          label: usesCompression ? i18nString(UIStrings.passingTextCompression) :\n                                   i18nString(UIStrings.failedTextCompression),\n          value: usesCompression\n        },\n      },\n    },\n    metricSavings,\n    wastedBytes: uncompressedResponseBytes,\n  });\n}\n\nexport function createOverlays(model: DocumentLatencyInsightModel): Types.Overlays.Overlay[] {\n  if (!model.data?.documentRequest) {\n    return [];\n  }\n\n  const overlays: Types.Overlays.Overlay[] = [];\n  const event = model.data.documentRequest;\n  const redirectDurationMicro = Helpers.Timing.milliToMicro(model.data.redirectDuration);\n\n  const sections = [];\n  if (model.data.redirectDuration) {\n    const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n        event.ts,\n        (event.ts + redirectDurationMicro) as Types.Timing.Micro,\n    );\n    sections.push({bounds, label: i18nString(UIStrings.redirectsLabel), showDuration: true});\n    overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});\n  }\n  if (!model.data.checklist.serverResponseIsFast.value) {\n    const serverResponseTimeMicro = Helpers.Timing.milliToMicro(model.data.serverResponseTime);\n    // NOTE: NetworkRequestHandlers never makes a synthetic network request event if `timing` is missing.\n    const sendEnd = event.args.data.timing?.sendEnd ?? Types.Timing.Milli(0);\n    const sendEndMicro = Helpers.Timing.milliToMicro(sendEnd);\n    const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n        sendEndMicro,\n        (sendEndMicro + serverResponseTimeMicro) as Types.Timing.Micro,\n    );\n    sections.push({bounds, label: i18nString(UIStrings.serverResponseTimeLabel), showDuration: true});\n  }\n  if (model.data.uncompressedResponseBytes) {\n    const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n        event.args.data.syntheticData.downloadStart,\n        (event.args.data.syntheticData.downloadStart + event.args.data.syntheticData.download) as Types.Timing.Micro,\n    );\n    sections.push({bounds, label: i18nString(UIStrings.uncompressedDownload), showDuration: true});\n    overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});\n  }\n\n  if (sections.length) {\n    overlays.push({\n      type: 'TIMESPAN_BREAKDOWN',\n      sections,\n      entry: model.data.documentRequest,\n      // Always render below because the document request is guaranteed to be\n      // the first request in the network track.\n      renderLocation: 'BELOW_EVENT',\n    });\n  }\n  overlays.push({\n    type: 'ENTRY_SELECTED',\n    entry: model.data.documentRequest,\n  });\n\n  return overlays;\n}\n"]}

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

@@ -10,7 +10,7 @@ export declare const UIStrings: {
     /**
      * @description Description of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.
      */
-    readonly description: "Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.";
+    readonly description: "Remove large, [duplicate JavaScript modules](https://developer.chrome.com/docs/performance/insights/duplicated-javascript) from bundles to reduce unnecessary bytes consumed by network activity.";
     /** Label for a column in a data table; entries will be the locations of JavaScript or CSS code, e.g. the name of a Javascript package or module. */
     readonly columnSource: "Source";
     /** Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource. */

package/models/trace/insights/DuplicatedJavaScript.js

@@ -14,7 +14,7 @@ export const UIStrings = {
     /**
      * @description Description of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.
      */
-    description: 'Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.',
+    description: 'Remove large, [duplicate JavaScript modules](https://developer.chrome.com/docs/performance/insights/duplicated-javascript) from bundles to reduce unnecessary bytes consumed by network activity.',
     /** Label for a column in a data table; entries will be the locations of JavaScript or CSS code, e.g. the name of a Javascript package or module. */
     columnSource: 'Source',
     /** Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource. */
@@ -29,6 +29,7 @@ function finalize(partialModel) {
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/duplicated-javascript',
         category: InsightCategory.LCP,
         state: Boolean(partialModel.duplication.values().next().value) ? 'fail' : 'pass',
         relatedEvents: [...new Set(requests)],

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

@@ -1 +1 @@
-{"version":3,"file":"DuplicatedJavaScript.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DuplicatedJavaScript.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2025 The Chromium Authors\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 Extras from '../extras/extras.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\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.\n   */\n  title: 'Duplicated JavaScript',\n  /**\n   * @description Description of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.\n   */\n  description:\n      'Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.',\n  /** Label for a column in a data table; entries will be the locations of JavaScript or CSS code, e.g. the name of a Javascript package or module. */\n  columnSource: 'Source',\n  /** Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource. */\n  columnDuplicatedBytes: 'Duplicated bytes',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicatedJavaScript.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type DuplicatedJavaScriptInsightModel = InsightModel<typeof UIStrings, {\n  duplication: Extras.ScriptDuplication.ScriptDuplication,\n  duplicationGroupedByNodeModules: Extras.ScriptDuplication.ScriptDuplication,\n  scriptsWithDuplication: Handlers.ModelHandlers.Scripts.Script[],\n  scripts: Handlers.ModelHandlers.Scripts.Script[],\n  mainDocumentUrl: string,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<DuplicatedJavaScriptInsightModel>):\n    DuplicatedJavaScriptInsightModel {\n  const requests = partialModel.scriptsWithDuplication.map(script => script.request).filter(e => !!e);\n\n  return {\n    insightKey: InsightKeys.DUPLICATE_JAVASCRIPT,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: Boolean(partialModel.duplication.values().next().value) ? 'fail' : 'pass',\n    relatedEvents: [...new Set(requests)],\n    ...partialModel,\n  };\n}\n\nexport function isDuplicatedJavaScriptInsight(model: InsightModel): model is DuplicatedJavaScriptInsightModel {\n  return model.insightKey === InsightKeys.DUPLICATE_JAVASCRIPT;\n}\n\nexport function generateInsight(\n    data: Handlers.Types.HandlerData, context: InsightSetContext): DuplicatedJavaScriptInsightModel {\n  const scripts = data.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 compressionRatios = new Map<string, number>();\n  for (const script of scripts) {\n    if (script.request) {\n      compressionRatios.set(script.request.args.data.requestId, estimateCompressionRatioForScript(script));\n    }\n  }\n\n  const {duplication, duplicationGroupedByNodeModules} =\n      Extras.ScriptDuplication.computeScriptDuplication({scripts}, compressionRatios);\n  const scriptsWithDuplication = [...duplication.values().flatMap(data => data.duplicates.map(d => d.script))];\n\n  const wastedBytesByRequestId = new Map<string, number>();\n  for (const {duplicates} of duplication.values()) {\n    for (let i = 1; i < duplicates.length; i++) {\n      const sourceData = duplicates[i];\n      if (!sourceData.script.request) {\n        continue;\n      }\n\n      const transferSize = sourceData.attributedSize;\n      const requestId = sourceData.script.request.args.data.requestId;\n      wastedBytesByRequestId.set(requestId, (wastedBytesByRequestId.get(requestId) || 0) + transferSize);\n    }\n  }\n\n  return finalize({\n    duplication,\n    duplicationGroupedByNodeModules,\n    scriptsWithDuplication: [...new Set(scriptsWithDuplication)],\n    scripts,\n    mainDocumentUrl: context.navigation?.args.data?.url ?? data.Meta.mainFrameURL,\n    metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),\n    wastedBytes: wastedBytesByRequestId.values().reduce((acc, cur) => acc + cur, 0),\n  });\n}\n\nexport function createOverlays(model: DuplicatedJavaScriptInsightModel): Types.Overlays.Overlay[] {\n  return model.scriptsWithDuplication.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":"DuplicatedJavaScript.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DuplicatedJavaScript.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2025 The Chromium Authors\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 Extras from '../extras/extras.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\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.\n   */\n  title: 'Duplicated JavaScript',\n  /**\n   * @description Description of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.\n   */\n  description:\n      'Remove large, [duplicate JavaScript modules](https://developer.chrome.com/docs/performance/insights/duplicated-javascript) from bundles to reduce unnecessary bytes consumed by network activity.',\n  /** Label for a column in a data table; entries will be the locations of JavaScript or CSS code, e.g. the name of a Javascript package or module. */\n  columnSource: 'Source',\n  /** Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource. */\n  columnDuplicatedBytes: 'Duplicated bytes',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicatedJavaScript.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type DuplicatedJavaScriptInsightModel = InsightModel<typeof UIStrings, {\n  duplication: Extras.ScriptDuplication.ScriptDuplication,\n  duplicationGroupedByNodeModules: Extras.ScriptDuplication.ScriptDuplication,\n  scriptsWithDuplication: Handlers.ModelHandlers.Scripts.Script[],\n  scripts: Handlers.ModelHandlers.Scripts.Script[],\n  mainDocumentUrl: string,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<DuplicatedJavaScriptInsightModel>):\n    DuplicatedJavaScriptInsightModel {\n  const requests = partialModel.scriptsWithDuplication.map(script => script.request).filter(e => !!e);\n\n  return {\n    insightKey: InsightKeys.DUPLICATE_JAVASCRIPT,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    docs: 'https://developer.chrome.com/docs/performance/insights/duplicated-javascript',\n    category: InsightCategory.LCP,\n    state: Boolean(partialModel.duplication.values().next().value) ? 'fail' : 'pass',\n    relatedEvents: [...new Set(requests)],\n    ...partialModel,\n  };\n}\n\nexport function isDuplicatedJavaScriptInsight(model: InsightModel): model is DuplicatedJavaScriptInsightModel {\n  return model.insightKey === InsightKeys.DUPLICATE_JAVASCRIPT;\n}\n\nexport function generateInsight(\n    data: Handlers.Types.HandlerData, context: InsightSetContext): DuplicatedJavaScriptInsightModel {\n  const scripts = data.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 compressionRatios = new Map<string, number>();\n  for (const script of scripts) {\n    if (script.request) {\n      compressionRatios.set(script.request.args.data.requestId, estimateCompressionRatioForScript(script));\n    }\n  }\n\n  const {duplication, duplicationGroupedByNodeModules} =\n      Extras.ScriptDuplication.computeScriptDuplication({scripts}, compressionRatios);\n  const scriptsWithDuplication = [...duplication.values().flatMap(data => data.duplicates.map(d => d.script))];\n\n  const wastedBytesByRequestId = new Map<string, number>();\n  for (const {duplicates} of duplication.values()) {\n    for (let i = 1; i < duplicates.length; i++) {\n      const sourceData = duplicates[i];\n      if (!sourceData.script.request) {\n        continue;\n      }\n\n      const transferSize = sourceData.attributedSize;\n      const requestId = sourceData.script.request.args.data.requestId;\n      wastedBytesByRequestId.set(requestId, (wastedBytesByRequestId.get(requestId) || 0) + transferSize);\n    }\n  }\n\n  return finalize({\n    duplication,\n    duplicationGroupedByNodeModules,\n    scriptsWithDuplication: [...new Set(scriptsWithDuplication)],\n    scripts,\n    mainDocumentUrl: context.navigation?.args.data?.url ?? data.Meta.mainFrameURL,\n    metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),\n    wastedBytes: wastedBytesByRequestId.values().reduce((acc, cur) => acc + cur, 0),\n  });\n}\n\nexport function createOverlays(model: DuplicatedJavaScriptInsightModel): Types.Overlays.Overlay[] {\n  return model.scriptsWithDuplication.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/FontDisplay.d.ts

@@ -8,7 +8,7 @@ export declare const UIStrings: {
     /**
      * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.
      */
-    readonly description: "Consider setting [`font-display`](https://developer.chrome.com/blog/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).";
+    readonly description: "Consider setting [`font-display`](https://developer.chrome.com/docs/performance/insights/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).";
     /** Column for a font loaded by the page to render text. */
     readonly fontColumn: "Font";
     /** Column for the amount of time wasted. */

package/models/trace/insights/FontDisplay.js

@@ -12,7 +12,7 @@ export const UIStrings = {
     /**
      * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.
      */
-    description: 'Consider setting [`font-display`](https://developer.chrome.com/blog/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).',
+    description: 'Consider setting [`font-display`](https://developer.chrome.com/docs/performance/insights/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).',
     /** Column for a font loaded by the page to render text. */
     fontColumn: 'Font',
     /** Column for the amount of time wasted. */
@@ -26,6 +26,7 @@ function finalize(partialModel) {
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/font-display',
         category: InsightCategory.INP,
         state: partialModel.fonts.find(font => font.wastedTime > 0) ? 'fail' : 'pass',
         ...partialModel,

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

@@ -1 +1 @@
-{"version":3,"file":"FontDisplay.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/FontDisplay.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors\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 type * 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  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /** Title of an insight that provides details about the fonts used on the page, and the value of their `font-display` properties. */\n  title: 'Font display',\n  /**\n   * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.\n   */\n  description:\n      'Consider setting [`font-display`](https://developer.chrome.com/blog/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).',\n  /** Column for a font loaded by the page to render text. */\n  fontColumn: 'Font',\n  /** Column for the amount of time wasted. */\n  wastedTimeColumn: 'Wasted time',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/FontDisplay.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport interface RemoteFont {\n  name?: string;\n  request: Types.Events.SyntheticNetworkRequest;\n  display: string;\n  wastedTime: Types.Timing.Milli;\n}\n\nexport type FontDisplayInsightModel = InsightModel<typeof UIStrings, {\n  fonts: RemoteFont[],\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<FontDisplayInsightModel>): FontDisplayInsightModel {\n  return {\n    insightKey: InsightKeys.FONT_DISPLAY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.INP,\n    state: partialModel.fonts.find(font => font.wastedTime > 0) ? 'fail' : 'pass',\n    ...partialModel,\n  };\n}\n\nexport function isFontDisplayInsight(model: InsightModel): model is FontDisplayInsightModel {\n  return model.insightKey === InsightKeys.FONT_DISPLAY;\n}\n\nexport function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): FontDisplayInsightModel {\n  const fonts: RemoteFont[] = [];\n  for (const remoteFont of data.LayoutShifts.remoteFonts) {\n    const event = remoteFont.beginRemoteFontLoadEvent;\n    if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {\n      continue;\n    }\n\n    const requestId = `${event.pid}.${event.args.id}`;\n    const request = data.NetworkRequests.byId.get(requestId);\n    if (!request) {\n      continue;\n    }\n\n    if (!/^(block|fallback|auto)$/.test(remoteFont.display)) {\n      continue;\n    }\n\n    const wastedTimeMicro =\n        Types.Timing.Micro(request.args.data.syntheticData.finishTime - request.args.data.syntheticData.sendStartTime);\n    // TODO(crbug.com/352244504): should really end at the time of the next Commit trace event.\n    let wastedTime =\n        Platform.NumberUtilities.floor(Helpers.Timing.microToMilli(wastedTimeMicro), 1 / 5) as Types.Timing.Milli;\n    if (wastedTime === 0) {\n      continue;\n    }\n\n    // All browsers wait for no more than 3s.\n    wastedTime = Math.min(wastedTime, 3000) as Types.Timing.Milli;\n\n    fonts.push({\n      name: remoteFont.name,\n      request,\n      display: remoteFont.display,\n      wastedTime,\n    });\n  }\n\n  fonts.sort((a, b) => b.wastedTime - a.wastedTime);\n\n  const savings = Math.max(...fonts.map(f => f.wastedTime)) as Types.Timing.Milli;\n\n  return finalize({\n    relatedEvents: fonts.map(f => f.request),\n    fonts,\n    metricSavings: {FCP: savings},\n  });\n}\n\nexport function createOverlays(model: FontDisplayInsightModel): Types.Overlays.Overlay[] {\n  return model.fonts.map(font => ({\n                           type: 'ENTRY_OUTLINE',\n                           entry: font.request,\n                           outlineReason: font.wastedTime ? 'ERROR' : 'INFO',\n                         }));\n}\n"]}
+{"version":3,"file":"FontDisplay.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/FontDisplay.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors\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 type * 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  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /** Title of an insight that provides details about the fonts used on the page, and the value of their `font-display` properties. */\n  title: 'Font display',\n  /**\n   * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.\n   */\n  description:\n      'Consider setting [`font-display`](https://developer.chrome.com/docs/performance/insights/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).',\n  /** Column for a font loaded by the page to render text. */\n  fontColumn: 'Font',\n  /** Column for the amount of time wasted. */\n  wastedTimeColumn: 'Wasted time',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/FontDisplay.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport interface RemoteFont {\n  name?: string;\n  request: Types.Events.SyntheticNetworkRequest;\n  display: string;\n  wastedTime: Types.Timing.Milli;\n}\n\nexport type FontDisplayInsightModel = InsightModel<typeof UIStrings, {\n  fonts: RemoteFont[],\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<FontDisplayInsightModel>): FontDisplayInsightModel {\n  return {\n    insightKey: InsightKeys.FONT_DISPLAY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    docs: 'https://developer.chrome.com/docs/performance/insights/font-display',\n    category: InsightCategory.INP,\n    state: partialModel.fonts.find(font => font.wastedTime > 0) ? 'fail' : 'pass',\n    ...partialModel,\n  };\n}\n\nexport function isFontDisplayInsight(model: InsightModel): model is FontDisplayInsightModel {\n  return model.insightKey === InsightKeys.FONT_DISPLAY;\n}\n\nexport function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): FontDisplayInsightModel {\n  const fonts: RemoteFont[] = [];\n  for (const remoteFont of data.LayoutShifts.remoteFonts) {\n    const event = remoteFont.beginRemoteFontLoadEvent;\n    if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {\n      continue;\n    }\n\n    const requestId = `${event.pid}.${event.args.id}`;\n    const request = data.NetworkRequests.byId.get(requestId);\n    if (!request) {\n      continue;\n    }\n\n    if (!/^(block|fallback|auto)$/.test(remoteFont.display)) {\n      continue;\n    }\n\n    const wastedTimeMicro =\n        Types.Timing.Micro(request.args.data.syntheticData.finishTime - request.args.data.syntheticData.sendStartTime);\n    // TODO(crbug.com/352244504): should really end at the time of the next Commit trace event.\n    let wastedTime =\n        Platform.NumberUtilities.floor(Helpers.Timing.microToMilli(wastedTimeMicro), 1 / 5) as Types.Timing.Milli;\n    if (wastedTime === 0) {\n      continue;\n    }\n\n    // All browsers wait for no more than 3s.\n    wastedTime = Math.min(wastedTime, 3000) as Types.Timing.Milli;\n\n    fonts.push({\n      name: remoteFont.name,\n      request,\n      display: remoteFont.display,\n      wastedTime,\n    });\n  }\n\n  fonts.sort((a, b) => b.wastedTime - a.wastedTime);\n\n  const savings = Math.max(...fonts.map(f => f.wastedTime)) as Types.Timing.Milli;\n\n  return finalize({\n    relatedEvents: fonts.map(f => f.request),\n    fonts,\n    metricSavings: {FCP: savings},\n  });\n}\n\nexport function createOverlays(model: FontDisplayInsightModel): Types.Overlays.Overlay[] {\n  return model.fonts.map(font => ({\n                           type: 'ENTRY_OUTLINE',\n                           entry: font.request,\n                           outlineReason: font.wastedTime ? 'ERROR' : 'INFO',\n                         }));\n}\n"]}

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

@@ -11,7 +11,7 @@ export declare const UIStrings: {
     /**
      * @description Text to describe the forced reflow.
      */
-    readonly description: "A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and possible mitigations.";
+    readonly description: "A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developer.chrome.com/docs/performance/insights/forced-reflow) and possible mitigations.";
     /**
      * @description Title of a list to provide related stack trace data
      */

package/models/trace/insights/ForcedReflow.js

@@ -15,7 +15,7 @@ export const UIStrings = {
     /**
      * @description Text to describe the forced reflow.
      */
-    description: 'A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and possible mitigations.',
+    description: 'A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developer.chrome.com/docs/performance/insights/forced-reflow) and possible mitigations.',
     /**
      * @description Title of a list to provide related stack trace data
      */
@@ -100,6 +100,7 @@ function finalize(partialModel) {
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/forced-reflow',
         category: InsightCategory.ALL,
         state: partialModel.aggregatedBottomUpData.length !== 0 ? 'fail' : 'pass',
         ...partialModel,

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

@@ -1 +1 @@
-{"version":3,"file":"ForcedReflow.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/ForcedReflow.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors\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 type * as Protocol from '../../../generated/protocol.js';\nimport * as Extras from '../extras/extras.js';\nimport type * 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  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that provides details about Forced reflow.\n   */\n  title: 'Forced reflow',\n  /**\n   * @description Text to describe the forced reflow.\n   */\n  description:\n      'A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and possible mitigations.',\n  /**\n   * @description Title of a list to provide related stack trace data\n   */\n  relatedStackTrace: 'Stack trace',\n  /**\n   * @description Text to describe the top time-consuming function call\n   */\n  topTimeConsumingFunctionCall: 'Top function call',\n  /**\n   * @description Text to describe the total reflow time\n   */\n  totalReflowTime: 'Total reflow time',\n  /**\n   * @description Text to describe CPU processor tasks that could not be attributed to any specific source code.\n   */\n  unattributed: '[unattributed]',\n  /**\n   * @description Text for the name of anonymous functions\n   */\n  anonymous: '(anonymous)',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/ForcedReflow.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type ForcedReflowInsightModel = InsightModel<typeof UIStrings, {\n  topLevelFunctionCallData: ForcedReflowAggregatedData | undefined,\n  aggregatedBottomUpData: BottomUpCallStack[],\n}>;\n\nexport interface BottomUpCallStack {\n  /**\n   * `null` indicates that this data is for unattributed force reflows.\n   */\n  bottomUpData: Types.Events.CallFrame|Protocol.Runtime.CallFrame|null;\n  totalTime: number;\n  relatedEvents: Types.Events.Event[];\n}\n\nexport interface ForcedReflowAggregatedData {\n  topLevelFunctionCall: Types.Events.CallFrame|Protocol.Runtime.CallFrame;\n  totalReflowTime: number;\n  topLevelFunctionCallEvents: Types.Events.Event[];\n}\n\nfunction getCallFrameId(callFrame: Types.Events.CallFrame|Protocol.Runtime.CallFrame): string {\n  return callFrame.scriptId + ':' + callFrame.lineNumber + ':' + callFrame.columnNumber;\n}\n\nfunction getLargestTopLevelFunctionData(\n    forcedReflowEvents: Types.Events.Event[], traceParsedData: Handlers.Types.HandlerData): ForcedReflowAggregatedData|\n    undefined {\n  const entryToNodeMap = traceParsedData.Renderer.entryToNode;\n  const dataByTopLevelFunction = new Map<string, ForcedReflowAggregatedData>();\n  if (forcedReflowEvents.length === 0) {\n    return;\n  }\n\n  for (const event of forcedReflowEvents) {\n    // Gather the stack traces by searching in the tree\n    const traceNode = entryToNodeMap.get(event);\n    if (!traceNode) {\n      continue;\n    }\n\n    let node = traceNode.parent;\n    let topLevelFunctionCall;\n    let topLevelFunctionCallEvent: Types.Events.Event|undefined;\n    while (node) {\n      const eventData = node.entry;\n      if (Types.Events.isProfileCall(eventData)) {\n        topLevelFunctionCall = eventData.callFrame;\n        topLevelFunctionCallEvent = eventData;\n      } else {\n        // We have finished searching bottom up data\n        if (Types.Events.isFunctionCall(eventData) && eventData.args.data &&\n            Types.Events.objectIsCallFrame(eventData.args.data)) {\n          topLevelFunctionCall = eventData.args.data;\n          topLevelFunctionCallEvent = eventData;\n        }\n        break;\n      }\n      node = node.parent;\n    }\n\n    if (!topLevelFunctionCall || !topLevelFunctionCallEvent) {\n      continue;\n    }\n\n    const aggregatedDataId = getCallFrameId(topLevelFunctionCall);\n    const aggregatedData =\n        Platform.MapUtilities.getWithDefault(dataByTopLevelFunction, aggregatedDataId, () => ({\n                                                                                         topLevelFunctionCall,\n                                                                                         totalReflowTime: 0,\n                                                                                         topLevelFunctionCallEvents: [],\n                                                                                       }));\n    aggregatedData.totalReflowTime += (event.dur ?? 0);\n    aggregatedData.topLevelFunctionCallEvents.push(topLevelFunctionCallEvent);\n  }\n\n  let topTimeConsumingData: ForcedReflowAggregatedData|undefined = undefined;\n  dataByTopLevelFunction.forEach(data => {\n    if (!topTimeConsumingData || data.totalReflowTime > topTimeConsumingData.totalReflowTime) {\n      topTimeConsumingData = data;\n    }\n  });\n\n  return topTimeConsumingData;\n}\n\nfunction finalize(partialModel: PartialInsightModel<ForcedReflowInsightModel>): ForcedReflowInsightModel {\n  return {\n    insightKey: InsightKeys.FORCED_REFLOW,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.ALL,\n    state: partialModel.aggregatedBottomUpData.length !== 0 ? 'fail' : 'pass',\n    ...partialModel,\n  };\n}\n\nfunction getBottomCallFrameForEvent(event: Types.Events.Event, traceParsedData: Handlers.Types.HandlerData):\n    Types.Events.CallFrame|Protocol.Runtime.CallFrame|null {\n  const profileStackTrace = Extras.StackTraceForEvent.get(event, traceParsedData);\n  const eventTopCallFrame = Helpers.Trace.getStackTraceTopCallFrameInEventPayload(event);\n\n  return profileStackTrace?.callFrames[0] ?? eventTopCallFrame ?? null;\n}\n\nexport function isForcedReflowInsight(model: InsightModel): model is ForcedReflowInsightModel {\n  return model.insightKey === InsightKeys.FORCED_REFLOW;\n}\n\nexport function generateInsight(\n    traceParsedData: Handlers.Types.HandlerData, context: InsightSetContext): ForcedReflowInsightModel {\n  const isWithinContext = (event: Types.Events.Event): boolean => {\n    const frameId = Helpers.Trace.frameIDForEvent(event);\n    if (frameId !== context.frameId) {\n      return false;\n    }\n\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  };\n\n  const bottomUpDataMap = new Map<string, BottomUpCallStack>();\n  const events = traceParsedData.Warnings.perWarning.get('FORCED_REFLOW')?.filter(isWithinContext) ?? [];\n  for (const event of events) {\n    const bottomCallFrame = getBottomCallFrameForEvent(event, traceParsedData);\n    const bottomCallId = bottomCallFrame ? getCallFrameId(bottomCallFrame) : 'UNATTRIBUTED';\n    const bottomUpData =\n        Platform.MapUtilities.getWithDefault(bottomUpDataMap, bottomCallId, () => ({\n                                                                              bottomUpData: bottomCallFrame,\n                                                                              totalTime: 0,\n                                                                              relatedEvents: [],\n                                                                            }));\n    bottomUpData.totalTime += event.dur ?? 0;\n    bottomUpData.relatedEvents.push(event);\n  }\n\n  const topLevelFunctionCallData = getLargestTopLevelFunctionData(events, traceParsedData);\n\n  return finalize({\n    relatedEvents: events,\n    topLevelFunctionCallData,\n    aggregatedBottomUpData: [...bottomUpDataMap.values()],\n  });\n}\n\nexport function createOverlays(model: ForcedReflowInsightModel): Types.Overlays.Overlay[] {\n  if (!model.topLevelFunctionCallData) {\n    return [];\n  }\n\n  const allBottomUpEvents = [...model.aggregatedBottomUpData.values().flatMap(data => data.relatedEvents)];\n  return [\n    ...createOverlayForEvents(model.topLevelFunctionCallData.topLevelFunctionCallEvents, 'INFO'),\n    ...createOverlayForEvents(allBottomUpEvents),\n  ];\n}\n\nexport function createOverlayForEvents(\n    events: Types.Events.Event[], outlineReason: 'ERROR'|'INFO' = 'ERROR'): Types.Overlays.Overlay[] {\n  return events.map(e => ({\n                      type: 'ENTRY_OUTLINE',\n                      entry: e,\n                      outlineReason,\n                    }));\n}\n"]}
+{"version":3,"file":"ForcedReflow.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/ForcedReflow.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors\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 type * as Protocol from '../../../generated/protocol.js';\nimport * as Extras from '../extras/extras.js';\nimport type * 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  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that provides details about Forced reflow.\n   */\n  title: 'Forced reflow',\n  /**\n   * @description Text to describe the forced reflow.\n   */\n  description:\n      'A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developer.chrome.com/docs/performance/insights/forced-reflow) and possible mitigations.',\n  /**\n   * @description Title of a list to provide related stack trace data\n   */\n  relatedStackTrace: 'Stack trace',\n  /**\n   * @description Text to describe the top time-consuming function call\n   */\n  topTimeConsumingFunctionCall: 'Top function call',\n  /**\n   * @description Text to describe the total reflow time\n   */\n  totalReflowTime: 'Total reflow time',\n  /**\n   * @description Text to describe CPU processor tasks that could not be attributed to any specific source code.\n   */\n  unattributed: '[unattributed]',\n  /**\n   * @description Text for the name of anonymous functions\n   */\n  anonymous: '(anonymous)',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/ForcedReflow.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type ForcedReflowInsightModel = InsightModel<typeof UIStrings, {\n  topLevelFunctionCallData: ForcedReflowAggregatedData | undefined,\n  aggregatedBottomUpData: BottomUpCallStack[],\n}>;\n\nexport interface BottomUpCallStack {\n  /**\n   * `null` indicates that this data is for unattributed force reflows.\n   */\n  bottomUpData: Types.Events.CallFrame|Protocol.Runtime.CallFrame|null;\n  totalTime: number;\n  relatedEvents: Types.Events.Event[];\n}\n\nexport interface ForcedReflowAggregatedData {\n  topLevelFunctionCall: Types.Events.CallFrame|Protocol.Runtime.CallFrame;\n  totalReflowTime: number;\n  topLevelFunctionCallEvents: Types.Events.Event[];\n}\n\nfunction getCallFrameId(callFrame: Types.Events.CallFrame|Protocol.Runtime.CallFrame): string {\n  return callFrame.scriptId + ':' + callFrame.lineNumber + ':' + callFrame.columnNumber;\n}\n\nfunction getLargestTopLevelFunctionData(\n    forcedReflowEvents: Types.Events.Event[], traceParsedData: Handlers.Types.HandlerData): ForcedReflowAggregatedData|\n    undefined {\n  const entryToNodeMap = traceParsedData.Renderer.entryToNode;\n  const dataByTopLevelFunction = new Map<string, ForcedReflowAggregatedData>();\n  if (forcedReflowEvents.length === 0) {\n    return;\n  }\n\n  for (const event of forcedReflowEvents) {\n    // Gather the stack traces by searching in the tree\n    const traceNode = entryToNodeMap.get(event);\n    if (!traceNode) {\n      continue;\n    }\n\n    let node = traceNode.parent;\n    let topLevelFunctionCall;\n    let topLevelFunctionCallEvent: Types.Events.Event|undefined;\n    while (node) {\n      const eventData = node.entry;\n      if (Types.Events.isProfileCall(eventData)) {\n        topLevelFunctionCall = eventData.callFrame;\n        topLevelFunctionCallEvent = eventData;\n      } else {\n        // We have finished searching bottom up data\n        if (Types.Events.isFunctionCall(eventData) && eventData.args.data &&\n            Types.Events.objectIsCallFrame(eventData.args.data)) {\n          topLevelFunctionCall = eventData.args.data;\n          topLevelFunctionCallEvent = eventData;\n        }\n        break;\n      }\n      node = node.parent;\n    }\n\n    if (!topLevelFunctionCall || !topLevelFunctionCallEvent) {\n      continue;\n    }\n\n    const aggregatedDataId = getCallFrameId(topLevelFunctionCall);\n    const aggregatedData =\n        Platform.MapUtilities.getWithDefault(dataByTopLevelFunction, aggregatedDataId, () => ({\n                                                                                         topLevelFunctionCall,\n                                                                                         totalReflowTime: 0,\n                                                                                         topLevelFunctionCallEvents: [],\n                                                                                       }));\n    aggregatedData.totalReflowTime += (event.dur ?? 0);\n    aggregatedData.topLevelFunctionCallEvents.push(topLevelFunctionCallEvent);\n  }\n\n  let topTimeConsumingData: ForcedReflowAggregatedData|undefined = undefined;\n  dataByTopLevelFunction.forEach(data => {\n    if (!topTimeConsumingData || data.totalReflowTime > topTimeConsumingData.totalReflowTime) {\n      topTimeConsumingData = data;\n    }\n  });\n\n  return topTimeConsumingData;\n}\n\nfunction finalize(partialModel: PartialInsightModel<ForcedReflowInsightModel>): ForcedReflowInsightModel {\n  return {\n    insightKey: InsightKeys.FORCED_REFLOW,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    docs: 'https://developer.chrome.com/docs/performance/insights/forced-reflow',\n    category: InsightCategory.ALL,\n    state: partialModel.aggregatedBottomUpData.length !== 0 ? 'fail' : 'pass',\n    ...partialModel,\n  };\n}\n\nfunction getBottomCallFrameForEvent(event: Types.Events.Event, traceParsedData: Handlers.Types.HandlerData):\n    Types.Events.CallFrame|Protocol.Runtime.CallFrame|null {\n  const profileStackTrace = Extras.StackTraceForEvent.get(event, traceParsedData);\n  const eventTopCallFrame = Helpers.Trace.getStackTraceTopCallFrameInEventPayload(event);\n\n  return profileStackTrace?.callFrames[0] ?? eventTopCallFrame ?? null;\n}\n\nexport function isForcedReflowInsight(model: InsightModel): model is ForcedReflowInsightModel {\n  return model.insightKey === InsightKeys.FORCED_REFLOW;\n}\n\nexport function generateInsight(\n    traceParsedData: Handlers.Types.HandlerData, context: InsightSetContext): ForcedReflowInsightModel {\n  const isWithinContext = (event: Types.Events.Event): boolean => {\n    const frameId = Helpers.Trace.frameIDForEvent(event);\n    if (frameId !== context.frameId) {\n      return false;\n    }\n\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  };\n\n  const bottomUpDataMap = new Map<string, BottomUpCallStack>();\n  const events = traceParsedData.Warnings.perWarning.get('FORCED_REFLOW')?.filter(isWithinContext) ?? [];\n  for (const event of events) {\n    const bottomCallFrame = getBottomCallFrameForEvent(event, traceParsedData);\n    const bottomCallId = bottomCallFrame ? getCallFrameId(bottomCallFrame) : 'UNATTRIBUTED';\n    const bottomUpData =\n        Platform.MapUtilities.getWithDefault(bottomUpDataMap, bottomCallId, () => ({\n                                                                              bottomUpData: bottomCallFrame,\n                                                                              totalTime: 0,\n                                                                              relatedEvents: [],\n                                                                            }));\n    bottomUpData.totalTime += event.dur ?? 0;\n    bottomUpData.relatedEvents.push(event);\n  }\n\n  const topLevelFunctionCallData = getLargestTopLevelFunctionData(events, traceParsedData);\n\n  return finalize({\n    relatedEvents: events,\n    topLevelFunctionCallData,\n    aggregatedBottomUpData: [...bottomUpDataMap.values()],\n  });\n}\n\nexport function createOverlays(model: ForcedReflowInsightModel): Types.Overlays.Overlay[] {\n  if (!model.topLevelFunctionCallData) {\n    return [];\n  }\n\n  const allBottomUpEvents = [...model.aggregatedBottomUpData.values().flatMap(data => data.relatedEvents)];\n  return [\n    ...createOverlayForEvents(model.topLevelFunctionCallData.topLevelFunctionCallEvents, 'INFO'),\n    ...createOverlayForEvents(allBottomUpEvents),\n  ];\n}\n\nexport function createOverlayForEvents(\n    events: Types.Events.Event[], outlineReason: 'ERROR'|'INFO' = 'ERROR'): Types.Overlays.Overlay[] {\n  return events.map(e => ({\n                      type: 'ENTRY_OUTLINE',\n                      entry: e,\n                      outlineReason,\n                    }));\n}\n"]}

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

@@ -6,7 +6,7 @@ export declare const UIStrings: {
     /**
      * @description Text to tell the user about the longest user interaction.
      */
-    readonly description: "Start investigating with the longest subpart. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.";
+    readonly description: "Start investigating [how to improve INP](https://developer.chrome.com/docs/performance/insights/inp-breakdown) by looking at the longest subpart.";
     /**
      * @description Title for the performance insight "INP breakdown", which shows a breakdown of INP by subparts / sections.
      */

package/models/trace/insights/INPBreakdown.js

@@ -9,7 +9,7 @@ export const UIStrings = {
     /**
      * @description Text to tell the user about the longest user interaction.
      */
-    description: 'Start investigating with the longest subpart. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.',
+    description: 'Start investigating [how to improve INP](https://developer.chrome.com/docs/performance/insights/inp-breakdown) by looking at the longest subpart.',
     /**
      * @description Title for the performance insight "INP breakdown", which shows a breakdown of INP by subparts / sections.
      */
@@ -61,6 +61,7 @@ function finalize(partialModel) {
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/inp-breakdown',
         category: InsightCategory.INP,
         state,
         ...partialModel,

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

@@ -1 +1 @@
-{"version":3,"file":"INPBreakdown.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/INPBreakdown.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors\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 type {SyntheticInteractionPair} from '../types/TraceEvents.js';\nimport type * as Types from '../types/types.js';\n\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 Text to tell the user about the longest user interaction.\n   */\n  description:\n      'Start investigating with the longest subpart. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.',\n  /**\n   * @description Title for the performance insight \"INP breakdown\", which shows a breakdown of INP by subparts / sections.\n   */\n  title: 'INP breakdown',\n  /**\n   * @description Label used for the subpart/component/stage/section of a larger duration.\n   */\n  subpart: 'Subpart',\n  /**\n   * @description Label used for a time duration.\n   */\n  duration: 'Duration',\n\n  // TODO: these are repeated in InteractionBreakdown. Add a place for common strings?\n  /**\n   * @description Text shown next to the interaction event's input delay time in the detail view.\n   */\n  inputDelay: 'Input delay',\n  /**\n   * @description Text shown next to the interaction event's thread processing duration in the detail view.\n   */\n  processingDuration: 'Processing duration',\n  /**\n   * @description Text shown next to the interaction event's presentation delay time in the detail view.\n   */\n  presentationDelay: 'Presentation delay',\n  /**\n   * @description Text status indicating that no user interactions were detected.\n   */\n  noInteractions: 'No interactions detected',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/INPBreakdown.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type INPBreakdownInsightModel = InsightModel<typeof UIStrings, {\n  longestInteractionEvent?: SyntheticInteractionPair,\n  highPercentileInteractionEvent?: SyntheticInteractionPair,\n}>;\n\nexport function isINPBreakdownInsight(insight: InsightModel): insight is INPBreakdownInsightModel {\n  return insight.insightKey === InsightKeys.INP_BREAKDOWN;\n}\n\nfunction finalize(partialModel: PartialInsightModel<INPBreakdownInsightModel>): INPBreakdownInsightModel {\n  let state: INPBreakdownInsightModel['state'] = 'pass';\n  if (partialModel.longestInteractionEvent) {\n    const classification = Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(\n        partialModel.longestInteractionEvent.dur);\n    if (classification === Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD) {\n      state = 'informative';\n    } else {\n      state = 'fail';\n    }\n  }\n\n  return {\n    insightKey: InsightKeys.INP_BREAKDOWN,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.INP,\n    state,\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    data: Handlers.Types.HandlerData, context: InsightSetContext): INPBreakdownInsightModel {\n  const interactionEvents = data.UserInteractions.interactionEventsWithNoNesting.filter(event => {\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  });\n\n  if (!interactionEvents.length) {\n    // A valid result, when there is no user interaction.\n    return finalize({});\n  }\n\n  const longestByInteractionId = new Map<number, SyntheticInteractionPair>();\n  for (const event of interactionEvents) {\n    const key = event.interactionId;\n    const longest = longestByInteractionId.get(key);\n    if (!longest || event.dur > longest.dur) {\n      longestByInteractionId.set(key, event);\n    }\n  }\n  const normalizedInteractionEvents = [...longestByInteractionId.values()];\n  normalizedInteractionEvents.sort((a, b) => b.dur - a.dur);\n\n  // INP is the \"nearest-rank\"/inverted_cdf 98th percentile, except Chrome only\n  // keeps the 10 worst events around, so it can never be more than the 10th from\n  // last array element. To keep things simpler, sort desc and pick from front.\n  // See https://source.chromium.org/chromium/chromium/src/+/main:components/page_load_metrics/browser/responsiveness_metrics_normalization.cc;l=45-59;drc=cb0f9c8b559d9c7c3cb4ca94fc1118cc015d38ad\n  const highPercentileIndex = Math.min(9, Math.floor(normalizedInteractionEvents.length / 50));\n\n  return finalize({\n    relatedEvents: [normalizedInteractionEvents[0]],\n    longestInteractionEvent: normalizedInteractionEvents[0],\n    highPercentileInteractionEvent: normalizedInteractionEvents[highPercentileIndex],\n  });\n}\n\n/**\n * If `subpart` is -1, then all subparts are included. Otherwise it's just that index.\n **/\nexport function createOverlaysForSubpart(\n    event: Types.Events.SyntheticInteractionPair, subpartIndex = -1): Types.Overlays.Overlay[] {\n  const p1 = Helpers.Timing.traceWindowFromMicroSeconds(\n      event.ts,\n      (event.ts + event.inputDelay) as Types.Timing.Micro,\n  );\n  const p2 = Helpers.Timing.traceWindowFromMicroSeconds(\n      p1.max,\n      (p1.max + event.mainThreadHandling) as Types.Timing.Micro,\n  );\n  const p3 = Helpers.Timing.traceWindowFromMicroSeconds(\n      p2.max,\n      (p2.max + event.presentationDelay) as Types.Timing.Micro,\n  );\n  let sections = [\n    {bounds: p1, label: i18nString(UIStrings.inputDelay), showDuration: true},\n    {bounds: p2, label: i18nString(UIStrings.processingDuration), showDuration: true},\n    {bounds: p3, label: i18nString(UIStrings.presentationDelay), showDuration: true},\n  ];\n  if (subpartIndex !== -1) {\n    sections = [sections[subpartIndex]];\n  }\n\n  return [\n    {\n      type: 'TIMESPAN_BREAKDOWN',\n      sections,\n      renderLocation: 'BELOW_EVENT',\n      entry: event,\n    },\n  ];\n}\n\nexport function createOverlays(model: INPBreakdownInsightModel): Types.Overlays.Overlay[] {\n  const event = model.longestInteractionEvent;\n  if (!event) {\n    return [];\n  }\n\n  return createOverlaysForSubpart(event);\n}\n"]}
+{"version":3,"file":"INPBreakdown.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/INPBreakdown.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors\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 type {SyntheticInteractionPair} from '../types/TraceEvents.js';\nimport type * as Types from '../types/types.js';\n\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 Text to tell the user about the longest user interaction.\n   */\n  description:\n      'Start investigating [how to improve INP](https://developer.chrome.com/docs/performance/insights/inp-breakdown) by looking at the longest subpart.',\n  /**\n   * @description Title for the performance insight \"INP breakdown\", which shows a breakdown of INP by subparts / sections.\n   */\n  title: 'INP breakdown',\n  /**\n   * @description Label used for the subpart/component/stage/section of a larger duration.\n   */\n  subpart: 'Subpart',\n  /**\n   * @description Label used for a time duration.\n   */\n  duration: 'Duration',\n\n  // TODO: these are repeated in InteractionBreakdown. Add a place for common strings?\n  /**\n   * @description Text shown next to the interaction event's input delay time in the detail view.\n   */\n  inputDelay: 'Input delay',\n  /**\n   * @description Text shown next to the interaction event's thread processing duration in the detail view.\n   */\n  processingDuration: 'Processing duration',\n  /**\n   * @description Text shown next to the interaction event's presentation delay time in the detail view.\n   */\n  presentationDelay: 'Presentation delay',\n  /**\n   * @description Text status indicating that no user interactions were detected.\n   */\n  noInteractions: 'No interactions detected',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/INPBreakdown.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type INPBreakdownInsightModel = InsightModel<typeof UIStrings, {\n  longestInteractionEvent?: SyntheticInteractionPair,\n  highPercentileInteractionEvent?: SyntheticInteractionPair,\n}>;\n\nexport function isINPBreakdownInsight(insight: InsightModel): insight is INPBreakdownInsightModel {\n  return insight.insightKey === InsightKeys.INP_BREAKDOWN;\n}\n\nfunction finalize(partialModel: PartialInsightModel<INPBreakdownInsightModel>): INPBreakdownInsightModel {\n  let state: INPBreakdownInsightModel['state'] = 'pass';\n  if (partialModel.longestInteractionEvent) {\n    const classification = Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(\n        partialModel.longestInteractionEvent.dur);\n    if (classification === Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD) {\n      state = 'informative';\n    } else {\n      state = 'fail';\n    }\n  }\n\n  return {\n    insightKey: InsightKeys.INP_BREAKDOWN,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    docs: 'https://developer.chrome.com/docs/performance/insights/inp-breakdown',\n    category: InsightCategory.INP,\n    state,\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    data: Handlers.Types.HandlerData, context: InsightSetContext): INPBreakdownInsightModel {\n  const interactionEvents = data.UserInteractions.interactionEventsWithNoNesting.filter(event => {\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  });\n\n  if (!interactionEvents.length) {\n    // A valid result, when there is no user interaction.\n    return finalize({});\n  }\n\n  const longestByInteractionId = new Map<number, SyntheticInteractionPair>();\n  for (const event of interactionEvents) {\n    const key = event.interactionId;\n    const longest = longestByInteractionId.get(key);\n    if (!longest || event.dur > longest.dur) {\n      longestByInteractionId.set(key, event);\n    }\n  }\n  const normalizedInteractionEvents = [...longestByInteractionId.values()];\n  normalizedInteractionEvents.sort((a, b) => b.dur - a.dur);\n\n  // INP is the \"nearest-rank\"/inverted_cdf 98th percentile, except Chrome only\n  // keeps the 10 worst events around, so it can never be more than the 10th from\n  // last array element. To keep things simpler, sort desc and pick from front.\n  // See https://source.chromium.org/chromium/chromium/src/+/main:components/page_load_metrics/browser/responsiveness_metrics_normalization.cc;l=45-59;drc=cb0f9c8b559d9c7c3cb4ca94fc1118cc015d38ad\n  const highPercentileIndex = Math.min(9, Math.floor(normalizedInteractionEvents.length / 50));\n\n  return finalize({\n    relatedEvents: [normalizedInteractionEvents[0]],\n    longestInteractionEvent: normalizedInteractionEvents[0],\n    highPercentileInteractionEvent: normalizedInteractionEvents[highPercentileIndex],\n  });\n}\n\n/**\n * If `subpart` is -1, then all subparts are included. Otherwise it's just that index.\n **/\nexport function createOverlaysForSubpart(\n    event: Types.Events.SyntheticInteractionPair, subpartIndex = -1): Types.Overlays.Overlay[] {\n  const p1 = Helpers.Timing.traceWindowFromMicroSeconds(\n      event.ts,\n      (event.ts + event.inputDelay) as Types.Timing.Micro,\n  );\n  const p2 = Helpers.Timing.traceWindowFromMicroSeconds(\n      p1.max,\n      (p1.max + event.mainThreadHandling) as Types.Timing.Micro,\n  );\n  const p3 = Helpers.Timing.traceWindowFromMicroSeconds(\n      p2.max,\n      (p2.max + event.presentationDelay) as Types.Timing.Micro,\n  );\n  let sections = [\n    {bounds: p1, label: i18nString(UIStrings.inputDelay), showDuration: true},\n    {bounds: p2, label: i18nString(UIStrings.processingDuration), showDuration: true},\n    {bounds: p3, label: i18nString(UIStrings.presentationDelay), showDuration: true},\n  ];\n  if (subpartIndex !== -1) {\n    sections = [sections[subpartIndex]];\n  }\n\n  return [\n    {\n      type: 'TIMESPAN_BREAKDOWN',\n      sections,\n      renderLocation: 'BELOW_EVENT',\n      entry: event,\n    },\n  ];\n}\n\nexport function createOverlays(model: INPBreakdownInsightModel): Types.Overlays.Overlay[] {\n  const event = model.longestInteractionEvent;\n  if (!event) {\n    return [];\n  }\n\n  return createOverlaysForSubpart(event);\n}\n"]}

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

@@ -10,7 +10,7 @@ export declare const UIStrings: {
     /**
      * @description Description of an insight that recommends ways to reduce the size of images downloaded and used on the page.
      */
-    readonly description: "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/)";
+    readonly description: "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/performance/insights/image-delivery)";
     /**
      * @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.
      */

package/models/trace/insights/ImageDelivery.js

@@ -13,7 +13,7 @@ export const UIStrings = {
     /**
      * @description Description of an insight that recommends ways to reduce the size of images downloaded and used on the page.
      */
-    description: '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/)',
+    description: '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/performance/insights/image-delivery)',
     /**
      * @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.
      */
@@ -114,6 +114,7 @@ function finalize(partialModel) {
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/image-delivery',
         category: InsightCategory.LCP,
         state: partialModel.optimizableImages.length > 0 ? 'fail' : 'pass',
         ...partialModel,

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\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 isImageDeliveryInsight(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    data: Handlers.Types.HandlerData, 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 data.ImagePainting.paintEventToCorrectedDisplaySize.get(paintImage) ?? {\n    width: paintImage.args.data.width,\n    height: paintImage.args.data.height,\n  };\n}\n\nfunction getPixelCounts(data: Handlers.Types.HandlerData, paintImage: Types.Events.PaintImage):\n    {displayedPixels: number, filePixels: number} {\n  const {width, height} = getDisplayedSize(data, paintImage);\n  return {\n    filePixels: paintImage.args.data.srcWidth * paintImage.args.data.srcHeight,\n    displayedPixels: width * height,\n  };\n}\n\nexport function generateInsight(\n    data: Handlers.Types.HandlerData, context: InsightSetContext): ImageDeliveryInsightModel {\n  const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);\n\n  const contextRequests = data.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 = data.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(data, prev).displayedPixels;\n      const currPixels = getPixelCounts(data, curr).displayedPixels;\n      return prevPixels > currPixels ? prev : curr;\n    });\n\n    const {\n      filePixels: imageFilePixels,\n      displayedPixels: largestImageDisplayPixels,\n    } = getPixelCounts(data, 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(data, 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":"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","sourcesContent":["// Copyright 2024 The Chromium Authors\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/performance/insights/image-delivery)',\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 isImageDeliveryInsight(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    docs: 'https://developer.chrome.com/docs/performance/insights/image-delivery',\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    data: Handlers.Types.HandlerData, 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 data.ImagePainting.paintEventToCorrectedDisplaySize.get(paintImage) ?? {\n    width: paintImage.args.data.width,\n    height: paintImage.args.data.height,\n  };\n}\n\nfunction getPixelCounts(data: Handlers.Types.HandlerData, paintImage: Types.Events.PaintImage):\n    {displayedPixels: number, filePixels: number} {\n  const {width, height} = getDisplayedSize(data, paintImage);\n  return {\n    filePixels: paintImage.args.data.srcWidth * paintImage.args.data.srcHeight,\n    displayedPixels: width * height,\n  };\n}\n\nexport function generateInsight(\n    data: Handlers.Types.HandlerData, context: InsightSetContext): ImageDeliveryInsightModel {\n  const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);\n\n  const contextRequests = data.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 = data.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(data, prev).displayedPixels;\n      const currPixels = getPixelCounts(data, curr).displayedPixels;\n      return prevPixels > currPixels ? prev : curr;\n    });\n\n    const {\n      filePixels: imageFilePixels,\n      displayedPixels: largestImageDisplayPixels,\n    } = getPixelCounts(data, 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(data, 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"]}