chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

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

@@ -6,14 +6,16 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Helpers from '../helpers/helpers.js';
 import type * as Types from '../types/types.js';
 
+import {metricSavingsForWastedBytes} from './Common.js';
 import {
   InsightCategory,
   type InsightModel,
   type InsightSetContext,
+  type PartialInsightModel,
   type RequiredData,
 } from './types.js';
 
-const UIStrings = {
+export const UIStrings = {
   /**
    * @description Title of an insight that recommends ways to reduce the size of images downloaded and used on the page.
    */
@@ -25,32 +27,47 @@ const UIStrings = {
       'Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)',
   /**
    * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.
-   * @example {50 MB} PH1
    */
-  useCompression: 'Increasing the image compression factor could improve this image\'s download size. (Est {PH1})',
+  useCompression: 'Increasing the image compression factor could improve this image\'s download size.',
   /**
    * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.
-   * @example {50 MB} PH1
    */
   useModernFormat:
-      'Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image\'s download size. (Est {PH1})',
+      'Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image\'s download size.',
   /**
    * @description Message displayed in a chip advising the user to use video formats instead of GIFs because videos generally have smaller file sizes.
-   * @example {50 MB} PH1
    */
-  useVideoFormat: 'Using video formats instead of GIFs can improve the download size of animated content. (Est {PH1})',
+  useVideoFormat: 'Using video formats instead of GIFs can improve the download size of animated content.',
   /**
    * @description Message displayed in a chip explaining that an image was displayed on the page with dimensions much smaller than the image file dimensions.
-   * @example {50 MB} PH1
-   * @example {1000x500} PH2
-   * @example {100x50} PH3
+   * @example {1000x500} PH1
+   * @example {100x50} PH2
    */
   useResponsiveSize:
-      'This image file is larger than it needs to be ({PH2}) for its displayed dimensions ({PH3}). Use responsive images to reduce the image download size. (Est {PH1})',
+      'This image file is larger than it needs to be ({PH1}) for its displayed dimensions ({PH2}). Use responsive images to reduce the image download size.',
+  /**
+   * @description Column header for a table column containing network requests for images which can improve their file size (e.g. use a different format, increase compression, etc).
+   */
+  optimizeFile: 'Optimize file size',
+  /**
+   * @description Table row value representing the remaining items not shown in the table due to size constraints. This row will always represent at least 2 items.
+   * @example {5} PH1
+   */
+  others: '{PH1} others',
+  /**
+   * @description Text status indicating that no potential optimizations were found for any image file
+   */
+  noOptimizableImages: 'No optimizable images',
+  /**
+   * @description Text describing the estimated number of bytes that an image file optimization can save. This text is appended to another block of text describing the image optimization in more detail. "Est" means "Estimated".
+   * @example {Use the correct image dimensions to reduce the image file size.} PH1
+   * @example {50 MB} PH2
+   */
+  estimatedSavings: '{PH1} (Est {PH2})',
 };
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ImageDelivery.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 /**
  * Even JPEGs with lots of detail can usually be compressed down to <1 byte per pixel
@@ -111,39 +128,44 @@ export interface OptimizableImage {
   largestImagePaint: Types.Events.PaintImage;
 }
 
-export type ImageDeliveryInsightModel = InsightModel<{
+export type ImageDeliveryInsightModel = InsightModel<typeof UIStrings, {
+  /** Sorted by potential byte savings, then by size of image. */
   optimizableImages: OptimizableImage[],
   totalByteSavings: number,
 }>;
 
-function getOptimizationMessage(optimization: ImageOptimization): string {
-  const byteSavingsText = i18n.ByteUtilities.bytesToString(optimization.byteSavings);
+export function getOptimizationMessage(optimization: ImageOptimization): string {
   switch (optimization.type) {
     case ImageOptimizationType.ADJUST_COMPRESSION:
-      return i18nString(UIStrings.useCompression, {PH1: byteSavingsText});
+      return i18nString(UIStrings.useCompression);
     case ImageOptimizationType.MODERN_FORMAT_OR_COMPRESSION:
-      return i18nString(UIStrings.useModernFormat, {PH1: byteSavingsText});
+      return i18nString(UIStrings.useModernFormat);
     case ImageOptimizationType.VIDEO_FORMAT:
-      return i18nString(UIStrings.useVideoFormat, {PH1: byteSavingsText});
+      return i18nString(UIStrings.useVideoFormat);
     case ImageOptimizationType.RESPONSIVE_SIZE:
       return i18nString(UIStrings.useResponsiveSize, {
-        PH1: byteSavingsText,
-        PH2: `${optimization.fileDimensions.width}x${optimization.fileDimensions.height}`,
-        PH3: `${optimization.displayDimensions.width}x${optimization.displayDimensions.height}`,
+        PH1: `${optimization.fileDimensions.width}x${optimization.fileDimensions.height}`,
+        PH2: `${optimization.displayDimensions.width}x${optimization.displayDimensions.height}`,
       });
   }
 }
 
-function finalize(partialModel: Omit<ImageDeliveryInsightModel, 'title'|'description'|'category'|'shouldShow'>):
-    ImageDeliveryInsightModel {
+export function getOptimizationMessageWithBytes(optimization: ImageOptimization): string {
+  const byteSavingsText = i18n.ByteUtilities.bytesToString(optimization.byteSavings);
+  const optimizationMessage = getOptimizationMessage(optimization);
+  return i18nString(UIStrings.estimatedSavings, {PH1: optimizationMessage, PH2: byteSavingsText});
+}
+
+function finalize(partialModel: PartialInsightModel<ImageDeliveryInsightModel>): ImageDeliveryInsightModel {
   return {
+    strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.LCP,
-    shouldShow: partialModel.optimizableImages.length > 0,
+    state: partialModel.optimizableImages.length > 0 ? 'fail' : 'pass',
     ...partialModel,
-    relatedEvents: new Map(
-        partialModel.optimizableImages.map(image => [image.request, image.optimizations.map(getOptimizationMessage)])),
+    relatedEvents: new Map(partialModel.optimizableImages.map(
+        image => [image.request, image.optimizations.map(getOptimizationMessageWithBytes)])),
   };
 }
 
@@ -264,8 +286,23 @@ export function generateInsight(
     }
   }
 
+  const wastedBytesByRequestId = new Map<string, number>();
+  for (const image of optimizableImages) {
+    wastedBytesByRequestId.set(image.request.args.data.requestId, image.byteSavings);
+  }
+
+  // Sort by savings, then by size of image.
+  optimizableImages.sort((a, b) => {
+    if (b.byteSavings !== a.byteSavings) {
+      return b.byteSavings - a.byteSavings;
+    }
+
+    return b.request.args.data.decodedBodyLength - a.request.args.data.decodedBodyLength;
+  });
+
   return finalize({
     optimizableImages,
     totalByteSavings: optimizableImages.reduce((total, img) => total + img.byteSavings, 0),
+    metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),
   });
 }

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

@@ -6,9 +6,15 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Helpers from '../helpers/helpers.js';
 import type {SyntheticInteractionPair} from '../types/TraceEvents.js';
 
-import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
+import {
+  InsightCategory,
+  type InsightModel,
+  type InsightSetContext,
+  type PartialInsightModel,
+  type RequiredData
+} from './types.js';
 
-const UIStrings = {
+export const UIStrings = {
   /**
    * @description Text to tell the user about the longest user interaction.
    */
@@ -18,26 +24,53 @@ const UIStrings = {
    * @description Title for the performance insight "INP by phase", which shows a breakdown of INP by phases / sections.
    */
   title: 'INP by phase',
+  /**
+   *@description Label used for the phase/component/stage/section of a larger duration.
+   */
+  phase: 'Phase',
+  /**
+   *@description Label used for a time duration.
+   */
+  duration: 'Duration',
+
+  // TODO: these are repeated in InteractionBreakdown. Add a place for common strings?
+  /**
+   *@description Text shown next to the interaction event's input delay time in the detail view.
+   */
+  inputDelay: 'Input delay',
+  /**
+   *@description Text shown next to the interaction event's thread processing duration in the detail view.
+   */
+  processingDuration: 'Processing duration',
+  /**
+   *@description Text shown next to the interaction event's presentation delay time in the detail view.
+   */
+  presentationDelay: 'Presentation delay',
+  /**
+   * @description Text status indicating that no user interactions were detected.
+   */
+  noInteractions: 'No interactions detected',
 };
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/InteractionToNextPaint.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export function deps(): ['UserInteractions'] {
   return ['UserInteractions'];
 }
 
-export type INPInsightModel = InsightModel<{
+export type INPInsightModel = InsightModel<typeof UIStrings, {
   longestInteractionEvent?: SyntheticInteractionPair,
   highPercentileInteractionEvent?: SyntheticInteractionPair,
 }>;
 
-function finalize(partialModel: Omit<INPInsightModel, 'title'|'description'|'category'|'shouldShow'>): INPInsightModel {
+function finalize(partialModel: PartialInsightModel<INPInsightModel>): INPInsightModel {
   return {
+    strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.INP,
-    shouldShow: Boolean(partialModel.longestInteractionEvent),
+    state: partialModel.longestInteractionEvent ? 'informative' : 'pass',
     ...partialModel,
   };
 }

package/front_end/models/trace/insights/LCPDiscovery.test.ts

@@ -10,11 +10,30 @@ describeWithEnvironment('LCPDiscovery', function() {
     const {data, insights} = await processTrace(this, 'lcp-images.json.gz');
     const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
     const insight = getInsightOrError('LCPDiscovery', insights, firstNav);
-    const {shouldIncreasePriorityHint, shouldPreloadImage, shouldRemoveLazyLoading} = insight;
+    const {checklist} = insight;
 
-    assert.isFalse(shouldRemoveLazyLoading);
-    assert.isFalse(shouldPreloadImage);
-    assert.isTrue(shouldIncreasePriorityHint);
+    assert.exists(checklist);
+    assert.isFalse(checklist.priorityHinted.value);
+    assert.isTrue(checklist.requestDiscoverable.value);
+    assert.isTrue(checklist.eagerlyLoaded.value);
+  });
+
+  it('uses the fetchpriority=high text when the image has fetchpriority set', async () => {
+    const {data, insights} = await processTrace(this, 'lcp-fetchpriority-high.json.gz');
+    const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
+    const insight = getInsightOrError('LCPDiscovery', insights, firstNav);
+    assert.isOk(insight.checklist);
+    assert.isTrue(insight.checklist.priorityHinted.value);
+    assert.strictEqual(insight.checklist.priorityHinted.label, 'fetchpriority=high applied');
+  });
+
+  it('uses the should apply fetchpriority=high text when the image does not fetchpriority set', async () => {
+    const {data, insights} = await processTrace(this, 'web-dev-with-commit.json.gz');
+    const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
+    const insight = getInsightOrError('LCPDiscovery', insights, firstNav);
+    assert.isOk(insight.checklist);
+    assert.isFalse(insight.checklist.priorityHinted.value);
+    assert.strictEqual(insight.checklist.priorityHinted.label, 'fetchpriority=high should be applied');
   });
 
   it('calculates the LCP optimal time as the document request download start time', async () => {

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

@@ -8,14 +8,16 @@ import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
 import {
+  type Checklist,
   InsightCategory,
   type InsightModel,
   type InsightSetContext,
   InsightWarning,
+  type PartialInsightModel,
   type RequiredData,
 } from './types.js';
 
-const UIStrings = {
+export const UIStrings = {
   /**
    *@description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)
    */
@@ -25,39 +27,67 @@ const UIStrings = {
    */
   description:
       'Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)',
+  /**
+   * @description Text to tell the user how long after the earliest discovery time their LCP element loaded.
+   * @example {401ms} PH1
+   */
+  lcpLoadDelay: 'LCP image loaded {PH1} after earliest start point.',
+  /**
+   * @description Text to tell the user that a fetchpriority property value of "high" is applied to the LCP request.
+   */
+  fetchPriorityApplied: 'fetchpriority=high applied',
+  /**
+   * @description Text to tell the user that a fetchpriority property value of "high" should be applied to the LCP request.
+   */
+  fetchPriorityShouldBeApplied: 'fetchpriority=high should be applied',
+  /**
+   * @description Text to tell the user that the LCP request is discoverable in the initial document.
+   */
+  requestDiscoverable: 'Request is discoverable in initial document',
+  /**
+   * @description Text to tell the user that the LCP request does not have the lazy load property applied.
+   */
+  lazyLoadNotApplied: 'lazy load not applied',
+  /**
+   * @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.
+   */
+  noLcp: 'No LCP detected',
+  /**
+   * @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.
+   */
+  noLcpResource: 'No LCP resource detected because the LCP is not an image',
 };
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPDiscovery.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export function deps(): ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'] {
   return ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'];
 }
 
-export type LCPDiscoveryInsightModel = InsightModel<{
+export type LCPDiscoveryInsightModel = InsightModel<typeof UIStrings, {
   lcpEvent?: Types.Events.LargestContentfulPaintCandidate,
-  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,
+  earliestDiscoveryTimeTs?: Types.Timing.Micro,
+  checklist?: Checklist<'priorityHinted'|'requestDiscoverable'|'eagerlyLoaded'>,
 }>;
 
-function finalize(partialModel: Omit<LCPDiscoveryInsightModel, 'title'|'description'|'category'|'shouldShow'>):
-    LCPDiscoveryInsightModel {
+function finalize(partialModel: PartialInsightModel<LCPDiscoveryInsightModel>): LCPDiscoveryInsightModel {
   const relatedEvents = partialModel.lcpEvent && partialModel.lcpRequest ?
       // TODO: add entire request initiator chain?
       [partialModel.lcpEvent, partialModel.lcpRequest] :
       [];
   return {
+    strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.LCP,
-    shouldShow: Boolean(
-        partialModel.lcpRequest &&
-        (partialModel.shouldIncreasePriorityHint || partialModel.shouldPreloadImage ||
-         partialModel.shouldRemoveLazyLoading)),
+    state: partialModel.lcpRequest && partialModel.checklist &&
+            (!partialModel.checklist.eagerlyLoaded.value || !partialModel.checklist.requestDiscoverable.value ||
+             !partialModel.checklist.priorityHinted.value) ?
+        'fail' :
+        'pass',
     ...partialModel,
     relatedEvents,
   };
@@ -107,16 +137,24 @@ export function generateInsight(
   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) :
+      Helpers.Timing.secondsToMicro(docRequest.args.data.timing.requestTime) +
+          Helpers.Timing.milliToMicro(docRequest.args.data.timing.receiveHeadersStart) :
       undefined;
 
+  const priorityHintFound = imageFetchPriorityHint === 'high';
+
   return finalize({
     lcpEvent,
-    shouldRemoveLazyLoading: imageLoadingAttr === 'lazy',
-    shouldIncreasePriorityHint: imageFetchPriorityHint !== 'high',
-    shouldPreloadImage: !imgPreloadedOrFoundInHTML,
     lcpRequest,
-    earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.MicroSeconds(earliestDiscoveryTime) : undefined,
+    earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.Micro(earliestDiscoveryTime) : undefined,
+    checklist: {
+      priorityHinted: {
+        label: priorityHintFound ? i18nString(UIStrings.fetchPriorityApplied) :
+                                   i18nString(UIStrings.fetchPriorityShouldBeApplied),
+        value: priorityHintFound
+      },
+      requestDiscoverable: {label: i18nString(UIStrings.requestDiscoverable), value: imgPreloadedOrFoundInHTML},
+      eagerlyLoaded: {label: i18nString(UIStrings.lazyLoadNotApplied), value: imageLoadingAttr !== 'lazy'},
+    },
   });
 }

package/front_end/models/trace/insights/LCPPhases.test.ts

@@ -14,8 +14,8 @@ describeWithEnvironment('LCPPhases', function() {
 
     assert.strictEqual(insight.lcpMs, 106.482);
 
-    const wantTtfb = Types.Timing.MilliSeconds(6.115);
-    const wantRenderDelay = Types.Timing.MilliSeconds(100.367);
+    const wantTtfb = Types.Timing.Milli(6.115);
+    const wantRenderDelay = Types.Timing.Milli(100.367);
     assert.deepEqual(insight.phases, {ttfb: wantTtfb, renderDelay: wantRenderDelay});
   });
 

package/front_end/models/trace/insights/LCPPhases.ts

@@ -12,10 +12,11 @@ import {
   type InsightModel,
   type InsightSetContext,
   InsightWarning,
+  type PartialInsightModel,
   type RequiredData,
 } from './types.js';
 
-const UIStrings = {
+export const UIStrings = {
   /**
    *@description Title of an insight that provides details about the LCP metric, broken down by phases / parts.
    */
@@ -26,9 +27,37 @@ const UIStrings = {
    */
   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 Time to first byte title for the Largest Contentful Paint's phases timespan breakdown.
+   */
+  timeToFirstByte: 'Time to first byte',
+  /**
+   *@description Resource load delay title for the Largest Contentful Paint phases timespan breakdown.
+   */
+  resourceLoadDelay: 'Resource load delay',
+  /**
+   *@description Resource load duration title for the Largest Contentful Paint phases timespan breakdown.
+   */
+  resourceLoadDuration: 'Resource load duration',
+  /**
+   *@description Element render delay title for the Largest Contentful Paint phases timespan breakdown.
+   */
+  elementRenderDelay: 'Element render delay',
+  /**
+   *@description Label used for the phase/component/stage/section of a larger duration.
+   */
+  phase: 'Phase',
+  /**
+   *@description Label used for the percentage a single phase/component/stage/section takes up of a larger duration.
+   */
+  percentLCP: '% of LCP',
+  /**
+   * @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.
+   */
+  noLcp: 'No LCP detected',
 };
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPPhases.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export function deps(): ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'] {
   return ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'];
@@ -39,26 +68,26 @@ 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;
+  ttfb: Types.Timing.Milli;
   /**
    * 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;
+  loadDelay?: Types.Timing.Milli;
   /**
    * The time it takes to load the LCP request.
    */
-  loadTime?: Types.Timing.MilliSeconds;
+  loadTime?: Types.Timing.Milli;
   /**
    * The time between when the LCP request finishes loading and when
    * the LCP element is rendered.
    */
-  renderDelay: Types.Timing.MilliSeconds;
+  renderDelay: Types.Timing.Milli;
 }
 
-export type LCPPhasesInsightModel = InsightModel<{
-  lcpMs?: Types.Timing.MilliSeconds,
-  lcpTs?: Types.Timing.MilliSeconds,
+export type LCPPhasesInsightModel = InsightModel<typeof UIStrings, {
+  lcpMs?: Types.Timing.Milli,
+  lcpTs?: Types.Timing.Milli,
   lcpEvent?: Types.Events.LargestContentfulPaintCandidate,
   /** The network request for the LCP image, if there was one. */
   lcpRequest?: Types.Events.SyntheticNetworkRequest,
@@ -75,18 +104,18 @@ function anyValuesNaN(...values: number[]): boolean {
  * data we rely on, so we want to handle that case.
  */
 function breakdownPhases(
-    nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest,
-    lcpMs: Types.Timing.MilliSeconds, lcpRequest: Types.Events.SyntheticNetworkRequest|undefined): LCPPhases|null {
+    nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest, lcpMs: Types.Timing.Milli,
+    lcpRequest: Types.Events.SyntheticNetworkRequest|undefined): LCPPhases|null {
   const docReqTiming = docRequest.args.data.timing;
   if (!docReqTiming) {
     throw new Error('no timing for document request');
   }
-  const firstDocByteTs = Helpers.Timing.secondsToMicroseconds(docReqTiming.requestTime) +
-      Helpers.Timing.millisecondsToMicroseconds(docReqTiming.receiveHeadersStart);
+  const firstDocByteTs = Helpers.Timing.secondsToMicro(docReqTiming.requestTime) +
+      Helpers.Timing.milliToMicro(docReqTiming.receiveHeadersStart);
 
-  const firstDocByteTiming = Types.Timing.MicroSeconds(firstDocByteTs - nav.ts);
-  const ttfb = Helpers.Timing.microSecondsToMilliseconds(firstDocByteTiming);
-  let renderDelay = Types.Timing.MilliSeconds(lcpMs - ttfb);
+  const firstDocByteTiming = Types.Timing.Micro(firstDocByteTs - nav.ts);
+  const ttfb = Helpers.Timing.microToMilli(firstDocByteTiming);
+  let renderDelay = Types.Timing.Milli(lcpMs - ttfb);
 
   if (!lcpRequest) {
     if (anyValuesNaN(ttfb, renderDelay)) {
@@ -95,15 +124,15 @@ function breakdownPhases(
     return {ttfb, renderDelay};
   }
 
-  const lcpStartTs = Types.Timing.MicroSeconds(lcpRequest.ts - nav.ts);
-  const requestStart = Helpers.Timing.microSecondsToMilliseconds(lcpStartTs);
+  const lcpStartTs = Types.Timing.Micro(lcpRequest.ts - nav.ts);
+  const requestStart = Helpers.Timing.microToMilli(lcpStartTs);
 
-  const lcpReqEndTs = Types.Timing.MicroSeconds(lcpRequest.args.data.syntheticData.finishTime - nav.ts);
-  const requestEnd = Helpers.Timing.microSecondsToMilliseconds(lcpReqEndTs);
+  const lcpReqEndTs = Types.Timing.Micro(lcpRequest.args.data.syntheticData.finishTime - nav.ts);
+  const requestEnd = Helpers.Timing.microToMilli(lcpReqEndTs);
 
-  const loadDelay = Types.Timing.MilliSeconds(requestStart - ttfb);
-  const loadTime = Types.Timing.MilliSeconds(requestEnd - requestStart);
-  renderDelay = Types.Timing.MilliSeconds(lcpMs - requestEnd);
+  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)) {
     return null;
   }
@@ -116,8 +145,7 @@ function breakdownPhases(
   };
 }
 
-function finalize(partialModel: Omit<LCPPhasesInsightModel, 'title'|'description'|'category'|'shouldShow'>):
-    LCPPhasesInsightModel {
+function finalize(partialModel: PartialInsightModel<LCPPhasesInsightModel>): LCPPhasesInsightModel {
   const relatedEvents = [];
   if (partialModel.lcpEvent) {
     relatedEvents.push(partialModel.lcpEvent);
@@ -126,11 +154,11 @@ function finalize(partialModel: Omit<LCPPhasesInsightModel, 'title'|'description
     relatedEvents.push(partialModel.lcpRequest);
   }
   return {
+    strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.LCP,
-    // TODO: should move the component's "getPhaseData" to model.
-    shouldShow: Boolean(partialModel.phases) && (partialModel.lcpMs ?? 0) > 0,
+    state: partialModel.lcpEvent || partialModel.lcpRequest ? 'informative' : 'pass',
     ...partialModel,
     relatedEvents,
   };
@@ -160,9 +188,9 @@ export function generateInsight(
   }
 
   // This helps calculate the phases.
-  const lcpMs = Helpers.Timing.microSecondsToMilliseconds(metricScore.timing);
+  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.microSecondsToMilliseconds(metricScore.event?.ts) : undefined;
+  const lcpTs = metricScore.event?.ts ? Helpers.Timing.microToMilli(metricScore.event?.ts) : undefined;
   const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigation.get(context.navigation);
 
   const docRequest = networkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);

package/front_end/models/trace/insights/LongCriticalNetworkTree.ts

@@ -0,0 +1,60 @@
+// Copyright 2025 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 i18n from '../../../core/i18n/i18n.js';
+import type * as Types from '../types/types.js';
+
+import {
+  InsightCategory,
+  type InsightModel,
+  type InsightSetContext,
+  type PartialInsightModel,
+  type RequiredData
+} from './types.js';
+
+export const UIStrings = {
+  /**
+   * @description Title of an insight that recommends avoiding chaining critical requests.
+   */
+  title: 'Long critical network tree',
+  /**
+   * @description Description of an insight that recommends avoiding chaining critical requests.
+   */
+  description:
+      '[Avoid chaining critical requests](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains) by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.',
+  /**
+   * @description Text status indicating that there isn't long chaining critical network requests.
+   */
+  noLongCriticalNetworkTree: 'No rendering tasks impacted by long critical network tree',
+};
+
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LongCriticalNetworkTree.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export type LongCriticalNetworkTreeInsightModel = InsightModel<typeof UIStrings, {
+  longChains: Types.Events.SyntheticNetworkRequest[][],
+}>;
+
+export function deps(): ['NetworkRequests'] {
+  return ['NetworkRequests'];
+}
+
+function finalize(partialModel: PartialInsightModel<LongCriticalNetworkTreeInsightModel>):
+    LongCriticalNetworkTreeInsightModel {
+  return {
+    strings: UIStrings,
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.LCP,
+    state: partialModel.longChains.length > 0 ? 'fail' : 'pass',
+    ...partialModel,
+  };
+}
+
+export function generateInsight(
+    _parsedTrace: RequiredData<typeof deps>, _context: InsightSetContext): LongCriticalNetworkTreeInsightModel {
+  return finalize({
+    longChains: [],
+  });
+}

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

@@ -6,10 +6,12 @@ export * as CLSCulprits from './CLSCulprits.js';
 export * as DocumentLatency from './DocumentLatency.js';
 export * as DOMSize from './DOMSize.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 LCPDiscovery from './LCPDiscovery.js';
 export * as LCPPhases from './LCPPhases.js';
+export * as LongCriticalNetworkTree from './LongCriticalNetworkTree.js';
 export * as RenderBlocking from './RenderBlocking.js';
 export * as SlowCSSSelector from './SlowCSSSelector.js';
 export * as ThirdParties from './ThirdParties.js';