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

package/core/audits/bf-cache.d.ts

@@ -15,6 +15,7 @@ export namespace UIStrings {
     const supportPendingFailureType: string;
     const failureReasonColumn: string;
     const failureTypeColumn: string;
+    const warningHeadless: string;
     const displayValue: string;
 }
 import { Audit } from './audit.js';

package/core/audits/bf-cache.js

@@ -26,6 +26,8 @@ const UIStrings = {
   failureReasonColumn: 'Failure reason',
   /** Label for a column in a data table; entries in the column will be a string representing the type of failure preventing the back/forward cache from being used. */
   failureTypeColumn: 'Failure type',
+  /** Warning explaining that the back/forward cache results cannot be shown in the old Headless Chrome. "back/forward" refers to the back and forward buttons found in modern browsers. "Headless Chrome" is a product name and should not be translated. */
+  warningHeadless: 'Back/forward cache cannot be tested in old Headless Chrome (`--chrome-flags="--headless=old"`). To see audit results, use the new Headless Chrome (`--chrome-flags="--headless=new"`) or standard Chrome.',
   /**
    * @description [ICU Syntax] Label for an audit identifying the number of back/forward cache failure reasons found in the page.
    */
@@ -60,7 +62,7 @@ class BFCache extends Audit {
       description: str_(UIStrings.description),
       supportedModes: ['navigation', 'timespan'],
       guidanceLevel: 2,
-      requiredArtifacts: ['BFCacheFailures'],
+      requiredArtifacts: ['BFCacheFailures', 'HostProduct'],
       scoreDisplayMode: Audit.SCORING_MODES.BINARY,
     };
   }
@@ -70,6 +72,14 @@ class BFCache extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts) {
+    if (/HeadlessChrome/.test(artifacts.HostProduct)) {
+      return {
+        score: null,
+        notApplicable: true,
+        warnings: [str_(UIStrings.warningHeadless)],
+      };
+    }
+
     const failures = artifacts.BFCacheFailures;
     if (!failures.length) return {score: 1};
 

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/byte-efficiency/duplicated-javascript.d.ts

@@ -25,12 +25,6 @@ declare class DuplicatedJavascript extends ByteEfficiencyAudit {
         scriptUrl: string;
         resourceSize: number;
     }[]>>;
-    /**
-     *
-     * @param {LH.Artifacts.NetworkRequest|undefined} networkRecord
-     * @param {number} contentLength
-     */
-    static _estimateTransferRatio(networkRecord: LH.Artifacts.NetworkRequest | undefined, contentLength: number): number;
     /**
      * This audit highlights JavaScript modules that appear to be duplicated across all resources,
      * either within the same bundle or between different bundles. Each details item returned is

package/core/audits/byte-efficiency/duplicated-javascript.js

@@ -11,7 +11,7 @@
 import {ByteEfficiencyAudit} from './byte-efficiency-audit.js';
 import {ModuleDuplication} from '../../computed/module-duplication.js';
 import * as i18n from '../../lib/i18n/i18n.js';
-import {estimateTransferSize, getRequestForScript} from '../../lib/script-helpers.js';
+import {estimateCompressionRatioForContent} from '../../lib/script-helpers.js';
 
 const UIStrings = {
   /** Imperative title of a Lighthouse audit that tells the user to remove duplicate JavaScript from their code. This is displayed in a list of audit titles that Lighthouse generates. */
@@ -103,16 +103,6 @@ class DuplicatedJavascript extends ByteEfficiencyAudit {
     return groupedDuplication;
   }
 
-  /**
-   *
-   * @param {LH.Artifacts.NetworkRequest|undefined} networkRecord
-   * @param {number} contentLength
-   */
-  static _estimateTransferRatio(networkRecord, contentLength) {
-    const transferSize = estimateTransferSize(networkRecord, contentLength, 'Script');
-    return transferSize / contentLength;
-  }
-
   /**
    * This audit highlights JavaScript modules that appear to be duplicated across all resources,
    * either within the same bundle or between different bundles. Each details item returned is
@@ -131,7 +121,7 @@ class DuplicatedJavascript extends ByteEfficiencyAudit {
       await DuplicatedJavascript._getDuplicationGroupedByNodeModules(artifacts, context);
 
     /** @type {Map<string, number>} */
-    const transferRatioByUrl = new Map();
+    const compressionRatioByUrl = new Map();
 
     /** @type {Item[]} */
     const items = [];
@@ -144,10 +134,10 @@ class DuplicatedJavascript extends ByteEfficiencyAudit {
     for (const [source, sourceDatas] of duplication.entries()) {
       // One copy of this module is treated as the canonical version - the rest will have
       // non-zero `wastedBytes`. In the case of all copies being the same version, all sizes are
-      // equal and the selection doesn't matter. When the copies are different versions, it does
-      // matter. Ideally the newest version would be the canonical copy, but version information
-      // is not present. Instead, size is used as a heuristic for latest version. This makes the
-      // audit conserative in its estimation.
+      // equal and the selection doesn't matter (ignoring compression ratios). When the copies are
+      // different versions, it does matter. Ideally the newest version would be the canonical
+      // copy, but version information is not present. Instead, size is used as a heuristic for
+      // latest version. This makes the audit conserative in its estimation.
 
       /** @type {SubItem[]} */
       const subItems = [];
@@ -158,27 +148,9 @@ class DuplicatedJavascript extends ByteEfficiencyAudit {
         const scriptId = sourceData.scriptId;
         const script = artifacts.Scripts.find(script => script.scriptId === scriptId);
         const url = script?.url || '';
-
-        /** @type {number|undefined} */
-        let transferRatio = transferRatioByUrl.get(url);
-        if (transferRatio === undefined) {
-          if (!script || script.length === undefined) {
-            // This should never happen because we found the wasted bytes from bundles, which required contents in a Script.
-            continue;
-          }
-
-          const contentLength = script.length;
-          const networkRecord = getRequestForScript(networkRecords, script);
-          transferRatio = DuplicatedJavascript._estimateTransferRatio(networkRecord, contentLength);
-          transferRatioByUrl.set(url, transferRatio);
-        }
-
-        if (transferRatio === undefined) {
-          // Shouldn't happen for above reasons.
-          continue;
-        }
-
-        const transferSize = Math.round(sourceData.resourceSize * transferRatio);
+        const compressionRatio = estimateCompressionRatioForContent(
+          compressionRatioByUrl, url, artifacts, networkRecords);
+        const transferSize = Math.round(sourceData.resourceSize * compressionRatio);
 
         subItems.push({
           url,

package/core/audits/byte-efficiency/legacy-javascript.js

@@ -417,7 +417,7 @@ class LegacyJavascript extends ByteEfficiencyAudit {
     const scriptToMatchResults =
       this.detectAcrossScripts(matcher, artifacts.Scripts, networkRecords, bundles);
     for (const [script, matches] of scriptToMatchResults.entries()) {
-      const compressionRatio = await estimateCompressionRatioForContent(
+      const compressionRatio = estimateCompressionRatioForContent(
         compressionRatioByUrl, script.url, artifacts, networkRecords);
       const wastedBytes = Math.round(this.estimateWastedBytes(matches) * compressionRatio);
       /** @type {typeof items[number]} */

package/core/audits/byte-efficiency/unminified-javascript.js

@@ -7,7 +7,7 @@
 import {ByteEfficiencyAudit} from './byte-efficiency-audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {computeJSTokenLength as computeTokenLength} from '../../lib/minification-estimator.js';
-import {estimateTransferSize, getRequestForScript, isInline} from '../../lib/script-helpers.js';
+import {estimateCompressedContentSize, getRequestForScript, isInline} from '../../lib/script-helpers.js';
 import {Util} from '../../../shared/util.js';
 
 const UIStrings = {
@@ -58,7 +58,7 @@ class UnminifiedJavaScript extends ByteEfficiencyAudit {
     const contentLength = scriptContent.length;
     const totalTokenLength = computeTokenLength(scriptContent);
 
-    const totalBytes = estimateTransferSize(networkRecord, contentLength, 'Script');
+    const totalBytes = estimateCompressedContentSize(networkRecord, contentLength, 'Script');
     const wastedRatio = 1 - totalTokenLength / contentLength;
     const wastedBytes = Math.round(totalBytes * wastedRatio);
 

package/core/audits/byte-efficiency/unused-javascript.js

@@ -8,7 +8,7 @@ import {ByteEfficiencyAudit} from './byte-efficiency-audit.js';
 import {UnusedJavascriptSummary} from '../../computed/unused-javascript-summary.js';
 import {JSBundles} from '../../computed/js-bundles.js';
 import * as i18n from '../../lib/i18n/i18n.js';
-import {estimateTransferSize, getRequestForScript} from '../../lib/script-helpers.js';
+import {estimateCompressionRatioForContent} from '../../lib/script-helpers.js';
 
 const UIStrings = {
   /** Imperative title of a Lighthouse audit that tells the user to reduce JavaScript that is never evaluated during page load. This is displayed in a list of audit titles that Lighthouse generates. */
@@ -86,26 +86,26 @@ class UnusedJavaScript extends ByteEfficiencyAudit {
       bundleSourceUnusedThreshold = UNUSED_BYTES_IGNORE_BUNDLE_SOURCE_THRESHOLD,
     } = context.options || {};
 
+    /** @type {Map<string, number>} */
+    const compressionRatioByUrl = new Map();
+
     const items = [];
     for (const [scriptId, scriptCoverage] of Object.entries(artifacts.JsUsage)) {
       const script = artifacts.Scripts.find(s => s.scriptId === scriptId);
       if (!script) continue; // This should never happen.
 
-      const networkRecord = getRequestForScript(networkRecords, script);
-      if (!networkRecord) continue;
-
       const bundle = bundles.find(b => b.script.scriptId === scriptId);
       const unusedJsSummary =
         await UnusedJavascriptSummary.request({scriptId, scriptCoverage, bundle}, context);
       if (unusedJsSummary.wastedBytes === 0 || unusedJsSummary.totalBytes === 0) continue;
 
-      const transfer = estimateTransferSize(networkRecord, unusedJsSummary.totalBytes, 'Script');
-      const transferRatio = transfer / unusedJsSummary.totalBytes;
+      const compressionRatio = estimateCompressionRatioForContent(
+        compressionRatioByUrl, script.url, artifacts, networkRecords);
       /** @type {LH.Audit.ByteEfficiencyItem} */
       const item = {
         url: script.url,
-        totalBytes: Math.round(transferRatio * unusedJsSummary.totalBytes),
-        wastedBytes: Math.round(transferRatio * unusedJsSummary.wastedBytes),
+        totalBytes: Math.round(compressionRatio * unusedJsSummary.totalBytes),
+        wastedBytes: Math.round(compressionRatio * unusedJsSummary.wastedBytes),
         wastedPercent: unusedJsSummary.wastedPercent,
       };
 
@@ -126,8 +126,8 @@ class UnusedJavaScript extends ByteEfficiencyAudit {
             const total = source === '(unmapped)' ? sizes.unmappedBytes : sizes.files[source];
             return {
               source,
-              unused: Math.round(unused * transferRatio),
-              total: Math.round(total * transferRatio),
+              unused: Math.round(unused * compressionRatio),
+              total: Math.round(total * compressionRatio),
             };
           })
           .filter(d => d.unused >= bundleSourceUnusedThreshold);

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

@@ -0,0 +1,11 @@
+export default ResourceSummary;
+declare class ResourceSummary extends Audit {
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+}
+import { Audit } from './audit.js';
+//# sourceMappingURL=resource-summary.d.ts.map

package/core/audits/resource-summary.js

@@ -0,0 +1,86 @@
+/**
+ * @license Copyright 2019 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {Audit} from './audit.js';
+import {ResourceSummary as ComputedResourceSummary} from '../computed/resource-summary.js';
+import * as i18n from '../lib/i18n/i18n.js';
+
+const str_ = i18n.createIcuMessageFn(import.meta.url);
+
+class ResourceSummary extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'resource-summary',
+      title: 'Resources Summary',
+      description: 'Aggregates all network requests and groups them by type',
+      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      requiredArtifacts: ['devtoolsLogs', 'URL'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const summary = await ComputedResourceSummary
+      .request({devtoolsLog, URL: artifacts.URL, budgets: context.settings.budgets}, context);
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'label', valueType: 'text', label: str_(i18n.UIStrings.columnResourceType)},
+      {key: 'requestCount', valueType: 'numeric', label: str_(i18n.UIStrings.columnRequests)},
+      {key: 'transferSize', valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize)},
+    ];
+
+
+    /** @type {Record<LH.Budget.ResourceType, LH.IcuMessage>} */
+    const strMappings = {
+      'total': str_(i18n.UIStrings.totalResourceType),
+      'document': str_(i18n.UIStrings.documentResourceType),
+      'script': str_(i18n.UIStrings.scriptResourceType),
+      'stylesheet': str_(i18n.UIStrings.stylesheetResourceType),
+      'image': str_(i18n.UIStrings.imageResourceType),
+      'media': str_(i18n.UIStrings.mediaResourceType),
+      'font': str_(i18n.UIStrings.fontResourceType),
+      'other': str_(i18n.UIStrings.otherResourceType),
+      'third-party': str_(i18n.UIStrings.thirdPartyResourceType),
+    };
+
+    const types = /** @type {Array<LH.Budget.ResourceType>} */ (Object.keys(summary));
+    const rows = types.map(type => {
+      return {
+        // ResourceType is included as an "id" for ease of use.
+        // It does not appear directly in the table.
+        resourceType: type,
+        label: strMappings[type],
+        requestCount: summary[type].count,
+        transferSize: summary[type].transferSize,
+      };
+    });
+    // Force third-party to be last, descending by size otherwise
+    const thirdPartyRow = rows.find(r => r.resourceType === 'third-party') || [];
+    const otherRows = rows.filter(r => r.resourceType !== 'third-party')
+      .sort((a, b) => {
+        return b.transferSize - a.transferSize;
+      });
+    const tableItems = otherRows.concat(thirdPartyRow);
+
+    const tableDetails = Audit.makeTableDetails(headings, tableItems);
+
+    return {
+      details: tableDetails,
+      score: null,
+    };
+  }
+}
+
+export default ResourceSummary;

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';