lighthouse 11.4.0 → 11.5.0

package/cli/test/smokehouse/__snapshots__/report-assert-test.js.snap

@@ -3,7 +3,7 @@
 exports[`getAssertionReport works (multiple failing) 1`] = `
 "X difference at cumulative-layout-shift audit.details.items.length
               expected: []
-                 found: [{\\"cumulativeLayoutShiftMainFrame\\":0.13570762803819444}]
+                 found: [{\\"cumulativeLayoutShiftMainFrame\\":0.13570762803819444,\\"newEngineResult\\":{\\"cumulativeLayoutShift\\":0.13570762803819444,\\"cumulativeLayoutShiftMainFrame\\":0.13570762803819444},\\"newEngineResultDiffered\\":false}]
 
 
   X difference at cumulative-layout-shift audit.details.blah
@@ -28,7 +28,12 @@ exports[`getAssertionReport works (multiple failing) 1`] = `
           \\"type\\": \\"debugdata\\",
           \\"items\\": [
             {
-              \\"cumulativeLayoutShiftMainFrame\\": 0.13570762803819444
+              \\"cumulativeLayoutShiftMainFrame\\": 0.13570762803819444,
+              \\"newEngineResult\\": {
+                \\"cumulativeLayoutShift\\": 0.13570762803819444,
+                \\"cumulativeLayoutShiftMainFrame\\": 0.13570762803819444
+              },
+              \\"newEngineResultDiffered\\": false
             }
           ]
         }
@@ -38,7 +43,7 @@ exports[`getAssertionReport works (multiple failing) 1`] = `
 exports[`getAssertionReport works (trivial failing) 1`] = `
 "X difference at cumulative-layout-shift audit.details.items.length
               expected: []
-                 found: [{\\"cumulativeLayoutShiftMainFrame\\":0.13570762803819444}]
+                 found: [{\\"cumulativeLayoutShiftMainFrame\\":0.13570762803819444,\\"newEngineResult\\":{\\"cumulativeLayoutShift\\":0.13570762803819444,\\"cumulativeLayoutShiftMainFrame\\":0.13570762803819444},\\"newEngineResultDiffered\\":false}]
 
           found result:
       {
@@ -58,7 +63,12 @@ exports[`getAssertionReport works (trivial failing) 1`] = `
           \\"type\\": \\"debugdata\\",
           \\"items\\": [
             {
-              \\"cumulativeLayoutShiftMainFrame\\": 0.13570762803819444
+              \\"cumulativeLayoutShiftMainFrame\\": 0.13570762803819444,
+              \\"newEngineResult\\": {
+                \\"cumulativeLayoutShift\\": 0.13570762803819444,
+                \\"cumulativeLayoutShiftMainFrame\\": 0.13570762803819444
+              },
+              \\"newEngineResultDiffered\\": false
             }
           ]
         }

package/cli/test/smokehouse/core-tests.js

@@ -63,6 +63,7 @@ import seoPassing from './test-definitions/seo-passing.js';
 import seoStatus403 from './test-definitions/seo-status-403.js';
 import seoTapTargets from './test-definitions/seo-tap-targets.js';
 import serviceWorkerReloaded from './test-definitions/service-worker-reloaded.js';
+import shiftAttribution from './test-definitions/shift-attribution.js';
 import sourceMaps from './test-definitions/source-maps.js';
 import timing from './test-definitions/timing.js';
 
@@ -127,6 +128,7 @@ const smokeTests = [
   seoStatus403,
   seoTapTargets,
   serviceWorkerReloaded,
+  shiftAttribution,
   sourceMaps,
   timing,
 ];

package/core/audits/audit.d.ts

@@ -146,6 +146,11 @@ export class Audit {
      * @return {number|null}
      */
     static _normalizeAuditScore(score: number | null, scoreDisplayMode: LH.Audit.ScoreDisplayMode, auditId: string): number | null;
+    /**
+     * @param {LH.Audit.ProductMetricSavings|undefined} metricSavings
+     * @return {LH.Audit.ProductMetricSavings|undefined}
+     */
+    static _quantizeMetricSavings(metricSavings: LH.Audit.ProductMetricSavings | undefined): LH.Audit.ProductMetricSavings | undefined;
     /**
      * @param {typeof Audit} audit
      * @param {string | LH.IcuMessage} errorMessage

package/core/audits/audit.js

@@ -10,6 +10,15 @@ import {Util} from '../../shared/util.js';
 
 const DEFAULT_PASS = 'defaultPass';
 
+/** @type {Record<keyof LH.Audit.ProductMetricSavings, number>} */
+const METRIC_SAVINGS_PRECISION = {
+  FCP: 50,
+  LCP: 50,
+  INP: 50,
+  TBT: 50,
+  CLS: 0.001,
+};
+
 /**
  * @typedef TableOptions
  * @property {number=} wastedMs
@@ -321,6 +330,10 @@ class Audit {
    * @return {number|null}
    */
   static _normalizeAuditScore(score, scoreDisplayMode, auditId) {
+    if (scoreDisplayMode === Audit.SCORING_MODES.INFORMATIVE) {
+      return 1;
+    }
+
     if (scoreDisplayMode !== Audit.SCORING_MODES.BINARY &&
         scoreDisplayMode !== Audit.SCORING_MODES.NUMERIC &&
         scoreDisplayMode !== Audit.SCORING_MODES.METRIC_SAVINGS) {
@@ -339,6 +352,34 @@ class Audit {
     return score;
   }
 
+  /**
+   * @param {LH.Audit.ProductMetricSavings|undefined} metricSavings
+   * @return {LH.Audit.ProductMetricSavings|undefined}
+   */
+  static _quantizeMetricSavings(metricSavings) {
+    if (!metricSavings) return;
+
+    /** @type {LH.Audit.ProductMetricSavings} */
+    const normalizedMetricSavings = {...metricSavings};
+
+    // eslint-disable-next-line max-len
+    for (const key of /** @type {Array<keyof LH.Audit.ProductMetricSavings>} */ (Object.keys(metricSavings))) {
+      let value = metricSavings[key];
+      if (value === undefined) continue;
+
+      value = Math.max(value, 0);
+
+      const precision = METRIC_SAVINGS_PRECISION[key];
+      if (precision !== undefined) {
+        value = Math.round(value / precision) * precision;
+      }
+
+      normalizedMetricSavings[key] = value;
+    }
+
+    return normalizedMetricSavings;
+  }
+
   /**
    * @param {typeof Audit} audit
    * @param {string | LH.IcuMessage} errorMessage
@@ -378,10 +419,13 @@ class Audit {
       scoreDisplayMode = product.scoreDisplayMode;
     }
 
+    const metricSavings = Audit._quantizeMetricSavings(product.metricSavings);
+    const hasSomeSavings = Object.values(metricSavings || {}).some(v => v);
+
     if (scoreDisplayMode === Audit.SCORING_MODES.METRIC_SAVINGS) {
       if (score && score >= Util.PASS_THRESHOLD) {
         score = 1;
-      } else if (Object.values(product.metricSavings || {}).some(v => v)) {
+      } else if (hasSomeSavings) {
         score = 0;
       } else {
         score = 0.5;
@@ -419,7 +463,7 @@ class Audit {
       errorStack: product.errorStack,
       warnings: product.warnings,
       scoringOptions: product.scoringOptions,
-      metricSavings: product.metricSavings,
+      metricSavings,
 
       details: product.details,
       guidanceLevel: audit.meta.guidanceLevel,

package/core/audits/bf-cache.js

@@ -61,7 +61,7 @@ class BFCache extends Audit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       supportedModes: ['navigation', 'timespan'],
-      guidanceLevel: 2,
+      guidanceLevel: 4,
       requiredArtifacts: ['BFCacheFailures', 'HostProduct'],
       scoreDisplayMode: Audit.SCORING_MODES.BINARY,
     };

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

@@ -194,7 +194,7 @@ class ByteEfficiencyAudit extends Audit {
 
     const wastedBytes = results.reduce((sum, item) => sum + item.wastedBytes, 0);
 
-    /** @type {LH.Audit.MetricSavings} */
+    /** @type {LH.Audit.ProductMetricSavings} */
     const metricSavings = {
       FCP: 0,
       LCP: 0,

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

@@ -152,6 +152,12 @@ class LegacyJavascript extends ByteEfficiencyAudit {
     // Object.defineProperty(String.prototype, 'startsWith'
     expression += `|defineProperty\\(${object || 'window'},\\s?${qt(property)}`;
 
+    // es-shims
+    // no(Object,{entries:r},{entries:function
+    if (object) {
+      expression += `|\\(${object},\\s*{${property}:.*},\\s*{${property}`;
+    }
+
     // core-js
     if (object) {
       const objectWithoutPrototype = object.replace('.prototype', '');
@@ -234,6 +240,9 @@ class LegacyJavascript extends ByteEfficiencyAudit {
     ];
 
     for (const [name, coreJs2Module] of coreJsPolyfills) {
+      // es-shims follows a pattern for its packages.
+      // Tack it onto the corejs size estimation, as it is likely close in size.
+      const esShimModule = name.toLowerCase();
       data.push({
         name,
         modules: [
@@ -243,6 +252,7 @@ class LegacyJavascript extends ByteEfficiencyAudit {
             .replace('es6.', 'es.')
             .replace('es7.', 'es.')
             .replace('typed.', 'typed-array.'),
+          esShimModule,
         ],
         corejs: true,
       });
@@ -333,8 +343,9 @@ class LegacyJavascript extends ByteEfficiencyAudit {
           // Skip if the pattern matching found a match for this polyfill.
           if (matches.some(m => m.name === name)) continue;
 
-          const source = bundle.rawMap.sources.find(source =>
-            modules.some(module => source.endsWith(`${module}.js`)));
+          const source = bundle.rawMap.sources.find(source => modules.some(module => {
+            return source.endsWith(`/${module}.js`) || source.includes(`node_modules/${module}/`);
+          }));
           if (!source) continue;
 
           const mapping = bundle.map.mappings().find(m => m.sourceURL === source);

package/core/audits/byte-efficiency/render-blocking-resources.d.ts

@@ -6,15 +6,16 @@ declare class RenderBlockingResources extends Audit {
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context
-     * @return {Promise<{wastedMs: number, results: Array<{url: string, totalBytes: number, wastedMs: number}>}>}
+     * @return {Promise<{fcpWastedMs: number, lcpWastedMs: number, results: Array<{url: string, totalBytes: number, wastedMs: number}>}>}
      */
     static computeResults(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<{
-        wastedMs: number;
-        results: {
+        fcpWastedMs: number;
+        lcpWastedMs: number;
+        results: Array<{
             url: string;
             totalBytes: number;
             wastedMs: number;
-        }[];
+        }>;
     }>;
     /**
      * Estimates how much faster this page would reach FCP if we inlined all the used CSS from the

package/core/audits/byte-efficiency/render-blocking-resources.js

@@ -17,6 +17,8 @@ import {NetworkRequest} from '../../lib/network-request.js';
 import {ProcessedNavigation} from '../../computed/processed-navigation.js';
 import {LoadSimulator} from '../../computed/load-simulator.js';
 import {FirstContentfulPaint} from '../../computed/metrics/first-contentful-paint.js';
+import {LCPImageRecord} from '../../computed/lcp-image-record.js';
+
 
 /** @typedef {import('../../lib/dependency-graph/simulator/simulator').Simulator} Simulator */
 /** @typedef {import('../../lib/dependency-graph/base-node.js').Node} Node */
@@ -125,7 +127,7 @@ class RenderBlockingResources extends Audit {
   /**
    * @param {LH.Artifacts} artifacts
    * @param {LH.Audit.Context} context
-   * @return {Promise<{wastedMs: number, results: Array<{url: string, totalBytes: number, wastedMs: number}>}>}
+   * @return {Promise<{fcpWastedMs: number, lcpWastedMs: number, results: Array<{url: string, totalBytes: number, wastedMs: number}>}>}
    */
   static async computeResults(artifacts, context) {
     const gatherContext = artifacts.GatherContext;
@@ -179,10 +181,10 @@ class RenderBlockingResources extends Audit {
     }
 
     if (!results.length) {
-      return {results, wastedMs: 0};
+      return {results, fcpWastedMs: 0, lcpWastedMs: 0};
     }
 
-    const wastedMs = RenderBlockingResources.estimateSavingsWithGraphs(
+    const fcpWastedMs = RenderBlockingResources.estimateSavingsWithGraphs(
       simulator,
       fcpSimulation.optimisticGraph,
       deferredNodeIds,
@@ -190,7 +192,10 @@ class RenderBlockingResources extends Audit {
       artifacts.Stacks
     );
 
-    return {results, wastedMs};
+    const lcpRecord = await LCPImageRecord.request(metricComputationData, context);
+
+    // In most cases if the LCP is an image, render blocking resources don't affect LCP. For these cases we should reduce its impact.
+    return {results, fcpWastedMs, lcpWastedMs: lcpRecord ? 0 : fcpWastedMs};
   }
 
   /**
@@ -276,11 +281,12 @@ class RenderBlockingResources extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    const {results, wastedMs} = await RenderBlockingResources.computeResults(artifacts, context);
+    const {results, fcpWastedMs, lcpWastedMs} =
+      await RenderBlockingResources.computeResults(artifacts, context);
 
     let displayValue;
     if (results.length > 0) {
-      displayValue = str_(i18n.UIStrings.displayValueMsSavings, {wastedMs});
+      displayValue = str_(i18n.UIStrings.displayValueMsSavings, {wastedMs: fcpWastedMs});
     }
 
     /** @type {LH.Audit.Details.Opportunity['headings']} */
@@ -291,15 +297,15 @@ class RenderBlockingResources extends Audit {
     ];
 
     const details = Audit.makeOpportunityDetails(headings, results,
-      {overallSavingsMs: wastedMs});
+      {overallSavingsMs: fcpWastedMs});
 
     return {
       displayValue,
       score: results.length ? 0 : 1,
-      numericValue: wastedMs,
+      numericValue: fcpWastedMs,
       numericUnit: 'millisecond',
       details,
-      metricSavings: {FCP: wastedMs, LCP: wastedMs},
+      metricSavings: {FCP: fcpWastedMs, LCP: lcpWastedMs},
     };
   }
 }

package/core/audits/byte-efficiency/unused-css-rules.js

@@ -33,7 +33,7 @@ class UnusedCSSRules extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
-      guidanceLevel: 2,
+      guidanceLevel: 1,
       requiredArtifacts: ['CSSUsage', 'URL', 'devtoolsLogs', 'traces', 'GatherContext'],
     };
   }

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

@@ -67,7 +67,7 @@ class UnusedJavaScript extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
-      guidanceLevel: 2,
+      guidanceLevel: 1,
       requiredArtifacts: ['JsUsage', 'Scripts', 'SourceMaps', 'GatherContext',
         'devtoolsLogs', 'traces', 'URL'],
     };

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

@@ -45,7 +45,7 @@ class LayoutShiftElements extends Audit {
 
     /** @type {Array<{node: LH.Audit.Details.ItemValue, score: number}>} */
     const clsElementData = artifacts.TraceElements
-      .filter(element => element.traceEventType === 'layout-shift')
+      .filter(element => element.traceEventType === 'layout-shift-element')
       .map(element => ({
         node: Audit.makeNodeItem(element.node),
         score: impactByNodeId.get(element.nodeId) || 0,

package/core/audits/layout-shifts.d.ts

@@ -0,0 +1,33 @@
+export default LayoutShifts;
+export type Item = LH.Audit.Details.TableItem & {
+    node?: LH.Audit.Details.NodeValue;
+    score: number;
+    subItems?: {
+        type: 'subitems';
+        items: SubItem[];
+    };
+};
+export type SubItem = {
+    extra?: LH.Audit.Details.NodeValue | LH.Audit.Details.UrlValue;
+    cause: LH.IcuMessage;
+};
+declare class LayoutShifts 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>;
+}
+export namespace UIStrings {
+    const title: string;
+    const description: string;
+    const columnScore: string;
+    const rootCauseUnsizedMedia: string;
+    const rootCauseFontChanges: string;
+    const rootCauseInjectedIframe: string;
+    const rootCauseRenderBlockingRequest: string;
+    const displayValueShiftsFound: string;
+}
+import { Audit } from './audit.js';
+//# sourceMappingURL=layout-shifts.d.ts.map

package/core/audits/layout-shifts.js

@@ -0,0 +1,158 @@
+/**
+ * @license Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {Audit} from './audit.js';
+import * as i18n from '../lib/i18n/i18n.js';
+import {CumulativeLayoutShift as CumulativeLayoutShiftComputed} from '../computed/metrics/cumulative-layout-shift.js';
+import CumulativeLayoutShift from './metrics/cumulative-layout-shift.js';
+import TraceElements from '../gather/gatherers/trace-elements.js';
+import {TraceEngineResult} from '../computed/trace-engine-result.js';
+
+const MAX_LAYOUT_SHIFTS = 15;
+
+/** @typedef {LH.Audit.Details.TableItem & {node?: LH.Audit.Details.NodeValue, score: number, subItems?: {type: 'subitems', items: SubItem[]}}} Item */
+/** @typedef {{extra?: LH.Audit.Details.NodeValue | LH.Audit.Details.UrlValue, cause: LH.IcuMessage}} SubItem */
+
+/* eslint-disable max-len */
+const UIStrings = {
+  /** 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 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 are the largest layout shifts observed on the page. Each table item represents a single layout shift, and shows the element that shifted the most. Below each item are possible root causes that led to the layout shift. Some of these 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 a number representing how large the layout shift was. */
+  columnScore: 'Layout shift score',
+  /** A possible reason why that the layout shift occured. */
+  rootCauseUnsizedMedia: 'Media element lacking an explicit size',
+  /** A possible reason why that the layout shift occured. */
+  rootCauseFontChanges: 'Web font loaded',
+  /** A possible reason why that the layout shift occured. */
+  rootCauseInjectedIframe: 'Injected iframe',
+  /** A possible reason why that the layout shift occured. */
+  rootCauseRenderBlockingRequest: 'A late network request adjusted the page layout',
+  /** Label shown per-audit to show how many layout shifts are present. The `{# shifts found}` placeholder will be replaced with the number of layout shifts. */
+  displayValueShiftsFound: `{shiftCount, plural, =1 {1 layout shift found} other {# layout shifts found}}`,
+};
+/* eslint-enable max-len */
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class LayoutShifts extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'layout-shifts',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
+      guidanceLevel: 2,
+      requiredArtifacts: ['traces', 'RootCauses', 'TraceElements'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const trace = artifacts.traces[Audit.DEFAULT_PASS];
+    const traceEngineResult = await TraceEngineResult.request({trace}, context);
+    const clusters = traceEngineResult.LayoutShifts.clusters ?? [];
+    const {cumulativeLayoutShift: clsSavings, impactByNodeId} =
+      await CumulativeLayoutShiftComputed.request(trace, context);
+    const traceElements = artifacts.TraceElements
+      .filter(element => element.traceEventType === 'layout-shift');
+
+    /** @type {Item[]} */
+    const items = [];
+    const layoutShiftEvents = clusters.flatMap(c => c.events);
+    const topLayoutShiftEvents = layoutShiftEvents
+      .sort((a, b) => b.args.data.weighted_score_delta - a.args.data.weighted_score_delta)
+      .slice(0, MAX_LAYOUT_SHIFTS);
+    for (const event of topLayoutShiftEvents) {
+      const biggestImpactNodeId = TraceElements.getBiggestImpactNodeForShiftEvent(
+        event.args.data.impacted_nodes, impactByNodeId);
+      const biggestImpactElement = traceElements.find(t => t.nodeId === biggestImpactNodeId);
+
+      // Turn root causes into sub-items.
+      const index = layoutShiftEvents.indexOf(event);
+      const rootCauses = artifacts.RootCauses.layoutShifts[index];
+      /** @type {SubItem[]} */
+      const subItems = [];
+      if (rootCauses) {
+        for (const cause of rootCauses.unsizedMedia) {
+          const element = artifacts.TraceElements.find(
+            t => t.traceEventType === 'layout-shift' && t.nodeId === cause.node.backendNodeId);
+          subItems.push({
+            extra: element ? Audit.makeNodeItem(element.node) : undefined,
+            cause: str_(UIStrings.rootCauseUnsizedMedia),
+          });
+        }
+        for (const cause of rootCauses.fontChanges) {
+          const url = cause.request.args.data.url;
+          subItems.push({
+            extra: {type: 'url', value: url},
+            cause: str_(UIStrings.rootCauseFontChanges),
+          });
+        }
+        for (const cause of rootCauses.iframes) {
+          const element = artifacts.TraceElements.find(
+            t => t.traceEventType === 'layout-shift' && t.nodeId === cause.iframe.backendNodeId);
+          subItems.push({
+            extra: element ? Audit.makeNodeItem(element.node) : undefined,
+            cause: str_(UIStrings.rootCauseInjectedIframe),
+          });
+        }
+        for (const cause of rootCauses.renderBlockingRequests) {
+          const url = cause.request.args.data.url;
+          subItems.push({
+            extra: {type: 'url', value: url},
+            cause: str_(UIStrings.rootCauseRenderBlockingRequest),
+          });
+        }
+      }
+
+      items.push({
+        node: biggestImpactElement ? Audit.makeNodeItem(biggestImpactElement.node) : undefined,
+        score: event.args.data.weighted_score_delta,
+        subItems: subItems.length ? {type: 'subitems', items: subItems} : undefined,
+      });
+    }
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      /* eslint-disable max-len */
+      {key: 'node', valueType: 'node', subItemsHeading: {key: 'extra'}, label: str_(i18n.UIStrings.columnElement)},
+      {key: 'score', valueType: 'numeric', subItemsHeading: {key: 'cause', valueType: 'text'}, granularity: 0.001, label: str_(UIStrings.columnScore)},
+      /* eslint-enable max-len */
+    ];
+
+    const details = Audit.makeTableDetails(headings, items);
+
+    let displayValue;
+    if (items.length > 0) {
+      displayValue = str_(UIStrings.displayValueShiftsFound,
+        {shiftCount: items.length});
+    }
+
+    const passed = clsSavings <= CumulativeLayoutShift.defaultOptions.p10;
+
+    return {
+      score: passed ? 1 : 0,
+      scoreDisplayMode: passed ? Audit.SCORING_MODES.INFORMATIVE : undefined,
+      metricSavings: {
+        CLS: clsSavings,
+      },
+      notApplicable: details.items.length === 0,
+      displayValue,
+      details,
+    };
+  }
+}
+
+export default LayoutShifts;
+export {UIStrings};

package/core/audits/prioritize-lcp-image.js

@@ -37,7 +37,7 @@ class PrioritizeLcpImage extends Audit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
-      guidanceLevel: 3,
+      guidanceLevel: 4,
       requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext', 'URL', 'TraceElements'],
       scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
     };

package/core/audits/unsized-images.js

@@ -34,7 +34,7 @@ class UnsizedImages extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      guidanceLevel: 3,
+      guidanceLevel: 4,
       requiredArtifacts: ['ImageElements'],
       scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
     };

package/core/audits/viewport.js

@@ -63,12 +63,22 @@ class Viewport extends Audit {
       inpSavings = 0;
     }
 
+    /** @type {LH.Audit.Details.DebugData|undefined} */
+    let details;
+    if (viewportMeta.rawContentString !== undefined) {
+      details = {
+        type: 'debugdata',
+        viewportContent: viewportMeta.rawContentString,
+      };
+    }
+
     return {
       score: Number(viewportMeta.isMobileOptimized),
       metricSavings: {
         INP: inpSavings,
       },
       warnings: viewportMeta.parserWarnings,
+      details,
     };
   }
 }

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

@@ -4,6 +4,7 @@ export type LayoutShiftEvent = {
     isMainFrame: boolean;
     weightedScore: number;
     impactedNodes?: LH.Artifacts.TraceImpactedNode[];
+    event: LH.TraceEvent;
 };
 declare const CumulativeLayoutShiftComputed: typeof CumulativeLayoutShift & {
     request: (dependencies: import("../../index.js").Trace, context: import("../../../types/utility-types.js").default.ImmutableObject<{
@@ -12,6 +13,11 @@ declare const CumulativeLayoutShiftComputed: typeof CumulativeLayoutShift & {
         cumulativeLayoutShift: number;
         cumulativeLayoutShiftMainFrame: number;
         impactByNodeId: Map<number, number>;
+        newEngineResult?: {
+            cumulativeLayoutShift: number;
+            cumulativeLayoutShiftMainFrame: number;
+        } | undefined;
+        newEngineResultDiffered: boolean;
     }>;
 };
 declare class CumulativeLayoutShift {
@@ -43,15 +49,28 @@ declare class CumulativeLayoutShift {
      * @return {number}
      */
     static calculate(layoutShiftEvents: Array<LayoutShiftEvent>): number;
+    /**
+     * @param {LayoutShiftEvent[]} allFrameShiftEvents
+     * @param {LayoutShiftEvent[]} mainFrameShiftEvents
+     */
+    static computeWithSharedTraceEngine(allFrameShiftEvents: LayoutShiftEvent[], mainFrameShiftEvents: LayoutShiftEvent[]): Promise<{
+        cumulativeLayoutShift: number;
+        cumulativeLayoutShiftMainFrame: number;
+    }>;
     /**
      * @param {LH.Trace} trace
      * @param {LH.Artifacts.ComputedContext} context
-     * @return {Promise<{cumulativeLayoutShift: number, cumulativeLayoutShiftMainFrame: number, impactByNodeId: Map<number, number>}>}
+     * @return {Promise<{cumulativeLayoutShift: number, cumulativeLayoutShiftMainFrame: number, impactByNodeId: Map<number, number>, newEngineResult?: {cumulativeLayoutShift: number, cumulativeLayoutShiftMainFrame: number}, newEngineResultDiffered: boolean}>}
      */
     static compute_(trace: LH.Trace, context: LH.Artifacts.ComputedContext): Promise<{
         cumulativeLayoutShift: number;
         cumulativeLayoutShiftMainFrame: number;
         impactByNodeId: Map<number, number>;
+        newEngineResult?: {
+            cumulativeLayoutShift: number;
+            cumulativeLayoutShiftMainFrame: number;
+        } | undefined;
+        newEngineResultDiffered: boolean;
     }>;
 }
 import { ProcessedTrace } from '../processed-trace.js';