lighthouse 11.3.0 → 11.4.0

package/core/audits/accessibility/aria-allowed-role.js

@@ -22,7 +22,7 @@ const UIStrings = {
       'the web page. If the `role` values are misspelled, not existing ARIA `role` values, or ' +
       'abstract roles, then the purpose of the element will not be communicated to users of ' +
       'assistive technologies. ' +
-      '[Learn more about ARIA roles](https://dequeuniversity.com/rules/axe/4.8/aria-allowed-roles).',
+      '[Learn more about ARIA roles](https://dequeuniversity.com/rules/axe/4.8/aria-allowed-role).',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

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,8 +62,8 @@ class BFCache extends Audit {
       description: str_(UIStrings.description),
       supportedModes: ['navigation', 'timespan'],
       guidanceLevel: 2,
-      requiredArtifacts: ['BFCacheFailures'],
-      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
+      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.d.ts

@@ -33,16 +33,6 @@ export class ByteEfficiencyAudit extends Audit {
      * @return {number}
      */
     static scoreForWastedMs(wastedMs: number): number;
-    /**
-     * Estimates the number of bytes this network record would have consumed on the network based on the
-     * uncompressed size (totalBytes). Uses the actual transfer size from the network record if applicable.
-     *
-     * @param {LH.Artifacts.NetworkRequest|undefined} networkRecord
-     * @param {number} totalBytes Uncompressed size of the resource
-     * @param {LH.Crdp.Network.ResourceType=} resourceType
-     * @return {number}
-     */
-    static estimateTransferSize(networkRecord: LH.Artifacts.NetworkRequest | undefined, totalBytes: number, resourceType?: LH.Crdp.Network.ResourceType | undefined): number;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context

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

@@ -58,48 +58,6 @@ class ByteEfficiencyAudit extends Audit {
     );
   }
 
-  /**
-   * Estimates the number of bytes this network record would have consumed on the network based on the
-   * uncompressed size (totalBytes). Uses the actual transfer size from the network record if applicable.
-   *
-   * @param {LH.Artifacts.NetworkRequest|undefined} networkRecord
-   * @param {number} totalBytes Uncompressed size of the resource
-   * @param {LH.Crdp.Network.ResourceType=} resourceType
-   * @return {number}
-   */
-  static estimateTransferSize(networkRecord, totalBytes, resourceType) {
-    if (!networkRecord) {
-      // We don't know how many bytes this asset used on the network, but we can guess it was
-      // roughly the size of the content gzipped.
-      // See https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer for specific CSS/Script examples
-      // See https://discuss.httparchive.org/t/file-size-and-compression-savings/145 for fallback multipliers
-      switch (resourceType) {
-        case 'Stylesheet':
-          // Stylesheets tend to compress extremely well.
-          return Math.round(totalBytes * 0.2);
-        case 'Script':
-        case 'Document':
-          // Scripts and HTML compress fairly well too.
-          return Math.round(totalBytes * 0.33);
-        default:
-          // Otherwise we'll just fallback to the average savings in HTTPArchive
-          return Math.round(totalBytes * 0.5);
-      }
-    } else if (networkRecord.resourceType === resourceType) {
-      // This was a regular standalone asset, just use the transfer size.
-      return networkRecord.transferSize || 0;
-    } else {
-      // This was an asset that was inlined in a different resource type (e.g. HTML document).
-      // Use the compression ratio of the resource to estimate the total transferred bytes.
-      const transferSize = networkRecord.transferSize || 0;
-      const resourceSize = networkRecord.resourceSize || 0;
-      // Get the compression ratio, if it's an invalid number, assume no compression.
-      const compressionRatio = Number.isFinite(resourceSize) && resourceSize > 0 ?
-        (transferSize / resourceSize) : 1;
-      return Math.round(totalBytes * compressionRatio);
-    }
-  }
-
   /**
    * @param {LH.Artifacts} artifacts
    * @param {LH.Audit.Context} context
@@ -248,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, {
@@ -260,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 {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,17 +103,6 @@ class DuplicatedJavascript extends ByteEfficiencyAudit {
     return groupedDuplication;
   }
 
-  /**
-   *
-   * @param {LH.Artifacts.NetworkRequest|undefined} networkRecord
-   * @param {number} contentLength
-   */
-  static _estimateTransferRatio(networkRecord, contentLength) {
-    const transferSize =
-      ByteEfficiencyAudit.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
@@ -132,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 = [];
@@ -145,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 = [];
@@ -159,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.d.ts

@@ -60,17 +60,6 @@ declare class LegacyJavascript extends ByteEfficiencyAudit {
      * @return {number}
      */
     static estimateWastedBytes(matches: PatternMatchResult[]): number;
-    /**
-     * Utility function to estimate transfer size and cache calculation.
-     *
-     * Note: duplicated-javascript does this exact thing. In the future, consider
-     * making a generic estimator on ByteEfficienyAudit.
-     * @param {Map<string, number>} transferRatioByUrl
-     * @param {string} url
-     * @param {LH.Artifacts} artifacts
-     * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
-     */
-    static estimateTransferRatioForScript(transferRatioByUrl: Map<string, number>, url: string, artifacts: LH.Artifacts, networkRecords: Array<LH.Artifacts.NetworkRequest>): Promise<number>;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords

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

@@ -24,7 +24,7 @@ import {ByteEfficiencyAudit} from './byte-efficiency-audit.js';
 import {EntityClassification} from '../../computed/entity-classification.js';
 import {JSBundles} from '../../computed/js-bundles.js';
 import * as i18n from '../../lib/i18n/i18n.js';
-import {getRequestForScript} from '../../lib/script-helpers.js';
+import {estimateCompressionRatioForContent} from '../../lib/script-helpers.js';
 import {LH_ROOT} from '../../../shared/root.js';
 
 const graphJson = fs.readFileSync(
@@ -390,37 +390,6 @@ class LegacyJavascript extends ByteEfficiencyAudit {
     return estimatedWastedBytes;
   }
 
-  /**
-   * Utility function to estimate transfer size and cache calculation.
-   *
-   * Note: duplicated-javascript does this exact thing. In the future, consider
-   * making a generic estimator on ByteEfficienyAudit.
-   * @param {Map<string, number>} transferRatioByUrl
-   * @param {string} url
-   * @param {LH.Artifacts} artifacts
-   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
-   */
-  static async estimateTransferRatioForScript(transferRatioByUrl, url, artifacts, networkRecords) {
-    let transferRatio = transferRatioByUrl.get(url);
-    if (transferRatio !== undefined) return transferRatio;
-
-    const script = artifacts.Scripts.find(script => script.url === url);
-
-    if (!script || script.content === null) {
-      // Can't find content, so just use 1.
-      transferRatio = 1;
-    } else {
-      const networkRecord = getRequestForScript(networkRecords, script);
-      const contentLength = script.length || 0;
-      const transferSize =
-        ByteEfficiencyAudit.estimateTransferSize(networkRecord, contentLength, 'Script');
-      transferRatio = transferSize / contentLength;
-    }
-
-    transferRatioByUrl.set(url, transferRatio);
-    return transferRatio;
-  }
-
   /**
    * @param {LH.Artifacts} artifacts
    * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
@@ -443,14 +412,14 @@ class LegacyJavascript extends ByteEfficiencyAudit {
     ]);
 
     /** @type {Map<string, number>} */
-    const transferRatioByUrl = new Map();
+    const compressionRatioByUrl = new Map();
 
     const scriptToMatchResults =
       this.detectAcrossScripts(matcher, artifacts.Scripts, networkRecords, bundles);
     for (const [script, matches] of scriptToMatchResults.entries()) {
-      const transferRatio = await this.estimateTransferRatioForScript(
-        transferRatioByUrl, script.url, artifacts, networkRecords);
-      const wastedBytes = Math.round(this.estimateWastedBytes(matches) * transferRatio);
+      const compressionRatio = estimateCompressionRatioForContent(
+        compressionRatioByUrl, script.url, artifacts, networkRecords);
+      const wastedBytes = Math.round(this.estimateWastedBytes(matches) * compressionRatio);
       /** @type {typeof items[number]} */
       const item = {
         url: script.url,

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

@@ -8,6 +8,7 @@ import {ByteEfficiencyAudit} from './byte-efficiency-audit.js';
 import {UnusedCSS} from '../../computed/unused-css.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {computeCSSTokenLength as computeTokenLength} from '../../lib/minification-estimator.js';
+import {estimateTransferSize} from '../../lib/script-helpers.js';
 
 const UIStrings = {
   /** Imperative title of a Lighthouse audit that tells the user to minify (remove whitespace) the page's CSS code. This is displayed in a list of audit titles that Lighthouse generates. */
@@ -65,8 +66,7 @@ class UnminifiedCSS extends ByteEfficiencyAudit {
       url = contentPreview;
     }
 
-    const totalBytes = ByteEfficiencyAudit.estimateTransferSize(networkRecord, content.length,
-      'Stylesheet');
+    const totalBytes = estimateTransferSize(networkRecord, content.length, 'Stylesheet');
     const wastedRatio = 1 - totalTokenLength / content.length;
     const wastedBytes = Math.round(totalBytes * wastedRatio);
 

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 {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,8 +58,7 @@ class UnminifiedJavaScript extends ByteEfficiencyAudit {
     const contentLength = scriptContent.length;
     const totalTokenLength = computeTokenLength(scriptContent);
 
-    const totalBytes = ByteEfficiencyAudit.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 {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,27 +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 = ByteEfficiencyAudit
-        .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,
       };
 
@@ -127,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/dobetterweb/uses-http2.d.ts

@@ -42,7 +42,7 @@ declare class UsesHTTP2Audit extends Audit {
      * @param {LH.Artifacts.EntityClassification} classifiedEntities
      * @return {boolean}
      */
-    static isStaticAsset(networkRequest: LH.Artifacts.NetworkRequest, classifiedEntities: LH.Artifacts.EntityClassification): boolean;
+    static isMultiplexableStaticAsset(networkRequest: LH.Artifacts.NetworkRequest, classifiedEntities: LH.Artifacts.EntityClassification): boolean;
     /**
      * Determine the set of resources that aren't HTTP/2 but should be.
      * We're a little conservative about what we surface for a few reasons:

package/core/audits/dobetterweb/uses-http2.js

@@ -152,16 +152,19 @@ class UsesHTTP2Audit extends Audit {
    * @param {LH.Artifacts.EntityClassification} classifiedEntities
    * @return {boolean}
    */
-  static isStaticAsset(networkRequest, classifiedEntities) {
+  static isMultiplexableStaticAsset(networkRequest, classifiedEntities) {
     if (!STATIC_RESOURCE_TYPES.has(networkRequest.resourceType)) return false;
 
     // Resources from third-parties that are less than 100 bytes are usually tracking pixels, not actual resources.
     // They can masquerade as static types though (gifs, documents, etc)
     if (networkRequest.resourceSize < 100) {
-      // This logic needs to be revisited.
-      // See https://github.com/GoogleChrome/lighthouse/issues/14661
       const entity = classifiedEntities.entityByUrl.get(networkRequest.url);
-      if (entity && !entity.isUnrecognized) return false;
+      if (entity) {
+        // Third-party assets are multiplexable in their first-party context.
+        if (classifiedEntities.firstParty?.name === entity.name) return true;
+        // Skip recognizable third-parties' requests.
+        if (!entity.isUnrecognized) return false;
+      }
     }
 
     return true;
@@ -199,7 +202,7 @@ class UsesHTTP2Audit extends Audit {
     /** @type {Map<string, Array<LH.Artifacts.NetworkRequest>>} */
     const groupedByOrigin = new Map();
     for (const record of networkRecords) {
-      if (!UsesHTTP2Audit.isStaticAsset(record, classifiedEntities)) continue;
+      if (!UsesHTTP2Audit.isMultiplexableStaticAsset(record, classifiedEntities)) continue;
       if (UrlUtils.isLikeLocalhost(record.parsedURL.host)) continue;
       const existing = groupedByOrigin.get(record.parsedURL.securityOrigin) || [];
       existing.push(record);

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

@@ -9,12 +9,12 @@ import {CumulativeLayoutShift as CumulativeLayoutShiftComputed} from '../compute
 import CumulativeLayoutShift from './metrics/cumulative-layout-shift.js';
 
 const UIStrings = {
-  /** Descriptive title of a diagnostic audit that provides up to the top five elements contributing to Cumulative Layout Shift. */
+  /** Descriptive title of a diagnostic audit that provides the top elements affected by layout shifts. */
   title: 'Avoid large layout shifts',
-  /** Description of a diagnostic audit that provides up to the top five elements contributing to Cumulative Layout Shift. The last sentence starting with 'Learn' becomes link text to additional documentation. */
-  description: 'These DOM elements contribute most to the CLS of the page. [Learn how to improve CLS](https://web.dev/articles/optimize-cls)',
-  /**  Label for a column in a data table; entries in this column will be the amount that the corresponding element contributes to the total CLS metric score. */
-  columnContribution: 'CLS Contribution',
+  /** Description of a diagnostic audit that provides the top elements affected by layout shifts. "windowing" means the metric value is calculated using the subset of events in a small window of time during the run. "normalization" is a good substitute for "windowing". The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'These DOM elements were most affected by layout shifts. Some layout shifts may not be included in the CLS metric value due to [windowing](https://web.dev/articles/cls#what_is_cls). [Learn how to improve CLS](https://web.dev/articles/optimize-cls)',
+  /**  Label for a column in a data table; entries in this column will be the amount that the corresponding element affected by layout shifts. */
+  columnContribution: 'Layout shift impact',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
@@ -40,15 +40,32 @@ 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 displayedNodeImpact = clsElementData.reduce((sum, {score}) => sum += score, 0);
+
+      // This is not necessarily the same as CLS due to normalization.
+      const totalNodeImpact = Array.from(impactByNodeId.values())
+        .reduce((sum, score) => sum + score);
+
+      clsElementData.push({
+        node: {
+          type: 'code',
+          value: str_(i18n.UIStrings.otherResourceType),
+        },
+        score: totalNodeImpact - displayedNodeImpact,
+      });
+    }
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
@@ -58,15 +75,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/metrics/max-potential-fid.d.ts

@@ -1,4 +1,14 @@
 export default MaxPotentialFID;
+export type LoafDebugDetails = {
+    type: 'debugdata';
+    observedMaxDurationLoaf?: LH.TraceEvent | undefined;
+    observedMaxBlockingLoaf?: LH.TraceEvent | undefined;
+    observedLoafs: Array<{
+        startTime: number;
+        duration: number;
+        blockingDuration: number;
+    }>;
+};
 /**
  * @fileoverview This metric is the duration of the longest task after FCP. It is meant to capture
  * the worst case First Input Delay that a user might experience.
@@ -9,6 +19,14 @@ declare class MaxPotentialFID extends Audit {
      * @return {LH.Audit.ScoreOptions}
      */
     static get defaultOptions(): import("../../../types/audit.js").default.ScoreOptions;
+    /**
+     * Extract potential LoAF replacements for MPFID from the trace to log in
+     * debugdata details.
+     * @param {LH.Artifacts.ProcessedTrace} processedTrace
+     * @param {LH.Artifacts.ProcessedNavigation} processedNavigation
+     * @return {LoafDebugDetails|undefined}
+     */
+    static getLongAnimationFrameDetails(processedTrace: LH.Artifacts.ProcessedTrace, processedNavigation: LH.Artifacts.ProcessedNavigation): LoafDebugDetails | undefined;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context
@@ -20,4 +38,6 @@ export namespace UIStrings {
     const description: string;
 }
 import { Audit } from '../audit.js';
+import { ProcessedTrace } from '../../computed/processed-trace.js';
+import { ProcessedNavigation } from '../../computed/processed-navigation.js';
 //# sourceMappingURL=max-potential-fid.d.ts.map