lighthouse 11.3.0-dev.20231207 → 11.3.0-dev.20231208

package/core/audits/bootup-time.js

@@ -109,6 +109,9 @@ class BootupTime extends Audit {
       settings.throttling.cpuSlowdownMultiplier : 1;
 
     const executionTimings = getExecutionTimingsByURL(tasks, networkRecords);
+    // Exclude our own tasks.
+    executionTimings.delete('_lighthouse-eval.js');
+
     const tbtImpact = await this.getTbtImpact(artifacts, context);
 
     let hadExcessiveChromeExtension = false;

package/core/audits/byte-efficiency/byte-efficiency-audit.js

@@ -206,10 +206,10 @@ class ByteEfficiencyAudit extends Audit {
     if (metricComputationInput.gatherContext.gatherMode === 'navigation') {
       const graph = await PageDependencyGraph.request(metricComputationInput, context);
       const {
-        pessimisticGraph: pessimisticFCPGraph,
+        optimisticGraph: optimisticFCPGraph,
       } = await LanternFirstContentfulPaint.request(metricComputationInput, context);
       const {
-        pessimisticGraph: pessimisticLCPGraph,
+        optimisticGraph: optimisticLCPGraph,
       } = await LanternLargestContentfulPaint.request(metricComputationInput, context);
 
       wastedMs = this.computeWasteWithTTIGraph(results, graph, simulator, {
@@ -218,17 +218,19 @@ class ByteEfficiencyAudit extends Audit {
 
       const {savings: fcpSavings} = this.computeWasteWithGraph(
         results,
-        pessimisticFCPGraph,
+        optimisticFCPGraph,
         simulator,
         {providedWastedBytesByUrl: result.wastedBytesByUrl, label: 'fcp'}
       );
+      // Note: LCP's optimistic graph sometimes unexpectedly yields higher savings than the pessimistic graph.
       const {savings: lcpGraphSavings} = this.computeWasteWithGraph(
         results,
-        pessimisticLCPGraph,
+        optimisticLCPGraph,
         simulator,
         {providedWastedBytesByUrl: result.wastedBytesByUrl, label: 'lcp'}
       );
 
+
       // The LCP graph can underestimate the LCP savings if there is potential savings on the LCP record itself.
       let lcpRecordSavings = 0;
       const lcpRecord = await LCPImageRecord.request(metricComputationInput, context);

package/core/audits/layout-shift-elements.js

@@ -40,15 +40,28 @@ class LayoutShiftElements extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    const clsElements = artifacts.TraceElements
-      .filter(element => element.traceEventType === 'layout-shift');
+    const {cumulativeLayoutShift: clsSavings, impactByNodeId} =
+      await CumulativeLayoutShiftComputed.request(artifacts.traces[Audit.DEFAULT_PASS], context);
 
-    const clsElementData = clsElements.map(element => {
-      return {
+    /** @type {Array<{node: LH.Audit.Details.ItemValue, score: number}>} */
+    const clsElementData = artifacts.TraceElements
+      .filter(element => element.traceEventType === 'layout-shift')
+      .map(element => ({
         node: Audit.makeNodeItem(element.node),
-        score: element.score,
-      };
-    });
+        score: impactByNodeId.get(element.nodeId) || 0,
+      }));
+
+    if (clsElementData.length < impactByNodeId.size) {
+      const elementDataImpact = clsElementData.reduce((sum, {score}) => sum += score || 0, 0);
+      const remainingImpact = Math.max(clsSavings - elementDataImpact, 0);
+      clsElementData.push({
+        node: {
+          type: 'code',
+          value: str_(i18n.UIStrings.otherResourceType),
+        },
+        score: remainingImpact,
+      });
+    }
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
@@ -58,15 +71,13 @@ class LayoutShiftElements extends Audit {
     ];
 
     const details = Audit.makeTableDetails(headings, clsElementData);
+
     let displayValue;
-    if (clsElementData.length > 0) {
+    if (impactByNodeId.size > 0) {
       displayValue = str_(i18n.UIStrings.displayValueElementsFound,
-        {nodeCount: clsElementData.length});
+        {nodeCount: impactByNodeId.size});
     }
 
-    const {cumulativeLayoutShift: clsSavings} =
-      await CumulativeLayoutShiftComputed.request(artifacts.traces[Audit.DEFAULT_PASS], context);
-
     const passed = clsSavings <= CumulativeLayoutShift.defaultOptions.p10;
 
     return {

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

@@ -54,7 +54,11 @@ class CumulativeLayoutShift extends Audit {
    */
   static async audit(artifacts, context) {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
-    const {cumulativeLayoutShift, ...rest} = await ComputedCLS.request(trace, context);
+
+    // impactByNodeId is unused but we don't want it on debug data
+    // eslint-disable-next-line no-unused-vars
+    const {cumulativeLayoutShift, impactByNodeId, ...rest} =
+      await ComputedCLS.request(trace, context);
 
     /** @type {LH.Audit.Details.DebugData} */
     const details = {

package/core/audits/third-party-cookies.d.ts

@@ -0,0 +1,22 @@
+export default ThirdPartyCookies;
+declare class ThirdPartyCookies extends Audit {
+    /**
+     * https://source.chromium.org/chromium/chromium/src/+/d2fcd4ba302baeabf4b96d8fa9fdb7a215736c31:third_party/devtools-frontend/src/front_end/models/issues_manager/CookieIssue.ts;l=62-69
+     * @param {LH.Crdp.Audits.CookieIssueDetails} cookieIssue
+     * @return {string}
+     */
+    static getCookieId(cookieIssue: LH.Crdp.Audits.CookieIssueDetails): string;
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts): Promise<LH.Audit.Product>;
+}
+export namespace UIStrings {
+    const title: string;
+    const failureTitle: string;
+    const description: string;
+    const displayValue: string;
+}
+import { Audit } from './audit.js';
+//# sourceMappingURL=third-party-cookies.d.ts.map

package/core/audits/third-party-cookies.js

@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Audits a page to determine if it is using third party cookies.
+ */
+
+import {Audit} from './audit.js';
+import * as i18n from '../lib/i18n/i18n.js';
+
+/* eslint-disable max-len */
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the use of third party cookies. This descriptive title is shown to users when the page does not use third party cookies. */
+  title: 'Avoids third-party cookies',
+  /** Title of a Lighthouse audit that provides detail on the use of third party cookies. This descriptive title is shown to users when the page uses third party cookies. */
+  failureTitle: 'Uses third-party cookies',
+  /** Description of a Lighthouse audit that tells the user why they should not use third party cookies on their page. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'Support for third-party cookies will be removed in a future version of Chrome. [Learn more about phasing out third-party cookies](https://developer.chrome.com/en/docs/privacy-sandbox/third-party-cookie-phase-out/).',
+  /** [ICU Syntax] Label for the audit identifying the number of third-party cookies. */
+  displayValue: `{itemCount, plural,
+    =1 {1 cookie found}
+    other {# cookies found}
+    }`,
+};
+/* eslint-enable max-len */
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class ThirdPartyCookies extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'third-party-cookies',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['InspectorIssues'],
+    };
+  }
+
+  /**
+   * https://source.chromium.org/chromium/chromium/src/+/d2fcd4ba302baeabf4b96d8fa9fdb7a215736c31:third_party/devtools-frontend/src/front_end/models/issues_manager/CookieIssue.ts;l=62-69
+   * @param {LH.Crdp.Audits.CookieIssueDetails} cookieIssue
+   * @return {string}
+   */
+  static getCookieId(cookieIssue) {
+    if (!cookieIssue.cookie) {
+      return cookieIssue.rawCookieLine ?? 'no-cookie-info';
+    }
+
+    const {domain, path, name} = cookieIssue.cookie;
+    const cookieId = `${domain};${path};${name}`;
+    return cookieId;
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts) {
+    /** @type {Set<string>} */
+    const seenCookies = new Set();
+
+    /** @type {LH.Audit.Details.TableItem[]} */
+    const items = [];
+    for (const issue of artifacts.InspectorIssues.cookieIssue) {
+      const isPhaseoutWarn = issue.cookieWarningReasons.includes('WarnThirdPartyPhaseout');
+      const isPhaseoutExclude = issue.cookieExclusionReasons.includes('ExcludeThirdPartyPhaseout');
+      if (!isPhaseoutWarn && !isPhaseoutExclude) continue;
+
+      // According to JSDOC for `issue.cookie`, if `cookie` is undefined then `rawCookieLine`
+      // should be set and no valid cookie could be created. It should be safe to skip in this case.
+      const name = issue.cookie?.name || issue.rawCookieLine;
+      if (!name) continue;
+
+      const cookieId = this.getCookieId(issue);
+      if (seenCookies.has(cookieId)) continue;
+      seenCookies.add(cookieId);
+
+      items.push({
+        name,
+        url: issue.cookieUrl,
+      });
+    }
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'name', valueType: 'text', label: str_(i18n.UIStrings.columnName)},
+      {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
+    ];
+    const details = Audit.makeTableDetails(headings, items);
+
+    let displayValue;
+    if (items.length > 0) {
+      displayValue = str_(UIStrings.displayValue, {itemCount: items.length});
+    }
+
+    return {
+      score: items.length ? 0 : 1,
+      displayValue,
+      details,
+    };
+  }
+}
+
+export default ThirdPartyCookies;
+export {UIStrings};

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

@@ -11,6 +11,7 @@ declare const CumulativeLayoutShiftComputed: typeof CumulativeLayoutShift & {
     }>) => Promise<{
         cumulativeLayoutShift: number;
         cumulativeLayoutShiftMainFrame: number;
+        impactByNodeId: Map<number, number>;
     }>;
 };
 declare class CumulativeLayoutShift {
@@ -23,6 +24,16 @@ declare class CumulativeLayoutShift {
      * @return {Array<LayoutShiftEvent>}
      */
     static getLayoutShiftEvents(processedTrace: LH.Artifacts.ProcessedTrace): Array<LayoutShiftEvent>;
+    /**
+     * 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: LayoutShiftEvent[]): Map<number, number>;
     /**
      * Calculates cumulative layout shifts per cluster (session) of LayoutShift
      * events -- where a new cluster is created when there's a gap of more than
@@ -35,11 +46,12 @@ declare 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 compute_(trace: LH.Trace, context: LH.Artifacts.ComputedContext): Promise<{
         cumulativeLayoutShift: number;
         cumulativeLayoutShiftMainFrame: number;
+        impactByNodeId: Map<number, number>;
     }>;
 }
 import { ProcessedTrace } from '../processed-trace.js';

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