lighthouse 11.0.0-dev.20230814 → 11.0.0-dev.20230815

package/core/audits/dobetterweb/dom-size.d.ts

@@ -7,9 +7,15 @@ declare class DOMSize extends Audit {
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context
-     * @return {LH.Audit.Product}
+     * @return {Promise<number|undefined>}
      */
-    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): LH.Audit.Product;
+    static computeTbtImpact(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<number | undefined>;
+    /**
+     * @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;

package/core/audits/dobetterweb/dom-size.js

@@ -13,6 +13,7 @@
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
+import {TBTImpactTasks} from '../../computed/tbt-impact-tasks.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides detail on the size of the web page's DOM. The size of a DOM is characterized by the total number of DOM elements and greatest DOM depth. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -53,7 +54,8 @@ class DOMSize extends Audit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['DOMStats'],
+      requiredArtifacts: ['DOMStats', 'URL', 'GatherContext'],
+      __internalOptionalArtifacts: ['traces', 'devtoolsLogs'],
     };
   }
 
@@ -69,13 +71,53 @@ class DOMSize extends Audit {
     };
   }
 
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<number|undefined>}
+   */
+  static async computeTbtImpact(artifacts, context) {
+    let tbtImpact = 0;
+
+    // We still want to surface this audit in snapshot mode, but since we don't compute TBT
+    // the impact should always be undefined.
+    const {GatherContext, devtoolsLogs, traces} = artifacts;
+    if (GatherContext.gatherMode !== 'navigation') {
+      return undefined;
+    }
+
+    // Since the artifacts are optional, it's still possible for them to be missing in navigation mode.
+    // Navigation mode does compute TBT so we should surface a numerical savings of 0.
+    if (!devtoolsLogs?.[Audit.DEFAULT_PASS] || !traces?.[Audit.DEFAULT_PASS]) {
+      return 0;
+    }
+
+    const metricComputationData = Audit.makeMetricComputationDataInput(artifacts, context);
+
+    try {
+      // The TBT impact of style/layout tasks is correlated to the DOM size.
+      // Even in situations where the page forces a style recalc, the DOM size is partially to blame
+      // for any time spent blocking the main thread.
+      //
+      // `tbtImpact` should be exactly 0 for small DOMs since `selfTbtImpact` accounts for the blocking
+      // time and not the main thread time.
+      const tbtImpactTasks = await TBTImpactTasks.request(metricComputationData, context);
+      for (const task of tbtImpactTasks) {
+        if (task.group.id !== 'styleLayout') continue;
+        tbtImpact += task.selfTbtImpact;
+      }
+    } catch {}
+
+    return Math.round(tbtImpact);
+  }
+
 
   /**
    * @param {LH.Artifacts} artifacts
    * @param {LH.Audit.Context} context
-   * @return {LH.Audit.Product}
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts, context) {
+  static async audit(artifacts, context) {
     const stats = artifacts.DOMStats;
 
     const score = Audit.computeLogNormalScore(
@@ -120,12 +162,17 @@ class DOMSize extends Audit {
       },
     ];
 
+    const tbtImpact = await this.computeTbtImpact(artifacts, context);
+
     return {
       score,
       numericValue: stats.totalBodyElements,
       numericUnit: 'element',
       displayValue: str_(UIStrings.displayValue, {itemCount: stats.totalBodyElements}),
       details: Audit.makeTableDetails(headings, items),
+      metricSavings: {
+        TBT: tbtImpact,
+      },
     };
   }
 }

package/core/audits/largest-contentful-paint-element.js

@@ -8,7 +8,8 @@ import log from 'lighthouse-logger';
 
 import {Audit} from './audit.js';
 import * as i18n from '../lib/i18n/i18n.js';
-import {LargestContentfulPaint} from '../computed/metrics/largest-contentful-paint.js';
+import {LargestContentfulPaint as LargestContentfulPaintComputed} from '../computed/metrics/largest-contentful-paint.js';
+import LargestContentfulPaint from './metrics/largest-contentful-paint.js';
 import {LCPBreakdown} from '../computed/metrics/lcp-breakdown.js';
 import {Sentry} from '../lib/sentry.js';
 
@@ -124,14 +125,22 @@ class LargestContentfulPaintElement extends Audit {
       settings: context.settings, URL: artifacts.URL};
 
     const elementTable = this.makeElementTable(artifacts);
-    if (!elementTable) return {score: null, notApplicable: true};
+    if (!elementTable) {
+      return {
+        score: null,
+        notApplicable: true,
+        metricSavings: {LCP: 0},
+      };
+    }
 
     const items = [elementTable];
     let displayValue;
+    let metricLcp = 0;
 
     try {
-      const {timing: metricLcp} =
-        await LargestContentfulPaint.request(metricComputationData, context);
+      const lcpResult =
+        await LargestContentfulPaintComputed.request(metricComputationData, context);
+      metricLcp = lcpResult.timing;
       displayValue = str_(i18n.UIStrings.ms, {timeInMs: metricLcp});
 
       const phaseTable = await this.makePhaseTable(metricLcp, metricComputationData, context);
@@ -146,10 +155,18 @@ class LargestContentfulPaintElement extends Audit {
 
     const details = Audit.makeListDetails(items);
 
+    // Conceptually, this doesn't make much sense as "savings" for this audit since there isn't anything to "fix".
+    // However, this audit will always be useful when improving LCP and that should be reflected in our impact calculations.
+    const idealLcp = LargestContentfulPaint.defaultOptions[context.settings.formFactor].scoring.p10;
+    const lcpSavings = Math.max(0, metricLcp - idealLcp);
+
     return {
       score: 1,
       displayValue,
       details,
+      metricSavings: {
+        LCP: lcpSavings,
+      },
     };
   }
 }

package/core/audits/lcp-lazy-loaded.d.ts

@@ -8,9 +8,10 @@ declare class LargestContentfulPaintLazyLoaded extends Audit {
     static isImageInViewport(image: LH.Artifacts.ImageElement, viewportDimensions: LH.Artifacts.ViewportDimensions): boolean;
     /**
      * @param {LH.Artifacts} artifacts
-     * @return {LH.Audit.Product}
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
      */
-    static audit(artifacts: LH.Artifacts): LH.Audit.Product;
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
 }
 export namespace UIStrings {
     const title: string;

package/core/audits/lcp-lazy-loaded.js

@@ -6,6 +6,8 @@
 
 import {Audit} from './audit.js';
 import * as i18n from '../lib/i18n/i18n.js';
+import {LCPBreakdown} from '../computed/metrics/lcp-breakdown.js';
+import {LargestContentfulPaint} from '../computed/metrics/largest-contentful-paint.js';
 
 const UIStrings = {
   /** Title of a Lighthouse audit that provides detail on whether the largest above-the-fold image was loaded with sufficient priority. This descriptive title is shown to users when the image was loaded properly. */
@@ -18,6 +20,8 @@ const UIStrings = {
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
 
+const ESTIMATED_PERCENT_SAVINGS = 0.15;
+
 class LargestContentfulPaintLazyLoaded extends Audit {
   /**
    * @return {LH.Audit.Meta}
@@ -29,7 +33,8 @@ class LargestContentfulPaintLazyLoaded extends Audit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
-      requiredArtifacts: ['TraceElements', 'ViewportDimensions', 'ImageElements'],
+      requiredArtifacts: ['TraceElements', 'ViewportDimensions', 'ImageElements',
+        'traces', 'devtoolsLogs', 'GatherContext', 'URL'],
     };
   }
 
@@ -46,9 +51,10 @@ class LargestContentfulPaintLazyLoaded extends Audit {
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
+  static async audit(artifacts, context) {
     const lcpElement = artifacts.TraceElements.find(element => {
       return element.traceEventType === 'largest-contentful-paint' && element.type === 'image';
     });
@@ -59,7 +65,11 @@ class LargestContentfulPaintLazyLoaded extends Audit {
 
     if (!lcpElementImage ||
       !this.isImageInViewport(lcpElementImage, artifacts.ViewportDimensions)) {
-      return {score: null, notApplicable: true};
+      return {
+        score: null,
+        notApplicable: true,
+        metricSavings: {LCP: 0},
+      };
     }
 
     /** @type {LH.Audit.Details.Table['headings']} */
@@ -73,8 +83,27 @@ class LargestContentfulPaintLazyLoaded extends Audit {
       },
     ]);
 
+    const wasLazyLoaded = lcpElementImage.loading === 'lazy';
+
+    const metricComputationData = Audit.makeMetricComputationDataInput(artifacts, context);
+    const {timing: metricLcp} =
+      await LargestContentfulPaint.request(metricComputationData, context);
+    const lcpBreakdown = await LCPBreakdown.request(metricComputationData, context);
+    let lcpSavings = 0;
+    if (wasLazyLoaded && lcpBreakdown.loadStart !== undefined) {
+      // Estimate the LCP savings using a statistical percentage.
+      // https://web.dev/lcp-lazy-loading/#causal-performance
+      //
+      // LCP savings will be at most the LCP load delay.
+      const lcpLoadDelay = lcpBreakdown.loadStart - lcpBreakdown.ttfb;
+      lcpSavings = Math.min(metricLcp * ESTIMATED_PERCENT_SAVINGS, lcpLoadDelay);
+    }
+
     return {
-      score: lcpElementImage.loading === 'lazy' ? 0 : 1,
+      score: wasLazyLoaded ? 0 : 1,
+      metricSavings: {
+        LCP: lcpSavings,
+      },
       details,
     };
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "11.0.0-dev.20230814",
+  "version": "11.0.0-dev.20230815",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -56,7 +56,7 @@
     "unit-viewer": "yarn mocha --testMatch viewer/**/*-test.js",
     "unit-flow": "bash flow-report/test/run-flow-report-tests.sh",
     "unit": "yarn unit-flow && yarn mocha",
-    "unit:ci": "NODE_OPTIONS=--max-old-space-size=8192 npm run unit --forbid-only",
+    "unit:ci": "NODE_OPTIONS=--max-old-space-size=8192 npm run unit",
     "core-unit": "yarn unit-core",
     "cli-unit": "yarn unit-cli",
     "viewer-unit": "yarn unit-viewer",