lighthouse 12.3.0-dev.20250224 → 12.3.0-dev.20250225

package/core/audits/audit.js

@@ -478,6 +478,7 @@ class Audit {
 
       details: product.details,
       guidanceLevel: audit.meta.guidanceLevel,
+      replacesAudits: audit.meta.replacesAudits,
     };
   }
 

package/core/audits/insights/cls-culprits-insight.d.ts

@@ -1,5 +1,16 @@
 export default CLSCulpritsInsight;
+export type SubItem = {
+    extra?: LH.Audit.Details.NodeValue | LH.Audit.Details.UrlValue;
+    cause: LH.IcuMessage;
+};
 declare class CLSCulpritsInsight extends Audit {
+    /**
+     * @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: import("@paulirish/trace_engine/models/trace/insights/CLSCulprits.js").CLSCulpritsInsightModel, event: import("../../lib/trace-engine.js").SaneSyntheticLayoutShift, TraceElements: LH.Artifacts.TraceElement[]): LH.Audit.Details.TableSubItems | undefined;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context
@@ -7,5 +18,8 @@ declare class CLSCulpritsInsight extends Audit {
      */
     static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
 }
+export namespace UIStrings {
+    let columnScore: string;
+}
 import { Audit } from '../audit.js';
 //# sourceMappingURL=cls-culprits-insight.d.ts.map

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

@@ -1,19 +1,32 @@
-/* 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/CLSCulprits.js';
+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 str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/CLSCulprits.js', UIStrings);
+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 {
   /**
@@ -22,31 +35,103 @@ class CLSCulpritsInsight extends Audit {
   static get meta() {
     return {
       id: 'cls-culprits-insight',
-      title: str_(UIStrings.title),
-      failureTitle: str_(UIStrings.title),
-      description: str_(UIStrings.description),
+      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) {
-    // TODO: implement.
     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 */
       ];
-      /** @type {LH.Audit.Details.Table['items']} */
-      const items = [
-      ];
-      return Audit.makeTableDetails(headings, items);
+
+      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.js

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

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

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

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

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

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

@@ -25,6 +25,12 @@ class ImageDeliveryInsight extends Audit {
       description: str_(UIStrings.description),
       guidanceLevel: 3,
       requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: [
+        'modern-image-formats',
+        'uses-optimized-images',
+        'efficient-animated-content',
+        'uses-responsive-images',
+      ],
     };
   }
 

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

@@ -25,6 +25,7 @@ class InteractionToNextPaintInsight extends Audit {
       description: str_(UIStrings.description),
       guidanceLevel: 3,
       requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['work-during-interaction'],
     };
   }
 

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

@@ -25,6 +25,7 @@ class LCPDiscoveryInsight extends Audit {
       description: str_(UIStrings.description),
       guidanceLevel: 3,
       requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['prioritize-lcp-image', 'lcp-lazy-loaded'],
     };
   }
 

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

@@ -25,6 +25,7 @@ class LCPPhasesInsight extends Audit {
       description: str_(UIStrings.description),
       guidanceLevel: 3,
       requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['largest-contentful-paint-element'],
     };
   }
 

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

@@ -27,6 +27,7 @@ class LongCriticalNetworkTreeInsight extends Audit {
       description: str_(UIStrings.description),
       guidanceLevel: 3,
       requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['critical-request-chains'],
     };
   }
 

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

@@ -25,6 +25,7 @@ class RenderBlockingInsight extends Audit {
       description: str_(UIStrings.description),
       guidanceLevel: 3,
       requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['render-blocking-resources'],
     };
   }
 

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

@@ -32,6 +32,7 @@ class ThirdPartiesInsight extends Audit {
       description: str_(UIStrings.description),
       guidanceLevel: 3,
       requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['third-party-summary'],
     };
   }
 

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

@@ -25,6 +25,7 @@ class ViewportInsight extends Audit {
       description: str_(UIStrings.description),
       guidanceLevel: 3,
       requiredArtifacts: ['traces', 'TraceElements'],
+      replacesAudits: ['viewport'],
     };
   }
 

package/core/audits/layout-shifts.js

@@ -79,7 +79,7 @@ class LayoutShifts extends Audit {
     const items = [];
     const layoutShiftEvents =
       /** @type {import('../lib/trace-engine.js').SaneSyntheticLayoutShift[]} */(
-        clusters.flatMap(c => c.events)
+        clusters.flatMap(c => c.events).filter(e => !!e.args.data)
       );
     const topLayoutShiftEvents = layoutShiftEvents
       .sort((a, b) => b.args.data.weighted_score_delta - a.args.data.weighted_score_delta)

package/core/lib/bf-cache-strings.d.ts

@@ -1,6 +1,6 @@
-/** @type {Record<string, {name: LH.IcuMessage} | undefined>} */
+/** @type {Record<string, {name: LH.IcuMessage|string} | undefined>} */
 export const NotRestoredReasonDescription: Record<string, {
-    name: LH.IcuMessage;
+    name: LH.IcuMessage | string;
 } | undefined>;
 export namespace UIStrings {
     let notMainFrame: string;
@@ -77,7 +77,6 @@ export namespace UIStrings {
     let printing: string;
     let webDatabase: string;
     let pictureInPicture: string;
-    let portal: string;
     let speechRecognizer: string;
     let idleManager: string;
     let paymentManager: string;
@@ -87,6 +86,7 @@ export namespace UIStrings {
     let outstandingNetworkRequestDirectSocket: string;
     let injectedJavascript: string;
     let injectedStyleSheet: string;
+    let contentDiscarded: string;
     let contentSecurityHandler: string;
     let contentWebAuthenticationAPI: string;
     let contentFileChooser: string;
@@ -117,8 +117,11 @@ export namespace UIStrings {
     let errorDocument: string;
     let fencedFramesEmbedder: string;
     let keepaliveRequest: string;
-    let authorizationHeader: string;
+    let jsNetworkRequestReceivedCacheControlNoStoreResource: string;
     let indexedDBEvent: string;
     let cookieDisabled: string;
+    let webRTCSticky: string;
+    let webTransportSticky: string;
+    let webSocketSticky: string;
 }
 //# sourceMappingURL=bf-cache-strings.d.ts.map