lighthouse 12.5.1 → 12.6.0

package/core/audits/image-size-responsive.js

@@ -11,6 +11,8 @@
 
 
 import {Audit} from './audit.js';
+import {ImageRecords} from '../computed/image-records.js';
+import {NetworkRecords} from '../computed/network-records.js';
 import UrlUtils from '../lib/url-utils.js';
 import * as i18n from '../lib/i18n/i18n.js';
 
@@ -77,9 +79,10 @@ function isSmallerThanViewport(imageRect, viewportDimensions) {
 
 /**
  * @param {LH.Artifacts.ImageElement} image
+ * @param {LH.Artifacts.ImageElementRecord | undefined} imageRecord
  * @return {boolean}
  */
-function isCandidate(image) {
+function isCandidate(image, imageRecord) {
   /** image-rendering solution for pixel art scaling.
    * https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look
   */
@@ -96,6 +99,10 @@ function isCandidate(image) {
   ) {
     return false;
   }
+  // Check the actual mimeType before guessing, since file extension is not guaranteed
+  if (imageRecord?.mimeType === 'image/svg+xml') {
+    return false;
+  }
   if (UrlUtils.guessMimeType(image.src) === 'image/svg+xml') {
     return false;
   }
@@ -243,19 +250,38 @@ class ImageSizeResponsive extends Audit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       requiredArtifacts: ['ImageElements', 'ViewportDimensions'],
+      __internalOptionalArtifacts: ['DevtoolsLog'],
     };
   }
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
+  static async audit(artifacts, context) {
     const DPR = artifacts.ViewportDimensions.devicePixelRatio;
 
+    // Prepare ImageElementRecord map for retrieving the real mimeType
+    // Derived from ./is-on-https.js and ./byte-efficiency/uses-responsive-images.js
+    /** @type {Map<string, LH.Artifacts.ImageElementRecord>} */
+    const imageRecordsByURL = new Map();
+
+    if (artifacts.DevtoolsLog) {
+      // https://github.com/GoogleChrome/lighthouse/blob/main/docs/plugins.md#using-network-requests
+      // if DevtoolsLog is provided, use it to fetch image networkRecords
+      // else the empty imageRecordsByURL map will satisfy isCandidate with an undefined image and fallback to the original logic
+      const networkRecords = await NetworkRecords.request(artifacts.DevtoolsLog, context);
+      const images = await ImageRecords.request({
+        ImageElements: artifacts.ImageElements,
+        networkRecords,
+      }, context);
+      images.forEach(img => imageRecordsByURL.set(img.src, img));
+    }
+
     const results = Array
       .from(artifacts.ImageElements)
-      .filter(isCandidate)
+      .filter(image => isCandidate(image, imageRecordsByURL.get(image.src)))
       .filter(imageHasNaturalDimensions)
       .filter(image => !imageHasRightSize(image, DPR))
       .filter(image => isVisible(image.clientRect, artifacts.ViewportDimensions))

package/core/audits/insights/{use-cache-insight.d.ts → cache-insight.d.ts}

@@ -1,5 +1,5 @@
-export default UseCacheInsight;
-declare class UseCacheInsight extends Audit {
+export default CacheInsight;
+declare class CacheInsight extends Audit {
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context
@@ -8,4 +8,4 @@ declare class UseCacheInsight extends Audit {
     static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
 }
 import { Audit } from '../audit.js';
-//# sourceMappingURL=use-cache-insight.d.ts.map
+//# sourceMappingURL=cache-insight.d.ts.map

package/core/audits/insights/{use-cache-insight.js → cache-insight.js}

@@ -4,27 +4,27 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/UseCache.js';
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/Cache.js';
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.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/UseCache.js', UIStrings);
+const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/Cache.js', UIStrings);
 
-class UseCacheInsight extends Audit {
+class CacheInsight extends Audit {
   /**
    * @return {LH.Audit.Meta}
    */
   static get meta() {
     return {
-      id: 'use-cache-insight',
+      id: 'cache-insight',
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['traces', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'SourceMaps'],
       replacesAudits: ['uses-long-cache-ttl'],
     };
   }
@@ -35,27 +35,29 @@ class UseCacheInsight extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    return adaptInsightToAuditProduct(artifacts, context, 'UseCache', (insight) => {
+    return adaptInsightToAuditProduct(artifacts, context, 'Cache', (insight) => {
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
         /* eslint-disable max-len */
         {key: 'url', valueType: 'url', label: str_(UIStrings.requestColumn)},
         {key: 'cacheLifetimeMs', valueType: 'ms', label: str_(UIStrings.cacheTTL), displayUnit: 'duration'},
-        {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize), displayUnit: 'kb', granularity: 1},
+        {key: 'wastedBytes', 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...)
+      const values = insight.requests.sort((a, b) => b.wastedBytes - a.wastedBytes);
       /** @type {LH.Audit.Details.Table['items']} */
-      const items = insight.requests.map(request => ({
-        url: request.request.args.data.url,
-        cacheLifetimeMs: request.ttl * 1000,
-        totalBytes: request.request.args.data.encodedDataLength,
+      const items = values.map(value => ({
+        url: value.request.args.data.url,
+        cacheLifetimeMs: value.ttl * 1000,
+        wastedBytes: value.wastedBytes,
       }));
       return Audit.makeTableDetails(headings, items, {
-        sortedBy: ['totalBytes'],
+        sortedBy: ['wastedBytes'],
         skipSumming: ['cacheLifetimeMs'],
       });
     });
   }
 }
 
-export default UseCacheInsight;
+export default CacheInsight;

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

@@ -39,7 +39,7 @@ class CLSCulpritsInsight extends Audit {
       failureTitle: insightStr_(InsightUIStrings.title),
       description: insightStr_(InsightUIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['traces', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
       replacesAudits: ['layout-shifts', 'non-composited-animations', 'unsized-images'],
     };
   }
@@ -58,9 +58,9 @@ class CLSCulpritsInsight extends Audit {
 
     /** @type {SubItem[]} */
     const subItems = [];
-    for (const backendNodeId of culprits.unsizedImages) {
+    for (const unsizedImage of culprits.unsizedImages) {
       subItems.push({
-        extra: makeNodeItemForNodeId(TraceElements, backendNodeId),
+        extra: makeNodeItemForNodeId(TraceElements, unsizedImage.backendNodeId),
         cause: insightStr_(InsightUIStrings.unsizedImages),
       });
     }

package/core/audits/insights/document-latency-insight.js

@@ -24,7 +24,7 @@ class DocumentLatencyInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['traces', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
       replacesAudits: ['redirects', 'server-response-time', 'uses-text-compression'],
     };
   }

package/core/audits/insights/dom-size-insight.js

@@ -24,7 +24,7 @@ class DOMSizeInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['traces', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
       replacesAudits: ['dom-size'],
     };
   }

package/core/audits/insights/duplicated-javascript-insight.d.ts

@@ -1,4 +1,17 @@
 export default DuplicatedJavaScriptInsight;
+export type Item = LH.Audit.Details.TableItem & {
+    source: string;
+    subItems: {
+        type: "subitems";
+        items: SubItem[];
+    };
+};
+export type SubItem = {
+    url: string;
+    sourceTransferBytes: number | LH.Audit.Details.TextValue;
+};
+/** @typedef {LH.Audit.Details.TableItem & {source: string, subItems: {type: 'subitems', items: SubItem[]}}} Item */
+/** @typedef {{url: string, sourceTransferBytes: number|LH.Audit.Details.TextValue}} SubItem */
 declare class DuplicatedJavaScriptInsight extends Audit {
     /**
      * @param {LH.Artifacts} artifacts

package/core/audits/insights/duplicated-javascript-insight.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
-
 /**
  * @license
  * Copyright 2025 Google LLC
@@ -10,11 +8,14 @@ import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/Duplicate
 
 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/DuplicatedJavaScript.js', UIStrings);
 
+/** @typedef {LH.Audit.Details.TableItem & {source: string, subItems: {type: 'subitems', items: SubItem[]}}} Item */
+/** @typedef {{url: string, sourceTransferBytes: number|LH.Audit.Details.TextValue}} SubItem */
+
 class DuplicatedJavaScriptInsight extends Audit {
   /**
    * @return {LH.Audit.Meta}
@@ -25,8 +26,9 @@ class DuplicatedJavaScriptInsight extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      guidanceLevel: 3, // TODO: confirm/change.
-      requiredArtifacts: ['traces', 'TraceElements', 'SourceMaps'],
+      guidanceLevel: 2,
+      requiredArtifacts: ['Trace', 'SourceMaps'],
+      replacesAudits: ['duplicated-javascript'],
     };
   }
 
@@ -36,16 +38,41 @@ class DuplicatedJavaScriptInsight extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    // TODO: implement.
     return adaptInsightToAuditProduct(artifacts, context, 'DuplicatedJavaScript', (insight) => {
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
         /* eslint-disable max-len */
+        {key: 'source', valueType: 'code', subItemsHeading: {key: 'url', valueType: 'url'}, label: str_(i18n.UIStrings.columnSource)},
+        {key: 'wastedBytes', valueType: 'bytes', subItemsHeading: {key: 'sourceTransferBytes'}, granularity: 10, label: str_(UIStrings.columnDuplicatedBytes)},
         /* eslint-enable max-len */
       ];
-      /** @type {LH.Audit.Details.Table['items']} */
-      const items = [
-      ];
+
+      const entries = [...insight.duplicationGroupedByNodeModules.entries()].slice(0, 10);
+
+      /** @type {Item[]} */
+      const items = entries.map(([source, data]) => {
+        /** @type {Item} */
+        const item = {
+          source,
+          wastedBytes: data.estimatedDuplicateBytes,
+          subItems: {
+            type: 'subitems',
+            items: [],
+          },
+        };
+
+        for (const [index, {script, attributedSize}] of data.duplicates.entries()) {
+          /** @type {SubItem} */
+          const subItem = {
+            url: script.url ?? '',
+            sourceTransferBytes: index === 0 ? {type: 'text', value: '--'} : attributedSize,
+          };
+          item.subItems.items.push(subItem);
+        }
+
+        return item;
+      });
+
       return Audit.makeTableDetails(headings, items);
     });
   }

package/core/audits/insights/font-display-insight.js

@@ -24,7 +24,7 @@ class FontDisplayInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['traces', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
       replacesAudits: ['font-display'],
     };
   }

package/core/audits/insights/forced-reflow-insight.js

@@ -24,7 +24,7 @@ class ForcedReflowInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['traces', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
     };
   }
 

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

@@ -29,7 +29,7 @@ class ImageDeliveryInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['traces', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
       replacesAudits: [
         'modern-image-formats',
         'uses-optimized-images',

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

@@ -1,23 +1,25 @@
+export type CreateDetailsExtras = {
+    insights: import("@paulirish/trace_engine/models/trace/insights/types.js").InsightSet;
+    parsedTrace: LH.Artifacts.TraceEngineResult["data"];
+};
+/**
+ * @typedef CreateDetailsExtras
+ * @property {import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet} insights
+ * @property {LH.Artifacts.TraceEngineResult['data']} 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]) => LH.Audit.Details|undefined} createDetails
+ * @param {(insight: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModels[T], extras: CreateDetailsExtras) => 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]) => 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) => LH.Audit.Details | undefined): Promise<LH.Audit.Product>;
 /**
  * @param {LH.Artifacts.TraceElement[]} traceElements
  * @param {number|null|undefined} nodeId
  * @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

@@ -9,35 +9,45 @@ import {NO_NAVIGATION} from '@paulirish/trace_engine/models/trace/types/TraceEve
 import {ProcessedTrace} from '../../computed/processed-trace.js';
 import {TraceEngineResult} from '../../computed/trace-engine-result.js';
 import {Audit} from '../audit.js';
+import * as i18n from '../../lib/i18n/i18n.js';
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, {});
 
 /**
  * @param {LH.Artifacts} artifacts
  * @param {LH.Audit.Context} context
- * @return {Promise<import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet|undefined>}
+ * @return {Promise<{insights: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet|undefined, parsedTrace: LH.Artifacts.TraceEngineResult['data']}>}
  */
 async function getInsightSet(artifacts, context) {
   const settings = context.settings;
-  const trace = artifacts.traces[Audit.DEFAULT_PASS];
+  const trace = artifacts.Trace;
   const processedTrace = await ProcessedTrace.request(trace, context);
   const SourceMaps = artifacts.SourceMaps;
   const traceEngineResult = await TraceEngineResult.request({trace, settings, SourceMaps}, context);
 
   const navigationId = processedTrace.timeOriginEvt.args.data?.navigationId;
   const key = navigationId ?? NO_NAVIGATION;
+  const insights = traceEngineResult.insights.get(key);
 
-  return traceEngineResult.insights.get(key);
+  return {insights, parsedTrace: traceEngineResult.data};
 }
 
+/**
+ * @typedef CreateDetailsExtras
+ * @property {import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet} insights
+ * @property {LH.Artifacts.TraceEngineResult['data']} 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]) => LH.Audit.Details|undefined} createDetails
+ * @param {(insight: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModels[T], extras: CreateDetailsExtras) => LH.Audit.Details|undefined} createDetails
  * @template {keyof import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModelsType} T
  * @return {Promise<LH.Audit.Product>}
  */
 async function adaptInsightToAuditProduct(artifacts, context, insightName, createDetails) {
-  const insights = await getInsightSet(artifacts, context);
+  const {insights, parsedTrace} = await getInsightSet(artifacts, context);
   if (!insights) {
     return {
       scoreDisplayMode: Audit.SCORING_MODES.NOT_APPLICABLE,
@@ -54,7 +64,10 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
     };
   }
 
-  const details = createDetails(insight);
+  const details = createDetails(insight, {
+    parsedTrace,
+    insights,
+  });
   if (!details || (details.type === 'table' && details.headings.length === 0)) {
     return {
       scoreDisplayMode: Audit.SCORING_MODES.NOT_APPLICABLE,
@@ -73,23 +86,30 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
     metricSavings = {...metricSavings, LCP: /** @type {any} */ (0)};
   }
 
-  let score = 1;
-  if (insight.state === 'fail') {
-    score = 0;
-  } else if (insightName === 'LCPPhases') {
-    // TODO: change these insights to denote passing/failing/informative. Until then... hack it.
-    score = metricSavings?.LCP ?? 0 >= 1000 ? 0 : 1;
-  } else if (insightName === 'InteractionToNextPaint') {
-    // TODO: change these insights to denote passing/failing/informative. Until then... hack it.
-    score = metricSavings?.INP ?? 0 >= 500 ? 0 : 1;
+  // 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});
+  }
+
+  let score;
+  let scoreDisplayMode;
+  if (insight.state === 'fail' || insight.state === 'pass') {
+    score = insight.state === 'fail' ? 0 : 1;
+    scoreDisplayMode =
+      insight.metricSavings ? Audit.SCORING_MODES.METRIC_SAVINGS : Audit.SCORING_MODES.NUMERIC;
+  } else {
+    score = null;
+    scoreDisplayMode = Audit.SCORING_MODES.INFORMATIVE;
   }
 
   return {
-    scoreDisplayMode:
-      insight.metricSavings ? Audit.SCORING_MODES.METRIC_SAVINGS : Audit.SCORING_MODES.NUMERIC,
+    scoreDisplayMode,
     score,
     metricSavings,
     warnings: insight.warnings,
+    displayValue,
     details,
   };
 }
@@ -114,25 +134,7 @@ 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

@@ -8,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, maybeMakeNodeElementTable} from './insight-audit.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);
@@ -24,7 +24,7 @@ class InteractionToNextPaintInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['traces', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
       replacesAudits: ['work-during-interaction'],
     };
   }
@@ -58,11 +58,8 @@ class InteractionToNextPaintInsight extends Audit {
       ];
 
       return Audit.makeListDetails([
-        maybeMakeNodeElementTable(
-          artifacts.TraceElements,
-          event.args.data.beginEvent.args.data.nodeId,
-          str_(i18n.UIStrings.columnElement)),
         Audit.makeTableDetails(headings, items),
+        makeNodeItemForNodeId(artifacts.TraceElements, event.args.data.beginEvent.args.data.nodeId),
       ].filter(table => !!table));
     });
   }

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

@@ -8,7 +8,7 @@ import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/LCPDiscov
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
-import {adaptInsightToAuditProduct} from './insight-audit.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/LCPDiscovery.js', UIStrings);
@@ -24,7 +24,7 @@ class LCPDiscoveryInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['traces', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
       replacesAudits: ['prioritize-lcp-image', 'lcp-lazy-loaded'],
     };
   }
@@ -40,7 +40,10 @@ class LCPDiscoveryInsight extends Audit {
         return;
       }
 
-      return Audit.makeChecklistDetails(insight.checklist);
+      return Audit.makeListDetails([
+        Audit.makeChecklistDetails(insight.checklist),
+        makeNodeItemForNodeId(artifacts.TraceElements, insight.lcpEvent?.args.data?.nodeId),
+      ].filter(d => !!d));
     });
   }
 }

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

@@ -8,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, maybeMakeNodeElementTable} from './insight-audit.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);
@@ -24,7 +24,7 @@ class LCPPhasesInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['traces', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
       replacesAudits: ['largest-contentful-paint-element'],
     };
   }
@@ -74,11 +74,8 @@ class LCPPhasesInsight extends Audit {
       }
 
       return Audit.makeListDetails([
-        maybeMakeNodeElementTable(
-          artifacts.TraceElements,
-          insight.lcpEvent?.args.data?.nodeId,
-          str_(i18n.UIStrings.columnElement)),
         LCPPhasesInsight.makePhaseTable(insight.phases),
+        makeNodeItemForNodeId(artifacts.TraceElements, insight.lcpEvent?.args.data?.nodeId),
       ].filter(table => table !== undefined));
     });
   }

package/core/audits/insights/legacy-javascript-insight.d.ts

@@ -0,0 +1,23 @@
+export default LegacyJavaScriptInsight;
+export type Item = LH.Audit.Details.TableItem & {
+    subItems: {
+        type: "subitems";
+        items: SubItem[];
+    };
+};
+export type SubItem = {
+    signal: string;
+    location: LH.Audit.Details.SourceLocationValue;
+};
+/** @typedef {LH.Audit.Details.TableItem & {subItems: {type: 'subitems', items: SubItem[]}}} Item */
+/** @typedef {{signal: string, location: LH.Audit.Details.SourceLocationValue}} SubItem */
+declare class LegacyJavaScriptInsight extends Audit {
+    /**
+     * @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=legacy-javascript-insight.d.ts.map