core: implement more insight audits, handle localization

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,39 @@ 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'),
+          items: (relatedEventsMap?.get(image.request) ?? []).map((reason, i) => ({
+            reason,
+            wastedBytes: image.optimizations[i].byteSavings,
+          })),
+        },
+      }));
+
       return Audit.makeTableDetails(headings, items);
     });
   }

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 {

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} 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,14 +34,28 @@ 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);
     });
   }

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

@@ -10,7 +10,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} 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);
@@ -36,14 +36,36 @@ class LCPPhasesInsight extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    // TODO: implement.
     return adaptInsightToAuditProduct(artifacts, context, 'LCPPhases', (insight) => {
+      if (!insight.phases) {
+        return;
+      }
+
+      const {ttfb, loadDelay, loadTime, renderDelay} = insight.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']} */
-      const 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);
     });
   }

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});
     });
   }
 }

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,90 @@ class TraceEngineResult {
     ), {});
     if (!processor.parsedTrace) throw new Error('No data');
     if (!processor.insights) throw new Error('No insights');
+    await this.localizeInsights(processor.insights);
     return {data: processor.parsedTrace, insights: processor.insights};
   }
 
+  /**
+   * @param {import('@paulirish/trace_engine/models/trace/insights/types.js').TraceInsightSets} insightSets
+   */
+  static async 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;
+        }
+
+        const module = `@paulirish/trace_engine/models/trace/insights/${name}.js`;
+        const {UIStrings} = await import(module);
+
+        const key = `node_modules/${module}`;
+        const str_ = i18n.createIcuMessageFn(key, UIStrings);
+
+        // 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

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) {

core/scripts/generate-insight-audits.js

@@ -77,6 +77,8 @@ class ${insightName}Insight extends Audit {
     return adaptInsightToAuditProduct(artifacts, context, '${insightName}', (insight) => {
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
+        /* eslint-disable max-len */
+        /* eslint-enable max-len */
       ];
       /** @type {LH.Audit.Details.Table['items']} */
       const items = [