lighthouse 11.0.0-dev.20230814 → 11.0.0-dev.20230816

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/installable-manifest.d.ts

@@ -104,12 +104,6 @@ export const UIStrings: {
     'protocol-timeout': string;
     /** Message logged when the web app has been uninstalled o desktop, signalling that the install banner state is being reset. */
     'pipeline-restarted': string;
-    /**
-     * TODO: This error was removed in M114, we can remove this message when it hits stable.
-     * @description Error message explaining that the URL of the manifest uses a scheme that is not supported on Android.
-     * @example {data:} scheme
-     */
-    'scheme-not-supported-for-webapk': string;
 };
 import { Audit } from './audit.js';
 //# sourceMappingURL=installable-manifest.d.ts.map

package/core/audits/installable-manifest.js

@@ -87,17 +87,12 @@ const UIStrings = {
   /** Error message explaining that the web manifest's URL changed while the manifest was being downloaded by the browser. */
   'manifest-location-changed': `Manifest URL changed while the manifest was being fetched.`,
   /** Warning message explaining that the page does not work offline. */
+  // TODO(COMPAT): This error was removed in M118, we can remove this message when it hits stable.
   'warn-not-offline-capable': `Page does not work offline. The page will not be regarded as installable after Chrome 93, stable release August 2021.`,
   /** Error message explaining that Lighthouse failed while checking if the page is installable, and directing the user to try again in a new Chrome. */
   'protocol-timeout': `Lighthouse could not determine if the page is installable. Please try with a newer version of Chrome.`,
   /** Message logged when the web app has been uninstalled o desktop, signalling that the install banner state is being reset. */
   'pipeline-restarted': 'PWA has been uninstalled and installability checks resetting.',
-  /**
-   * TODO: This error was removed in M114, we can remove this message when it hits stable.
-   * @description Error message explaining that the URL of the manifest uses a scheme that is not supported on Android.
-   * @example {data:} scheme
-   */
-  'scheme-not-supported-for-webapk': 'The manifest URL scheme ({scheme}) is not supported on Android.',
 };
 /* eslint-enable max-len */
 
@@ -157,17 +152,6 @@ class InstallableManifest extends Audit {
       // @ts-expect-error errorIds from protocol should match up against the strings dict
       const matchingString = UIStrings[err.errorId];
 
-      if (err.errorId === 'scheme-not-supported-for-webapk') {
-        // If there was no manifest, then there will be at lest one other installability error.
-        // We can ignore this error if that's the case.
-        const manifestUrl = artifacts.WebAppManifest?.url;
-        if (!manifestUrl) continue;
-
-        const scheme = new URL(manifestUrl).protocol;
-        i18nErrors.push(str_(matchingString, {scheme}));
-        continue;
-      }
-
       // Handle an errorId we don't recognize.
       if (matchingString === undefined) {
         i18nErrors.push(str_(UIStrings.noErrorId, {errorId: err.errorId}));

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/core/audits/third-party-facades.js

@@ -24,8 +24,8 @@ import * as i18n from '../lib/i18n/i18n.js';
 import {EntityClassification} from '../computed/entity-classification.js';
 import thirdPartyWeb from '../lib/third-party-web.js';
 import {NetworkRecords} from '../computed/network-records.js';
-import {MainThreadTasks} from '../computed/main-thread-tasks.js';
 import ThirdPartySummary from './third-party-summary.js';
+import {TBTImpactTasks} from '../computed/tbt-impact-tasks.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides details about the third-party code on a web page that can be lazy loaded with a facade alternative. This descriptive title is shown to users when no resources have facade alternatives available. A facade is a lightweight component which looks like the desired resource. Lazy loading means resources are deferred until they are needed. Third-party code refers to resources that are not within the control of the site owner. */
@@ -86,7 +86,7 @@ class ThirdPartyFacades extends Audit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL'],
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL', 'GatherContext'],
     };
   }
 
@@ -148,19 +148,23 @@ class ThirdPartyFacades extends Audit {
    */
   static async audit(artifacts, context) {
     const settings = context.settings;
-    const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     const networkRecords = await NetworkRecords.request(devtoolsLog, context);
     const classifiedEntities = await EntityClassification.request(
       {URL: artifacts.URL, devtoolsLog}, context);
-    const tasks = await MainThreadTasks.request(trace, context);
+
+    const metricComputationData = Audit.makeMetricComputationDataInput(artifacts, context);
+    const tbtImpactTasks = await TBTImpactTasks.request(metricComputationData, context);
+
     const multiplier = settings.throttlingMethod === 'simulate' ?
       settings.throttling.cpuSlowdownMultiplier : 1;
-    const summaries = ThirdPartySummary.getSummaries(networkRecords, tasks, multiplier,
+    const summaries = ThirdPartySummary.getSummaries(networkRecords, tbtImpactTasks, multiplier,
       classifiedEntities);
     const facadableProducts =
       ThirdPartyFacades.getProductsWithFacade(summaries.byURL, classifiedEntities);
 
+    let tbtImpact = 0;
+
     /** @type {LH.Audit.Details.TableItem[]} */
     const results = [];
     for (const {product, entity} of facadableProducts) {
@@ -179,6 +183,8 @@ class ThirdPartyFacades extends Audit {
       const entitySummary = summaries.byEntity.get(entity);
       if (!urls || !entitySummary) continue;
 
+      tbtImpact += entitySummary.tbtImpact;
+
       const items = Array.from(urls).map((url) => {
         const urlStats = summaries.byURL.get(url);
         return /** @type {import('./third-party-summary.js').URLSummary} */ ({url, ...urlStats});
@@ -198,6 +204,7 @@ class ThirdPartyFacades extends Audit {
       return {
         score: 1,
         notApplicable: true,
+        metricSavings: {TBT: 0},
       };
     }
 
@@ -216,6 +223,7 @@ class ThirdPartyFacades extends Audit {
         itemCount: results.length,
       }),
       details: Audit.makeTableDetails(headings, results),
+      metricSavings: {TBT: tbtImpact},
     };
   }
 }

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

@@ -3,10 +3,12 @@ export type Summary = {
     mainThreadTime: number;
     transferSize: number;
     blockingTime: number;
+    tbtImpact: number;
 };
 export type URLSummary = {
     transferSize: number;
     blockingTime: number;
+    tbtImpact: number;
     url: string | LH.IcuMessage;
 };
 export type SummaryMaps = {
@@ -27,12 +29,12 @@ declare class ThirdPartySummary extends Audit {
     /**
      *
      * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
-     * @param {Array<LH.Artifacts.TaskNode>} mainThreadTasks
+     * @param {Array<LH.Artifacts.TBTImpactTask>} tbtImpactTasks
      * @param {number} cpuMultiplier
      * @param {LH.Artifacts.EntityClassification} entityClassification
      * @return {SummaryMaps}
      */
-    static getSummaries(networkRecords: Array<LH.Artifacts.NetworkRequest>, mainThreadTasks: Array<LH.Artifacts.TaskNode>, cpuMultiplier: number, entityClassification: LH.Artifacts.EntityClassification): SummaryMaps;
+    static getSummaries(networkRecords: Array<LH.Artifacts.NetworkRequest>, tbtImpactTasks: Array<LH.Artifacts.TBTImpactTask>, cpuMultiplier: number, entityClassification: LH.Artifacts.EntityClassification): SummaryMaps;
     /**
      * @param {LH.Artifacts.Entity} entity
      * @param {SummaryMaps} summaries

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

@@ -8,8 +8,8 @@ import {Audit} from './audit.js';
 import {EntityClassification} from '../computed/entity-classification.js';
 import * as i18n from '../lib/i18n/i18n.js';
 import {NetworkRecords} from '../computed/network-records.js';
-import {MainThreadTasks} from '../computed/main-thread-tasks.js';
 import {getJavaScriptURLs, getAttributableURLForTask} from '../lib/tracehouse/task-summary.js';
+import {TBTImpactTasks} from '../computed/tbt-impact-tasks.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides details about the code on a web page that the user doesn't control (referred to as "third-party code"). This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -38,12 +38,14 @@ const PASS_THRESHOLD_IN_MS = 250;
  * @property {number} mainThreadTime
  * @property {number} transferSize
  * @property {number} blockingTime
+ * @property {number} tbtImpact
  */
 
 /**
  * @typedef URLSummary
  * @property {number} transferSize
  * @property {number} blockingTime
+ * @property {number} tbtImpact
  * @property {string | LH.IcuMessage} url
  */
 
@@ -72,24 +74,24 @@ class ThirdPartySummary extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL'],
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL', 'GatherContext'],
     };
   }
 
   /**
    *
    * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
-   * @param {Array<LH.Artifacts.TaskNode>} mainThreadTasks
+   * @param {Array<LH.Artifacts.TBTImpactTask>} tbtImpactTasks
    * @param {number} cpuMultiplier
    * @param {LH.Artifacts.EntityClassification} entityClassification
    * @return {SummaryMaps}
    */
-  static getSummaries(networkRecords, mainThreadTasks, cpuMultiplier, entityClassification) {
+  static getSummaries(networkRecords, tbtImpactTasks, cpuMultiplier, entityClassification) {
     /** @type {Map<string, Summary>} */
     const byURL = new Map();
     /** @type {Map<LH.Artifacts.Entity, Summary>} */
     const byEntity = new Map();
-    const defaultSummary = {mainThreadTime: 0, blockingTime: 0, transferSize: 0};
+    const defaultSummary = {mainThreadTime: 0, blockingTime: 0, transferSize: 0, tbtImpact: 0};
 
     for (const request of networkRecords) {
       const urlSummary = byURL.get(request.url) || {...defaultSummary};
@@ -99,7 +101,7 @@ class ThirdPartySummary extends Audit {
 
     const jsURLs = getJavaScriptURLs(networkRecords);
 
-    for (const task of mainThreadTasks) {
+    for (const task of tbtImpactTasks) {
       const attributableURL = getAttributableURLForTask(task, jsURLs);
 
       const urlSummary = byURL.get(attributableURL) || {...defaultSummary};
@@ -110,6 +112,7 @@ class ThirdPartySummary extends Audit {
       // Note that this is not totally equivalent to the TBT definition since it fails to account for FCP,
       // but a majority of third-party work occurs after FCP and should yield largely similar numbers.
       urlSummary.blockingTime += Math.max(taskDuration - 50, 0);
+      urlSummary.tbtImpact += task.selfTbtImpact;
       byURL.set(attributableURL, urlSummary);
     }
 
@@ -127,6 +130,7 @@ class ThirdPartySummary extends Audit {
       entitySummary.transferSize += urlSummary.transferSize;
       entitySummary.mainThreadTime += urlSummary.mainThreadTime;
       entitySummary.blockingTime += urlSummary.blockingTime;
+      entitySummary.tbtImpact += urlSummary.tbtImpact;
       byEntity.set(entity, entitySummary);
 
       const entityURLs = urls.get(entity) || [];
@@ -152,7 +156,7 @@ class ThirdPartySummary extends Audit {
       // Sort by blocking time first, then transfer size to break ties.
       .sort((a, b) => (b.blockingTime - a.blockingTime) || (b.transferSize - a.transferSize));
 
-    const subitemSummary = {transferSize: 0, blockingTime: 0};
+    const subitemSummary = {transferSize: 0, blockingTime: 0, tbtImpact: 0};
     const minTransferSize = Math.max(MIN_TRANSFER_SIZE_FOR_SUBITEMS, stats.transferSize / 20);
     const maxSubItems = Math.min(MAX_SUBITEMS, items.length);
     let numSubItems = 0;
@@ -167,6 +171,7 @@ class ThirdPartySummary extends Audit {
       numSubItems++;
       subitemSummary.transferSize += nextSubItem.transferSize;
       subitemSummary.blockingTime += nextSubItem.blockingTime;
+      subitemSummary.tbtImpact += nextSubItem.tbtImpact;
     }
     if (!subitemSummary.blockingTime && !subitemSummary.transferSize) {
       // Don't bother breaking down if there are no large resources.
@@ -179,6 +184,7 @@ class ThirdPartySummary extends Audit {
       url: str_(i18n.UIStrings.otherResourcesLabel),
       transferSize: stats.transferSize - subitemSummary.transferSize,
       blockingTime: stats.blockingTime - subitemSummary.blockingTime,
+      tbtImpact: stats.tbtImpact - subitemSummary.tbtImpact,
     };
     if (remainder.transferSize > minTransferSize) {
       items.push(remainder);
@@ -193,19 +199,21 @@ class ThirdPartySummary extends Audit {
    */
   static async audit(artifacts, context) {
     const settings = context.settings || {};
-    const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     const networkRecords = await NetworkRecords.request(devtoolsLog, context);
     const classifiedEntities = await EntityClassification.request(
       {URL: artifacts.URL, devtoolsLog}, context);
     const firstPartyEntity = classifiedEntities.firstParty;
-    const tasks = await MainThreadTasks.request(trace, context);
+
+    const metricComputationData = Audit.makeMetricComputationDataInput(artifacts, context);
+    const tbtImpactTasks = await TBTImpactTasks.request(metricComputationData, context);
+
     const multiplier = settings.throttlingMethod === 'simulate' ?
       settings.throttling.cpuSlowdownMultiplier : 1;
 
     const summaries = ThirdPartySummary.getSummaries(
-      networkRecords, tasks, multiplier, classifiedEntities);
-    const overallSummary = {wastedBytes: 0, wastedMs: 0};
+      networkRecords, tbtImpactTasks, multiplier, classifiedEntities);
+    const overallSummary = {wastedBytes: 0, wastedMs: 0, tbtImpact: 0};
 
     const results = Array.from(summaries.byEntity.entries())
       // Don't consider the page we're on to be third-party.
@@ -214,6 +222,7 @@ class ThirdPartySummary extends Audit {
       .map(([entity, stats]) => {
         overallSummary.wastedBytes += stats.transferSize;
         overallSummary.wastedMs += stats.blockingTime;
+        overallSummary.tbtImpact += stats.tbtImpact;
 
         return {
           ...stats,
@@ -240,6 +249,7 @@ class ThirdPartySummary extends Audit {
       return {
         score: 1,
         notApplicable: true,
+        metricSavings: {TBT: 0},
       };
     }
 
@@ -252,6 +262,9 @@ class ThirdPartySummary extends Audit {
         timeInMs: overallSummary.wastedMs,
       }),
       details,
+      metricSavings: {
+        TBT: overallSummary.tbtImpact,
+      },
     };
   }
 }

package/core/computed/tbt-impact-tasks.d.ts

@@ -1,14 +1,9 @@
 export { TBTImpactTasksComputed as TBTImpactTasks };
-export type TBTImpactTask = LH.Artifacts.TaskNode & {
-    tbtImpact: number;
-    selfTbtImpact: number;
-};
 declare const TBTImpactTasksComputed: typeof TBTImpactTasks & {
     request: (dependencies: import("../index.js").Artifacts.MetricComputationDataInput, context: import("../../types/utility-types.js").default.ImmutableObject<{
         computedCache: Map<string, import("../lib/arbitrary-equality-map.js").ArbitraryEqualityMap>;
-    }>) => Promise<TBTImpactTask[]>;
+    }>) => Promise<import("../index.js").Artifacts.TBTImpactTask[]>;
 };
-/** @typedef {LH.Artifacts.TaskNode & {tbtImpact: number, selfTbtImpact: number}} TBTImpactTask */
 declare class TBTImpactTasks {
     /**
      * @param {LH.Artifacts.TaskNode} task
@@ -28,27 +23,27 @@ declare class TBTImpactTasks {
      * @param {LH.Artifacts.TaskNode[]} tasks
      * @param {Map<LH.Artifacts.TaskNode, number>} taskToImpact
      */
-    static createImpactTasks(tasks: LH.Artifacts.TaskNode[], taskToImpact: Map<LH.Artifacts.TaskNode, number>): TBTImpactTask[];
+    static createImpactTasks(tasks: LH.Artifacts.TaskNode[], taskToImpact: Map<LH.Artifacts.TaskNode, number>): import("../index.js").Artifacts.TBTImpactTask[];
     /**
      * @param {LH.Artifacts.TaskNode[]} tasks
      * @param {number} startTimeMs
      * @param {number} endTimeMs
-     * @return {TBTImpactTask[]}
+     * @return {LH.Artifacts.TBTImpactTask[]}
      */
-    static computeImpactsFromObservedTasks(tasks: LH.Artifacts.TaskNode[], startTimeMs: number, endTimeMs: number): TBTImpactTask[];
+    static computeImpactsFromObservedTasks(tasks: LH.Artifacts.TaskNode[], startTimeMs: number, endTimeMs: number): LH.Artifacts.TBTImpactTask[];
     /**
      * @param {LH.Artifacts.TaskNode[]} tasks
      * @param {LH.Gatherer.Simulation.Result['nodeTimings']} tbtNodeTimings
      * @param {number} startTimeMs
      * @param {number} endTimeMs
-     * @return {TBTImpactTask[]}
+     * @return {LH.Artifacts.TBTImpactTask[]}
      */
-    static computeImpactsFromLantern(tasks: LH.Artifacts.TaskNode[], tbtNodeTimings: LH.Gatherer.Simulation.Result['nodeTimings'], startTimeMs: number, endTimeMs: number): TBTImpactTask[];
+    static computeImpactsFromLantern(tasks: LH.Artifacts.TaskNode[], tbtNodeTimings: LH.Gatherer.Simulation.Result['nodeTimings'], startTimeMs: number, endTimeMs: number): LH.Artifacts.TBTImpactTask[];
     /**
      * @param {LH.Artifacts.MetricComputationDataInput} metricComputationData
      * @param {LH.Artifacts.ComputedContext} context
-     * @return {Promise<TBTImpactTask[]>}
+     * @return {Promise<LH.Artifacts.TBTImpactTask[]>}
      */
-    static compute_(metricComputationData: LH.Artifacts.MetricComputationDataInput, context: LH.Artifacts.ComputedContext): Promise<TBTImpactTask[]>;
+    static compute_(metricComputationData: LH.Artifacts.MetricComputationDataInput, context: LH.Artifacts.ComputedContext): Promise<LH.Artifacts.TBTImpactTask[]>;
 }
 //# sourceMappingURL=tbt-impact-tasks.d.ts.map

package/core/computed/tbt-impact-tasks.js

@@ -12,8 +12,6 @@ import {TotalBlockingTime} from './metrics/total-blocking-time.js';
 import {ProcessedTrace} from './processed-trace.js';
 import {calculateTbtImpactForEvent} from './metrics/tbt-utils.js';
 
-/** @typedef {LH.Artifacts.TaskNode & {tbtImpact: number, selfTbtImpact: number}} TBTImpactTask */
-
 class TBTImpactTasks {
   /**
    * @param {LH.Artifacts.TaskNode} task
@@ -66,7 +64,7 @@ class TBTImpactTasks {
    * @param {Map<LH.Artifacts.TaskNode, number>} taskToImpact
    */
   static createImpactTasks(tasks, taskToImpact) {
-    /** @type {TBTImpactTask[]} */
+    /** @type {LH.Artifacts.TBTImpactTask[]} */
     const tbtImpactTasks = [];
 
     for (const task of tasks) {
@@ -92,7 +90,7 @@ class TBTImpactTasks {
    * @param {LH.Artifacts.TaskNode[]} tasks
    * @param {number} startTimeMs
    * @param {number} endTimeMs
-   * @return {TBTImpactTask[]}
+   * @return {LH.Artifacts.TBTImpactTask[]}
    */
   static computeImpactsFromObservedTasks(tasks, startTimeMs, endTimeMs) {
     /** @type {Map<LH.Artifacts.TaskNode, number>} */
@@ -125,7 +123,7 @@ class TBTImpactTasks {
    * @param {LH.Gatherer.Simulation.Result['nodeTimings']} tbtNodeTimings
    * @param {number} startTimeMs
    * @param {number} endTimeMs
-   * @return {TBTImpactTask[]}
+   * @return {LH.Artifacts.TBTImpactTask[]}
    */
   static computeImpactsFromLantern(tasks, tbtNodeTimings, startTimeMs, endTimeMs) {
     /** @type {Map<LH.Artifacts.TaskNode, number>} */
@@ -193,7 +191,7 @@ class TBTImpactTasks {
   /**
    * @param {LH.Artifacts.MetricComputationDataInput} metricComputationData
    * @param {LH.Artifacts.ComputedContext} context
-   * @return {Promise<TBTImpactTask[]>}
+   * @return {Promise<LH.Artifacts.TBTImpactTask[]>}
    */
   static async compute_(metricComputationData, context) {
     const tbtResult = await TotalBlockingTime.request(metricComputationData, context);