lighthouse 10.2.0-dev.20230510 → 10.2.0-dev.20230511

package/core/computed/metrics/cumulative-layout-shift.d.ts

@@ -3,6 +3,7 @@ export type LayoutShiftEvent = {
     ts: number;
     isMainFrame: boolean;
     weightedScore: number;
+    impactedNodes?: LH.Artifacts.TraceImpactedNode[];
 };
 declare const CumulativeLayoutShiftComputed: typeof CumulativeLayoutShift & {
     request: (dependencies: import("../../index.js").Trace, context: import("../../../types/utility-types.js").default.ImmutableObject<{

package/core/computed/metrics/cumulative-layout-shift.js

@@ -7,7 +7,7 @@
 import {makeComputedArtifact} from '../computed-artifact.js';
 import {ProcessedTrace} from '../processed-trace.js';
 
-/** @typedef {{ts: number, isMainFrame: boolean, weightedScore: number}} LayoutShiftEvent */
+/** @typedef {{ts: number, isMainFrame: boolean, weightedScore: number, impactedNodes?: LH.Artifacts.TraceImpactedNode[]}} LayoutShiftEvent */
 
 const RECENT_INPUT_WINDOW = 500;
 
@@ -65,6 +65,7 @@ class CumulativeLayoutShift {
         ts: event.ts,
         isMainFrame: event.args.data.is_main_frame,
         weightedScore: event.args.data.weighted_score_delta,
+        impactedNodes: event.args.data.impacted_nodes,
       });
     }
 

package/core/gather/gatherers/trace-elements.d.ts

@@ -21,10 +21,10 @@ declare class TraceElements extends FRGatherer {
      * We calculate the score per element by taking the 'score' of each layout shift event and
      * distributing it between all the nodes that were shifted, proportianal to the impact region of
      * each shifted element.
-     * @param {Array<LH.TraceEvent>} mainThreadEvents
+     * @param {LH.Artifacts.ProcessedTrace} processedTrace
      * @return {Array<TraceElementData>}
      */
-    static getTopLayoutShiftElements(mainThreadEvents: Array<LH.TraceEvent>): Array<TraceElementData>;
+    static getTopLayoutShiftElements(processedTrace: LH.Artifacts.ProcessedTrace): Array<TraceElementData>;
     /**
      * @param {LH.Trace} trace
      * @param {LH.Gatherer.FRTransitionalContext} context
@@ -80,4 +80,5 @@ declare class TraceElements extends FRGatherer {
 }
 import FRGatherer from '../base-gatherer.js';
 import Trace from './trace.js';
+import { ProcessedTrace } from '../../computed/processed-trace.js';
 //# sourceMappingURL=trace-elements.d.ts.map

package/core/gather/gatherers/trace-elements.js

@@ -22,6 +22,7 @@ import {ProcessedTrace} from '../../computed/processed-trace.js';
 import {ProcessedNavigation} from '../../computed/processed-navigation.js';
 import {LighthouseError} from '../../lib/lh-error.js';
 import {Responsiveness} from '../../computed/metrics/responsiveness.js';
+import {CumulativeLayoutShift} from '../../computed/metrics/cumulative-layout-shift.js';
 
 /** @typedef {{nodeId: number, score?: number, animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[], type?: string}} TraceElementData */
 
@@ -80,34 +81,24 @@ class TraceElements extends FRGatherer {
    * We calculate the score per element by taking the 'score' of each layout shift event and
    * distributing it between all the nodes that were shifted, proportianal to the impact region of
    * each shifted element.
-   * @param {Array<LH.TraceEvent>} mainThreadEvents
+   * @param {LH.Artifacts.ProcessedTrace} processedTrace
    * @return {Array<TraceElementData>}
    */
-  static getTopLayoutShiftElements(mainThreadEvents) {
+  static getTopLayoutShiftElements(processedTrace) {
     /** @type {Map<number, number>} */
     const clsPerNode = new Map();
-    const shiftEvents = mainThreadEvents
-      .filter(e => e.name === 'LayoutShift')
-      .map(e => e.args?.data);
-    const indexFirstEventWithoutInput =
-      shiftEvents.findIndex(event => event && !event.had_recent_input);
-
-    shiftEvents.forEach((event, index) => {
-      if (!event || !event.impacted_nodes || !event.score) {
-        return;
-      }
+    const shiftEvents = CumulativeLayoutShift.getLayoutShiftEvents(processedTrace);
 
-      // Ignore events with input, unless it's one of the initial events.
-      // See comment in computed/metrics/cumulative-layout-shift.js.
-      if (indexFirstEventWithoutInput !== -1 && index >= indexFirstEventWithoutInput) {
-        if (event.had_recent_input) return;
+    shiftEvents.forEach((event) => {
+      if (!event || !event.impactedNodes) {
+        return;
       }
 
       let totalAreaOfImpact = 0;
       /** @type {Map<number, number>} */
       const pixelsMovedPerNode = new Map();
 
-      event.impacted_nodes.forEach(node => {
+      event.impactedNodes.forEach(node => {
         if (!node.node_id || !node.old_rect || !node.new_rect) {
           return;
         }
@@ -124,7 +115,7 @@ class TraceElements extends FRGatherer {
 
       for (const [nodeId, pixelsMoved] of pixelsMovedPerNode.entries()) {
         let clsContribution = clsPerNode.get(nodeId) || 0;
-        clsContribution += (pixelsMoved / totalAreaOfImpact) * event.score;
+        clsContribution += (pixelsMoved / totalAreaOfImpact) * event.weightedScore;
         clsPerNode.set(nodeId, clsContribution);
       }
     });
@@ -272,7 +263,7 @@ class TraceElements extends FRGatherer {
     const {mainThreadEvents} = processedTrace;
 
     const lcpNodeData = await TraceElements.getLcpElement(trace, context);
-    const clsNodeData = TraceElements.getTopLayoutShiftElements(mainThreadEvents);
+    const clsNodeData = TraceElements.getTopLayoutShiftElements(processedTrace);
     const animatedElementData = await this.getAnimatedElements(mainThreadEvents);
     const responsivenessElementData = await TraceElements.getResponsivenessElement(trace, context);
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "10.2.0-dev.20230510",
+  "version": "10.2.0-dev.20230511",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {

package/types/artifacts.d.ts

@@ -948,6 +948,12 @@ declare module Artifacts {
     // Convenience methods.
     isFirstParty: (url: string) => boolean;
   }
+
+  interface TraceImpactedNode {
+    node_id: number;
+    old_rect?: Array<number>;
+    new_rect?: Array<number>;
+  }
 }
 
 export interface Trace {
@@ -1017,11 +1023,7 @@ export interface TraceEvent {
       nodeId?: number;
       DOMNodeId?: number;
       imageUrl?: string;
-      impacted_nodes?: Array<{
-        node_id: number,
-        old_rect?: Array<number>,
-        new_rect?: Array<number>,
-      }>;
+      impacted_nodes?: Artifacts.TraceImpactedNode[];
       score?: number;
       weighted_score_delta?: number;
       had_recent_input?: boolean;