lighthouse 12.3.0 → 12.4.0

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

@@ -0,0 +1,11 @@
+export default InteractionToNextPaintInsight;
+declare class InteractionToNextPaintInsight 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=interaction-to-next-paint-insight.d.ts.map

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

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/InteractionToNextPaint.js';
+
+import {Audit} from '../audit.js';
+import * as i18n from '../../lib/i18n/i18n.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);
+
+class InteractionToNextPaintInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'interaction-to-next-paint-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['work-during-interaction'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    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.makeListDetails([
+        maybeMakeNodeElementTable(
+          artifacts.TraceElements,
+          event.args.data.beginEvent.args.data.nodeId,
+          str_(i18n.UIStrings.columnElement)),
+        Audit.makeTableDetails(headings, items),
+      ].filter(table => !!table));
+    });
+  }
+}
+
+export default InteractionToNextPaintInsight;

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

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

package/core/audits/insights/lcp-discovery-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/LCPDiscovery.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/LCPDiscovery.js', UIStrings);
+
+class LCPDiscoveryInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'lcp-discovery-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['prioritize-lcp-image', 'lcp-lazy-loaded'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    return adaptInsightToAuditProduct(artifacts, context, 'LCPDiscovery', (insight) => {
+      if (!insight.checklist) {
+        return;
+      }
+
+      return Audit.makeChecklistDetails(insight.checklist);
+    });
+  }
+}
+
+export default LCPDiscoveryInsight;

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

@@ -0,0 +1,16 @@
+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
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+}
+import { Audit } from '../audit.js';
+//# sourceMappingURL=lcp-phases-insight.d.ts.map

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

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/LCPPhases.js';
+
+import {Audit} from '../audit.js';
+import * as i18n from '../../lib/i18n/i18n.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);
+
+class LCPPhasesInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'lcp-phases-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['largest-contentful-paint-element'],
+    };
+  }
+
+  /**
+   * @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) {
+    return adaptInsightToAuditProduct(artifacts, context, 'LCPPhases', (insight) => {
+      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));
+    });
+  }
+}
+
+export default LCPPhasesInsight;

package/core/audits/insights/long-critical-network-tree-insight.d.ts

@@ -0,0 +1,11 @@
+export default LongCriticalNetworkTreeInsight;
+declare class LongCriticalNetworkTreeInsight 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=long-critical-network-tree-insight.d.ts.map

package/core/audits/insights/long-critical-network-tree-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/LongCriticalNetworkTree.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/LongCriticalNetworkTree.js', UIStrings);
+
+class LongCriticalNetworkTreeInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'long-critical-network-tree-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['critical-request-chains'],
+    };
+  }
+
+  /**
+   * @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, 'LongCriticalNetworkTree', (insight) => {
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+      ];
+      /** @type {LH.Audit.Details.Table['items']} */
+      const items = [
+      ];
+      return Audit.makeTableDetails(headings, items);
+    });
+  }
+}
+
+export default LongCriticalNetworkTreeInsight;

package/core/audits/insights/render-blocking-insight.d.ts

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

package/core/audits/insights/render-blocking-insight.js

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/RenderBlocking.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/RenderBlocking.js', UIStrings);
+
+class RenderBlockingInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'render-blocking-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['render-blocking-resources'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    // TODO: show UIStrings.noRenderBlocking if nothing was blocking?
+    return adaptInsightToAuditProduct(artifacts, context, 'RenderBlocking', (insight) => {
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+        {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
+        {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize)},
+        {key: 'wastedMs', valueType: 'timespanMs', label: str_(i18n.UIStrings.columnWastedMs)},
+      ];
+      /** @type {LH.Audit.Details.Table['items']} */
+      const items = insight.renderBlockingRequests.map(request => ({
+        url: request.args.data.url,
+        totalBytes: request.args.data.encodedDataLength,
+        wastedMs: insight.requestIdToWastedMs?.get(request.args.data.requestId),
+      }));
+      return Audit.makeTableDetails(headings, items);
+    });
+  }
+}
+
+export default RenderBlockingInsight;

package/core/audits/insights/slow-css-selector-insight.d.ts

@@ -0,0 +1,11 @@
+export default SlowCSSSelectorInsight;
+declare class SlowCSSSelectorInsight 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=slow-css-selector-insight.d.ts.map

package/core/audits/insights/slow-css-selector-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/SlowCSSSelector.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/SlowCSSSelector.js', UIStrings);
+
+class SlowCSSSelectorInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'slow-css-selector-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, 'SlowCSSSelector', (insight) => {
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+      ];
+      /** @type {LH.Audit.Details.Table['items']} */
+      const items = [
+      ];
+      return Audit.makeTableDetails(headings, items);
+    });
+  }
+}
+
+export default SlowCSSSelectorInsight;

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

@@ -0,0 +1,28 @@
+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
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+}
+import { Audit } from '../audit.js';
+//# sourceMappingURL=third-parties-insight.d.ts.map

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

@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/ThirdParties.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/ThirdParties.js', UIStrings);
+
+/**
+ * @typedef URLSummary
+ * @property {number} transferSize
+ * @property {number} mainThreadTime
+ * @property {string | LH.IcuMessage} url
+ */
+
+class ThirdPartiesInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'third-parties-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['third-party-summary'],
+    };
+  }
+
+  /**
+   * @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) {
+    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 = 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});
+    });
+  }
+}
+
+export default ThirdPartiesInsight;

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

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

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

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/Viewport.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/Viewport.js', UIStrings);
+
+class ViewportInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'viewport-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['viewport'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    return adaptInsightToAuditProduct(artifacts, context, 'Viewport', (insight) => {
+      const nodeId = insight.viewportEvent?.args.data.node_id;
+
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+        {key: 'node', valueType: 'node', label: ''},
+      ];
+      /** @type {LH.Audit.Details.Table['items']} */
+      const items = [
+        {node: makeNodeItemForNodeId(artifacts.TraceElements, nodeId)},
+      ];
+      return Audit.makeTableDetails(headings, items);
+    });
+  }
+}
+
+export default ViewportInsight;

package/core/audits/layout-shifts.d.ts

@@ -26,7 +26,6 @@ export namespace UIStrings {
     let rootCauseUnsizedMedia: string;
     let rootCauseFontChanges: string;
     let rootCauseInjectedIframe: string;
-    let rootCauseRenderBlockingRequest: string;
     let displayValueShiftsFound: string;
 }
 import { Audit } from './audit.js';