@paulirish/trace_engine 0.0.31 → 0.0.33

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":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAI3C,wGAAwG;AACxG,4GAA4G;AAC5G,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAClC,MAAM,SAAS,GAAG,GAAG,CAAC;AAOtB,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,eAAe,CAAC,OAAkD;IACzE,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IACxC,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;AAC5F,CAAC;AAED,MAAM,UAAU,eAAe,CAC3B,eAA0C,EAAE,OAAiC;IAC/E,MAAM,eAAe,GACjB,eAAe,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,YAAY,CAAC,CAAC;IACzG,IAAI,CAAC,eAAe,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CAAC,0BAA0B,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM,kBAAkB,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;IAC5D,IAAI,kBAAkB,KAAK,IAAI,EAAE,CAAC;QAChC,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;IACrD,CAAC;IAED,IAAI,gBAAgB,GAAG,CAAC,CAAC;IACzB,IAAI,kBAAkB,GAAG,qBAAqB,EAAE,CAAC;QAC/C,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,kBAAkB,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACjE,CAAC;IAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACxG,gBAAgB,IAAI,gBAAgB,CAAC;IAErC,MAAM,aAAa,GAAG;QACpB,GAAG,EAAE,gBAAgB;QACrB,GAAG,EAAE,gBAAgB;KACtB,CAAC;IAEF,OAAO;QACL,kBAAkB;QAClB,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,gBAAgB,CAAC;QAC7D,aAAa;KACd,CAAC;AACJ,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as Types from '../types/types.js';\n\nimport {type InsightResult, type NavigationInsightContext, type RequiredData} from './types.js';\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\nexport type DocumentLatencyInsightResult = InsightResult<{\n  serverResponseTime: Types.Timing.MilliSeconds,\n  redirectDuration: Types.Timing.MilliSeconds,\n}>;\n\nexport function deps(): ['Meta', 'NetworkRequests'] {\n  return ['Meta', 'NetworkRequests'];\n}\n\nfunction getServerTiming(request: Types.TraceEvents.SyntheticNetworkRequest): Types.Timing.MilliSeconds|null {\n  const timing = request.args.data.timing;\n  if (!timing) {\n    return null;\n  }\n\n  return Types.Timing.MilliSeconds(Math.round(timing.receiveHeadersStart - timing.sendEnd));\n}\n\nexport function generateInsight(\n    traceParsedData: RequiredData<typeof deps>, context: NavigationInsightContext): DocumentLatencyInsightResult {\n  const documentRequest =\n      traceParsedData.NetworkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);\n  if (!documentRequest) {\n    throw new Error('missing document request');\n  }\n\n  const serverResponseTime = getServerTiming(documentRequest);\n  if (serverResponseTime === null) {\n    throw new Error('missing document request timing');\n  }\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 = Math.round(documentRequest.args.data.syntheticData.redirectionDuration / 1000);\n  overallSavingsMs += redirectDuration;\n\n  const metricSavings = {\n    FCP: overallSavingsMs,\n    LCP: overallSavingsMs,\n  };\n\n  return {\n    serverResponseTime,\n    redirectDuration: Types.Timing.MilliSeconds(redirectDuration),\n    metricSavings,\n  };\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. 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 Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport type {InsightResult, InsightSetContext, RequiredData} from './types.js';\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 type DocumentLatencyInsightResult = InsightResult<{\n  data?: {\n    serverResponseTime: Types.Timing.MilliSeconds,\n    serverResponseTooSlow: boolean,\n    redirectDuration: Types.Timing.MilliSeconds,\n    uncompressedResponseBytes: number,\n    documentRequest?: Types.Events.SyntheticNetworkRequest,\n  },\n}>;\n\nexport function deps(): ['Meta', 'NetworkRequests'] {\n  return ['Meta', 'NetworkRequests'];\n}\n\nfunction getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.MilliSeconds|null {\n  const timing = request.args.data.timing;\n  if (!timing) {\n    return null;\n  }\n\n  const ms = Helpers.Timing.microSecondsToMilliseconds(request.args.data.syntheticData.waiting);\n  return Math.round(ms) as Types.Timing.MilliSeconds;\n}\n\nfunction getCompressionSavings(request: Types.Events.SyntheticNetworkRequest): number {\n  // Check from headers if compression was already applied.\n  // Older devtools logs are lower case, while modern logs are Cased-Like-This.\n  const patterns = [\n    /^content-encoding$/i,\n    /^x-content-encoding-over-network$/i,\n  ];\n  const compressionTypes = ['gzip', 'br', 'deflate', 'zstd'];\n  const isCompressed = request.args.data.responseHeaders.some(\n      header => patterns.some(p => header.name.match(p)) && compressionTypes.includes(header.value));\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\nexport function generateInsight(\n    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): DocumentLatencyInsightResult {\n  if (!context.navigation) {\n    return {};\n  }\n\n  const documentRequest =\n      parsedTrace.NetworkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);\n  if (!documentRequest) {\n    throw new Error('missing 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 = Math.round(documentRequest.args.data.syntheticData.redirectionDuration / 1000);\n  overallSavingsMs += redirectDuration;\n\n  const metricSavings = {\n    FCP: overallSavingsMs as Types.Timing.MilliSeconds,\n    LCP: overallSavingsMs as Types.Timing.MilliSeconds,\n  };\n\n  return {\n    relatedEvents: [documentRequest],\n    data: {\n      serverResponseTime,\n      serverResponseTooSlow,\n      redirectDuration: Types.Timing.MilliSeconds(redirectDuration),\n      uncompressedResponseBytes: getCompressionSavings(documentRequest),\n      documentRequest,\n    },\n    metricSavings,\n  };\n}\n"]}

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

@@ -0,0 +1,11 @@
+import * as Types from '../types/types.js';
+import type { InsightResult, InsightSetContext, RequiredData } from './types.js';
+export declare function deps(): ['Meta', 'NetworkRequests', 'LayoutShifts'];
+export type FontDisplayResult = InsightResult<{
+    fonts: Array<{
+        request: Types.Events.SyntheticNetworkRequest;
+        display: string;
+        wastedTime: Types.Timing.MilliSeconds;
+    }>;
+}>;
+export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): FontDisplayResult;

package/models/trace/insights/FontDisplay.js

@@ -0,0 +1,44 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as Platform from '../../../core/platform/platform.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+export function deps() {
+    return ['Meta', 'NetworkRequests', 'LayoutShifts'];
+}
+export function generateInsight(parsedTrace, context) {
+    const fonts = [];
+    for (const event of parsedTrace.LayoutShifts.beginRemoteFontLoadEvents) {
+        if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {
+            continue;
+        }
+        const requestId = `${event.pid}.${event.args.id}`;
+        const request = parsedTrace.NetworkRequests.byId.get(requestId);
+        if (!request) {
+            continue;
+        }
+        const display = event.args.display;
+        let wastedTime = Types.Timing.MilliSeconds(0);
+        if (/^(block|fallback|auto)$/.test(display)) {
+            const wastedTimeMicro = Types.Timing.MicroSeconds(request.args.data.syntheticData.finishTime - request.args.data.syntheticData.sendStartTime);
+            // TODO(crbug.com/352244504): should really end at the time of the next Commit trace event.
+            wastedTime = Platform.NumberUtilities.floor(Helpers.Timing.microSecondsToMilliseconds(wastedTimeMicro), 1 / 5);
+            // All browsers wait for no more than 3s.
+            wastedTime = Math.min(wastedTime, 3000);
+        }
+        fonts.push({
+            request,
+            display,
+            wastedTime,
+        });
+    }
+    fonts.sort((a, b) => b.wastedTime - a.wastedTime);
+    const savings = Math.max(...fonts.map(f => f.wastedTime));
+    return {
+        relatedEvents: fonts.map(f => f.request),
+        fonts,
+        metricSavings: { FCP: savings },
+    };
+}
+//# sourceMappingURL=FontDisplay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FontDisplay.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/FontDisplay.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,QAAQ,MAAM,oCAAoC,CAAC;AAC/D,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAI3C,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,MAAM,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC;AACrD,CAAC;AAUD,MAAM,UAAU,eAAe,CAAC,WAAsC,EAAE,OAA0B;IAChG,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,KAAK,MAAM,KAAK,IAAI,WAAW,CAAC,YAAY,CAAC,yBAAyB,EAAE,CAAC;QACvE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3D,SAAS;QACX,CAAC;QAED,MAAM,SAAS,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;QAClD,MAAM,OAAO,GAAG,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAChE,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,SAAS;QACX,CAAC;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;QACnC,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAE9C,IAAI,yBAAyB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YAC5C,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAC7C,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;YAChG,2FAA2F;YAC3F,UAAU,GAAG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,0BAA0B,CAAC,eAAe,CAAC,EAAE,CAAC,GAAG,CAAC,CAChF,CAAC;YAC9B,yCAAyC;YACzC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAA8B,CAAC;QACvE,CAAC;QAED,KAAK,CAAC,IAAI,CAAC;YACT,OAAO;YACP,OAAO;YACP,UAAU;SACX,CAAC,CAAC;IACL,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC;IAElD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAA8B,CAAC;IAEvF,OAAO;QACL,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;QACxC,KAAK;QACL,aAAa,EAAE,EAAC,GAAG,EAAE,OAAO,EAAC;KAC9B,CAAC;AACJ,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as Platform from '../../../core/platform/platform.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport type {InsightResult, InsightSetContext, RequiredData} from './types.js';\n\nexport function deps(): ['Meta', 'NetworkRequests', 'LayoutShifts'] {\n  return ['Meta', 'NetworkRequests', 'LayoutShifts'];\n}\n\nexport type FontDisplayResult = InsightResult<{\n  fonts: Array<{\n    request: Types.Events.SyntheticNetworkRequest,\n    display: string,\n    wastedTime: Types.Timing.MilliSeconds,\n  }>,\n}>;\n\nexport function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): FontDisplayResult {\n  const fonts = [];\n  for (const event of parsedTrace.LayoutShifts.beginRemoteFontLoadEvents) {\n    if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {\n      continue;\n    }\n\n    const requestId = `${event.pid}.${event.args.id}`;\n    const request = parsedTrace.NetworkRequests.byId.get(requestId);\n    if (!request) {\n      continue;\n    }\n\n    const display = event.args.display;\n    let wastedTime = Types.Timing.MilliSeconds(0);\n\n    if (/^(block|fallback|auto)$/.test(display)) {\n      const wastedTimeMicro = Types.Timing.MicroSeconds(\n          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      wastedTime = Platform.NumberUtilities.floor(Helpers.Timing.microSecondsToMilliseconds(wastedTimeMicro), 1 / 5) as\n          Types.Timing.MilliSeconds;\n      // All browsers wait for no more than 3s.\n      wastedTime = Math.min(wastedTime, 3000) as Types.Timing.MilliSeconds;\n    }\n\n    fonts.push({\n      request,\n      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.MilliSeconds;\n\n  return {\n    relatedEvents: fonts.map(f => f.request),\n    fonts,\n    metricSavings: {FCP: savings},\n  };\n}\n"]}

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

@@ -1,6 +1,9 @@
 export * as CumulativeLayoutShift from './CumulativeLayoutShift.js';
 export * as DocumentLatency from './DocumentLatency.js';
+export * as FontDisplay from './FontDisplay.js';
 export * as InteractionToNextPaint from './InteractionToNextPaint.js';
 export * as LargestContentfulPaint from './LargestContentfulPaint.js';
 export * as RenderBlocking from './RenderBlocking.js';
+export * as SlowCSSSelector from './SlowCSSSelector.js';
+export * as ThirdPartyWeb from './ThirdPartyWeb.js';
 export * as Viewport from './Viewport.js';

package/models/trace/insights/InsightRunners.js

@@ -3,8 +3,11 @@
 // found in the LICENSE file.
 export * as CumulativeLayoutShift from './CumulativeLayoutShift.js';
 export * as DocumentLatency from './DocumentLatency.js';
+export * as FontDisplay from './FontDisplay.js';
 export * as InteractionToNextPaint from './InteractionToNextPaint.js';
 export * as LargestContentfulPaint from './LargestContentfulPaint.js';
 export * as RenderBlocking from './RenderBlocking.js';
+export * as SlowCSSSelector from './SlowCSSSelector.js';
+export * as ThirdPartyWeb from './ThirdPartyWeb.js';
 export * as Viewport from './Viewport.js';
 //# sourceMappingURL=InsightRunners.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InsightRunners.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/InsightRunners.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,qBAAqB,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,eAAe,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,sBAAsB,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,sBAAsB,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,cAAc,MAAM,qBAAqB,CAAC;AACtD,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 CumulativeLayoutShift from './CumulativeLayoutShift.js';\nexport * as DocumentLatency from './DocumentLatency.js';\nexport * as InteractionToNextPaint from './InteractionToNextPaint.js';\nexport * as LargestContentfulPaint from './LargestContentfulPaint.js';\nexport * as RenderBlocking from './RenderBlocking.js';\nexport * as Viewport from './Viewport.js';\n"]}
+{"version":3,"file":"InsightRunners.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/InsightRunners.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,qBAAqB,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,eAAe,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,WAAW,MAAM,kBAAkB,CAAC;AAChD,OAAO,KAAK,sBAAsB,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,sBAAsB,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,cAAc,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,eAAe,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,aAAa,MAAM,oBAAoB,CAAC;AACpD,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 CumulativeLayoutShift from './CumulativeLayoutShift.js';\nexport * as DocumentLatency from './DocumentLatency.js';\nexport * as FontDisplay from './FontDisplay.js';\nexport * as InteractionToNextPaint from './InteractionToNextPaint.js';\nexport * as LargestContentfulPaint from './LargestContentfulPaint.js';\nexport * as RenderBlocking from './RenderBlocking.js';\nexport * as SlowCSSSelector from './SlowCSSSelector.js';\nexport * as ThirdPartyWeb from './ThirdPartyWeb.js';\nexport * as Viewport from './Viewport.js';\n"]}

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

@@ -1,9 +1,8 @@
-import { type SyntheticInteractionPair } from '../types/TraceEvents.js';
-import { type InsightResult, type NavigationInsightContext, type RequiredData } from './types.js';
+import type { SyntheticInteractionPair } from '../types/TraceEvents.js';
+import type { InsightResult, InsightSetContext, RequiredData } from './types.js';
 export declare function deps(): ['UserInteractions'];
-type Result = InsightResult<{
+export type INPInsightResult = InsightResult<{
     longestInteractionEvent?: SyntheticInteractionPair;
     highPercentileInteractionEvent?: SyntheticInteractionPair;
 }>;
-export declare function generateInsight(traceParsedData: RequiredData<typeof deps>, context: NavigationInsightContext): Result;
-export {};
+export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): INPInsightResult;

package/models/trace/insights/InteractionToNextPaint.js

@@ -1,12 +1,13 @@
 // Copyright 2024 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+import * as Helpers from '../helpers/helpers.js';
 export function deps() {
     return ['UserInteractions'];
 }
-export function generateInsight(traceParsedData, context) {
-    const interactionEvents = traceParsedData.UserInteractions.interactionEvents.filter(event => {
-        return event.args.data.navigationId === context.navigationId;
+export function generateInsight(parsedTrace, context) {
+    const interactionEvents = parsedTrace.UserInteractions.interactionEventsWithNoNesting.filter(event => {
+        return Helpers.Timing.eventIsInBounds(event, context.bounds);
     });
     if (!interactionEvents.length) {
         // A valid result, when there is no user interaction.
@@ -28,6 +29,7 @@ export function generateInsight(traceParsedData, context) {
     // See https://source.chromium.org/chromium/chromium/src/+/main:components/page_load_metrics/browser/responsiveness_metrics_normalization.cc;l=45-59;drc=cb0f9c8b559d9c7c3cb4ca94fc1118cc015d38ad
     const highPercentileIndex = Math.min(9, Math.floor(normalizedInteractionEvents.length / 50));
     return {
+        relatedEvents: [normalizedInteractionEvents[0]],
         longestInteractionEvent: normalizedInteractionEvents[0],
         highPercentileInteractionEvent: normalizedInteractionEvents[highPercentileIndex],
     };

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionToNextPaint.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/InteractionToNextPaint.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAM7B,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAC9B,CAAC;AAOD,MAAM,UAAU,eAAe,CAAC,eAA0C,EAAE,OAAiC;IAC3G,MAAM,iBAAiB,GAAG,eAAe,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;QAC1F,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,KAAK,OAAO,CAAC,YAAY,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC;QAC9B,qDAAqD;QACrD,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,sBAAsB,GAAG,IAAI,GAAG,EAAoC,CAAC;IAC3E,KAAK,MAAM,KAAK,IAAI,iBAAiB,EAAE,CAAC;QACtC,MAAM,GAAG,GAAG,KAAK,CAAC,aAAa,CAAC;QAChC,MAAM,OAAO,GAAG,sBAAsB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAChD,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;YACxC,sBAAsB,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IACD,MAAM,2BAA2B,GAAG,CAAC,GAAG,sBAAsB,CAAC,MAAM,EAAE,CAAC,CAAC;IACzE,2BAA2B,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAE1D,6EAA6E;IAC7E,+EAA+E;IAC/E,6EAA6E;IAC7E,iMAAiM;IACjM,MAAM,mBAAmB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC;IAE7F,OAAO;QACL,uBAAuB,EAAE,2BAA2B,CAAC,CAAC,CAAC;QACvD,8BAA8B,EAAE,2BAA2B,CAAC,mBAAmB,CAAC;KACjF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport {type SyntheticInteractionPair} from '../types/TraceEvents.js';\n\nimport {type InsightResult, type NavigationInsightContext, type RequiredData} from './types.js';\n\nexport function deps(): ['UserInteractions'] {\n  return ['UserInteractions'];\n}\n\ntype Result = InsightResult<{\n  longestInteractionEvent?: SyntheticInteractionPair,\n  highPercentileInteractionEvent?: SyntheticInteractionPair,\n}>;\n\nexport function generateInsight(traceParsedData: RequiredData<typeof deps>, context: NavigationInsightContext): Result {\n  const interactionEvents = traceParsedData.UserInteractions.interactionEvents.filter(event => {\n    return event.args.data.navigationId === context.navigationId;\n  });\n\n  if (!interactionEvents.length) {\n    // A valid result, when there is no user interaction.\n    return {};\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 {\n    longestInteractionEvent: normalizedInteractionEvents[0],\n    highPercentileInteractionEvent: normalizedInteractionEvents[highPercentileIndex],\n  };\n}\n"]}
+{"version":3,"file":"InteractionToNextPaint.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/InteractionToNextPaint.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AAKjD,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAC9B,CAAC;AAOD,MAAM,UAAU,eAAe,CAAC,WAAsC,EAAE,OAA0B;IAChG,MAAM,iBAAiB,GAAG,WAAW,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;QACnG,OAAO,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC;QAC9B,qDAAqD;QACrD,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,sBAAsB,GAAG,IAAI,GAAG,EAAoC,CAAC;IAC3E,KAAK,MAAM,KAAK,IAAI,iBAAiB,EAAE,CAAC;QACtC,MAAM,GAAG,GAAG,KAAK,CAAC,aAAa,CAAC;QAChC,MAAM,OAAO,GAAG,sBAAsB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAChD,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;YACxC,sBAAsB,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IACD,MAAM,2BAA2B,GAAG,CAAC,GAAG,sBAAsB,CAAC,MAAM,EAAE,CAAC,CAAC;IACzE,2BAA2B,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAE1D,6EAA6E;IAC7E,+EAA+E;IAC/E,6EAA6E;IAC7E,iMAAiM;IACjM,MAAM,mBAAmB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC;IAE7F,OAAO;QACL,aAAa,EAAE,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC;QAC/C,uBAAuB,EAAE,2BAA2B,CAAC,CAAC,CAAC;QACvD,8BAA8B,EAAE,2BAA2B,CAAC,mBAAmB,CAAC;KACjF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as Helpers from '../helpers/helpers.js';\nimport type {SyntheticInteractionPair} from '../types/TraceEvents.js';\n\nimport type {InsightResult, InsightSetContext, RequiredData} from './types.js';\n\nexport function deps(): ['UserInteractions'] {\n  return ['UserInteractions'];\n}\n\nexport type INPInsightResult = InsightResult<{\n  longestInteractionEvent?: SyntheticInteractionPair,\n  highPercentileInteractionEvent?: SyntheticInteractionPair,\n}>;\n\nexport function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): INPInsightResult {\n  const interactionEvents = parsedTrace.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 {};\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 {\n    relatedEvents: [normalizedInteractionEvents[0]],\n    longestInteractionEvent: normalizedInteractionEvents[0],\n    highPercentileInteractionEvent: normalizedInteractionEvents[highPercentileIndex],\n  };\n}\n"]}

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

@@ -1,25 +1,38 @@
 import * as Types from '../types/types.js';
-import { type LCPInsightResult, type NavigationInsightContext, type RequiredData } from './types.js';
+import { type InsightResult, type InsightSetContext, type RequiredData } from './types.js';
 export declare function deps(): ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'];
-export interface LCPPhases {
+interface LCPPhases {
     /**
      * The time between when the user initiates loading the page until when
      * the browser receives the first byte of the html response.
      */
     ttfb: Types.Timing.MilliSeconds;
     /**
-     * The time between ttfb and the LCP resource request being started.
-     * For a text LCP, this is undefined given no resource is loaded.
+     * The time between ttfb and the LCP request request being started.
+     * For a text LCP, this is undefined given no request is loaded.
      */
     loadDelay?: Types.Timing.MilliSeconds;
     /**
-     * The time it takes to load the LCP resource.
+     * The time it takes to load the LCP request.
      */
     loadTime?: Types.Timing.MilliSeconds;
     /**
-     * The time between when the LCP resource finishes loading and when
+     * The time between when the LCP request finishes loading and when
      * the LCP element is rendered.
      */
     renderDelay: Types.Timing.MilliSeconds;
 }
-export declare function generateInsight(traceParsedData: RequiredData<typeof deps>, context: NavigationInsightContext): LCPInsightResult;
+export type LCPInsightResult = InsightResult<{
+    lcpMs?: Types.Timing.MilliSeconds;
+    lcpTs?: Types.Timing.MilliSeconds;
+    lcpEvent?: Types.Events.LargestContentfulPaintCandidate;
+    phases?: LCPPhases;
+    shouldRemoveLazyLoading?: boolean;
+    shouldIncreasePriorityHint?: boolean;
+    shouldPreloadImage?: boolean;
+    /** The network request for the LCP image, if there was one. */
+    lcpRequest?: Types.Events.SyntheticNetworkRequest;
+    earliestDiscoveryTimeTs?: Types.Timing.MicroSeconds;
+}>;
+export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): LCPInsightResult;
+export {};

package/models/trace/insights/LargestContentfulPaint.js

@@ -9,26 +9,41 @@ import { InsightWarning } from './types.js';
 export function deps() {
     return ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'];
 }
-function breakdownPhases(nav, mainRequest, lcpMs, lcpRequest) {
-    const mainReqTiming = mainRequest.args.data.timing;
-    if (!mainReqTiming) {
-        throw new Error('no timing for main resource');
+function anyValuesNaN(...values) {
+    return values.some(v => Number.isNaN(v));
+}
+/**
+ * Calculates the 4 phases of an LCP and the timings of each.
+ * 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) {
+    const docReqTiming = docRequest.args.data.timing;
+    if (!docReqTiming) {
+        throw new Error('no timing for document request');
     }
-    const firstDocByteTs = Helpers.Timing.secondsToMicroseconds(mainReqTiming.requestTime) +
-        Helpers.Timing.millisecondsToMicroseconds(mainReqTiming.receiveHeadersStart);
+    const firstDocByteTs = Helpers.Timing.secondsToMicroseconds(docReqTiming.requestTime) +
+        Helpers.Timing.millisecondsToMicroseconds(docReqTiming.receiveHeadersStart);
     const firstDocByteTiming = Types.Timing.MicroSeconds(firstDocByteTs - nav.ts);
     const ttfb = Helpers.Timing.microSecondsToMilliseconds(firstDocByteTiming);
     let renderDelay = Types.Timing.MilliSeconds(lcpMs - ttfb);
     if (!lcpRequest) {
+        if (anyValuesNaN(ttfb, renderDelay)) {
+            return null;
+        }
         return { ttfb, renderDelay };
     }
     const lcpStartTs = Types.Timing.MicroSeconds(lcpRequest.ts - nav.ts);
-    const resourceStart = Helpers.Timing.microSecondsToMilliseconds(lcpStartTs);
+    const requestStart = Helpers.Timing.microSecondsToMilliseconds(lcpStartTs);
     const lcpReqEndTs = Types.Timing.MicroSeconds(lcpRequest.args.data.syntheticData.finishTime - nav.ts);
-    const resourceEnd = Helpers.Timing.microSecondsToMilliseconds(lcpReqEndTs);
-    const loadDelay = Types.Timing.MilliSeconds(resourceStart - ttfb);
-    const loadTime = Types.Timing.MilliSeconds(resourceEnd - resourceStart);
-    renderDelay = Types.Timing.MilliSeconds(lcpMs - resourceEnd);
+    const requestEnd = Helpers.Timing.microSecondsToMilliseconds(lcpReqEndTs);
+    const loadDelay = Types.Timing.MilliSeconds(requestStart - ttfb);
+    const loadTime = Types.Timing.MilliSeconds(requestEnd - requestStart);
+    renderDelay = Types.Timing.MilliSeconds(lcpMs - requestEnd);
+    if (anyValuesNaN(ttfb, loadDelay, loadTime, renderDelay)) {
+        return null;
+    }
     return {
         ttfb,
         loadDelay,
@@ -36,13 +51,12 @@ function breakdownPhases(nav, mainRequest, lcpMs, lcpRequest) {
         renderDelay,
     };
 }
-export function generateInsight(traceParsedData, context) {
-    const networkRequests = traceParsedData.NetworkRequests;
-    const nav = traceParsedData.Meta.navigationsByNavigationId.get(context.navigationId);
-    if (!nav) {
-        throw new Error('no trace navigation');
+export function generateInsight(parsedTrace, context) {
+    if (!context.navigation) {
+        return {};
     }
-    const frameMetrics = traceParsedData.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);
+    const networkRequests = parsedTrace.NetworkRequests;
+    const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);
     if (!frameMetrics) {
         throw new Error('no frame metrics');
     }
@@ -52,41 +66,47 @@ export function generateInsight(traceParsedData, context) {
     }
     const metricScore = navMetrics.get("LCP" /* Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP */);
     const lcpEvent = metricScore?.event;
-    if (!lcpEvent || !Types.TraceEvents.isTraceEventLargestContentfulPaintCandidate(lcpEvent)) {
+    if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
         return { warnings: [InsightWarning.NO_LCP] };
     }
     // This helps calculate the phases.
     const lcpMs = Helpers.Timing.microSecondsToMilliseconds(metricScore.timing);
     // This helps position things on the timeline's UI accurately for a trace.
     const lcpTs = metricScore.event?.ts ? Helpers.Timing.microSecondsToMilliseconds(metricScore.event?.ts) : undefined;
-    const lcpResource = findLCPRequest(traceParsedData, context, lcpEvent);
-    const mainReq = networkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);
-    if (!mainReq) {
-        return { lcpMs, lcpTs, warnings: [InsightWarning.NO_DOCUMENT_REQUEST] };
+    const lcpRequest = findLCPRequest(parsedTrace, context, lcpEvent);
+    const docRequest = networkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);
+    if (!docRequest) {
+        return { lcpMs, lcpTs, lcpEvent, warnings: [InsightWarning.NO_DOCUMENT_REQUEST] };
     }
-    if (!lcpResource) {
+    if (!lcpRequest) {
         return {
-            lcpMs: lcpMs,
-            lcpTs: lcpTs,
-            phases: breakdownPhases(nav, mainReq, lcpMs, lcpResource),
+            lcpMs,
+            lcpTs,
+            lcpEvent,
+            phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,
         };
     }
+    const initiatorUrl = lcpRequest.args.data.initiator?.url;
+    // TODO(b/372319476): Explore using trace event HTMLDocumentParser::FetchQueuedPreloads to determine if the request
+    // is discovered by the preload scanner.
+    const initiatedByMainDoc = lcpRequest?.args.data.initiator?.type === 'parser' && docRequest.args.data.url === initiatorUrl;
+    const imgPreloadedOrFoundInHTML = lcpRequest?.args.data.isLinkPreload || initiatedByMainDoc;
     const imageLoadingAttr = lcpEvent.args.data?.loadingAttr;
-    const imagePreloaded = lcpResource?.args.data.isLinkPreload || lcpResource?.args.data.initiator?.type === 'preload';
-    const imageFetchPriorityHint = lcpResource?.args.data.fetchPriorityHint;
-    // This is the earliest discovery time an LCP resource could have - it's TTFB.
-    const earliestDiscoveryTime = mainReq && mainReq.args.data.timing ?
-        Helpers.Timing.secondsToMicroseconds(mainReq.args.data.timing.requestTime) +
-            Helpers.Timing.millisecondsToMicroseconds(mainReq.args.data.timing.receiveHeadersStart) :
+    const imageFetchPriorityHint = lcpRequest?.args.data.fetchPriorityHint;
+    // This is the earliest discovery time an LCP request could have - it's TTFB.
+    const earliestDiscoveryTime = docRequest && docRequest.args.data.timing ?
+        Helpers.Timing.secondsToMicroseconds(docRequest.args.data.timing.requestTime) +
+            Helpers.Timing.millisecondsToMicroseconds(docRequest.args.data.timing.receiveHeadersStart) :
         undefined;
     return {
-        lcpMs: lcpMs,
-        lcpTs: lcpTs,
-        phases: breakdownPhases(nav, mainReq, lcpMs, lcpResource),
+        lcpMs,
+        lcpTs,
+        lcpEvent,
+        phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,
         shouldRemoveLazyLoading: imageLoadingAttr === 'lazy',
         shouldIncreasePriorityHint: imageFetchPriorityHint !== 'high',
-        shouldPreloadImage: !imagePreloaded,
-        lcpResource,
+        shouldPreloadImage: !imgPreloadedOrFoundInHTML,
+        lcpRequest,
         earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.MicroSeconds(earliestDiscoveryTime) : undefined,
     };
 }

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

@@ -1 +1 @@
-{"version":3,"file":"LargestContentfulPaint.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LargestContentfulPaint.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 Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {findLCPRequest} from './Common.js';\nimport {InsightWarning, type LCPInsightResult, type NavigationInsightContext, type RequiredData} from './types.js';\n\nexport function deps(): ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'] {\n  return ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'];\n}\n\nexport interface LCPPhases {\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: Types.Timing.MilliSeconds;\n  /**\n   * The time between ttfb and the LCP resource request being started.\n   * For a text LCP, this is undefined given no resource is loaded.\n   */\n  loadDelay?: Types.Timing.MilliSeconds;\n  /**\n   * The time it takes to load the LCP resource.\n   */\n  loadTime?: Types.Timing.MilliSeconds;\n  /**\n   * The time between when the LCP resource finishes loading and when\n   * the LCP element is rendered.\n   */\n  renderDelay: Types.Timing.MilliSeconds;\n}\n\nfunction breakdownPhases(\n    nav: Types.TraceEvents.TraceEventNavigationStart, mainRequest: Types.TraceEvents.SyntheticNetworkRequest,\n    lcpMs: Types.Timing.MilliSeconds, lcpRequest: Types.TraceEvents.SyntheticNetworkRequest|null): LCPPhases {\n  const mainReqTiming = mainRequest.args.data.timing;\n  if (!mainReqTiming) {\n    throw new Error('no timing for main resource');\n  }\n  const firstDocByteTs = Helpers.Timing.secondsToMicroseconds(mainReqTiming.requestTime) +\n      Helpers.Timing.millisecondsToMicroseconds(mainReqTiming.receiveHeadersStart);\n\n  const firstDocByteTiming = Types.Timing.MicroSeconds(firstDocByteTs - nav.ts);\n  const ttfb = Helpers.Timing.microSecondsToMilliseconds(firstDocByteTiming);\n  let renderDelay = Types.Timing.MilliSeconds(lcpMs - ttfb);\n\n  if (!lcpRequest) {\n    return {ttfb, renderDelay};\n  }\n\n  const lcpStartTs = Types.Timing.MicroSeconds(lcpRequest.ts - nav.ts);\n  const resourceStart = Helpers.Timing.microSecondsToMilliseconds(lcpStartTs);\n\n  const lcpReqEndTs = Types.Timing.MicroSeconds(lcpRequest.args.data.syntheticData.finishTime - nav.ts);\n  const resourceEnd = Helpers.Timing.microSecondsToMilliseconds(lcpReqEndTs);\n\n  const loadDelay = Types.Timing.MilliSeconds(resourceStart - ttfb);\n  const loadTime = Types.Timing.MilliSeconds(resourceEnd - resourceStart);\n  renderDelay = Types.Timing.MilliSeconds(lcpMs - resourceEnd);\n\n  return {\n    ttfb,\n    loadDelay,\n    loadTime,\n    renderDelay,\n  };\n}\n\nexport function generateInsight(\n    traceParsedData: RequiredData<typeof deps>, context: NavigationInsightContext): LCPInsightResult {\n  const networkRequests = traceParsedData.NetworkRequests;\n\n  const nav = traceParsedData.Meta.navigationsByNavigationId.get(context.navigationId);\n  if (!nav) {\n    throw new Error('no trace navigation');\n  }\n\n  const frameMetrics = traceParsedData.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.TraceEvents.isTraceEventLargestContentfulPaintCandidate(lcpEvent)) {\n    return {warnings: [InsightWarning.NO_LCP]};\n  }\n\n  // This helps calculate the phases.\n  const lcpMs = Helpers.Timing.microSecondsToMilliseconds(metricScore.timing);\n  // This helps position things on the timeline's UI accurately for a trace.\n  const lcpTs = metricScore.event?.ts ? Helpers.Timing.microSecondsToMilliseconds(metricScore.event?.ts) : undefined;\n  const lcpResource = findLCPRequest(traceParsedData, context, lcpEvent);\n  const mainReq = networkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);\n  if (!mainReq) {\n    return {lcpMs, lcpTs, warnings: [InsightWarning.NO_DOCUMENT_REQUEST]};\n  }\n\n  if (!lcpResource) {\n    return {\n      lcpMs: lcpMs,\n      lcpTs: lcpTs,\n      phases: breakdownPhases(nav, mainReq, lcpMs, lcpResource),\n    };\n  }\n\n  const imageLoadingAttr = lcpEvent.args.data?.loadingAttr;\n  const imagePreloaded = lcpResource?.args.data.isLinkPreload || lcpResource?.args.data.initiator?.type === 'preload';\n  const imageFetchPriorityHint = lcpResource?.args.data.fetchPriorityHint;\n\n  // This is the earliest discovery time an LCP resource could have - it's TTFB.\n  const earliestDiscoveryTime = mainReq && mainReq.args.data.timing ?\n      Helpers.Timing.secondsToMicroseconds(mainReq.args.data.timing.requestTime) +\n          Helpers.Timing.millisecondsToMicroseconds(mainReq.args.data.timing.receiveHeadersStart) :\n      undefined;\n\n  return {\n    lcpMs: lcpMs,\n    lcpTs: lcpTs,\n    phases: breakdownPhases(nav, mainReq, lcpMs, lcpResource),\n    shouldRemoveLazyLoading: imageLoadingAttr === 'lazy',\n    shouldIncreasePriorityHint: imageFetchPriorityHint !== 'high',\n    shouldPreloadImage: !imagePreloaded,\n    lcpResource,\n    earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.MicroSeconds(earliestDiscoveryTime) : undefined,\n  };\n}\n"]}
+{"version":3,"file":"LargestContentfulPaint.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LargestContentfulPaint.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 Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {findLCPRequest} from './Common.js';\nimport {type InsightResult, type InsightSetContext, InsightWarning, type RequiredData} from './types.js';\n\nexport function deps(): ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'] {\n  return ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'];\n}\n\ninterface LCPPhases {\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: Types.Timing.MilliSeconds;\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?: Types.Timing.MilliSeconds;\n  /**\n   * The time it takes to load the LCP request.\n   */\n  loadTime?: Types.Timing.MilliSeconds;\n  /**\n   * The time between when the LCP request finishes loading and when\n   * the LCP element is rendered.\n   */\n  renderDelay: Types.Timing.MilliSeconds;\n}\n\nexport type LCPInsightResult = InsightResult<{\n  lcpMs?: Types.Timing.MilliSeconds,\n  lcpTs?: Types.Timing.MilliSeconds,\n  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,\n  phases?: LCPPhases,\n  shouldRemoveLazyLoading?: boolean,\n  shouldIncreasePriorityHint?: boolean,\n  shouldPreloadImage?: boolean,\n  /** The network request for the LCP image, if there was one. */\n  lcpRequest?: Types.Events.SyntheticNetworkRequest,\n  earliestDiscoveryTimeTs?: Types.Timing.MicroSeconds,\n}>;\n\nfunction anyValuesNaN(...values: number[]): boolean {\n  return values.some(v => Number.isNaN(v));\n}\n/**\n * Calculates the 4 phases of an LCP and the timings of each.\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 breakdownPhases(\n    nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest,\n    lcpMs: Types.Timing.MilliSeconds, lcpRequest: Types.Events.SyntheticNetworkRequest|null): LCPPhases|null {\n  const docReqTiming = docRequest.args.data.timing;\n  if (!docReqTiming) {\n    throw new Error('no timing for document request');\n  }\n  const firstDocByteTs = Helpers.Timing.secondsToMicroseconds(docReqTiming.requestTime) +\n      Helpers.Timing.millisecondsToMicroseconds(docReqTiming.receiveHeadersStart);\n\n  const firstDocByteTiming = Types.Timing.MicroSeconds(firstDocByteTs - nav.ts);\n  const ttfb = Helpers.Timing.microSecondsToMilliseconds(firstDocByteTiming);\n  let renderDelay = Types.Timing.MilliSeconds(lcpMs - ttfb);\n\n  if (!lcpRequest) {\n    if (anyValuesNaN(ttfb, renderDelay)) {\n      return null;\n    }\n    return {ttfb, renderDelay};\n  }\n\n  const lcpStartTs = Types.Timing.MicroSeconds(lcpRequest.ts - nav.ts);\n  const requestStart = Helpers.Timing.microSecondsToMilliseconds(lcpStartTs);\n\n  const lcpReqEndTs = Types.Timing.MicroSeconds(lcpRequest.args.data.syntheticData.finishTime - nav.ts);\n  const requestEnd = Helpers.Timing.microSecondsToMilliseconds(lcpReqEndTs);\n\n  const loadDelay = Types.Timing.MilliSeconds(requestStart - ttfb);\n  const loadTime = Types.Timing.MilliSeconds(requestEnd - requestStart);\n  renderDelay = Types.Timing.MilliSeconds(lcpMs - requestEnd);\n  if (anyValuesNaN(ttfb, loadDelay, loadTime, renderDelay)) {\n    return null;\n  }\n\n  return {\n    ttfb,\n    loadDelay,\n    loadTime,\n    renderDelay,\n  };\n}\n\nexport function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): LCPInsightResult {\n  if (!context.navigation) {\n    return {};\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 {warnings: [InsightWarning.NO_LCP]};\n  }\n\n  // This helps calculate the phases.\n  const lcpMs = Helpers.Timing.microSecondsToMilliseconds(metricScore.timing);\n  // This helps position things on the timeline's UI accurately for a trace.\n  const lcpTs = metricScore.event?.ts ? Helpers.Timing.microSecondsToMilliseconds(metricScore.event?.ts) : undefined;\n  const lcpRequest = findLCPRequest(parsedTrace, context, lcpEvent);\n  const docRequest = networkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);\n  if (!docRequest) {\n    return {lcpMs, lcpTs, lcpEvent, warnings: [InsightWarning.NO_DOCUMENT_REQUEST]};\n  }\n\n  if (!lcpRequest) {\n    return {\n      lcpMs,\n      lcpTs,\n      lcpEvent,\n      phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,\n    };\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 && docRequest.args.data.timing ?\n      Helpers.Timing.secondsToMicroseconds(docRequest.args.data.timing.requestTime) +\n          Helpers.Timing.millisecondsToMicroseconds(docRequest.args.data.timing.receiveHeadersStart) :\n      undefined;\n\n  return {\n    lcpMs,\n    lcpTs,\n    lcpEvent,\n    phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,\n    shouldRemoveLazyLoading: imageLoadingAttr === 'lazy',\n    shouldIncreasePriorityHint: imageFetchPriorityHint !== 'high',\n    shouldPreloadImage: !imgPreloadedOrFoundInHTML,\n    lcpRequest,\n    earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.MicroSeconds(earliestDiscoveryTime) : undefined,\n  };\n}\n"]}

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

@@ -1,8 +1,8 @@
 import * as Types from '../types/types.js';
-import { type InsightResult, type NavigationInsightContext, type RequiredData } from './types.js';
+import { type InsightResult, type InsightSetContext, type RequiredData } from './types.js';
 export type RenderBlockingInsightResult = InsightResult<{
-    renderBlockingRequests: Types.TraceEvents.SyntheticNetworkRequest[];
+    renderBlockingRequests: Types.Events.SyntheticNetworkRequest[];
     requestIdToWastedMs?: Map<string, number>;
 }>;
 export declare function deps(): ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint'];
-export declare function generateInsight(traceParsedData: RequiredData<typeof deps>, context: NavigationInsightContext): RenderBlockingInsightResult;
+export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): RenderBlockingInsightResult;

package/models/trace/insights/RenderBlocking.js

@@ -51,12 +51,8 @@ function estimateSavingsWithGraphs(deferredIds, lanternContext) {
     minimalFCPGraph.request.transferSize = originalTransferSize;
     return Math.round(Math.max(estimateBeforeInline - estimateAfterInline, 0));
 }
-function hasImageLCP(traceParsedData, context) {
-    const nav = traceParsedData.Meta.navigationsByNavigationId.get(context.navigationId);
-    if (!nav) {
-        throw new Error('no trace navigation');
-    }
-    const frameMetrics = traceParsedData.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);
+function hasImageLCP(parsedTrace, context) {
+    const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);
     if (!frameMetrics) {
         throw new Error('no frame metrics');
     }
@@ -66,12 +62,12 @@ function hasImageLCP(traceParsedData, context) {
     }
     const metricScore = navMetrics.get("LCP" /* Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP */);
     const lcpEvent = metricScore?.event;
-    if (!lcpEvent || !Types.TraceEvents.isTraceEventLargestContentfulPaintCandidate(lcpEvent)) {
+    if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
         return false;
     }
-    return findLCPRequest(traceParsedData, context, lcpEvent) !== null;
+    return findLCPRequest(parsedTrace, context, lcpEvent) !== null;
 }
-function computeSavings(traceParsedData, context, renderBlockingRequests) {
+function computeSavings(parsedTrace, context, renderBlockingRequests) {
     if (!context.lantern) {
         return;
     }
@@ -79,8 +75,8 @@ function computeSavings(traceParsedData, context, renderBlockingRequests) {
     const metricSavings = { FCP: 0, LCP: 0 };
     const requestIdToWastedMs = new Map();
     const deferredNodeIds = new Set();
-    for (const resource of renderBlockingRequests) {
-        const nodeAndTiming = nodesAndTimingsByRequestId.get(resource.args.data.requestId);
+    for (const request of renderBlockingRequests) {
+        const nodeAndTiming = nodesAndTimingsByRequestId.get(request.args.data.requestId);
         if (!nodeAndTiming) {
             continue;
         }
@@ -97,14 +93,19 @@ function computeSavings(traceParsedData, context, renderBlockingRequests) {
     if (requestIdToWastedMs.size) {
         metricSavings.FCP = estimateSavingsWithGraphs(deferredNodeIds, context.lantern);
         // In most cases, render blocking resources only affect LCP if LCP isn't an image.
-        if (!hasImageLCP(traceParsedData, context)) {
+        if (!hasImageLCP(parsedTrace, context)) {
             metricSavings.LCP = metricSavings.FCP;
         }
     }
     return { metricSavings, requestIdToWastedMs };
 }
-export function generateInsight(traceParsedData, context) {
-    const firstPaintTs = traceParsedData.PageLoadMetrics.metricScoresByFrameId.get(context.frameId)
+export function generateInsight(parsedTrace, context) {
+    if (!context.navigation) {
+        return {
+            renderBlockingRequests: [],
+        };
+    }
+    const firstPaintTs = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId)
         ?.get(context.navigationId)
         ?.get("FP" /* Handlers.ModelHandlers.PageLoadMetrics.MetricName.FP */)
         ?.event?.ts;
@@ -114,19 +115,19 @@ export function generateInsight(traceParsedData, context) {
             warnings: [InsightWarning.NO_FP],
         };
     }
-    const renderBlockingRequests = [];
-    for (const req of traceParsedData.NetworkRequests.byTime) {
+    let renderBlockingRequests = [];
+    for (const req of parsedTrace.NetworkRequests.byTime) {
         if (req.args.data.frame !== context.frameId) {
             continue;
         }
-        if (req.args.data.renderBlocking !== 'blocking' && req.args.data.renderBlocking !== 'in_body_parser_blocking') {
+        if (!Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(req)) {
             continue;
         }
         if (req.args.data.syntheticData.finishTime > firstPaintTs) {
             continue;
         }
-        // If a resource is marked `in_body_parser_blocking` it should only be considered render blocking if it is a
-        // high enough priority. Some resources (e.g. scripts) are not marked as high priority if they are fetched
+        // If a request is marked `in_body_parser_blocking` it should only be considered render blocking if it is a
+        // high enough priority. Some requests (e.g. scripts) are not marked as high priority if they are fetched
         // after a non-preloaded image. (See "early" definition in https://web.dev/articles/fetch-priority)
         //
         // There are edge cases and exceptions (e.g. priority hints) but this gives us the best approximation
@@ -139,14 +140,18 @@ export function generateInsight(traceParsedData, context) {
                 continue;
             }
         }
-        const navigation = Helpers.Trace.getNavigationForTraceEvent(req, context.frameId, traceParsedData.Meta.navigationsByFrameId);
-        if (navigation?.args.data?.navigationId !== context.navigationId) {
-            continue;
+        const navigation = Helpers.Trace.getNavigationForTraceEvent(req, context.frameId, parsedTrace.Meta.navigationsByFrameId);
+        if (navigation === context.navigation) {
+            renderBlockingRequests.push(req);
         }
-        renderBlockingRequests.push(req);
     }
-    const savings = computeSavings(traceParsedData, context, renderBlockingRequests);
+    const savings = computeSavings(parsedTrace, context, renderBlockingRequests);
+    // Sort by request duration for insights.
+    renderBlockingRequests = renderBlockingRequests.sort((a, b) => {
+        return b.dur - a.dur;
+    });
     return {
+        relatedEvents: renderBlockingRequests,
         renderBlockingRequests,
         ...savings,
     };