lighthouse 11.3.0-dev.20231206 → 11.3.0-dev.20231208

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

@@ -6,6 +6,7 @@
 
 import {makeComputedArtifact} from '../computed-artifact.js';
 import {ProcessedTrace} from '../processed-trace.js';
+import * as RectHelpers from '../../lib/rect-helpers.js';
 
 /** @typedef {{ts: number, isMainFrame: boolean, weightedScore: number, impactedNodes?: LH.Artifacts.TraceImpactedNode[]}} LayoutShiftEvent */
 
@@ -72,6 +73,49 @@ class CumulativeLayoutShift {
     return layoutShiftEvents;
   }
 
+  /**
+   * Each layout shift event has a 'score' which is the amount added to the CLS as a result of the given shift(s).
+   * 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 {LayoutShiftEvent[]} layoutShiftEvents
+   * @return {Map<number, number>}
+   */
+  static getImpactByNodeId(layoutShiftEvents) {
+    /** @type {Map<number, number>} */
+    const impactByNodeId = new Map();
+
+    for (const event of layoutShiftEvents) {
+      if (!event.impactedNodes) continue;
+
+      let totalAreaOfImpact = 0;
+      /** @type {Map<number, number>} */
+      const pixelsMovedPerNode = new Map();
+
+      for (const node of event.impactedNodes) {
+        if (!node.node_id || !node.old_rect || !node.new_rect) continue;
+
+        const oldRect = RectHelpers.traceRectToLHRect(node.old_rect);
+        const newRect = RectHelpers.traceRectToLHRect(node.new_rect);
+        const areaOfImpact = RectHelpers.getRectArea(oldRect) +
+          RectHelpers.getRectArea(newRect) -
+          RectHelpers.getRectOverlapArea(oldRect, newRect);
+
+        pixelsMovedPerNode.set(node.node_id, areaOfImpact);
+        totalAreaOfImpact += areaOfImpact;
+      }
+
+      for (const [nodeId, pixelsMoved] of pixelsMovedPerNode.entries()) {
+        let clsContribution = impactByNodeId.get(nodeId) || 0;
+        clsContribution += (pixelsMoved / totalAreaOfImpact) * event.weightedScore;
+        impactByNodeId.set(nodeId, clsContribution);
+      }
+    }
+
+    return impactByNodeId;
+  }
+
   /**
    * Calculates cumulative layout shifts per cluster (session) of LayoutShift
    * events -- where a new cluster is created when there's a gap of more than
@@ -104,18 +148,20 @@ class CumulativeLayoutShift {
   /**
    * @param {LH.Trace} trace
    * @param {LH.Artifacts.ComputedContext} context
-   * @return {Promise<{cumulativeLayoutShift: number, cumulativeLayoutShiftMainFrame: number}>}
+   * @return {Promise<{cumulativeLayoutShift: number, cumulativeLayoutShiftMainFrame: number, impactByNodeId: Map<number, number>}>}
    */
   static async compute_(trace, context) {
     const processedTrace = await ProcessedTrace.request(trace, context);
 
     const allFrameShiftEvents =
         CumulativeLayoutShift.getLayoutShiftEvents(processedTrace);
+    const impactByNodeId = CumulativeLayoutShift.getImpactByNodeId(allFrameShiftEvents);
     const mainFrameShiftEvents = allFrameShiftEvents.filter(e => e.isMainFrame);
 
     return {
       cumulativeLayoutShift: CumulativeLayoutShift.calculate(allFrameShiftEvents),
       cumulativeLayoutShiftMainFrame: CumulativeLayoutShift.calculate(mainFrameShiftEvents),
+      impactByNodeId,
     };
   }
 }

package/core/computed/metrics/lantern-first-contentful-paint.d.ts

@@ -11,6 +11,16 @@ declare const LanternFirstContentfulPaintComputed: typeof LanternFirstContentful
 /** @typedef {import('../../lib/dependency-graph/cpu-node').CPUNode} CPUNode */
 /** @typedef {import('../../lib/dependency-graph/network-node').NetworkNode} NetworkNode */
 declare class LanternFirstContentfulPaint extends LanternMetric {
+    /**
+     * @typedef FirstPaintBasedGraphOpts
+     * @property {number} cutoffTimestamp The timestamp used to filter out tasks that occured after
+     *    our paint of interest. Typically this is First Contentful Paint or First Meaningful Paint.
+     * @property {function(NetworkNode):boolean} treatNodeAsRenderBlocking The function that determines
+     *    which resources should be considered *possibly* render-blocking.
+     * @property {(function(CPUNode):boolean)=} additionalCpuNodesToTreatAsRenderBlocking The function that
+     *    determines which CPU nodes should also be included in our blocking node IDs set,
+     *    beyond what getRenderBlockingNodeData() already includes.
+     */
     /**
      * This function computes the set of URLs that *appeared* to be render-blocking based on our filter,
      * *but definitely were not* render-blocking based on the timing of their EvaluateScript task.
@@ -18,31 +28,55 @@ declare class LanternFirstContentfulPaint extends LanternMetric {
      * given timestamp.
      *
      * @param {Node} graph
-     * @param {number} filterTimestamp The timestamp used to filter out tasks that occured after our
-     *    paint of interest. Typically this is First Contentful Paint or First Meaningful Paint.
-     * @param {function(NetworkNode):boolean} blockingScriptFilter The function that determines which scripts
-     *    should be considered *possibly* render-blocking.
-     * @param {(function(CPUNode):boolean)=} extraBlockingCpuNodesToIncludeFilter The function that determines which CPU nodes
-     *    should also be included in our blocking node IDs set.
-     * @return {{definitelyNotRenderBlockingScriptUrls: Set<string>, blockingCpuNodeIds: Set<string>}}
+     * @param {FirstPaintBasedGraphOpts} opts
+     * @return {{definitelyNotRenderBlockingScriptUrls: Set<string>, renderBlockingCpuNodeIds: Set<string>}}
      */
-    static getBlockingNodeData(graph: Node, filterTimestamp: number, blockingScriptFilter: (arg0: NetworkNode) => boolean, extraBlockingCpuNodesToIncludeFilter?: ((arg0: CPUNode) => boolean) | undefined): {
+    static getRenderBlockingNodeData(graph: Node, { cutoffTimestamp, treatNodeAsRenderBlocking, additionalCpuNodesToTreatAsRenderBlocking }: {
+        /**
+         * The timestamp used to filter out tasks that occured after
+         * our paint of interest. Typically this is First Contentful Paint or First Meaningful Paint.
+         */
+        cutoffTimestamp: number;
+        /**
+         * The function that determines
+         * which resources should be considered *possibly* render-blocking.
+         */
+        treatNodeAsRenderBlocking: (arg0: NetworkNode) => boolean;
+        /**
+         * The function that
+         * determines which CPU nodes should also be included in our blocking node IDs set,
+         * beyond what getRenderBlockingNodeData() already includes.
+         */
+        additionalCpuNodesToTreatAsRenderBlocking?: ((arg0: CPUNode) => boolean) | undefined;
+    }): {
         definitelyNotRenderBlockingScriptUrls: Set<string>;
-        blockingCpuNodeIds: Set<string>;
+        renderBlockingCpuNodeIds: Set<string>;
     };
     /**
      * This function computes the graph required for the first paint of interest.
      *
      * @param {Node} dependencyGraph
-     * @param {number} paintTs The timestamp used to filter out tasks that occured after our
-     *    paint of interest. Typically this is First Contentful Paint or First Meaningful Paint.
-     * @param {function(NetworkNode):boolean} blockingResourcesFilter The function that determines which resources
-     *    should be considered *possibly* render-blocking.
-     * @param {(function(CPUNode):boolean)=} extraBlockingCpuNodesToIncludeFilter The function that determines which CPU nodes
-     *    should also be included in our blocking node IDs set.
+     * @param {FirstPaintBasedGraphOpts} opts
      * @return {Node}
      */
-    static getFirstPaintBasedGraph(dependencyGraph: Node, paintTs: number, blockingResourcesFilter: (arg0: NetworkNode) => boolean, extraBlockingCpuNodesToIncludeFilter?: ((arg0: CPUNode) => boolean) | undefined): Node;
+    static getFirstPaintBasedGraph(dependencyGraph: Node, { cutoffTimestamp, treatNodeAsRenderBlocking, additionalCpuNodesToTreatAsRenderBlocking }: {
+        /**
+         * The timestamp used to filter out tasks that occured after
+         * our paint of interest. Typically this is First Contentful Paint or First Meaningful Paint.
+         */
+        cutoffTimestamp: number;
+        /**
+         * The function that determines
+         * which resources should be considered *possibly* render-blocking.
+         */
+        treatNodeAsRenderBlocking: (arg0: NetworkNode) => boolean;
+        /**
+         * The function that
+         * determines which CPU nodes should also be included in our blocking node IDs set,
+         * beyond what getRenderBlockingNodeData() already includes.
+         */
+        additionalCpuNodesToTreatAsRenderBlocking?: ((arg0: CPUNode) => boolean) | undefined;
+    }): Node;
 }
 import { LanternMetric } from './lantern-metric.js';
 //# sourceMappingURL=lantern-first-contentful-paint.d.ts.map

package/core/computed/metrics/lantern-first-contentful-paint.js

@@ -24,6 +24,17 @@ class LanternFirstContentfulPaint extends LanternMetric {
     };
   }
 
+  /**
+   * @typedef FirstPaintBasedGraphOpts
+   * @property {number} cutoffTimestamp The timestamp used to filter out tasks that occured after
+   *    our paint of interest. Typically this is First Contentful Paint or First Meaningful Paint.
+   * @property {function(NetworkNode):boolean} treatNodeAsRenderBlocking The function that determines
+   *    which resources should be considered *possibly* render-blocking.
+   * @property {(function(CPUNode):boolean)=} additionalCpuNodesToTreatAsRenderBlocking The function that
+   *    determines which CPU nodes should also be included in our blocking node IDs set,
+   *    beyond what getRenderBlockingNodeData() already includes.
+   */
+
   /**
    * This function computes the set of URLs that *appeared* to be render-blocking based on our filter,
    * *but definitely were not* render-blocking based on the timing of their EvaluateScript task.
@@ -31,19 +42,12 @@ class LanternFirstContentfulPaint extends LanternMetric {
    * given timestamp.
    *
    * @param {Node} graph
-   * @param {number} filterTimestamp The timestamp used to filter out tasks that occured after our
-   *    paint of interest. Typically this is First Contentful Paint or First Meaningful Paint.
-   * @param {function(NetworkNode):boolean} blockingScriptFilter The function that determines which scripts
-   *    should be considered *possibly* render-blocking.
-   * @param {(function(CPUNode):boolean)=} extraBlockingCpuNodesToIncludeFilter The function that determines which CPU nodes
-   *    should also be included in our blocking node IDs set.
-   * @return {{definitelyNotRenderBlockingScriptUrls: Set<string>, blockingCpuNodeIds: Set<string>}}
+   * @param {FirstPaintBasedGraphOpts} opts
+   * @return {{definitelyNotRenderBlockingScriptUrls: Set<string>, renderBlockingCpuNodeIds: Set<string>}}
    */
-  static getBlockingNodeData(
+  static getRenderBlockingNodeData(
       graph,
-      filterTimestamp,
-      blockingScriptFilter,
-      extraBlockingCpuNodesToIncludeFilter
+      {cutoffTimestamp, treatNodeAsRenderBlocking, additionalCpuNodesToTreatAsRenderBlocking}
   ) {
     /** @type {Map<string, CPUNode>} A map of blocking script URLs to the earliest EvaluateScript task node that executed them. */
     const scriptUrlToNodeMap = new Map();
@@ -52,9 +56,9 @@ class LanternFirstContentfulPaint extends LanternMetric {
     const cpuNodes = [];
     graph.traverse(node => {
       if (node.type === BaseNode.TYPES.CPU) {
-        // A task is *possibly* render blocking if it *started* before filterTimestamp.
+        // A task is *possibly* render blocking if it *started* before cutoffTimestamp.
         // We use startTime here because the paint event can be *inside* the task that was render blocking.
-        if (node.startTime <= filterTimestamp) cpuNodes.push(node);
+        if (node.startTime <= cutoffTimestamp) cpuNodes.push(node);
 
         // Build our script URL map to find the earliest EvaluateScript task node.
         const scriptUrls = node.getEvaluateScriptURLs();
@@ -68,16 +72,19 @@ class LanternFirstContentfulPaint extends LanternMetric {
 
     cpuNodes.sort((a, b) => a.startTime - b.startTime);
 
-    // A script is *possibly* render blocking if it finished loading before filterTimestamp.
+    // A script is *possibly* render blocking if it finished loading before cutoffTimestamp.
     const possiblyRenderBlockingScriptUrls = LanternMetric.getScriptUrls(graph, node => {
-      return node.endTime <= filterTimestamp && blockingScriptFilter(node);
+      // The optimistic LCP treatNodeAsRenderBlocking fn wants to exclude some images in the graph,
+      // but here it only receives scripts to evaluate. It's a no-op in this case, but it will
+      // matter below in the getFirstPaintBasedGraph clone operation.
+      return node.endTime <= cutoffTimestamp && treatNodeAsRenderBlocking(node);
     });
 
-    // A script is *definitely not* render blocking if its EvaluateScript task started after filterTimestamp.
+    // A script is *definitely not* render blocking if its EvaluateScript task started after cutoffTimestamp.
     /** @type {Set<string>} */
     const definitelyNotRenderBlockingScriptUrls = new Set();
     /** @type {Set<string>} */
-    const blockingCpuNodeIds = new Set();
+    const renderBlockingCpuNodeIds = new Set();
     for (const url of possiblyRenderBlockingScriptUrls) {
       // Lookup the CPU node that had the earliest EvaluateScript for this URL.
       const cpuNodeForUrl = scriptUrlToNodeMap.get(url);
@@ -85,9 +92,9 @@ class LanternFirstContentfulPaint extends LanternMetric {
       // If we can't find it at all, we can't conclude anything, so just skip it.
       if (!cpuNodeForUrl) continue;
 
-      // If we found it and it was in our `cpuNodes` set that means it finished before filterTimestamp, so it really is render-blocking.
+      // If we found it and it was in our `cpuNodes` set that means it finished before cutoffTimestamp, so it really is render-blocking.
       if (cpuNodes.includes(cpuNodeForUrl)) {
-        blockingCpuNodeIds.add(cpuNodeForUrl.id);
+        renderBlockingCpuNodeIds.add(cpuNodeForUrl.id);
         continue;
       }
 
@@ -99,22 +106,22 @@ class LanternFirstContentfulPaint extends LanternMetric {
     // The first layout, first paint, and first ParseHTML are almost always necessary for first paint,
     // so we always include those CPU nodes.
     const firstLayout = cpuNodes.find(node => node.didPerformLayout());
-    if (firstLayout) blockingCpuNodeIds.add(firstLayout.id);
+    if (firstLayout) renderBlockingCpuNodeIds.add(firstLayout.id);
     const firstPaint = cpuNodes.find(node => node.childEvents.some(e => e.name === 'Paint'));
-    if (firstPaint) blockingCpuNodeIds.add(firstPaint.id);
+    if (firstPaint) renderBlockingCpuNodeIds.add(firstPaint.id);
     const firstParse = cpuNodes.find(node => node.childEvents.some(e => e.name === 'ParseHTML'));
-    if (firstParse) blockingCpuNodeIds.add(firstParse.id);
+    if (firstParse) renderBlockingCpuNodeIds.add(firstParse.id);
 
     // If a CPU filter was passed in, we also want to include those extra nodes.
-    if (extraBlockingCpuNodesToIncludeFilter) {
+    if (additionalCpuNodesToTreatAsRenderBlocking) {
       cpuNodes
-        .filter(extraBlockingCpuNodesToIncludeFilter)
-        .forEach(node => blockingCpuNodeIds.add(node.id));
+        .filter(additionalCpuNodesToTreatAsRenderBlocking)
+        .forEach(node => renderBlockingCpuNodeIds.add(node.id));
     }
 
     return {
       definitelyNotRenderBlockingScriptUrls,
-      blockingCpuNodeIds,
+      renderBlockingCpuNodeIds,
     };
   }
 
@@ -122,35 +129,25 @@ class LanternFirstContentfulPaint extends LanternMetric {
    * This function computes the graph required for the first paint of interest.
    *
    * @param {Node} dependencyGraph
-   * @param {number} paintTs The timestamp used to filter out tasks that occured after our
-   *    paint of interest. Typically this is First Contentful Paint or First Meaningful Paint.
-   * @param {function(NetworkNode):boolean} blockingResourcesFilter The function that determines which resources
-   *    should be considered *possibly* render-blocking.
-   * @param {(function(CPUNode):boolean)=} extraBlockingCpuNodesToIncludeFilter The function that determines which CPU nodes
-   *    should also be included in our blocking node IDs set.
+   * @param {FirstPaintBasedGraphOpts} opts
    * @return {Node}
    */
   static getFirstPaintBasedGraph(
       dependencyGraph,
-      paintTs,
-      blockingResourcesFilter,
-      extraBlockingCpuNodesToIncludeFilter
+      {cutoffTimestamp, treatNodeAsRenderBlocking, additionalCpuNodesToTreatAsRenderBlocking}
   ) {
-    const {
-      definitelyNotRenderBlockingScriptUrls,
-      blockingCpuNodeIds,
-    } = this.getBlockingNodeData(
-      dependencyGraph,
-      paintTs,
-      blockingResourcesFilter,
-      extraBlockingCpuNodesToIncludeFilter
-    );
+    const rbData = this.getRenderBlockingNodeData(dependencyGraph, {
+      cutoffTimestamp,
+      treatNodeAsRenderBlocking,
+      additionalCpuNodesToTreatAsRenderBlocking,
+    });
+    const {definitelyNotRenderBlockingScriptUrls, renderBlockingCpuNodeIds} = rbData;
 
     return dependencyGraph.cloneWithRelationships(node => {
       if (node.type === BaseNode.TYPES.NETWORK) {
-        // Exclude all nodes that ended after paintTs (except for the main document which we always consider necessary)
-        // endTime is negative if request does not finish, make sure startTime isn't after paintTs in this case.
-        const endedAfterPaint = node.endTime > paintTs || node.startTime > paintTs;
+        // Exclude all nodes that ended after cutoffTimestamp (except for the main document which we always consider necessary)
+        // endTime is negative if request does not finish, make sure startTime isn't after cutoffTimestamp in this case.
+        const endedAfterPaint = node.endTime > cutoffTimestamp || node.startTime > cutoffTimestamp;
         if (endedAfterPaint && !node.isMainDocument()) return false;
 
         const url = node.record.url;
@@ -159,10 +156,11 @@ class LanternFirstContentfulPaint extends LanternMetric {
           return false;
         }
 
-        return blockingResourcesFilter(node);
+        // Lastly, build up the FCP graph of all nodes we consider render blocking
+        return treatNodeAsRenderBlocking(node);
       } else {
         // If it's a CPU node, just check if it was blocking.
-        return blockingCpuNodeIds.has(node.id);
+        return renderBlockingCpuNodeIds.has(node.id);
       }
     });
   }
@@ -173,14 +171,14 @@ class LanternFirstContentfulPaint extends LanternMetric {
    * @return {Node}
    */
   static getOptimisticGraph(dependencyGraph, processedNavigation) {
-    return this.getFirstPaintBasedGraph(
-      dependencyGraph,
-      processedNavigation.timestamps.firstContentfulPaint,
+    return this.getFirstPaintBasedGraph(dependencyGraph, {
+      cutoffTimestamp: processedNavigation.timestamps.firstContentfulPaint,
       // In the optimistic graph we exclude resources that appeared to be render blocking but were
       // initiated by a script. While they typically have a very high importance and tend to have a
       // significant impact on the page's content, these resources don't technically block rendering.
-      node => node.hasRenderBlockingPriority() && node.initiatorType !== 'script'
-    );
+      treatNodeAsRenderBlocking: node =>
+        node.hasRenderBlockingPriority() && node.initiatorType !== 'script',
+    });
   }
 
   /**
@@ -189,11 +187,10 @@ class LanternFirstContentfulPaint extends LanternMetric {
    * @return {Node}
    */
   static getPessimisticGraph(dependencyGraph, processedNavigation) {
-    return this.getFirstPaintBasedGraph(
-      dependencyGraph,
-      processedNavigation.timestamps.firstContentfulPaint,
-      node => node.hasRenderBlockingPriority()
-    );
+    return this.getFirstPaintBasedGraph(dependencyGraph, {
+      cutoffTimestamp: processedNavigation.timestamps.firstContentfulPaint,
+      treatNodeAsRenderBlocking: node => node.hasRenderBlockingPriority(),
+    });
   }
 }
 

package/core/computed/metrics/lantern-first-meaningful-paint.js

@@ -33,14 +33,13 @@ class LanternFirstMeaningfulPaint extends LanternMetric {
     if (!fmp) {
       throw new LighthouseError(LighthouseError.errors.NO_FMP);
     }
-
-    return LanternFirstContentfulPaint.getFirstPaintBasedGraph(
-      dependencyGraph,
-      fmp,
+    return LanternFirstContentfulPaint.getFirstPaintBasedGraph(dependencyGraph, {
+      cutoffTimestamp: fmp,
       // See LanternFirstContentfulPaint's getOptimisticGraph implementation for a longer description
       // of why we exclude script initiated resources here.
-      node => node.hasRenderBlockingPriority() && node.initiatorType !== 'script'
-    );
+      treatNodeAsRenderBlocking: node =>
+        node.hasRenderBlockingPriority() && node.initiatorType !== 'script',
+    });
   }
 
   /**
@@ -54,13 +53,12 @@ class LanternFirstMeaningfulPaint extends LanternMetric {
       throw new LighthouseError(LighthouseError.errors.NO_FMP);
     }
 
-    return LanternFirstContentfulPaint.getFirstPaintBasedGraph(
-      dependencyGraph,
-      fmp,
-      node => node.hasRenderBlockingPriority(),
+    return LanternFirstContentfulPaint.getFirstPaintBasedGraph(dependencyGraph, {
+      cutoffTimestamp: fmp,
+      treatNodeAsRenderBlocking: node => node.hasRenderBlockingPriority(),
       // For pessimistic FMP we'll include *all* layout nodes
-      node => node.didPerformLayout()
-    );
+      additionalCpuNodesToTreatAsRenderBlocking: node => node.didPerformLayout(),
+    });
   }
 
   /**

package/core/computed/metrics/lantern-largest-contentful-paint.js

@@ -32,7 +32,6 @@ class LanternLargestContentfulPaint extends LanternMetric {
    */
   static isNotLowPriorityImageNode(node) {
     if (node.type !== 'network') return true;
-
     const isImage = node.record.resourceType === 'Image';
     const isLowPriority = node.record.priority === 'Low' || node.record.priority === 'VeryLow';
     return !isImage || !isLowPriority;
@@ -49,11 +48,10 @@ class LanternLargestContentfulPaint extends LanternMetric {
       throw new LighthouseError(LighthouseError.errors.NO_LCP);
     }
 
-    return LanternFirstContentfulPaint.getFirstPaintBasedGraph(
-      dependencyGraph,
-      lcp,
-      LanternLargestContentfulPaint.isNotLowPriorityImageNode
-    );
+    return LanternFirstContentfulPaint.getFirstPaintBasedGraph(dependencyGraph, {
+      cutoffTimestamp: lcp,
+      treatNodeAsRenderBlocking: LanternLargestContentfulPaint.isNotLowPriorityImageNode,
+    });
   }
 
   /**
@@ -67,13 +65,12 @@ class LanternLargestContentfulPaint extends LanternMetric {
       throw new LighthouseError(LighthouseError.errors.NO_LCP);
     }
 
-    return LanternFirstContentfulPaint.getFirstPaintBasedGraph(
-      dependencyGraph,
-      lcp,
-      _ => true,
+    return LanternFirstContentfulPaint.getFirstPaintBasedGraph(dependencyGraph, {
+      cutoffTimestamp: lcp,
+      treatNodeAsRenderBlocking: _ => true,
       // For pessimistic LCP we'll include *all* layout nodes
-      node => node.didPerformLayout()
-    );
+      additionalCpuNodesToTreatAsRenderBlocking: node => node.didPerformLayout(),
+    });
   }
 
   /**

package/core/computed/metrics/lantern-metric.d.ts

@@ -24,10 +24,10 @@ export type Extras = {
 export class LanternMetric {
     /**
      * @param {Node} dependencyGraph
-     * @param {function(NetworkNode):boolean=} condition
+     * @param {function(NetworkNode):boolean=} treatNodeAsRenderBlocking
      * @return {Set<string>}
      */
-    static getScriptUrls(dependencyGraph: Node, condition?: ((arg0: NetworkNode) => boolean) | undefined): Set<string>;
+    static getScriptUrls(dependencyGraph: Node, treatNodeAsRenderBlocking?: ((arg0: NetworkNode) => boolean) | undefined): Set<string>;
     /**
      * @return {LH.Gatherer.Simulation.MetricCoefficients}
      */

package/core/computed/metrics/lantern-metric.js

@@ -26,18 +26,19 @@ import {LoadSimulator} from '../load-simulator.js';
 class LanternMetric {
   /**
    * @param {Node} dependencyGraph
-   * @param {function(NetworkNode):boolean=} condition
+   * @param {function(NetworkNode):boolean=} treatNodeAsRenderBlocking
    * @return {Set<string>}
    */
-  static getScriptUrls(dependencyGraph, condition) {
+  static getScriptUrls(dependencyGraph, treatNodeAsRenderBlocking) {
     /** @type {Set<string>} */
     const scriptUrls = new Set();
 
     dependencyGraph.traverse(node => {
-      if (node.type === BaseNode.TYPES.CPU) return;
+      if (node.type !== BaseNode.TYPES.NETWORK) return;
       if (node.record.resourceType !== NetworkRequest.TYPES.Script) return;
-      if (condition && !condition(node)) return;
-      scriptUrls.add(node.record.url);
+      if (treatNodeAsRenderBlocking?.(node)) {
+        scriptUrls.add(node.record.url);
+      }
     });
 
     return scriptUrls;

package/core/config/default-config.js

@@ -202,6 +202,7 @@ const defaultConfig = {
     'image-size-responsive',
     'preload-fonts',
     'deprecations',
+    'third-party-cookies',
     'mainthread-work-breakdown',
     'bootup-time',
     'uses-rel-preload',
@@ -215,6 +216,7 @@ const defaultConfig = {
     'metrics',
     'performance-budget',
     'timing-budget',
+    'resource-summary',
     'third-party-summary',
     'third-party-facades',
     'largest-contentful-paint-element',
@@ -499,6 +501,7 @@ const defaultConfig = {
         {id: 'screenshot-thumbnails', weight: 0, group: 'hidden'},
         {id: 'final-screenshot', weight: 0, group: 'hidden'},
         {id: 'script-treemap-data', weight: 0, group: 'hidden'},
+        {id: 'resource-summary', weight: 0, group: 'hidden'},
       ],
     },
     'accessibility': {
@@ -607,6 +610,7 @@ const defaultConfig = {
         {id: 'no-unload-listeners', weight: 1, group: 'best-practices-general'},
         {id: 'js-libraries', weight: 0, group: 'best-practices-general'},
         {id: 'deprecations', weight: 5, group: 'best-practices-general'},
+        {id: 'third-party-cookies', weight: 5, group: 'best-practices-general'},
         {id: 'errors-in-console', weight: 1, group: 'best-practices-general'},
         {id: 'valid-source-maps', weight: 0, group: 'best-practices-general'},
         {id: 'inspector-issues', weight: 1, group: 'best-practices-general'},

package/core/config/filters.js

@@ -20,6 +20,7 @@ const baseArtifactKeySource = {
   PageLoadError: '',
   HostFormFactor: '',
   HostUserAgent: '',
+  HostProduct: '',
   GatherContext: '',
 };
 

package/core/gather/base-artifacts.js

@@ -19,7 +19,7 @@ import {
  */
 async function getBaseArtifacts(resolvedConfig, driver, context) {
   const BenchmarkIndex = await getBenchmarkIndex(driver.executionContext);
-  const {userAgent} = await getBrowserVersion(driver.defaultSession);
+  const {userAgent, product} = await getBrowserVersion(driver.defaultSession);
 
   return {
     // Meta artifacts.
@@ -32,6 +32,7 @@ async function getBaseArtifacts(resolvedConfig, driver, context) {
     HostUserAgent: userAgent,
     HostFormFactor: userAgent.includes('Android') || userAgent.includes('Mobile') ?
       'mobile' : 'desktop',
+    HostProduct: product,
     // Contextual artifacts whose collection changes based on gather mode.
     URL: {
       finalDisplayedUrl: '',

package/core/gather/gatherers/css-usage.js

@@ -132,6 +132,11 @@ class CSSUsage extends BaseGatherer {
         continue;
       }
 
+      // Exclude empty stylesheets.
+      if (sheet.header.length === 0) {
+        continue;
+      }
+
       dedupedStylesheets.set(sheet.content, sheet);
     }
 

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

@@ -1,7 +1,6 @@
 export default TraceElements;
 export type TraceElementData = {
     nodeId: number;
-    score?: number;
     animations?: {
         name?: string;
         failureReasonsMask?: number;
@@ -11,20 +10,13 @@ export type TraceElementData = {
 };
 declare class TraceElements extends BaseGatherer {
     /**
-     * @param {Array<number>} rect
-     * @return {LH.Artifacts.Rect}
-     */
-    static traceRectToLHRect(rect: Array<number>): LH.Artifacts.Rect;
-    /**
-     * This function finds the top (up to 5) elements that contribute to the CLS score of the page.
-     * Each layout shift event has a 'score' which is the amount added to the CLS as a result of the given shift(s).
-     * 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 {LH.Artifacts.ProcessedTrace} processedTrace
-     * @return {Array<TraceElementData>}
+     * This function finds the top (up to 15) elements that contribute to the CLS score of the page.
+     *
+     * @param {LH.Trace} trace
+     * @param {LH.Gatherer.Context} context
+     * @return {Promise<Array<TraceElementData>>}
      */
-    static getTopLayoutShiftElements(processedTrace: LH.Artifacts.ProcessedTrace): Array<TraceElementData>;
+    static getTopLayoutShiftElements(trace: LH.Trace, context: LH.Gatherer.Context): Promise<Array<TraceElementData>>;
     /**
      * @param {LH.Trace} trace
      * @param {LH.Gatherer.Context} context
@@ -67,6 +59,5 @@ declare class TraceElements extends BaseGatherer {
     getArtifact(context: LH.Gatherer.Context<'Trace'>): Promise<LH.Artifacts.TraceElement[]>;
 }
 import BaseGatherer from '../base-gatherer.js';
-import { ProcessedTrace } from '../../computed/processed-trace.js';
 import Trace from './trace.js';
 //# sourceMappingURL=trace-elements.d.ts.map