@paulirish/trace_engine 0.0.55 → 0.0.56

package/models/trace/insights/{LCPPhases.js → LCPBreakdown.js}

@@ -8,40 +8,40 @@ import * as Types from '../types/types.js';
 import { InsightCategory, InsightKeys, InsightWarning, } from './types.js';
 export const UIStrings = {
     /**
-     *@description Title of an insight that provides details about the LCP metric, broken down by phases / parts.
+     *@description Title of an insight that provides details about the LCP metric, broken down by parts.
      */
-    title: 'LCP by phase',
+    title: 'LCP breakdown',
     /**
-     * @description Description of a DevTools insight that presents a breakdown for the LCP metric by phases.
+     * @description Description of a DevTools insight that presents a breakdown for the LCP metric by subparts.
      * This is displayed after a user expands the section to see more. No character length limits.
      */
-    description: 'Each [phase has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',
+    description: 'Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',
     /**
-     *@description Time to first byte title for the Largest Contentful Paint's phases timespan breakdown.
+     *@description Time to first byte title for the Largest Contentful Paint's subparts timespan breakdown.
      */
     timeToFirstByte: 'Time to first byte',
     /**
-     *@description Resource load delay title for the Largest Contentful Paint phases timespan breakdown.
+     *@description Resource load delay title for the Largest Contentful Paint subparts timespan breakdown.
      */
     resourceLoadDelay: 'Resource load delay',
     /**
-     *@description Resource load duration title for the Largest Contentful Paint phases timespan breakdown.
+     *@description Resource load duration title for the Largest Contentful Paint subparts timespan breakdown.
      */
     resourceLoadDuration: 'Resource load duration',
     /**
-     *@description Element render delay title for the Largest Contentful Paint phases timespan breakdown.
+     *@description Element render delay title for the Largest Contentful Paint subparts timespan breakdown.
      */
     elementRenderDelay: 'Element render delay',
     /**
-     *@description Label used for the phase/component/stage/section of a larger duration.
+     *@description Label used for the subpart (section) of a larger duration.
      */
-    phase: 'Phase',
+    subpart: 'Subpart',
     /**
-     * @description Label used for the duration a single phase/component/stage/section takes up of a larger duration.
+     * @description Label used for the duration a single subpart (section) takes up of a larger duration.
      */
     duration: 'Duration',
     /**
-     * @description Label used for the duration a single phase/component/stage/section takes up of a larger duration. The value will be the 75th percentile of aggregate data. "Field" means that the data was collected from real users in the field as opposed to the developers local environment. "Field" is synonymous with "Real user data".
+     * @description Label used for the duration a single subpart (section) takes up of a larger duration. The value will be the 75th percentile of aggregate data. "Field" means that the data was collected from real users in the field as opposed to the developers local environment. "Field" is synonymous with "Real user data".
      */
     fieldDuration: 'Field p75',
     /**
@@ -49,50 +49,69 @@ export const UIStrings = {
      */
     noLcp: 'No LCP detected',
 };
-// const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPPhases.ts', UIStrings);
+// const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPBreakdown.ts', UIStrings);
 export const i18nString = (i18nId, values) => ({i18nId, values}); // i18n.i18n.getLocalizedString.bind(undefined, str_);
-export function isLCPPhases(model) {
-    return model.insightKey === 'LCPPhases';
+export function isLCPBreakdown(model) {
+    return model.insightKey === 'LCPBreakdown';
 }
 function anyValuesNaN(...values) {
     return values.some(v => Number.isNaN(v));
 }
 /**
- * Calculates the 4 phases of an LCP and the timings of each.
+ * Calculates the 2–4 subparts of an LCP as bounds.
  * Will return `null` if any required values were missing. We don't ever expect
  * them to be missing on newer traces, but old trace files may lack some of the
  * data we rely on, so we want to handle that case.
  */
-function breakdownPhases(nav, docRequest, lcpMs, lcpRequest) {
+function determineSubparts(nav, docRequest, lcpEvent, lcpRequest) {
     const docReqTiming = docRequest.args.data.timing;
     if (!docReqTiming) {
         throw new Error('no timing for document request');
     }
-    const firstDocByteTs = Helpers.Timing.secondsToMicro(docReqTiming.requestTime) +
-        Helpers.Timing.milliToMicro(docReqTiming.receiveHeadersStart);
-    const firstDocByteTiming = Types.Timing.Micro(firstDocByteTs - nav.ts);
-    const ttfb = Helpers.Timing.microToMilli(firstDocByteTiming);
-    let renderDelay = Types.Timing.Milli(lcpMs - ttfb);
+    const firstDocByteTs = Types.Timing.Micro(Helpers.Timing.secondsToMicro(docReqTiming.requestTime) +
+        Helpers.Timing.milliToMicro(docReqTiming.receiveHeadersStart));
+    const ttfb = Helpers.Timing.traceWindowFromMicroSeconds(nav.ts, firstDocByteTs);
+    ttfb.label = i18nString(UIStrings.timeToFirstByte);
+    let renderDelay = Helpers.Timing.traceWindowFromMicroSeconds(ttfb.max, lcpEvent.ts);
+    renderDelay.label = i18nString(UIStrings.elementRenderDelay);
+    // If the LCP is text, we don't have a request, so just 2 subparts.
     if (!lcpRequest) {
-        if (anyValuesNaN(ttfb, renderDelay)) {
+        /** Text LCP. 2 subparts, thus 3 timestamps
+         *
+         *       |          ttfb           |             renderDelay              |
+         *                                                                        ^ lcpEvent.ts
+         *                                 ^ firstDocByteTs
+         *       ^ navStartTs
+         */
+        if (anyValuesNaN(ttfb.range, renderDelay.range)) {
             return null;
         }
         return { ttfb, renderDelay };
     }
-    const lcpStartTs = Types.Timing.Micro(lcpRequest.ts - nav.ts);
-    const requestStart = Helpers.Timing.microToMilli(lcpStartTs);
-    const lcpReqEndTs = Types.Timing.Micro(lcpRequest.args.data.syntheticData.finishTime - nav.ts);
-    const requestEnd = Helpers.Timing.microToMilli(lcpReqEndTs);
-    const loadDelay = Types.Timing.Milli(requestStart - ttfb);
-    const loadTime = Types.Timing.Milli(requestEnd - requestStart);
-    renderDelay = Types.Timing.Milli(lcpMs - requestEnd);
-    if (anyValuesNaN(ttfb, loadDelay, loadTime, renderDelay)) {
+    /** Image LCP. 4 subparts means 5 timestamps
+     *
+     *       |  ttfb   |    loadDelay     |     loadTime    |    renderDelay    |
+     *                                                                          ^ lcpEvent.ts
+     *                                                      ^ lcpReqEndTs
+     *                                    ^ lcpStartTs
+     *                 ^ ttfbTs
+     *       ^ navStartTs
+     */
+    const lcpStartTs = lcpRequest.ts;
+    const lcpReqEndTs = lcpRequest.args.data.syntheticData.finishTime;
+    const loadDelay = Helpers.Timing.traceWindowFromMicroSeconds(ttfb.max, lcpStartTs);
+    const loadDuration = Helpers.Timing.traceWindowFromMicroSeconds(lcpStartTs, lcpReqEndTs);
+    renderDelay = Helpers.Timing.traceWindowFromMicroSeconds(lcpReqEndTs, lcpEvent.ts);
+    loadDelay.label = i18nString(UIStrings.resourceLoadDelay);
+    loadDuration.label = i18nString(UIStrings.resourceLoadDuration);
+    renderDelay.label = i18nString(UIStrings.elementRenderDelay);
+    if (anyValuesNaN(ttfb.range, loadDelay.range, loadDuration.range, renderDelay.range)) {
         return null;
     }
     return {
         ttfb,
         loadDelay,
-        loadTime,
+        loadDuration,
         renderDelay,
     };
 }
@@ -105,7 +124,7 @@ function finalize(partialModel) {
         relatedEvents.push(partialModel.lcpRequest);
     }
     return {
-        insightKey: InsightKeys.LCP_PHASES,
+        insightKey: InsightKeys.LCP_BREAKDOWN,
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
@@ -133,30 +152,21 @@ export function generateInsight(parsedTrace, context) {
     if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
         return finalize({ warnings: [InsightWarning.NO_LCP] });
     }
-    // This helps calculate the phases.
+    // This helps calculate the subparts.
     const lcpMs = Helpers.Timing.microToMilli(metricScore.timing);
     // This helps position things on the timeline's UI accurately for a trace.
     const lcpTs = metricScore.event?.ts ? Helpers.Timing.microToMilli(metricScore.event?.ts) : undefined;
     const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId);
-    const docRequest = networkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);
+    const docRequest = networkRequests.byId.get(context.navigationId);
     if (!docRequest) {
         return finalize({ lcpMs, lcpTs, lcpEvent, lcpRequest, warnings: [InsightWarning.NO_DOCUMENT_REQUEST] });
     }
-    if (!lcpRequest) {
-        return finalize({
-            lcpMs,
-            lcpTs,
-            lcpEvent,
-            lcpRequest,
-            phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,
-        });
-    }
     return finalize({
         lcpMs,
         lcpTs,
         lcpEvent,
         lcpRequest,
-        phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,
+        subparts: determineSubparts(context.navigation, docRequest, lcpEvent, lcpRequest) ?? undefined,
     });
 }
-//# sourceMappingURL=LCPPhases.js.map
+//# sourceMappingURL=LCPBreakdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LCPBreakdown.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LCPBreakdown.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport type * as Common from '../../../core/common/common.js';\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   *@description Title of an insight that provides details about the LCP metric, broken down by parts.\n   */\n  title: 'LCP breakdown',\n  /**\n   * @description Description of a DevTools insight that presents a breakdown for the LCP metric by subparts.\n   * This is displayed after a user expands the section to see more. No character length limits.\n   */\n  description:\n      'Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',\n  /**\n   *@description Time to first byte title for the Largest Contentful Paint's subparts timespan breakdown.\n   */\n  timeToFirstByte: 'Time to first byte',\n  /**\n   *@description Resource load delay title for the Largest Contentful Paint subparts timespan breakdown.\n   */\n  resourceLoadDelay: 'Resource load delay',\n  /**\n   *@description Resource load duration title for the Largest Contentful Paint subparts timespan breakdown.\n   */\n  resourceLoadDuration: 'Resource load duration',\n  /**\n   *@description Element render delay title for the Largest Contentful Paint subparts timespan breakdown.\n   */\n  elementRenderDelay: 'Element render delay',\n  /**\n   *@description Label used for the subpart (section) of a larger duration.\n   */\n  subpart: 'Subpart',\n  /**\n   * @description Label used for the duration a single subpart (section) takes up of a larger duration.\n   */\n  duration: 'Duration',\n  /**\n   * @description Label used for the duration a single subpart (section) takes up of a larger duration. The value will be the 75th percentile of aggregate data. \"Field\" means that the data was collected from real users in the field as opposed to the developers local environment. \"Field\" is synonymous with \"Real user data\".\n   */\n  fieldDuration: 'Field p75',\n  /**\n   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcp: 'No LCP detected',\n} as const;\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPBreakdown.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\n// A TraceWindow plus its UIString.\nexport type Subpart = Types.Timing.TraceWindowMicro&{label: Common.UIString.LocalizedString};\ninterface LCPSubparts {\n  /**\n   * The time between when the user initiates loading the page until when\n   * the browser receives the first byte of the html response.\n   */\n  ttfb: Subpart;\n  /**\n   * The time between ttfb and the LCP request request being started.\n   * For a text LCP, this is undefined given no request is loaded.\n   */\n  loadDelay?: Subpart;\n  /**\n   * The time it takes to load the LCP request.\n   */\n  loadDuration?: Subpart;\n  /**\n   * The time between when the LCP request finishes loading and when\n   * the LCP element is rendered.\n   */\n  renderDelay: Subpart;\n}\n\nexport function isLCPBreakdown(model: InsightModel): model is LCPBreakdownInsightModel {\n  return model.insightKey === 'LCPBreakdown';\n}\nexport type LCPBreakdownInsightModel = InsightModel<typeof UIStrings, {\n  lcpMs?: Types.Timing.Milli,\n  lcpTs?: Types.Timing.Milli,\n  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,\n  /** The network request for the LCP image, if there was one. */\n  lcpRequest?: Types.Events.SyntheticNetworkRequest,\n  subparts?: LCPSubparts,\n}>;\n\nfunction anyValuesNaN(...values: number[]): boolean {\n  return values.some(v => Number.isNaN(v));\n}\n/**\n * Calculates the 2–4 subparts of an LCP as bounds.\n * Will return `null` if any required values were missing. We don't ever expect\n * them to be missing on newer traces, but old trace files may lack some of the\n * data we rely on, so we want to handle that case.\n */\nfunction determineSubparts(\n    nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest,\n    lcpEvent: Types.Events.LargestContentfulPaintCandidate,\n    lcpRequest: Types.Events.SyntheticNetworkRequest|undefined): LCPSubparts|null {\n  const docReqTiming = docRequest.args.data.timing;\n  if (!docReqTiming) {\n    throw new Error('no timing for document request');\n  }\n  const firstDocByteTs = Types.Timing.Micro(\n      Helpers.Timing.secondsToMicro(docReqTiming.requestTime) +\n      Helpers.Timing.milliToMicro(docReqTiming.receiveHeadersStart));\n\n  const ttfb = Helpers.Timing.traceWindowFromMicroSeconds(nav.ts, firstDocByteTs) as Subpart;\n  ttfb.label = i18nString(UIStrings.timeToFirstByte);\n\n  let renderDelay = Helpers.Timing.traceWindowFromMicroSeconds(ttfb.max, lcpEvent.ts) as Subpart;\n  renderDelay.label = i18nString(UIStrings.elementRenderDelay);\n\n  // If the LCP is text, we don't have a request, so just 2 subparts.\n  if (!lcpRequest) {\n    /** Text LCP. 2 subparts, thus 3 timestamps\n     *\n     *       |          ttfb           |             renderDelay              |\n     *                                                                        ^ lcpEvent.ts\n     *                                 ^ firstDocByteTs\n     *       ^ navStartTs\n     */\n    if (anyValuesNaN(ttfb.range, renderDelay.range)) {\n      return null;\n    }\n    return {ttfb, renderDelay};\n  }\n\n  /** Image LCP. 4 subparts means 5 timestamps\n   *\n   *       |  ttfb   |    loadDelay     |     loadTime    |    renderDelay    |\n   *                                                                          ^ lcpEvent.ts\n   *                                                      ^ lcpReqEndTs\n   *                                    ^ lcpStartTs\n   *                 ^ ttfbTs\n   *       ^ navStartTs\n   */\n  const lcpStartTs = lcpRequest.ts;\n  const lcpReqEndTs = lcpRequest.args.data.syntheticData.finishTime;\n\n  const loadDelay = Helpers.Timing.traceWindowFromMicroSeconds(ttfb.max, lcpStartTs) as Subpart;\n  const loadDuration = Helpers.Timing.traceWindowFromMicroSeconds(lcpStartTs, lcpReqEndTs) as Subpart;\n  renderDelay = Helpers.Timing.traceWindowFromMicroSeconds(lcpReqEndTs, lcpEvent.ts) as Subpart;\n  loadDelay.label = i18nString(UIStrings.resourceLoadDelay);\n  loadDuration.label = i18nString(UIStrings.resourceLoadDuration);\n  renderDelay.label = i18nString(UIStrings.elementRenderDelay);\n  if (anyValuesNaN(ttfb.range, loadDelay.range, loadDuration.range, renderDelay.range)) {\n    return null;\n  }\n\n  return {\n    ttfb,\n    loadDelay,\n    loadDuration,\n    renderDelay,\n  };\n}\n\nfunction finalize(partialModel: PartialInsightModel<LCPBreakdownInsightModel>): LCPBreakdownInsightModel {\n  const relatedEvents = [];\n  if (partialModel.lcpEvent) {\n    relatedEvents.push(partialModel.lcpEvent);\n  }\n  if (partialModel.lcpRequest) {\n    relatedEvents.push(partialModel.lcpRequest);\n  }\n  return {\n    insightKey: InsightKeys.LCP_BREAKDOWN,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: partialModel.lcpEvent || partialModel.lcpRequest ? 'informative' : 'pass',\n    ...partialModel,\n    relatedEvents,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LCPBreakdownInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const networkRequests = parsedTrace.NetworkRequests;\n\n  const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);\n  if (!frameMetrics) {\n    throw new Error('no frame metrics');\n  }\n\n  const navMetrics = frameMetrics.get(context.navigationId);\n  if (!navMetrics) {\n    throw new Error('no navigation metrics');\n  }\n  const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);\n  const lcpEvent = metricScore?.event;\n  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {\n    return finalize({warnings: [InsightWarning.NO_LCP]});\n  }\n\n  // This helps calculate the subparts.\n  const lcpMs = Helpers.Timing.microToMilli(metricScore.timing);\n  // This helps position things on the timeline's UI accurately for a trace.\n  const lcpTs = metricScore.event?.ts ? Helpers.Timing.microToMilli(metricScore.event?.ts) : undefined;\n  const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId);\n\n  const docRequest = networkRequests.byId.get(context.navigationId);\n  if (!docRequest) {\n    return finalize({lcpMs, lcpTs, lcpEvent, lcpRequest, warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  return finalize({\n    lcpMs,\n    lcpTs,\n    lcpEvent,\n    lcpRequest,\n    subparts: determineSubparts(context.navigation, docRequest, lcpEvent, lcpRequest) ?? undefined,\n  });\n}\n"]}

package/models/trace/insights/LCPDiscovery.js

@@ -88,7 +88,7 @@ export function generateInsight(parsedTrace, context) {
     if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
         return finalize({ warnings: [InsightWarning.NO_LCP] });
     }
-    const docRequest = networkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);
+    const docRequest = networkRequests.byId.get(context.navigationId);
     if (!docRequest) {
         return finalize({ warnings: [InsightWarning.NO_DOCUMENT_REQUEST] });
     }

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

@@ -1 +1 @@
-{"version":3,"file":"LCPDiscovery.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LCPDiscovery.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  type Checklist,\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   *@description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)\n   */\n  title: 'LCP request discovery',\n  /**\n   *@description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.\n   */\n  description:\n      'Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)',\n  /**\n   * @description Text to tell the user how long after the earliest discovery time their LCP element loaded.\n   * @example {401ms} PH1\n   */\n  lcpLoadDelay: 'LCP image loaded {PH1} after earliest start point.',\n  /**\n   * @description Text to tell the user that a fetchpriority property value of \"high\" is applied to the LCP request.\n   */\n  fetchPriorityApplied: 'fetchpriority=high applied',\n  /**\n   * @description Text to tell the user that a fetchpriority property value of \"high\" should be applied to the LCP request.\n   */\n  fetchPriorityShouldBeApplied: 'fetchpriority=high should be applied',\n  /**\n   * @description Text to tell the user that the LCP request is discoverable in the initial document.\n   */\n  requestDiscoverable: 'Request is discoverable in initial document',\n  /**\n   * @description Text to tell the user that the LCP request does not have the lazy load property applied.\n   */\n  lazyLoadNotApplied: 'lazy load not applied',\n  /**\n   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcp: 'No LCP detected',\n  /**\n   * @description Text status indicating that the Largest Contentful Paint (LCP) metric was text rather than an image. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcpResource: 'No LCP resource detected because the LCP is not an image',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPDiscovery.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport function isLCPDiscovery(model: InsightModel): model is LCPDiscoveryInsightModel {\n  return model.insightKey === 'LCPDiscovery';\n}\nexport type LCPDiscoveryInsightModel = InsightModel<typeof UIStrings, {\n  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,\n  /** The network request for the LCP image, if there was one. */\n  lcpRequest?: Types.Events.SyntheticNetworkRequest,\n  earliestDiscoveryTimeTs?: Types.Timing.Micro,\n  checklist?: Checklist<'priorityHinted'|'requestDiscoverable'|'eagerlyLoaded'>,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<LCPDiscoveryInsightModel>): LCPDiscoveryInsightModel {\n  const relatedEvents = partialModel.lcpEvent && partialModel.lcpRequest ?\n      // TODO: add entire request initiator chain?\n      [partialModel.lcpEvent, partialModel.lcpRequest] :\n      [];\n  return {\n    insightKey: InsightKeys.LCP_DISCOVERY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: partialModel.lcpRequest && partialModel.checklist &&\n            (!partialModel.checklist.eagerlyLoaded.value || !partialModel.checklist.requestDiscoverable.value ||\n             !partialModel.checklist.priorityHinted.value) ?\n        'fail' :\n        'pass',\n    ...partialModel,\n    relatedEvents,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LCPDiscoveryInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const networkRequests = parsedTrace.NetworkRequests;\n\n  const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);\n  if (!frameMetrics) {\n    throw new Error('no frame metrics');\n  }\n\n  const navMetrics = frameMetrics.get(context.navigationId);\n  if (!navMetrics) {\n    throw new Error('no navigation metrics');\n  }\n  const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);\n  const lcpEvent = metricScore?.event;\n  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {\n    return finalize({warnings: [InsightWarning.NO_LCP]});\n  }\n\n  const docRequest = networkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);\n  if (!docRequest) {\n    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId);\n  if (!lcpRequest) {\n    return finalize({lcpEvent});\n  }\n\n  const initiatorUrl = lcpRequest.args.data.initiator?.url;\n  // TODO(b/372319476): Explore using trace event HTMLDocumentParser::FetchQueuedPreloads to determine if the request\n  // is discovered by the preload scanner.\n  const initiatedByMainDoc =\n      lcpRequest?.args.data.initiator?.type === 'parser' && docRequest.args.data.url === initiatorUrl;\n  const imgPreloadedOrFoundInHTML = lcpRequest?.args.data.isLinkPreload || initiatedByMainDoc;\n\n  const imageLoadingAttr = lcpEvent.args.data?.loadingAttr;\n  const imageFetchPriorityHint = lcpRequest?.args.data.fetchPriorityHint;\n  // This is the earliest discovery time an LCP request could have - it's TTFB.\n  const earliestDiscoveryTime = docRequest?.args.data.timing ?\n      Helpers.Timing.secondsToMicro(docRequest.args.data.timing.requestTime) +\n          Helpers.Timing.milliToMicro(docRequest.args.data.timing.receiveHeadersStart) :\n      undefined;\n\n  const priorityHintFound = imageFetchPriorityHint === 'high';\n\n  return finalize({\n    lcpEvent,\n    lcpRequest,\n    earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.Micro(earliestDiscoveryTime) : undefined,\n    checklist: {\n      priorityHinted: {\n        label: priorityHintFound ? i18nString(UIStrings.fetchPriorityApplied) :\n                                   i18nString(UIStrings.fetchPriorityShouldBeApplied),\n        value: priorityHintFound\n      },\n      requestDiscoverable: {label: i18nString(UIStrings.requestDiscoverable), value: imgPreloadedOrFoundInHTML},\n      eagerlyLoaded: {label: i18nString(UIStrings.lazyLoadNotApplied), value: imageLoadingAttr !== 'lazy'},\n    },\n  });\n}\n"]}
+{"version":3,"file":"LCPDiscovery.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LCPDiscovery.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  type Checklist,\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   *@description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)\n   */\n  title: 'LCP request discovery',\n  /**\n   *@description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.\n   */\n  description:\n      'Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)',\n  /**\n   * @description Text to tell the user how long after the earliest discovery time their LCP element loaded.\n   * @example {401ms} PH1\n   */\n  lcpLoadDelay: 'LCP image loaded {PH1} after earliest start point.',\n  /**\n   * @description Text to tell the user that a fetchpriority property value of \"high\" is applied to the LCP request.\n   */\n  fetchPriorityApplied: 'fetchpriority=high applied',\n  /**\n   * @description Text to tell the user that a fetchpriority property value of \"high\" should be applied to the LCP request.\n   */\n  fetchPriorityShouldBeApplied: 'fetchpriority=high should be applied',\n  /**\n   * @description Text to tell the user that the LCP request is discoverable in the initial document.\n   */\n  requestDiscoverable: 'Request is discoverable in initial document',\n  /**\n   * @description Text to tell the user that the LCP request does not have the lazy load property applied.\n   */\n  lazyLoadNotApplied: 'lazy load not applied',\n  /**\n   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcp: 'No LCP detected',\n  /**\n   * @description Text status indicating that the Largest Contentful Paint (LCP) metric was text rather than an image. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcpResource: 'No LCP resource detected because the LCP is not an image',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPDiscovery.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport function isLCPDiscovery(model: InsightModel): model is LCPDiscoveryInsightModel {\n  return model.insightKey === 'LCPDiscovery';\n}\nexport type LCPDiscoveryInsightModel = InsightModel<typeof UIStrings, {\n  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,\n  /** The network request for the LCP image, if there was one. */\n  lcpRequest?: Types.Events.SyntheticNetworkRequest,\n  earliestDiscoveryTimeTs?: Types.Timing.Micro,\n  checklist?: Checklist<'priorityHinted'|'requestDiscoverable'|'eagerlyLoaded'>,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<LCPDiscoveryInsightModel>): LCPDiscoveryInsightModel {\n  const relatedEvents = partialModel.lcpEvent && partialModel.lcpRequest ?\n      // TODO: add entire request initiator chain?\n      [partialModel.lcpEvent, partialModel.lcpRequest] :\n      [];\n  return {\n    insightKey: InsightKeys.LCP_DISCOVERY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: partialModel.lcpRequest && partialModel.checklist &&\n            (!partialModel.checklist.eagerlyLoaded.value || !partialModel.checklist.requestDiscoverable.value ||\n             !partialModel.checklist.priorityHinted.value) ?\n        'fail' :\n        'pass',\n    ...partialModel,\n    relatedEvents,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LCPDiscoveryInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const networkRequests = parsedTrace.NetworkRequests;\n\n  const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);\n  if (!frameMetrics) {\n    throw new Error('no frame metrics');\n  }\n\n  const navMetrics = frameMetrics.get(context.navigationId);\n  if (!navMetrics) {\n    throw new Error('no navigation metrics');\n  }\n  const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);\n  const lcpEvent = metricScore?.event;\n  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {\n    return finalize({warnings: [InsightWarning.NO_LCP]});\n  }\n\n  const docRequest = networkRequests.byId.get(context.navigationId);\n  if (!docRequest) {\n    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId);\n  if (!lcpRequest) {\n    return finalize({lcpEvent});\n  }\n\n  const initiatorUrl = lcpRequest.args.data.initiator?.url;\n  // TODO(b/372319476): Explore using trace event HTMLDocumentParser::FetchQueuedPreloads to determine if the request\n  // is discovered by the preload scanner.\n  const initiatedByMainDoc =\n      lcpRequest?.args.data.initiator?.type === 'parser' && docRequest.args.data.url === initiatorUrl;\n  const imgPreloadedOrFoundInHTML = lcpRequest?.args.data.isLinkPreload || initiatedByMainDoc;\n\n  const imageLoadingAttr = lcpEvent.args.data?.loadingAttr;\n  const imageFetchPriorityHint = lcpRequest?.args.data.fetchPriorityHint;\n  // This is the earliest discovery time an LCP request could have - it's TTFB.\n  const earliestDiscoveryTime = docRequest?.args.data.timing ?\n      Helpers.Timing.secondsToMicro(docRequest.args.data.timing.requestTime) +\n          Helpers.Timing.milliToMicro(docRequest.args.data.timing.receiveHeadersStart) :\n      undefined;\n\n  const priorityHintFound = imageFetchPriorityHint === 'high';\n\n  return finalize({\n    lcpEvent,\n    lcpRequest,\n    earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.Micro(earliestDiscoveryTime) : undefined,\n    checklist: {\n      priorityHinted: {\n        label: priorityHintFound ? i18nString(UIStrings.fetchPriorityApplied) :\n                                   i18nString(UIStrings.fetchPriorityShouldBeApplied),\n        value: priorityHintFound\n      },\n      requestDiscoverable: {label: i18nString(UIStrings.requestDiscoverable), value: imgPreloadedOrFoundInHTML},\n      eagerlyLoaded: {label: i18nString(UIStrings.lazyLoadNotApplied), value: imageLoadingAttr !== 'lazy'},\n    },\n  });\n}\n"]}

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

@@ -6,9 +6,9 @@ export * as DuplicatedJavaScript from './DuplicatedJavaScript.js';
 export * as FontDisplay from './FontDisplay.js';
 export * as ForcedReflow from './ForcedReflow.js';
 export * as ImageDelivery from './ImageDelivery.js';
-export * as InteractionToNextPaint from './InteractionToNextPaint.js';
+export * as INPBreakdown from './INPBreakdown.js';
+export * as LCPBreakdown from './LCPBreakdown.js';
 export * as LCPDiscovery from './LCPDiscovery.js';
-export * as LCPPhases from './LCPPhases.js';
 export * as LegacyJavaScript from './LegacyJavaScript.js';
 export * as ModernHTTP from './ModernHTTP.js';
 export * as NetworkDependencyTree from './NetworkDependencyTree.js';

package/models/trace/insights/Models.js

@@ -9,9 +9,9 @@ export * as DuplicatedJavaScript from './DuplicatedJavaScript.js';
 export * as FontDisplay from './FontDisplay.js';
 export * as ForcedReflow from './ForcedReflow.js';
 export * as ImageDelivery from './ImageDelivery.js';
-export * as InteractionToNextPaint from './InteractionToNextPaint.js';
+export * as INPBreakdown from './INPBreakdown.js';
+export * as LCPBreakdown from './LCPBreakdown.js';
 export * as LCPDiscovery from './LCPDiscovery.js';
-export * as LCPPhases from './LCPPhases.js';
 export * as LegacyJavaScript from './LegacyJavaScript.js';
 export * as ModernHTTP from './ModernHTTP.js';
 export * as NetworkDependencyTree from './NetworkDependencyTree.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Models.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/Models.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,WAAW,MAAM,kBAAkB,CAAC;AAChD,OAAO,KAAK,eAAe,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,oBAAoB,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,WAAW,MAAM,kBAAkB,CAAC;AAChD,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,aAAa,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,sBAAsB,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,gBAAgB,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,UAAU,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,qBAAqB,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,cAAc,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,eAAe,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,QAAQ,MAAM,eAAe,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nexport * as Cache from './Cache.js';\nexport * as CLSCulprits from './CLSCulprits.js';\nexport * as DocumentLatency from './DocumentLatency.js';\nexport * as DOMSize from './DOMSize.js';\nexport * as DuplicatedJavaScript from './DuplicatedJavaScript.js';\nexport * as FontDisplay from './FontDisplay.js';\nexport * as ForcedReflow from './ForcedReflow.js';\nexport * as ImageDelivery from './ImageDelivery.js';\nexport * as InteractionToNextPaint from './InteractionToNextPaint.js';\nexport * as LCPDiscovery from './LCPDiscovery.js';\nexport * as LCPPhases from './LCPPhases.js';\nexport * as LegacyJavaScript from './LegacyJavaScript.js';\nexport * as ModernHTTP from './ModernHTTP.js';\nexport * as NetworkDependencyTree from './NetworkDependencyTree.js';\nexport * as RenderBlocking from './RenderBlocking.js';\nexport * as SlowCSSSelector from './SlowCSSSelector.js';\nexport * as ThirdParties from './ThirdParties.js';\nexport * as Viewport from './Viewport.js';\n"]}
+{"version":3,"file":"Models.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/Models.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,WAAW,MAAM,kBAAkB,CAAC;AAChD,OAAO,KAAK,eAAe,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,oBAAoB,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,WAAW,MAAM,kBAAkB,CAAC;AAChD,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,aAAa,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,gBAAgB,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,UAAU,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,qBAAqB,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,cAAc,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,eAAe,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,QAAQ,MAAM,eAAe,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nexport * as Cache from './Cache.js';\nexport * as CLSCulprits from './CLSCulprits.js';\nexport * as DocumentLatency from './DocumentLatency.js';\nexport * as DOMSize from './DOMSize.js';\nexport * as DuplicatedJavaScript from './DuplicatedJavaScript.js';\nexport * as FontDisplay from './FontDisplay.js';\nexport * as ForcedReflow from './ForcedReflow.js';\nexport * as ImageDelivery from './ImageDelivery.js';\nexport * as INPBreakdown from './INPBreakdown.js';\nexport * as LCPBreakdown from './LCPBreakdown.js';\nexport * as LCPDiscovery from './LCPDiscovery.js';\nexport * as LegacyJavaScript from './LegacyJavaScript.js';\nexport * as ModernHTTP from './ModernHTTP.js';\nexport * as NetworkDependencyTree from './NetworkDependencyTree.js';\nexport * as RenderBlocking from './RenderBlocking.js';\nexport * as SlowCSSSelector from './SlowCSSSelector.js';\nexport * as ThirdParties from './ThirdParties.js';\nexport * as Viewport from './Viewport.js';\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.";
     /**

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.',
     /**
@@ -344,7 +344,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 +431,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 +450,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 +471,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) {