lighthouse 12.6.1 → 12.7.0-dev.20250627

package/cli/test/smokehouse/core-tests.js

@@ -61,6 +61,7 @@ import screenshot from './test-definitions/screenshot.js';
 import seoFailing from './test-definitions/seo-failing.js';
 import seoPassing from './test-definitions/seo-passing.js';
 import seoStatus403 from './test-definitions/seo-status-403.js';
+import seoMixedLanguage from './test-definitions/seo-mixed-language.js';
 import serviceWorkerReloaded from './test-definitions/service-worker-reloaded.js';
 import shiftAttribution from './test-definitions/shift-attribution.js';
 import sourceMaps from './test-definitions/source-maps.js';
@@ -125,6 +126,7 @@ const smokeTests = [
   seoFailing,
   seoPassing,
   seoStatus403,
+  seoMixedLanguage,
   serviceWorkerReloaded,
   shiftAttribution,
   sourceMaps,

package/cli/test/smokehouse/frontends/lib.js

@@ -10,8 +10,6 @@
  * Supports skipping and modifiying expectations to match the environment.
  */
 
-/* eslint-disable no-console */
-
 import {cloneDeep} from 'lodash-es';
 
 import smokeTests from '../core-tests.js';

package/cli/test/smokehouse/frontends/smokehouse-bin.js

@@ -10,8 +10,6 @@
  * flags, start fixture webservers, then run smokehouse.
  */
 
-/* eslint-disable no-console */
-
 import path from 'path';
 import fs from 'fs';
 import url from 'url';
@@ -173,7 +171,7 @@ async function begin() {
       },
       'no-headless': {
         type: 'boolean',
-        describe: 'Launch Chrome in typical desktop headful mode, rather than our default of `--headless=new` (https://developer.chrome.com/articles/new-headless/).', // eslint-disable-line max-len
+        describe: 'Launch Chrome in typical desktop headful mode, rather than our default of `--headless=new` (https://developer.chrome.com/articles/new-headless/).',
       },
     })
     .wrap(y.terminalWidth())

package/cli/test/smokehouse/lighthouse-runners/cli.js

@@ -94,7 +94,7 @@ async function internalRun(url, tmpPath, config, logger, options) {
 
   try {
     await fs.access(outputPath);
-  } catch (e) {
+  } catch {
     throw new ChildProcessError(`Lighthouse run failed to produce a report.`, logger.getLog());
   }
 

package/cli/test/smokehouse/smokehouse.js

@@ -10,8 +10,6 @@
  * smoke tests passed.
  */
 
-/* eslint-disable no-console */
-
 /**
  * @typedef Run
  * @property {string[] | undefined} networkRequests

package/core/audits/audit.d.ts

@@ -83,6 +83,13 @@ export class Audit {
      * @return {LH.Audit.Details.List}
      */
     static makeListDetails(items: LH.Audit.Details.List["items"]): LH.Audit.Details.List;
+    /**
+     * @param {LH.IcuMessage | string=} title
+     * @param {LH.IcuMessage | string=} description
+     * @param {LH.Audit.Details.ListableDetail} value
+     * @return {LH.Audit.Details.ListSectionItem}
+     */
+    static makeListDetailSectionItem(value: LH.Audit.Details.ListableDetail, title?: (LH.IcuMessage | string) | undefined, description?: (LH.IcuMessage | string) | undefined): LH.Audit.Details.ListSectionItem;
     /** @typedef {{
      * content: string;
      * title: string;

package/core/audits/audit.js

@@ -164,7 +164,7 @@ class Audit {
     if (results.length === 0) {
       return {
         type: 'table',
-        headings: [],
+        headings,
         items: [],
         summary,
       };
@@ -174,7 +174,7 @@ class Audit {
 
     return {
       type: 'table',
-      headings: headings,
+      headings,
       items: results,
       summary,
       sortedBy,
@@ -194,6 +194,21 @@ class Audit {
     };
   }
 
+  /**
+   * @param {LH.IcuMessage | string=} title
+   * @param {LH.IcuMessage | string=} description
+   * @param {LH.Audit.Details.ListableDetail} value
+   * @return {LH.Audit.Details.ListSectionItem}
+   */
+  static makeListDetailSectionItem(value, title, description) {
+    return {
+      type: 'list-section',
+      title,
+      description,
+      value,
+    };
+  }
+
   /** @typedef {{
    * content: string;
    * title: string;

package/core/audits/byte-efficiency/byte-efficiency-audit.js

@@ -8,8 +8,8 @@ import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {NetworkRecords} from '../../computed/network-records.js';
 import {LoadSimulator} from '../../computed/load-simulator.js';
-import {LanternLargestContentfulPaint} from '../../computed/metrics/lantern-largest-contentful-paint.js';
-import {LanternFirstContentfulPaint} from '../../computed/metrics/lantern-first-contentful-paint.js';
+import {LanternLargestContentfulPaint as LanternLCP} from '../../computed/metrics/lantern-largest-contentful-paint.js';
+import {LanternFirstContentfulPaint as LanternFCP} from '../../computed/metrics/lantern-first-contentful-paint.js';
 import {LCPImageRecord} from '../../computed/lcp-image-record.js';
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, {});
@@ -168,12 +168,10 @@ class ByteEfficiencyAudit extends Audit {
     // This is useful information in the LHR and should be preserved.
     let wastedMs;
     if (metricComputationInput.gatherContext.gatherMode === 'navigation') {
-      const {
-        optimisticGraph: optimisticFCPGraph,
-      } = await LanternFirstContentfulPaint.request(metricComputationInput, context);
-      const {
-        optimisticGraph: optimisticLCPGraph,
-      } = await LanternLargestContentfulPaint.request(metricComputationInput, context);
+      const optimisticFCPGraph = (await LanternFCP.request(metricComputationInput, context))
+        .optimisticGraph;
+      const optimisticLCPGraph = (await LanternLCP.request(metricComputationInput, context))
+        .optimisticGraph;
 
       const {savings: fcpSavings} = this.computeWasteWithGraph(
         results,

package/core/audits/byte-efficiency/legacy-javascript.js

@@ -25,7 +25,6 @@ import {detectLegacyJavaScript} from '../../lib/legacy-javascript/legacy-javascr
 const UIStrings = {
   /** Title of a Lighthouse audit that tells the user about legacy polyfills and transforms used on the page. This is displayed in a list of audit titles that Lighthouse generates. */
   title: 'Avoid serving legacy JavaScript to modern browsers',
-  // eslint-disable-next-line max-len
   // TODO: developer.chrome.com article. this codelab is good starting place: https://web.dev/articles/codelab-serve-modern-code
   /** Description of a Lighthouse audit that tells the user about old JavaScript that is no longer needed. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
   description: 'Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren\'t necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/baseline) features, unless you know you must support legacy browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://philipwalton.com/articles/the-state-of-es5-on-the-web/)',

package/core/audits/byte-efficiency/render-blocking-resources.js

@@ -291,7 +291,7 @@ class RenderBlockingResources extends Audit {
     const headings = [
       {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
       {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize)},
-      {key: 'wastedMs', valueType: 'timespanMs', label: str_(i18n.UIStrings.columnWastedMs)},
+      {key: 'wastedMs', valueType: 'timespanMs', label: str_(i18n.UIStrings.columnDuration)},
     ];
 
     const details = Audit.makeOpportunityDetails(headings, results,

package/core/audits/deprecations.js

@@ -13,7 +13,6 @@ import {JSBundles} from '../computed/js-bundles.js';
 import * as i18n from '../lib/i18n/i18n.js';
 import {getIssueDetailDescription} from '../lib/deprecation-description.js';
 
-/* eslint-disable max-len */
 const UIStrings = {
   /** Title of a Lighthouse audit that provides detail on the use of deprecated APIs. This descriptive title is shown to users when the page does not use deprecated APIs. */
   title: 'Avoids deprecated APIs',
@@ -32,7 +31,6 @@ const UIStrings = {
   /** Table column header for line of code (eg. 432) that is using a deprecated API. */
   columnLine: 'Line',
 };
-/* eslint-enable max-len */
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
 

package/core/audits/insights/cache-insight.js

@@ -41,7 +41,7 @@ class CacheInsight extends Audit {
         /* eslint-disable max-len */
         {key: 'url', valueType: 'url', label: str_(UIStrings.requestColumn)},
         {key: 'cacheLifetimeMs', valueType: 'ms', label: str_(UIStrings.cacheTTL), displayUnit: 'duration'},
-        {key: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize), displayUnit: 'kb', granularity: 1},
+        {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize), displayUnit: 'kb', granularity: 1},
         /* eslint-enable max-len */
       ];
       // TODO: this should be the sorting in the model (instead it sorts by transfer size...)
@@ -50,6 +50,7 @@ class CacheInsight extends Audit {
       const items = values.map(value => ({
         url: value.request.args.data.url,
         cacheLifetimeMs: value.ttl * 1000,
+        totalBytes: value.request.args.data.encodedDataLength || 0,
         wastedBytes: value.wastedBytes,
       }));
       return Audit.makeTableDetails(headings, items, {

package/core/audits/insights/cls-culprits-insight.js

@@ -19,12 +19,10 @@ const MAX_LAYOUT_SHIFTS_PER_CLUSTER = 5;
 // eslint-disable-next-line max-len
 const insightStr_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/CLSCulprits.js', InsightUIStrings);
 
-/* eslint-disable max-len */
 const UIStrings = {
   /** Label for a column in a data table; entries in this column will be a number representing how large the layout shift was. */
   columnScore: 'Layout shift score',
 };
-/* eslint-enable max-len */
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
 
@@ -61,18 +59,19 @@ class CLSCulpritsInsight extends Audit {
     for (const unsizedImage of culprits.unsizedImages) {
       subItems.push({
         extra: makeNodeItemForNodeId(TraceElements, unsizedImage.backendNodeId),
-        cause: insightStr_(InsightUIStrings.unsizedImages),
+        cause: insightStr_(InsightUIStrings.unsizedImage),
       });
     }
-    for (const request of culprits.fontRequests) {
+    for (const request of culprits.webFonts) {
       const url = request.args.data.url;
       subItems.push({
         extra: {type: 'url', value: url},
-        cause: insightStr_(InsightUIStrings.fontRequest),
+        cause: insightStr_(InsightUIStrings.webFont),
       });
     }
-    if (culprits.iframeIds.length) {
+    for (const iframe of culprits.iframes) {
       subItems.push({
+        extra: iframe.url ? {type: 'url', value: iframe.url} : undefined,
         cause: insightStr_(InsightUIStrings.injectedIframe),
       });
     }
@@ -114,7 +113,7 @@ class CLSCulpritsInsight extends Audit {
         /** @type {LH.Audit.Details.Table['items']} */
         const items = events.map(event => {
           const biggestImpactNodeId = TraceElements.getBiggestImpactNodeForShiftEvent(
-            event.args.data.impacted_nodes || [], impactByNodeId, event);
+            event.args.data.impacted_nodes || [], impactByNodeId);
           return {
             node: makeNodeItemForNodeId(artifacts.TraceElements, biggestImpactNodeId),
             score: event.args.data?.weighted_score_delta,

package/core/audits/insights/{interaction-to-next-paint-insight.d.ts → inp-breakdown-insight.d.ts}

@@ -1,5 +1,5 @@
-export default InteractionToNextPaintInsight;
-declare class InteractionToNextPaintInsight extends Audit {
+export default INPBreakdownInsight;
+declare class INPBreakdownInsight extends Audit {
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context
@@ -8,4 +8,4 @@ declare class InteractionToNextPaintInsight extends Audit {
     static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
 }
 import { Audit } from '../audit.js';
-//# sourceMappingURL=interaction-to-next-paint-insight.d.ts.map
+//# sourceMappingURL=inp-breakdown-insight.d.ts.map

package/core/audits/insights/{interaction-to-next-paint-insight.js → inp-breakdown-insight.js}

@@ -4,22 +4,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/InteractionToNextPaint.js';
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/INPBreakdown.js';
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {adaptInsightToAuditProduct, makeNodeItemForNodeId} from './insight-audit.js';
 
 // eslint-disable-next-line max-len
-const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/InteractionToNextPaint.js', UIStrings);
+const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/INPBreakdown.js', UIStrings);
 
-class InteractionToNextPaintInsight extends Audit {
+class INPBreakdownInsight extends Audit {
   /**
    * @return {LH.Audit.Meta}
    */
   static get meta() {
     return {
-      id: 'interaction-to-next-paint-insight',
+      id: 'inp-breakdown-insight',
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
@@ -35,7 +35,7 @@ class InteractionToNextPaintInsight extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    return adaptInsightToAuditProduct(artifacts, context, 'InteractionToNextPaint', (insight) => {
+    return adaptInsightToAuditProduct(artifacts, context, 'INPBreakdown', (insight) => {
       const event = insight.longestInteractionEvent;
       if (!event) {
         // TODO: show UIStrings.noInteractions?
@@ -44,16 +44,16 @@ class InteractionToNextPaintInsight extends Audit {
 
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
-        {key: 'label', valueType: 'text', label: str_(UIStrings.phase)},
+        {key: 'label', valueType: 'text', label: str_(UIStrings.subpart)},
         {key: 'duration', valueType: 'ms', label: str_(i18n.UIStrings.columnDuration)},
       ];
 
       /** @type {LH.Audit.Details.Table['items']} */
       const items = [
         /* eslint-disable max-len */
-        {phase: 'inputDelay', label: str_(UIStrings.inputDelay), duration: event.inputDelay / 1000},
-        {phase: 'processingDuration', label: str_(UIStrings.processingDuration), duration: event.mainThreadHandling / 1000},
-        {phase: 'presentationDelay', label: str_(UIStrings.presentationDelay), duration: event.presentationDelay / 1000},
+        {subpart: 'inputDelay', label: str_(UIStrings.inputDelay), duration: event.inputDelay / 1000},
+        {subpart: 'processingDuration', label: str_(UIStrings.processingDuration), duration: event.mainThreadHandling / 1000},
+        {subpart: 'presentationDelay', label: str_(UIStrings.presentationDelay), duration: event.presentationDelay / 1000},
         /* eslint-enable max-len */
       ];
 
@@ -65,4 +65,4 @@ class InteractionToNextPaintInsight extends Audit {
   }
 }
 
-export default InteractionToNextPaintInsight;
+export default INPBreakdownInsight;

package/core/audits/insights/insight-audit.d.ts

@@ -1,21 +1,24 @@
 export type CreateDetailsExtras = {
     insights: import("@paulirish/trace_engine/models/trace/insights/types.js").InsightSet;
-    parsedTrace: LH.Artifacts.TraceEngineResult["data"];
+    parsedTrace: LH.Artifacts.TraceEngineResult["parsedTrace"];
 };
 /**
  * @typedef CreateDetailsExtras
  * @property {import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet} insights
- * @property {LH.Artifacts.TraceEngineResult['data']} parsedTrace
+ * @property {LH.Artifacts.TraceEngineResult['parsedTrace']} parsedTrace
  */
 /**
  * @param {LH.Artifacts} artifacts
  * @param {LH.Audit.Context} context
  * @param {T} insightName
- * @param {(insight: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModels[T], extras: CreateDetailsExtras) => LH.Audit.Details|undefined} createDetails
+ * @param {(insight: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModels[T], extras: CreateDetailsExtras) => {details: LH.Audit.Details, warnings: Array<string | LH.IcuMessage>}|LH.Audit.Details|undefined} createDetails
  * @template {keyof import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModelsType} T
  * @return {Promise<LH.Audit.Product>}
  */
-export function adaptInsightToAuditProduct<T extends keyof import("@paulirish/trace_engine/models/trace/insights/types.js").InsightModelsType>(artifacts: LH.Artifacts, context: LH.Audit.Context, insightName: T, createDetails: (insight: import("@paulirish/trace_engine/models/trace/insights/types.js").InsightModels[T], extras: CreateDetailsExtras) => LH.Audit.Details | undefined): Promise<LH.Audit.Product>;
+export function adaptInsightToAuditProduct<T extends keyof import("@paulirish/trace_engine/models/trace/insights/types.js").InsightModelsType>(artifacts: LH.Artifacts, context: LH.Audit.Context, insightName: T, createDetails: (insight: import("@paulirish/trace_engine/models/trace/insights/types.js").InsightModels[T], extras: CreateDetailsExtras) => {
+    details: LH.Audit.Details;
+    warnings: Array<string | LH.IcuMessage>;
+} | LH.Audit.Details | undefined): Promise<LH.Audit.Product>;
 /**
  * @param {LH.Artifacts.TraceElement[]} traceElements
  * @param {number|null|undefined} nodeId

package/core/audits/insights/insight-audit.js

@@ -16,7 +16,7 @@ const str_ = i18n.createIcuMessageFn(import.meta.url, {});
 /**
  * @param {LH.Artifacts} artifacts
  * @param {LH.Audit.Context} context
- * @return {Promise<{insights: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet|undefined, parsedTrace: LH.Artifacts.TraceEngineResult['data']}>}
+ * @return {Promise<{insights: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet|undefined, parsedTrace: LH.Artifacts.TraceEngineResult['parsedTrace']}>}
  */
 async function getInsightSet(artifacts, context) {
   const settings = context.settings;
@@ -29,20 +29,20 @@ async function getInsightSet(artifacts, context) {
   const key = navigationId ?? NO_NAVIGATION;
   const insights = traceEngineResult.insights.get(key);
 
-  return {insights, parsedTrace: traceEngineResult.data};
+  return {insights, parsedTrace: traceEngineResult.parsedTrace};
 }
 
 /**
  * @typedef CreateDetailsExtras
  * @property {import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet} insights
- * @property {LH.Artifacts.TraceEngineResult['data']} parsedTrace
+ * @property {LH.Artifacts.TraceEngineResult['parsedTrace']} parsedTrace
  */
 
 /**
  * @param {LH.Artifacts} artifacts
  * @param {LH.Audit.Context} context
  * @param {T} insightName
- * @param {(insight: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModels[T], extras: CreateDetailsExtras) => LH.Audit.Details|undefined} createDetails
+ * @param {(insight: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModels[T], extras: CreateDetailsExtras) => {details: LH.Audit.Details, warnings: Array<string | LH.IcuMessage>}|LH.Audit.Details|undefined} createDetails
  * @template {keyof import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModelsType} T
  * @return {Promise<LH.Audit.Product>}
  */
@@ -64,14 +64,26 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
     };
   }
 
-  const details = createDetails(insight, {
+  const cbResult = createDetails(insight, {
     parsedTrace,
     insights,
   });
-  if (!details || (details.type === 'table' && details.headings.length === 0)) {
+
+  const warnings = [...insight.warnings ?? []];
+
+  let details;
+  if (cbResult && 'warnings' in cbResult) {
+    details = cbResult.details;
+    warnings.push(...cbResult.warnings);
+  } else {
+    details = cbResult;
+  }
+
+  if (!details || (details.type === 'table' && details.items.length === 0)) {
     return {
       scoreDisplayMode: Audit.SCORING_MODES.NOT_APPLICABLE,
       score: null,
+      details,
     };
   }
 
@@ -96,8 +108,37 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
   // TODO: consider adding a `estimatedSavingsText` to InsightModel, which can capture
   // the exact i18n string used by RPP; and include the same est. timing savings.
   let displayValue;
+
   if (insight.wastedBytes) {
     displayValue = str_(i18n.UIStrings.displayValueByteSavings, {wastedBytes: insight.wastedBytes});
+  } else {
+    let wastedMs;
+
+    switch (insight.insightKey) {
+      case 'DocumentLatency':
+      case 'DuplicatedJavaScript':
+      case 'FontDisplay':
+      case 'LegacyJavaScript':
+      case 'RenderBlocking': {
+        wastedMs = metricSavings?.FCP;
+        break;
+      }
+
+      case 'LCPDiscovery':
+      case 'ModernHTTP': {
+        wastedMs = metricSavings?.LCP;
+        break;
+      }
+
+      case 'Viewport': {
+        wastedMs = metricSavings?.INP;
+        break;
+      }
+    }
+
+    if (wastedMs) {
+      displayValue = str_(i18n.UIStrings.displayValueMsSavings, {wastedMs});
+    }
   }
 
   let score;
@@ -115,7 +156,7 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
     scoreDisplayMode,
     score,
     metricSavings,
-    warnings: insight.warnings,
+    warnings: warnings.length ? warnings : undefined,
     displayValue,
     details,
   };

package/core/audits/insights/lcp-breakdown-insight.d.ts

@@ -0,0 +1,16 @@
+export default LCPBreakdownInsight;
+declare class LCPBreakdownInsight extends Audit {
+    /**
+     * @param {Required<import('@paulirish/trace_engine/models/trace/insights/LCPBreakdown.js').LCPBreakdownInsightModel>['subparts']} subparts
+     * @return {LH.Audit.Details.Table}
+     */
+    static makeSubpartsTable(subparts: Required<import("@paulirish/trace_engine/models/trace/insights/LCPBreakdown.js").LCPBreakdownInsightModel>["subparts"]): LH.Audit.Details.Table;
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+}
+import { Audit } from '../audit.js';
+//# sourceMappingURL=lcp-breakdown-insight.d.ts.map

package/core/audits/insights/{lcp-phases-insight.js → lcp-breakdown-insight.js}

@@ -4,22 +4,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/LCPPhases.js';
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/LCPBreakdown.js';
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {adaptInsightToAuditProduct, makeNodeItemForNodeId} from './insight-audit.js';
 
 // eslint-disable-next-line max-len
-const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/LCPPhases.js', UIStrings);
+const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/LCPBreakdown.js', UIStrings);
 
-class LCPPhasesInsight extends Audit {
+class LCPBreakdownInsight extends Audit {
   /**
    * @return {LH.Audit.Meta}
    */
   static get meta() {
     return {
-      id: 'lcp-phases-insight',
+      id: 'lcp-breakdown-insight',
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
@@ -30,33 +30,33 @@ class LCPPhasesInsight extends Audit {
   }
 
   /**
-   * @param {Required<import('@paulirish/trace_engine/models/trace/insights/LCPPhases.js').LCPPhasesInsightModel>['phases']} phases
+   * @param {Required<import('@paulirish/trace_engine/models/trace/insights/LCPBreakdown.js').LCPBreakdownInsightModel>['subparts']} subparts
    * @return {LH.Audit.Details.Table}
    */
-  static makePhaseTable(phases) {
-    const {ttfb, loadDelay, loadTime, renderDelay} = phases;
+  static makeSubpartsTable(subparts) {
+    const {ttfb, loadDelay, loadDuration, renderDelay} = subparts;
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'label', valueType: 'text', label: str_(UIStrings.phase)},
+      {key: 'label', valueType: 'text', label: str_(UIStrings.subpart)},
       {key: 'duration', valueType: 'ms', label: str_(i18n.UIStrings.columnDuration)},
     ];
 
     /** @type {LH.Audit.Details.Table['items']} */
     let items = [
       /* eslint-disable max-len */
-      {phase: 'timeToFirstByte', label: str_(UIStrings.timeToFirstByte), duration: ttfb},
-      {phase: 'resourceLoadDelay', label: str_(UIStrings.resourceLoadDelay), duration: loadDelay},
-      {phase: 'resourceLoadDuration', label: str_(UIStrings.resourceLoadDuration), duration: loadTime},
-      {phase: 'elementRenderDelay', label: str_(UIStrings.elementRenderDelay), duration: renderDelay},
+      {subpart: 'timeToFirstByte', label: str_(UIStrings.timeToFirstByte), duration: ttfb.range / 1000},
+      {subpart: 'resourceLoadDelay', label: str_(UIStrings.resourceLoadDelay), duration: (loadDelay?.range ?? 0) / 1000},
+      {subpart: 'resourceLoadDuration', label: str_(UIStrings.resourceLoadDuration), duration: (loadDuration?.range ?? 0) / 1000},
+      {subpart: 'elementRenderDelay', label: str_(UIStrings.elementRenderDelay), duration: renderDelay.range / 1000},
       /* eslint-enable max-len */
     ];
 
     if (loadDelay === undefined) {
-      items = items.filter(item => item.phase !== 'resourceLoadDelay');
+      items = items.filter(item => item.subpart !== 'resourceLoadDelay');
     }
-    if (loadTime === undefined) {
-      items = items.filter(item => item.phase !== 'resourceLoadDuration');
+    if (loadDuration === undefined) {
+      items = items.filter(item => item.subpart !== 'resourceLoadDuration');
     }
 
     return Audit.makeTableDetails(headings, items);
@@ -68,17 +68,17 @@ class LCPPhasesInsight extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    return adaptInsightToAuditProduct(artifacts, context, 'LCPPhases', (insight) => {
-      if (!insight.phases) {
+    return adaptInsightToAuditProduct(artifacts, context, 'LCPBreakdown', (insight) => {
+      if (!insight.subparts) {
         return;
       }
 
       return Audit.makeListDetails([
-        LCPPhasesInsight.makePhaseTable(insight.phases),
+        LCPBreakdownInsight.makeSubpartsTable(insight.subparts),
         makeNodeItemForNodeId(artifacts.TraceElements, insight.lcpEvent?.args.data?.nodeId),
       ].filter(table => table !== undefined));
     });
   }
 }
 
-export default LCPPhasesInsight;
+export default LCPBreakdownInsight;

package/core/audits/insights/modern-http-insight.js

@@ -37,10 +37,8 @@ class ModernHTTPInsight extends Audit {
     return adaptInsightToAuditProduct(artifacts, context, 'ModernHTTP', (insight) => {
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
-        /* eslint-disable max-len */
         {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
         {key: 'protocol', valueType: 'text', label: str_(UIStrings.protocol)},
-        /* eslint-enable max-len */
       ];
       /** @type {LH.Audit.Details.Table['items']} */
       const items =