@paulirish/trace_engine 0.0.55 → 0.0.57

package/models/trace/insights/ModernHTTP.js

@@ -26,10 +26,13 @@ export const UIStrings = {
     /**
      * @description Text explaining that there were not requests that were slowed down by using HTTP/1.1. "HTTP/1.1" should not be translated.
      */
-    noOldProtocolRequests: 'No requests used HTTP/1.1'
+    noOldProtocolRequests: 'No requests used HTTP/1.1, or its current use of HTTP/1.1 does not present a significant optimization opportunity. HTTP/1.1 requests are only flagged if six or more static assets originate from the same origin, and they are not served from a local development environment or a third-party source.'
 };
 // const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ModernHTTP.ts', UIStrings);
 export const i18nString = (i18nId, values) => ({i18nId, values}); // i18n.i18n.getLocalizedString.bind(undefined, str_);
+export function isModernHTTP(model) {
+    return model.insightKey === InsightKeys.MODERN_HTTP;
+}
 /**
  * Determines whether a network request is a "static resource" that would benefit from H2 multiplexing.
  * XHRs, tracking pixels, etc generally don't benefit as much because they aren't requested en-masse
@@ -75,8 +78,8 @@ function isMultiplexableStaticAsset(request, entityMappings, firstPartyEntity) {
  * [2] https://www.twilio.com/blog/2017/10/http2-issues.html
  * [3] https://www.cachefly.com/http-2-is-not-a-magic-bullet/
  */
-export function determineNonHttp2Resources(requests, entityMappings, firstPartyEntity) {
-    const nonHttp2Resources = [];
+export function determineHttp1Requests(requests, entityMappings, firstPartyEntity) {
+    const http1Requests = [];
     const groupedByOrigin = new Map();
     for (const record of requests) {
         const url = new URL(record.args.data.url);
@@ -112,9 +115,9 @@ export function determineNonHttp2Resources(requests, entityMappings, firstPartyE
             continue;
         }
         seenURLs.add(request.args.data.url);
-        nonHttp2Resources.push(request);
+        http1Requests.push(request);
     }
-    return nonHttp2Resources;
+    return http1Requests;
 }
 /**
  * Computes the estimated effect of all results being converted to http/2 on the provided graph.
@@ -148,11 +151,11 @@ function computeWasteWithGraph(urlsToChange, graph, simulator) {
     const savings = simulationBefore.timeInMs - simulationAfter.timeInMs;
     return Platform.NumberUtilities.floor(savings, 1 / 10);
 }
-function computeMetricSavings(nonHttp2Requests, context) {
+function computeMetricSavings(http1Requests, context) {
     if (!context.navigation || !context.lantern) {
         return;
     }
-    const urlsToChange = new Set(nonHttp2Requests.map(r => r.args.data.url));
+    const urlsToChange = new Set(http1Requests.map(r => r.args.data.url));
     const fcpGraph = context.lantern.metrics.firstContentfulPaint.optimisticGraph;
     const lcpGraph = context.lantern.metrics.largestContentfulPaint.optimisticGraph;
     return {
@@ -162,14 +165,14 @@ function computeMetricSavings(nonHttp2Requests, context) {
 }
 function finalize(partialModel) {
     return {
-        insightKey: InsightKeys.IMAGE_DELIVERY,
+        insightKey: InsightKeys.MODERN_HTTP,
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
         category: InsightCategory.LCP,
-        state: partialModel.requests.length > 0 ? 'fail' : 'pass',
+        state: partialModel.http1Requests.length > 0 ? 'fail' : 'pass',
         ...partialModel,
-        relatedEvents: partialModel.requests,
+        relatedEvents: partialModel.http1Requests,
     };
 }
 export function generateInsight(parsedTrace, context) {
@@ -178,10 +181,20 @@ export function generateInsight(parsedTrace, context) {
     const entityMappings = parsedTrace.NetworkRequests.entityMappings;
     const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;
     const firstPartyEntity = Handlers.Helpers.getEntityForUrl(firstPartyUrl, entityMappings.createdEntityCache);
-    const nonHttp2Requests = determineNonHttp2Resources(contextRequests, entityMappings, firstPartyEntity ?? null);
+    const http1Requests = determineHttp1Requests(contextRequests, entityMappings, firstPartyEntity ?? null);
     return finalize({
-        requests: nonHttp2Requests,
-        metricSavings: computeMetricSavings(nonHttp2Requests, context),
+        http1Requests,
+        metricSavings: computeMetricSavings(http1Requests, context),
     });
 }
+export function createOverlayForRequest(request) {
+    return {
+        type: 'ENTRY_OUTLINE',
+        entry: request,
+        outlineReason: 'ERROR',
+    };
+}
+export function createOverlays(model) {
+    return model.http1Requests.map(req => createOverlayForRequest(req)) ?? [];
+}
 //# sourceMappingURL=ModernHTTP.js.map

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

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

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

@@ -42,15 +42,15 @@ export declare const UIStrings: {
      */
     readonly noPreconnectOrigins: "no origins were preconnected";
     /**
-     * @description A warning message that is shown when found more than 4 preconnected links
+     * @description A warning message that is shown when found more than 4 preconnected links. "preconnect" should not be translated.
      */
     readonly tooManyPreconnectLinksWarning: "More than 4 `preconnect` connections were found. These should be used sparingly and only to the most important origins.";
     /**
-     * @description A warning message that is shown when the user added preconnect for some unnecessary origins.
+     * @description A warning message that is shown when the user added preconnect for some unnecessary origins. "preconnect" should not be translated.
      */
     readonly unusedWarning: "Unused preconnect. Only use `preconnect` for origins that the page is likely to request.";
     /**
-     * @description A warning message that is shown when the user forget to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preconnect links.
+     * @description A warning message that is shown when the user forget to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preconnect links. "preconnect" should not be translated.
      * */
     readonly crossoriginWarning: "Unused preconnect. Check that the `crossorigin` attribute is used properly.";
     /**
@@ -66,7 +66,7 @@ export declare const UIStrings: {
      */
     readonly estSavingTableTitle: "Preconnect candidates";
     /**
-     * @description Description of the table that recommends preconnecting to the origins to save time.
+     * @description Description of the table that recommends preconnecting to the origins to save time. "preconnect" should not be translated.
      */
     readonly estSavingTableDescription: "Add [preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) hints to your most important origins, but try to use no more than 4.";
     /**
@@ -129,6 +129,7 @@ export declare function handleLinkResponseHeader(linkHeaderValue: string): Array
 export declare function generatePreconnectedOrigins(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContextWithNavigation, contextRequests: Types.Events.SyntheticNetworkRequest[], preconnectCandidates: PreconnectCandidate[]): PreconnectedOrigin[];
 export declare function generatePreconnectCandidates(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContextWithNavigation, contextRequests: Types.Events.SyntheticNetworkRequest[]): PreconnectCandidate[];
 export declare function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): NetworkDependencyTreeInsightModel;
+export declare function createOverlays(model: NetworkDependencyTreeInsightModel): Types.Overlays.Overlay[];
 /**
  * http://tools.ietf.org/html/rfc3986#section-5.2.4
  */

package/models/trace/insights/NetworkDependencyTree.js

@@ -45,15 +45,15 @@ export const UIStrings = {
      */
     noPreconnectOrigins: 'no origins were preconnected',
     /**
-     * @description A warning message that is shown when found more than 4 preconnected links
+     * @description A warning message that is shown when found more than 4 preconnected links. "preconnect" should not be translated.
      */
     tooManyPreconnectLinksWarning: 'More than 4 `preconnect` connections were found. These should be used sparingly and only to the most important origins.',
     /**
-     * @description A warning message that is shown when the user added preconnect for some unnecessary origins.
+     * @description A warning message that is shown when the user added preconnect for some unnecessary origins. "preconnect" should not be translated.
      */
     unusedWarning: 'Unused preconnect. Only use `preconnect` for origins that the page is likely to request.',
     /**
-     * @description A warning message that is shown when the user forget to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preconnect links.
+     * @description A warning message that is shown when the user forget to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preconnect links. "preconnect" should not be translated.
      * */
     crossoriginWarning: 'Unused preconnect. Check that the `crossorigin` attribute is used properly.',
     /**
@@ -69,7 +69,7 @@ export const UIStrings = {
      */
     estSavingTableTitle: 'Preconnect candidates',
     /**
-     * @description Description of the table that recommends preconnecting to the origins to save time.
+     * @description Description of the table that recommends preconnecting to the origins to save time. "preconnect" should not be translated.
      */
     estSavingTableDescription: 'Add [preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) hints to your most important origins, but try to use no more than 4.',
     /**
@@ -313,12 +313,21 @@ export function handleLinkResponseHeader(linkHeaderValue) {
         return [];
     }
     const preconnectedOrigins = [];
-    // const headerTextParts = linkHeaderValue.split(',');
     for (let i = 0; i < linkHeaderValue.length;) {
         const firstUrlEnd = linkHeaderValue.indexOf('>', i);
+        if (firstUrlEnd === -1) {
+            break;
+        }
         const commaIndex = linkHeaderValue.indexOf(',', firstUrlEnd);
         const partEnd = commaIndex !== -1 ? commaIndex : linkHeaderValue.length;
         const part = linkHeaderValue.substring(i, partEnd);
+        // This shouldn't be necessary, but we had a bug that created an infinite loop so
+        // let's guard against that.
+        // See crbug.com/431239629
+        if (partEnd + 1 <= i) {
+            console.warn('unexpected infinite loop, bailing');
+            break;
+        }
         i = partEnd + 1;
         const preconnectedOrigin = handleLinkResponseHeaderPart(part.trim());
         if (preconnectedOrigin) {
@@ -344,7 +353,7 @@ export function generatePreconnectedOrigins(parsedTrace, context, contextRequest
             source: 'DOM',
         });
     }
-    const documentRequest = parsedTrace.NetworkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);
+    const documentRequest = parsedTrace.NetworkRequests.byId.get(context.navigationId);
     documentRequest?.args.data.responseHeaders?.forEach(header => {
         if (header.name.toLowerCase() === 'link') {
             const preconnectedOriginsFromResponseHeader = handleLinkResponseHeader(header.value); // , documentRequest);
@@ -431,8 +440,8 @@ export function generatePreconnectCandidates(parsedTrace, context, contextReques
     if (!context.lantern) {
         return [];
     }
-    const mainResource = contextRequests.find(request => request.args.data.requestId === context.navigationId);
-    if (!mainResource) {
+    const documentRequest = parsedTrace.NetworkRequests.byId.get(context.navigationId);
+    if (!documentRequest) {
         return [];
     }
     const { rtt, additionalRttByOrigin } = context.lantern.simulator.getOptions();
@@ -450,11 +459,11 @@ export function generatePreconnectCandidates(parsedTrace, context, contextReques
             fcpGraphURLs.add(node.request.url);
         }
     });
-    const origins = candidateRequestsByOrigin(parsedTrace, mainResource, contextRequests, lcpGraphURLs);
+    const groupedOrigins = candidateRequestsByOrigin(parsedTrace, documentRequest, contextRequests, lcpGraphURLs);
     let maxWastedLcp = Types.Timing.Milli(0);
     let maxWastedFcp = Types.Timing.Milli(0);
     let preconnectCandidates = [];
-    origins.forEach(requests => {
+    groupedOrigins.forEach(requests => {
         const firstRequestOfOrigin = requests[0];
         // Skip the origin if we don't have timing information
         if (!firstRequestOfOrigin.args.data.timing) {
@@ -471,7 +480,8 @@ export function generatePreconnectCandidates(parsedTrace, context, contextReques
         if (firstRequestOfOriginParsedURL.scheme === 'https') {
             connectionTime = Types.Timing.Milli(connectionTime * 2);
         }
-        const timeBetweenMainResourceAndDnsStart = Types.Timing.Micro(firstRequestOfOrigin.args.data.syntheticData.sendStartTime - mainResource.args.data.syntheticData.finishTime +
+        const timeBetweenMainResourceAndDnsStart = Types.Timing.Micro(firstRequestOfOrigin.args.data.syntheticData.sendStartTime -
+            documentRequest.args.data.syntheticData.finishTime +
             Helpers.Timing.milliToMicro(firstRequestOfOrigin.args.data.timing.dnsStart));
         const wastedMs = Math.min(connectionTime, Helpers.Timing.microToMilli(timeBetweenMainResourceAndDnsStart));
         if (wastedMs < IGNORE_THRESHOLD_IN_MILLISECONDS) {
@@ -513,6 +523,21 @@ export function generateInsight(parsedTrace, context) {
         preconnectCandidates,
     });
 }
+export function createOverlays(model) {
+    function walk(nodes, overlays) {
+        nodes.forEach(node => {
+            overlays.push({
+                type: 'ENTRY_OUTLINE',
+                entry: node.request,
+                outlineReason: 'ERROR',
+            });
+            walk(node.children, overlays);
+        });
+    }
+    const overlays = [];
+    walk(model.rootNodes, overlays);
+    return overlays;
+}
 // the rest of this file is copied from core/common/common.js, which can't be bundled right now.
 /**
  * http://tools.ietf.org/html/rfc3986#section-5.2.4