lighthouse 11.3.0 → 11.4.0

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/computed/resource-summary.d.ts

@@ -39,7 +39,6 @@ declare class ResourceSummary {
         budgets: LH.Util.ImmutableObject<LH.Budget[] | null>;
     }, context: LH.Artifacts.ComputedContext): Promise<Record<LH.Budget.ResourceType, ResourceEntry>>;
 }
-import { Util } from '../../shared/util.js';
 import { Budget } from '../config/budget.js';
 import { NetworkRequest } from '../lib/network-request.js';
 import { EntityClassification } from './entity-classification.js';

package/core/computed/resource-summary.js

@@ -9,7 +9,7 @@ import {makeComputedArtifact} from './computed-artifact.js';
 import {NetworkRecords} from './network-records.js';
 import {NetworkRequest} from '../lib/network-request.js';
 import {Budget} from '../config/budget.js';
-import {Util} from '../../shared/util.js';
+import UrlUtils from '../lib/url-utils.js';
 
 /** @typedef {{count: number, resourceSize: number, transferSize: number}} ResourceEntry */
 
@@ -59,7 +59,7 @@ class ResourceSummary {
       firstPartyHosts = budget.options.firstPartyHostnames;
     } else {
       firstPartyHosts = classifiedEntities.firstParty?.domains.map(domain => `*.${domain}`) ||
-        [`*.${Util.getRootDomain(URLArtifact.finalDisplayedUrl)}`];
+        [`*.${UrlUtils.getRootDomain(URLArtifact.finalDisplayedUrl)}`];
     }
 
     networkRecords.filter(record => {

package/core/computed/unused-css.js

@@ -5,9 +5,9 @@
  */
 
 import {makeComputedArtifact} from './computed-artifact.js';
-import {ByteEfficiencyAudit} from '../audits/byte-efficiency/byte-efficiency-audit.js';
 import {NetworkRecords} from './network-records.js';
 import {Util} from '../../shared/util.js';
+import {estimateTransferSize} from '../lib/script-helpers.js';
 
 const PREVIEW_LENGTH = 100;
 
@@ -70,7 +70,7 @@ class UnusedCSS {
       usedUncompressedBytes += usedRule.endOffset - usedRule.startOffset;
     }
 
-    const totalTransferredBytes = ByteEfficiencyAudit.estimateTransferSize(
+    const totalTransferredBytes = estimateTransferSize(
         stylesheetInfo.networkRecord, totalUncompressedBytes, 'Stylesheet');
     const percentUnused = (totalUncompressedBytes - usedUncompressedBytes) / totalUncompressedBytes;
     const wastedBytes = Math.round(percentUnused * totalTransferredBytes);

package/core/config/constants.d.ts

@@ -76,7 +76,7 @@ declare const MOTOGPOWER_EMULATION_METRICS: Required<LH.SharedFlagsSettings['scr
  * @type {Required<LH.SharedFlagsSettings['screenEmulation']>}
  */
 declare const DESKTOP_EMULATION_METRICS: Required<LH.SharedFlagsSettings['screenEmulation']>;
-declare const MOTOG4_USERAGENT: "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Mobile Safari/537.36";
-declare const DESKTOP_USERAGENT: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36";
+declare const MOTOG4_USERAGENT: "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36";
+declare const DESKTOP_USERAGENT: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36";
 export {};
 //# sourceMappingURL=constants.d.ts.map

package/core/config/constants.js

@@ -80,8 +80,8 @@ const screenEmulationMetrics = {
 };
 
 
-const MOTOG4_USERAGENT = 'Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Mobile Safari/537.36'; // eslint-disable-line max-len
-const DESKTOP_USERAGENT = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36'; // eslint-disable-line max-len
+const MOTOG4_USERAGENT = 'Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36'; // eslint-disable-line max-len
+const DESKTOP_USERAGENT = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36'; // eslint-disable-line max-len
 
 const userAgents = {
   mobile: MOTOG4_USERAGENT,

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

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

@@ -15,7 +15,6 @@
 import BaseGatherer from '../base-gatherer.js';
 import {resolveNodeIdToObjectId} from '../driver/dom.js';
 import {pageFunctions} from '../../lib/page-functions.js';
-import * as RectHelpers from '../../lib/rect-helpers.js';
 import {Sentry} from '../../lib/sentry.js';
 import Trace from './trace.js';
 import {ProcessedTrace} from '../../computed/processed-trace.js';
@@ -25,7 +24,9 @@ import {Responsiveness} from '../../computed/metrics/responsiveness.js';
 import {CumulativeLayoutShift} from '../../computed/metrics/cumulative-layout-shift.js';
 import {ExecutionContext} from '../driver/execution-context.js';
 
-/** @typedef {{nodeId: number, score?: number, animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[], type?: string}} TraceElementData */
+/** @typedef {{nodeId: number, animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[], type?: string}} TraceElementData */
+
+const MAX_LAYOUT_SHIFT_ELEMENTS = 15;
 
 /**
  * @this {HTMLElement}
@@ -63,75 +64,19 @@ class TraceElements extends BaseGatherer {
   }
 
   /**
-   * @param {Array<number>} rect
-   * @return {LH.Artifacts.Rect}
-   */
-  static traceRectToLHRect(rect) {
-    const rectArgs = {
-      x: rect[0],
-      y: rect[1],
-      width: rect[2],
-      height: rect[3],
-    };
-    return RectHelpers.addRectTopAndBottom(rectArgs);
-  }
-
-  /**
-   * 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) {
-    /** @type {Map<number, number>} */
-    const clsPerNode = new Map();
-    const shiftEvents = CumulativeLayoutShift.getLayoutShiftEvents(processedTrace);
+  static async getTopLayoutShiftElements(trace, context) {
+    const {impactByNodeId} = await CumulativeLayoutShift.request(trace, context);
 
-    shiftEvents.forEach((event) => {
-      if (!event || !event.impactedNodes) {
-        return;
-      }
-
-      let totalAreaOfImpact = 0;
-      /** @type {Map<number, number>} */
-      const pixelsMovedPerNode = new Map();
-
-      event.impactedNodes.forEach(node => {
-        if (!node.node_id || !node.old_rect || !node.new_rect) {
-          return;
-        }
-
-        const oldRect = TraceElements.traceRectToLHRect(node.old_rect);
-        const newRect = TraceElements.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 = clsPerNode.get(nodeId) || 0;
-        clsContribution += (pixelsMoved / totalAreaOfImpact) * event.weightedScore;
-        clsPerNode.set(nodeId, clsContribution);
-      }
-    });
-
-    const topFive = [...clsPerNode.entries()]
-    .sort((a, b) => b[1] - a[1])
-    .slice(0, 5)
-    .map(([nodeId, clsContribution]) => {
-      return {
-        nodeId: nodeId,
-        score: clsContribution,
-      };
-    });
-
-    return topFive;
+    return [...impactByNodeId.entries()]
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, MAX_LAYOUT_SHIFT_ELEMENTS)
+      .map(([nodeId]) => ({nodeId}));
   }
 
   /**
@@ -265,7 +210,7 @@ class TraceElements extends BaseGatherer {
     const {mainThreadEvents} = processedTrace;
 
     const lcpNodeData = await TraceElements.getLcpElement(trace, context);
-    const clsNodeData = TraceElements.getTopLayoutShiftElements(processedTrace);
+    const clsNodeData = await TraceElements.getTopLayoutShiftElements(trace, context);
     const animatedElementData = await this.getAnimatedElements(mainThreadEvents);
     const responsivenessElementData = await TraceElements.getResponsivenessElement(trace, context);
 
@@ -311,7 +256,6 @@ class TraceElements extends BaseGatherer {
           traceElements.push({
             traceEventType,
             ...response.result.value,
-            score: backendNodeData[i].score,
             animations: backendNodeData[i].animations,
             nodeId: backendNodeId,
             type: backendNodeData[i].type,