lighthouse 12.3.0-dev.20250209 → 12.3.0-dev.20250210

package/core/audits/bootup-time.js

@@ -14,7 +14,6 @@ import {MainThreadTasks} from '../computed/main-thread-tasks.js';
 import {getExecutionTimingsByURL} from '../lib/tracehouse/task-summary.js';
 import {TBTImpactTasks} from '../computed/tbt-impact-tasks.js';
 import {Sentry} from '../lib/sentry.js';
-import {Util} from '../../shared/util.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides detail on the time spent executing javascript files during the load. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -173,7 +172,6 @@ class BootupTime extends Audit {
 
     return {
       score,
-      scoreDisplayMode: score >= Util.PASS_THRESHOLD ? Audit.SCORING_MODES.INFORMATIVE : undefined,
       notApplicable: !results.length,
       numericValue: totalBootupTime,
       numericUnit: 'millisecond',

package/core/audits/byte-efficiency/total-byte-weight.js

@@ -8,7 +8,6 @@ import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {NetworkRequest} from '../../lib/network-request.js';
 import {NetworkRecords} from '../../computed/network-records.js';
-import {Util} from '../../../shared/util.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides detail on large network resources required during page load. 'Payloads' is roughly equivalent to 'resources'. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -99,7 +98,6 @@ class TotalByteWeight extends Audit {
 
     return {
       score,
-      scoreDisplayMode: score >= Util.PASS_THRESHOLD ? Audit.SCORING_MODES.INFORMATIVE : undefined,
       numericValue: totalBytes,
       numericUnit: 'byte',
       displayValue: str_(UIStrings.displayValue, {totalBytes}),

package/core/audits/dobetterweb/dom-size.js

@@ -14,7 +14,6 @@
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {TBTImpactTasks} from '../../computed/tbt-impact-tasks.js';
-import {Util} from '../../../shared/util.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides detail on the size of the web page's DOM. The size of a DOM is characterized by the total number of DOM elements and greatest DOM depth. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -168,7 +167,6 @@ class DOMSize extends Audit {
 
     return {
       score,
-      scoreDisplayMode: score >= Util.PASS_THRESHOLD ? Audit.SCORING_MODES.INFORMATIVE : undefined,
       numericValue: stats.totalBodyElements,
       numericUnit: 'element',
       displayValue: str_(UIStrings.displayValue, {itemCount: stats.totalBodyElements}),

package/core/audits/insights/image-delivery-insight.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
-
 /**
  * @license
  * Copyright 2025 Google LLC
@@ -10,7 +8,7 @@ import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/ImageDeli
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
-import {adaptInsightToAuditProduct, makeNodeItemForNodeId} from './insight-audit.js';
+import {adaptInsightToAuditProduct} from './insight-audit.js';
 
 // eslint-disable-next-line max-len
 const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/ImageDelivery.js', UIStrings);
@@ -36,14 +34,41 @@ class ImageDeliveryInsight extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    // TODO: implement.
     return adaptInsightToAuditProduct(artifacts, context, 'ImageDelivery', (insight) => {
+      if (!insight.optimizableImages.length) {
+        // TODO: show UIStrings.noOptimizableImages?
+        return;
+      }
+
+      const relatedEventsMap = insight.relatedEvents && !Array.isArray(insight.relatedEvents) ?
+        insight.relatedEvents :
+        null;
+
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
+        /* eslint-disable max-len */
+        {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL), subItemsHeading: {key: 'reason', valueType: 'text'}},
+        {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnResourceSize)},
+        {key: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnWastedBytes), subItemsHeading: {key: 'wastedBytes', valueType: 'bytes'}},
+        /* eslint-enable max-len */
       ];
+
       /** @type {LH.Audit.Details.Table['items']} */
-      const items = [
-      ];
+      const items = insight.optimizableImages.map(image => ({
+        url: image.request.args.data.url,
+        totalBytes: image.request.args.data.decodedBodyLength,
+        wastedBytes: image.byteSavings,
+        subItems: {
+          type: /** @type {const} */ ('subitems'),
+          // TODO: when strings update to remove number from "reason" uistrings, update this
+          // to use `image.optimizations.map(...)` and construct strings from the type.
+          items: (relatedEventsMap?.get(image.request) ?? []).map((reason, i) => ({
+            reason,
+            wastedBytes: image.optimizations[i].byteSavings,
+          })),
+        },
+      }));
+
       return Audit.makeTableDetails(headings, items);
     });
   }

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

@@ -13,4 +13,11 @@ export function adaptInsightToAuditProduct<T extends keyof import("@paulirish/tr
  * @return {LH.Audit.Details.NodeValue|undefined}
  */
 export function makeNodeItemForNodeId(traceElements: LH.Artifacts.TraceElement[], nodeId: number | null | undefined): LH.Audit.Details.NodeValue | undefined;
+/**
+ * @param {LH.Artifacts.TraceElement[]} traceElements
+ * @param {number|null|undefined} nodeId
+ * @param {LH.IcuMessage|string} label
+ * @return {LH.Audit.Details.Table|undefined}
+ */
+export function maybeMakeNodeElementTable(traceElements: LH.Artifacts.TraceElement[], nodeId: number | null | undefined, label: LH.IcuMessage | string): LH.Audit.Details.Table | undefined;
 //# sourceMappingURL=insight-audit.d.ts.map

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

@@ -44,6 +44,14 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
   }
 
   const insight = insights.model[insightName];
+  if (insight instanceof Error) {
+    return {
+      errorMessage: insight.message,
+      errorStack: insight.stack,
+      score: null,
+    };
+  }
+
   const details = createDetails(insight);
   if (!details || (details.type === 'table' && details.headings.length === 0)) {
     return {
@@ -63,10 +71,18 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
     metricSavings = {...metricSavings, LCP: /** @type {any} */ (0)};
   }
 
+  let score = insight.shouldShow ? 0 : 1;
+  // TODO: change insight model to denote passing/failing/informative. Until then... hack it.
+  if (insightName === 'LCPPhases') {
+    score = metricSavings?.LCP ?? 0 >= 1000 ? 0 : 1;
+  } else if (insightName === 'InteractionToNextPaint') {
+    score = metricSavings?.INP ?? 0 >= 500 ? 0 : 1;
+  }
+
   return {
     scoreDisplayMode:
       insight.metricSavings ? Audit.SCORING_MODES.METRIC_SAVINGS : Audit.SCORING_MODES.NUMERIC,
-    score: insight.shouldShow ? 0 : 1,
+    score,
     metricSavings,
     warnings: insight.warnings,
     details,
@@ -93,7 +109,25 @@ function makeNodeItemForNodeId(traceElements, nodeId) {
   return Audit.makeNodeItem(node);
 }
 
+/**
+ * @param {LH.Artifacts.TraceElement[]} traceElements
+ * @param {number|null|undefined} nodeId
+ * @param {LH.IcuMessage|string} label
+ * @return {LH.Audit.Details.Table|undefined}
+ */
+function maybeMakeNodeElementTable(traceElements, nodeId, label) {
+  const node = makeNodeItemForNodeId(traceElements, nodeId);
+  if (!node) {
+    return;
+  }
+
+  return Audit.makeTableDetails([
+    {key: 'node', valueType: 'node', label},
+  ], [{node}]);
+}
+
 export {
   adaptInsightToAuditProduct,
   makeNodeItemForNodeId,
+  maybeMakeNodeElementTable,
 };

package/core/audits/insights/interaction-to-next-paint-insight.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
-
 /**
  * @license
  * Copyright 2025 Google LLC
@@ -10,7 +8,7 @@ import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/Interacti
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
-import {adaptInsightToAuditProduct, makeNodeItemForNodeId} from './insight-audit.js';
+import {adaptInsightToAuditProduct, maybeMakeNodeElementTable} 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);
@@ -36,15 +34,35 @@ class InteractionToNextPaintInsight extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    // TODO: implement.
     return adaptInsightToAuditProduct(artifacts, context, 'InteractionToNextPaint', (insight) => {
+      const event = insight.longestInteractionEvent;
+      if (!event) {
+        // TODO: show UIStrings.noInteractions?
+        return;
+      }
+
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
+        {key: 'label', valueType: 'text', label: str_(UIStrings.phase)},
+        {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},
+        /* eslint-enable max-len */
       ];
-      return Audit.makeTableDetails(headings, items);
+
+      return Audit.makeListDetails([
+        maybeMakeNodeElementTable(
+          artifacts.TraceElements,
+          event.args.data.beginEvent.args.data.nodeId,
+          str_(i18n.UIStrings.columnElement)),
+        Audit.makeTableDetails(headings, items),
+      ].filter(table => !!table));
     });
   }
 }

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

@@ -1,5 +1,10 @@
 export default LCPPhasesInsight;
 declare class LCPPhasesInsight extends Audit {
+    /**
+     * @param {Required<import('@paulirish/trace_engine/models/trace/insights/LCPPhases.js').LCPPhasesInsightModel>['phases']} phases
+     * @return {LH.Audit.Details.Table}
+     */
+    static makePhaseTable(phases: Required<import("@paulirish/trace_engine/models/trace/insights/LCPPhases.js").LCPPhasesInsightModel>["phases"]): LH.Audit.Details.Table;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context

package/core/audits/insights/lcp-phases-insight.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
-
 /**
  * @license
  * Copyright 2025 Google LLC
@@ -10,7 +8,7 @@ import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/LCPPhases
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
-import {adaptInsightToAuditProduct, makeNodeItemForNodeId} from './insight-audit.js';
+import {adaptInsightToAuditProduct, maybeMakeNodeElementTable} 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);
@@ -30,21 +28,57 @@ class LCPPhasesInsight extends Audit {
     };
   }
 
+  /**
+   * @param {Required<import('@paulirish/trace_engine/models/trace/insights/LCPPhases.js').LCPPhasesInsightModel>['phases']} phases
+   * @return {LH.Audit.Details.Table}
+   */
+  static makePhaseTable(phases) {
+    const {ttfb, loadDelay, loadTime, renderDelay} = phases;
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'label', valueType: 'text', label: str_(UIStrings.phase)},
+      {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},
+      /* eslint-enable max-len */
+    ];
+
+    if (loadDelay === undefined) {
+      items = items.filter(item => item.phase !== 'resourceLoadDelay');
+    }
+    if (loadTime === undefined) {
+      items = items.filter(item => item.phase !== 'resourceLoadDuration');
+    }
+
+    return Audit.makeTableDetails(headings, items);
+  }
+
   /**
    * @param {LH.Artifacts} artifacts
    * @param {LH.Audit.Context} context
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    // TODO: implement.
     return adaptInsightToAuditProduct(artifacts, context, 'LCPPhases', (insight) => {
-      /** @type {LH.Audit.Details.Table['headings']} */
-      const headings = [
-      ];
-      /** @type {LH.Audit.Details.Table['items']} */
-      const items = [
-      ];
-      return Audit.makeTableDetails(headings, items);
+      if (!insight.phases) {
+        return;
+      }
+
+      return Audit.makeListDetails([
+        maybeMakeNodeElementTable(
+          artifacts.TraceElements,
+          insight.lcpEvent?.args.data?.nodeId,
+          str_(i18n.UIStrings.columnElement)),
+        LCPPhasesInsight.makePhaseTable(insight.phases),
+      ].filter(table => table !== undefined));
     });
   }
 }

package/core/audits/insights/third-parties-insight.d.ts

@@ -1,5 +1,22 @@
 export default ThirdPartiesInsight;
+export type URLSummary = {
+    transferSize: number;
+    mainThreadTime: number;
+    url: string | LH.IcuMessage;
+};
+/**
+ * @typedef URLSummary
+ * @property {number} transferSize
+ * @property {number} mainThreadTime
+ * @property {string | LH.IcuMessage} url
+ */
 declare class ThirdPartiesInsight extends Audit {
+    /**
+     * @param {LH.Artifacts.Entity} entity
+     * @param {import('@paulirish/trace_engine/models/trace/insights/ThirdParties.js').ThirdPartiesInsightModel} insight
+     * @return {Array<URLSummary>}
+     */
+    static makeSubItems(entity: LH.Artifacts.Entity, insight: import("@paulirish/trace_engine/models/trace/insights/ThirdParties.js").ThirdPartiesInsightModel): Array<URLSummary>;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context

package/core/audits/insights/third-parties-insight.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
-
 /**
  * @license
  * Copyright 2025 Google LLC
@@ -10,11 +8,18 @@ import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/ThirdPart
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
-import {adaptInsightToAuditProduct, makeNodeItemForNodeId} from './insight-audit.js';
+import {adaptInsightToAuditProduct} from './insight-audit.js';
 
 // eslint-disable-next-line max-len
 const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/ThirdParties.js', UIStrings);
 
+/**
+ * @typedef URLSummary
+ * @property {number} transferSize
+ * @property {number} mainThreadTime
+ * @property {string | LH.IcuMessage} url
+ */
+
 class ThirdPartiesInsight extends Audit {
   /**
    * @return {LH.Audit.Meta}
@@ -30,21 +35,53 @@ class ThirdPartiesInsight extends Audit {
     };
   }
 
+  /**
+   * @param {LH.Artifacts.Entity} entity
+   * @param {import('@paulirish/trace_engine/models/trace/insights/ThirdParties.js').ThirdPartiesInsightModel} insight
+   * @return {Array<URLSummary>}
+   */
+  static makeSubItems(entity, insight) {
+    const urls = [...insight.urlsByEntity.get(entity) ?? []];
+    return urls
+      .map(url => ({
+        url,
+        mainThreadTime: 0,
+        transferSize: 0,
+        ...insight.summaryByUrl.get(url),
+      }))
+      // Sort by main thread time first, then transfer size to break ties.
+      .sort((a, b) => (b.mainThreadTime - a.mainThreadTime) || (b.transferSize - a.transferSize));
+  }
+
   /**
    * @param {LH.Artifacts} artifacts
    * @param {LH.Audit.Context} context
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    // TODO: implement.
     return adaptInsightToAuditProduct(artifacts, context, 'ThirdParties', (insight) => {
+      const thirdPartyEntities = [...insight.summaryByEntity.entries()]
+        .filter((([entity, _]) => entity !== insight.firstPartyEntity));
+
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
+        /* eslint-disable max-len */
+        {key: 'entity', valueType: 'text', label: str_(UIStrings.columnThirdParty), subItemsHeading: {key: 'url', valueType: 'url'}},
+        {key: 'transferSize', granularity: 1, valueType: 'bytes', label: str_(UIStrings.columnTransferSize), subItemsHeading: {key: 'transferSize'}},
+        {key: 'mainThreadTime', granularity: 1, valueType: 'ms', label: str_(UIStrings.columnMainThreadTime), subItemsHeading: {key: 'mainThreadTime'}},
+        /* eslint-enable max-len */
       ];
       /** @type {LH.Audit.Details.Table['items']} */
-      const items = [
-      ];
-      return Audit.makeTableDetails(headings, items);
+      const items = thirdPartyEntities.map(([entity, summary]) => ({
+        entity: entity.name,
+        transferSize: summary.transferSize,
+        mainThreadTime: summary.mainThreadTime,
+        subItems: {
+          type: /** @type {const} */ ('subitems'),
+          items: ThirdPartiesInsight.makeSubItems(entity, insight),
+        },
+      }));
+      return Audit.makeTableDetails(headings, items, {isEntityGrouped: true});
     });
   }
 }

package/core/audits/mainthread-work-breakdown.js

@@ -16,7 +16,6 @@ import * as i18n from '../lib/i18n/i18n.js';
 import {MainThreadTasks} from '../computed/main-thread-tasks.js';
 import {TotalBlockingTime} from '../computed/metrics/total-blocking-time.js';
 import {Sentry} from '../lib/sentry.js';
-import {Util} from '../../shared/util.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides detail on the main thread work the browser did to load the page. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -142,7 +141,6 @@ class MainThreadWorkBreakdown extends Audit {
 
     return {
       score,
-      scoreDisplayMode: score >= Util.PASS_THRESHOLD ? Audit.SCORING_MODES.INFORMATIVE : undefined,
       numericValue: totalExecutionTime,
       numericUnit: 'millisecond',
       displayValue: str_(i18n.UIStrings.seconds, {timeInMs: totalExecutionTime}),

package/core/audits/seo/is-crawlable.d.ts

@@ -12,6 +12,7 @@ declare class IsCrawlable extends Audit {
             selector?: string;
             boundingRect?: import("../../../types/lhr/audit-details.js").default.Rect;
             nodeLabel?: string;
+            explanation?: string;
         };
     } | undefined;
     /**

package/core/audits/server-response-time.js

@@ -92,7 +92,6 @@ class ServerResponseTime extends Audit {
       numericValue: responseTime,
       numericUnit: 'millisecond',
       score: Number(passed),
-      scoreDisplayMode: passed ? Audit.SCORING_MODES.INFORMATIVE : undefined,
       displayValue,
       details,
       metricSavings: {

package/core/computed/trace-engine-result.d.ts

@@ -13,6 +13,10 @@ declare class TraceEngineResult {
      * @return {Promise<LH.Artifacts.TraceEngineResult>}
      */
     static runTraceEngine(traceEvents: LH.TraceEvent[]): Promise<LH.Artifacts.TraceEngineResult>;
+    /**
+     * @param {import('@paulirish/trace_engine/models/trace/insights/types.js').TraceInsightSets} insightSets
+     */
+    static localizeInsights(insightSets: import("@paulirish/trace_engine/models/trace/insights/types.js").TraceInsightSets): void;
     /**
      * @param {{trace: LH.Trace}} data
      * @param {LH.Artifacts.ComputedContext} context

package/core/computed/trace-engine-result.js

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as i18n from '../lib/i18n/i18n.js';
 import * as TraceEngine from '../lib/trace-engine.js';
 import {makeComputedArtifact} from './computed-artifact.js';
 import {CumulativeLayoutShift} from './metrics/cumulative-layout-shift.js';
@@ -27,9 +28,96 @@ class TraceEngineResult {
     ), {});
     if (!processor.parsedTrace) throw new Error('No data');
     if (!processor.insights) throw new Error('No insights');
+    this.localizeInsights(processor.insights);
     return {data: processor.parsedTrace, insights: processor.insights};
   }
 
+  /**
+   * @param {import('@paulirish/trace_engine/models/trace/insights/types.js').TraceInsightSets} insightSets
+   */
+  static localizeInsights(insightSets) {
+    /**
+     * Execute `cb(traceEngineI18nObject)` on every i18n object, recursively. The cb return
+     * value replaces traceEngineI18nObject.
+     * @param {any} obj
+     * @param {(traceEngineI18nObject: {i18nId: string, values?: {}}) => LH.IcuMessage} cb
+     * @param {Set<object>} seen
+     */
+    function recursiveReplaceLocalizableStrings(obj, cb, seen) {
+      if (seen.has(seen)) {
+        return;
+      }
+
+      seen.add(obj);
+
+      if (obj instanceof Map) {
+        for (const [key, value] of obj) {
+          if (value && typeof value === 'object' && 'i18nId' in value) {
+            obj.set(key, cb(value));
+          } else {
+            recursiveReplaceLocalizableStrings(value, cb, seen);
+          }
+        }
+      } else if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+        Object.keys(obj).forEach(key => {
+          const value = obj[key];
+          if (value && typeof value === 'object' && 'i18nId' in value) {
+            obj[key] = cb(value);
+          } else {
+            recursiveReplaceLocalizableStrings(value, cb, seen);
+          }
+        });
+      } else if (Array.isArray(obj)) {
+        for (let i = 0; i < obj.length; i++) {
+          const value = obj[i];
+          if (value && typeof value === 'object' && 'i18nId' in value) {
+            obj[i] = cb(value);
+          } else {
+            recursiveReplaceLocalizableStrings(value, cb, seen);
+          }
+        }
+      }
+    }
+
+    for (const insightSet of insightSets.values()) {
+      for (const [name, model] of Object.entries(insightSet.model)) {
+        if (model instanceof Error) {
+          continue;
+        }
+
+        /** @type {Record<string, string>} */
+        let traceEngineUIStrings;
+        if (name in TraceEngine.Insights.Models) {
+          const nameAsKey = /** @type {keyof typeof TraceEngine.Insights.Models} */ (name);
+          traceEngineUIStrings = TraceEngine.Insights.Models[nameAsKey].UIStrings;
+        } else {
+          throw new Error(`insight missing UIStrings: ${name}`);
+        }
+
+        const key = `node_modules/@paulirish/trace_engine/models/trace/insights/${name}.js`;
+        const str_ = i18n.createIcuMessageFn(key, traceEngineUIStrings);
+
+        // Pass `{i18nId: string, values?: {}}` through Lighthouse's i18n pipeline.
+        // This is equivalent to if we directly did `str_(UIStrings.whatever, ...)`
+        recursiveReplaceLocalizableStrings(model, (traceEngineI18nObject) => {
+          let values = traceEngineI18nObject.values;
+          if (values) {
+            values = structuredClone(values);
+            for (const [key, value] of Object.entries(values)) {
+              if (value && typeof value === 'object' && '__i18nBytes' in value) {
+                // @ts-expect-error
+                values[key] = value.__i18nBytes;
+                // TODO: use an actual byte formatter. Right now, this shows the exact number of bytes.
+              }
+            }
+          }
+
+          return str_(traceEngineI18nObject.i18nId, values);
+        }, new Set());
+      }
+    }
+  }
+
   /**
    * @param {{trace: LH.Trace}} data
    * @param {LH.Artifacts.ComputedContext} context

package/core/config/default-config.js

@@ -408,20 +408,20 @@ const defaultConfig = {
         {id: 'interaction-to-next-paint', weight: 0, group: 'metrics', acronym: 'INP'},
 
         // Insight audits.
-        {id: 'cls-culprits-insight', weight: 0, group: 'hidden'},
-        {id: 'document-latency-insight', weight: 0, group: 'hidden'},
-        {id: 'dom-size-insight', weight: 0, group: 'hidden'},
-        {id: 'font-display-insight', weight: 0, group: 'hidden'},
-        {id: 'forced-reflow-insight', weight: 0, group: 'hidden'},
-        {id: 'image-delivery-insight', weight: 0, group: 'hidden'},
-        {id: 'interaction-to-next-paint-insight', weight: 0, group: 'hidden'},
-        {id: 'lcp-discovery-insight', weight: 0, group: 'hidden'},
-        {id: 'lcp-phases-insight', weight: 0, group: 'hidden'},
-        {id: 'long-critical-network-tree-insight', weight: 0, group: 'hidden'},
-        {id: 'render-blocking-insight', weight: 0, group: 'hidden'},
-        {id: 'slow-css-selector-insight', weight: 0, group: 'hidden'},
-        {id: 'third-parties-insight', weight: 0, group: 'hidden'},
-        {id: 'viewport-insight', weight: 0, group: 'hidden'},
+        {id: 'cls-culprits-insight', weight: 0, group: 'insights'},
+        {id: 'document-latency-insight', weight: 0, group: 'insights'},
+        {id: 'dom-size-insight', weight: 0, group: 'insights'},
+        {id: 'font-display-insight', weight: 0, group: 'insights'},
+        {id: 'forced-reflow-insight', weight: 0, group: 'insights'},
+        {id: 'image-delivery-insight', weight: 0, group: 'insights'},
+        {id: 'interaction-to-next-paint-insight', weight: 0, group: 'insights'},
+        {id: 'lcp-discovery-insight', weight: 0, group: 'insights'},
+        {id: 'lcp-phases-insight', weight: 0, group: 'insights'},
+        {id: 'long-critical-network-tree-insight', weight: 0, group: 'insights'},
+        {id: 'render-blocking-insight', weight: 0, group: 'insights'},
+        {id: 'slow-css-selector-insight', weight: 0, group: 'insights'},
+        {id: 'third-parties-insight', weight: 0, group: 'insights'},
+        {id: 'viewport-insight', weight: 0, group: 'insights'},
 
         // These are our "invisible" metrics. Not displayed, but still in the LHR.
         {id: 'interactive', weight: 0, group: 'hidden', acronym: 'TTI'},

package/core/gather/gatherers/trace-elements.js

@@ -92,7 +92,7 @@ class TraceElements extends BaseGatherer {
     /**
      * Execute `cb(obj, key)` on every object property (non-objects only), recursively.
      * @param {any} obj
-     * @param {(obj: Record<string, string>, key: string) => void} cb
+     * @param {(obj: Record<string, unknown>, key: string) => void} cb
      * @param {Set<object>} seen
      */
     function recursiveObjectEnumerate(obj, cb, seen) {

package/core/lib/trace-engine.d.ts

@@ -7,5 +7,6 @@ export type SaneSyntheticLayoutShift = SyntheticLayoutShift & {
 export const TraceProcessor: typeof TraceEngine.Processor.TraceProcessor;
 export const TraceHandlers: typeof TraceEngine.Handlers.ModelHandlers;
 export const RootCauses: typeof TraceEngine.RootCauses.RootCauses.RootCauses;
+export const Insights: typeof TraceEngine.Insights;
 import * as TraceEngine from '@paulirish/trace_engine';
 //# sourceMappingURL=trace-engine.d.ts.map

package/core/lib/trace-engine.js

@@ -10,9 +10,11 @@ polyfillDOMRect();
 const TraceProcessor = TraceEngine.Processor.TraceProcessor;
 const TraceHandlers = TraceEngine.Handlers.ModelHandlers;
 const RootCauses = TraceEngine.RootCauses.RootCauses.RootCauses;
+const Insights = TraceEngine.Insights;
 
 export {
   TraceProcessor,
   TraceHandlers,
   RootCauses,
+  Insights,
 };