lighthouse 12.3.0 → 12.4.0

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

@@ -0,0 +1,137 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings as InsightUIStrings} from '@paulirish/trace_engine/models/trace/insights/CLSCulprits.js';
+
+import {Audit} from '../audit.js';
+import * as i18n from '../../lib/i18n/i18n.js';
+import {adaptInsightToAuditProduct, makeNodeItemForNodeId} from './insight-audit.js';
+import TraceElements from '../../gather/gatherers/trace-elements.js';
+import {CumulativeLayoutShift} from '../../computed/metrics/cumulative-layout-shift.js';
+
+const MAX_LAYOUT_SHIFTS_PER_CLUSTER = 5;
+
+/** @typedef {{extra?: LH.Audit.Details.NodeValue | LH.Audit.Details.UrlValue, cause: LH.IcuMessage}} SubItem */
+
+// 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);
+
+class CLSCulpritsInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'cls-culprits-insight',
+      title: insightStr_(InsightUIStrings.title),
+      failureTitle: insightStr_(InsightUIStrings.title),
+      description: insightStr_(InsightUIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['layout-shifts', 'non-composited-animations', 'unsized-images'],
+    };
+  }
+
+  /**
+   * @param {import('@paulirish/trace_engine/models/trace/insights/CLSCulprits.js').CLSCulpritsInsightModel} insight
+   * @param {import('../../lib/trace-engine.js').SaneSyntheticLayoutShift} event
+   * @param {LH.Artifacts.TraceElement[]} TraceElements
+   * @return {LH.Audit.Details.TableSubItems|undefined}
+   */
+  static getCulpritSubItems(insight, event, TraceElements) {
+    const culprits = insight.shifts.get(event);
+    if (!culprits) {
+      return;
+    }
+
+    /** @type {SubItem[]} */
+    const subItems = [];
+    for (const backendNodeId of culprits.unsizedImages) {
+      subItems.push({
+        extra: makeNodeItemForNodeId(TraceElements, backendNodeId),
+        cause: insightStr_(InsightUIStrings.unsizedImages),
+      });
+    }
+    for (const request of culprits.fontRequests) {
+      const url = request.args.data.url;
+      subItems.push({
+        extra: {type: 'url', value: url},
+        cause: insightStr_(InsightUIStrings.fontRequest),
+      });
+    }
+    if (culprits.iframeIds.length) {
+      subItems.push({
+        cause: insightStr_(InsightUIStrings.injectedIframe),
+      });
+    }
+
+    if (subItems.length) {
+      return {type: 'subitems', items: subItems};
+    }
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    return adaptInsightToAuditProduct(artifacts, context, 'CLSCulprits', (insight) => {
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+        /* eslint-disable max-len */
+        {key: 'node', valueType: 'node', subItemsHeading: {key: 'extra'}, label: insightStr_(i18n.UIStrings.columnElement)},
+        {key: 'score', valueType: 'numeric', subItemsHeading: {key: 'cause', valueType: 'text'}, granularity: 0.001, label: str_(UIStrings.columnScore)},
+        /* eslint-enable max-len */
+      ];
+
+      const tables = insight.clusters.map(cluster => {
+        const events =
+          /** @type {import('../../lib/trace-engine.js').SaneSyntheticLayoutShift[]} */ (
+            cluster.events.filter(e => !!e.args.data)
+          ).sort((a, b) => b.args.data.weighted_score_delta - a.args.data.weighted_score_delta)
+          .slice(0, MAX_LAYOUT_SHIFTS_PER_CLUSTER);
+        const impactByNodeId = CumulativeLayoutShift.getImpactByNodeId(events.map(e => ({
+          impactedNodes: e.args.data.impacted_nodes,
+          ts: e.ts,
+          isMainFrame: e.args.data.is_main_frame,
+          weightedScore: e.args.data.weighted_score_delta,
+          event: /** @type {any} */ (e),
+        })));
+
+        /** @type {LH.Audit.Details.Table['items']} */
+        const items = events.map(event => {
+          const biggestImpactNodeId = TraceElements.getBiggestImpactNodeForShiftEvent(
+            event.args.data.impacted_nodes || [], impactByNodeId, event);
+          return {
+            node: makeNodeItemForNodeId(artifacts.TraceElements, biggestImpactNodeId),
+            score: event.args.data?.weighted_score_delta,
+            subItems: this.getCulpritSubItems(insight, event, artifacts.TraceElements),
+          };
+        });
+        items.unshift({
+          node: {type: 'text', value: insightStr_(i18n.UIStrings.total)},
+          score: cluster.clusterCumulativeScore,
+        });
+        return Audit.makeTableDetails(headings, items);
+      });
+
+      return Audit.makeListDetails(tables);
+    });
+  }
+}
+
+export default CLSCulpritsInsight;
+export {UIStrings};

package/core/audits/insights/document-latency-insight.d.ts

@@ -0,0 +1,11 @@
+export default DocumentLatencyInsight;
+declare class DocumentLatencyInsight 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=document-latency-insight.d.ts.map

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

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/DocumentLatency.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/DocumentLatency.js', UIStrings);
+
+class DocumentLatencyInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'document-latency-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['redirects', 'server-response-time', 'uses-text-compression'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    return adaptInsightToAuditProduct(artifacts, context, 'DocumentLatency', (insight) => {
+      if (!insight.data) {
+        return;
+      }
+
+      return Audit.makeChecklistDetails(insight.data.checklist);
+    });
+  }
+}
+
+export default DocumentLatencyInsight;

package/core/audits/insights/dom-size-insight.d.ts

@@ -0,0 +1,11 @@
+export default DOMSizeInsight;
+declare class DOMSizeInsight 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=dom-size-insight.d.ts.map

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

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/DOMSize.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/DOMSize.js', UIStrings);
+
+class DOMSizeInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'dom-size-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['dom-size'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    return adaptInsightToAuditProduct(artifacts, context, 'DOMSize', (insight) => {
+      if (!insight.maxDOMStats?.args.data.maxChildren || !insight.maxDOMStats?.args.data.maxDepth) {
+        return;
+      }
+
+      const {totalElements, maxChildren, maxDepth} = insight.maxDOMStats.args.data;
+
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+        {key: 'statistic', valueType: 'text', label: str_(UIStrings.statistic)},
+        {key: 'node', valueType: 'node', label: str_(UIStrings.element)},
+        {key: 'value', valueType: 'numeric', label: str_(UIStrings.value)},
+      ];
+      /** @type {LH.Audit.Details.Table['items']} */
+      const items = [
+        {
+          statistic: str_(UIStrings.totalElements),
+          value: {
+            type: 'numeric',
+            granularity: 1,
+            value: totalElements,
+          },
+        },
+        {
+          statistic: str_(UIStrings.maxChildren),
+          node: makeNodeItemForNodeId(artifacts.TraceElements, maxChildren.nodeId),
+          value: {
+            type: 'numeric',
+            granularity: 1,
+            value: maxChildren.numChildren,
+          },
+        },
+        {
+          statistic: str_(UIStrings.maxDOMDepth),
+          node: makeNodeItemForNodeId(artifacts.TraceElements, maxDepth.nodeId),
+          value: {
+            type: 'numeric',
+            granularity: 1,
+            value: maxDepth.depth,
+          },
+        },
+      ];
+      return Audit.makeTableDetails(headings, items);
+    });
+  }
+}
+
+export default DOMSizeInsight;

package/core/audits/insights/font-display-insight.d.ts

@@ -0,0 +1,11 @@
+export default FontDisplayInsight;
+declare class FontDisplayInsight 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=font-display-insight.d.ts.map

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

@@ -0,0 +1,53 @@
+/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
+
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/FontDisplay.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/FontDisplay.js', UIStrings);
+
+class FontDisplayInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'font-display-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['font-display'],
+    };
+  }
+
+  /**
+   * @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, 'FontDisplay', (insight) => {
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+      ];
+      /** @type {LH.Audit.Details.Table['items']} */
+      const items = [
+      ];
+      return Audit.makeTableDetails(headings, items);
+    });
+  }
+}
+
+export default FontDisplayInsight;

package/core/audits/insights/forced-reflow-insight.d.ts

@@ -0,0 +1,11 @@
+export default ForcedReflowInsight;
+declare class ForcedReflowInsight 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=forced-reflow-insight.d.ts.map

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

@@ -0,0 +1,52 @@
+/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
+
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/ForcedReflow.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/ForcedReflow.js', UIStrings);
+
+class ForcedReflowInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'forced-reflow-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+    };
+  }
+
+  /**
+   * @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, 'ForcedReflow', (insight) => {
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+      ];
+      /** @type {LH.Audit.Details.Table['items']} */
+      const items = [
+      ];
+      return Audit.makeTableDetails(headings, items);
+    });
+  }
+}
+
+export default ForcedReflowInsight;

package/core/audits/insights/image-delivery-insight.d.ts

@@ -0,0 +1,11 @@
+export default ImageDeliveryInsight;
+declare class ImageDeliveryInsight 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=image-delivery-insight.d.ts.map

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

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/ImageDelivery.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/ImageDelivery.js', UIStrings);
+
+class ImageDeliveryInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'image-delivery-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: [
+        'modern-image-formats',
+        'uses-optimized-images',
+        'efficient-animated-content',
+        'uses-responsive-images',
+      ],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    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 = 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);
+    });
+  }
+}
+
+export default ImageDeliveryInsight;

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

@@ -0,0 +1,23 @@
+/**
+ * @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
+ * @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>;
+/**
+ * @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

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {NO_NAVIGATION} from '@paulirish/trace_engine/models/trace/types/TraceEvents.js';
+
+import {ProcessedTrace} from '../../computed/processed-trace.js';
+import {TraceEngineResult} from '../../computed/trace-engine-result.js';
+import {Audit} from '../audit.js';
+
+/**
+ * @param {LH.Artifacts} artifacts
+ * @param {LH.Audit.Context} context
+ * @return {Promise<import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet|undefined>}
+ */
+async function getInsightSet(artifacts, context) {
+  const trace = artifacts.traces[Audit.DEFAULT_PASS];
+  const processedTrace = await ProcessedTrace.request(trace, context);
+  const traceEngineResult = await TraceEngineResult.request({trace}, context);
+
+  const navigationId = processedTrace.timeOriginEvt.args.data?.navigationId;
+  const key = navigationId ?? NO_NAVIGATION;
+
+  return traceEngineResult.insights.get(key);
+}
+
+/**
+ * @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
+ * @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);
+  if (!insights) {
+    return {
+      scoreDisplayMode: Audit.SCORING_MODES.NOT_APPLICABLE,
+      score: null,
+    };
+  }
+
+  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 {
+      scoreDisplayMode: Audit.SCORING_MODES.NOT_APPLICABLE,
+      score: null,
+    };
+  }
+
+  // This hack is to add metric adorners if an insight category links it to a metric,
+  // but doesn't output a metric savings for that metric.
+  let metricSavings = insight.metricSavings;
+  if (insight.category === 'INP' && !metricSavings?.INP) {
+    metricSavings = {...metricSavings, INP: /** @type {any} */ (0)};
+  } else if (insight.category === 'CLS' && !metricSavings?.CLS) {
+    metricSavings = {...metricSavings, CLS: /** @type {any} */ (0)};
+  } else if (insight.category === 'LCP' && !metricSavings?.LCP) {
+    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,
+    metricSavings,
+    warnings: insight.warnings,
+    details,
+  };
+}
+
+/**
+ * @param {LH.Artifacts.TraceElement[]} traceElements
+ * @param {number|null|undefined} nodeId
+ * @return {LH.Audit.Details.NodeValue|undefined}
+ */
+function makeNodeItemForNodeId(traceElements, nodeId) {
+  if (typeof nodeId !== 'number') {
+    return;
+  }
+
+  const traceElement =
+    traceElements.find(te => te.traceEventType === 'trace-engine' && te.nodeId === nodeId);
+  const node = traceElement?.node;
+  if (!node) {
+    return;
+  }
+
+  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,
+};