core: add TBT impact to third party audits

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},
     };
   }
 }

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,6 +38,7 @@ const PASS_THRESHOLD_IN_MS = 250;
  * @property {number} mainThreadTime
  * @property {number} transferSize
  * @property {number} blockingTime
+ * @property {number} tbtImpact
  */
 
 /**
@@ -72,24 +73,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 +100,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 +111,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 +129,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) || [];
@@ -193,19 +196,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 +219,7 @@ class ThirdPartySummary extends Audit {
       .map(([entity, stats]) => {
         overallSummary.wastedBytes += stats.transferSize;
         overallSummary.wastedMs += stats.blockingTime;
+        overallSummary.tbtImpact += stats.tbtImpact;
 
         return {
           ...stats,
@@ -240,6 +246,7 @@ class ThirdPartySummary extends Audit {
       return {
         score: 1,
         notApplicable: true,
+        metricSavings: {TBT: 0},
       };
     }
 
@@ -252,6 +259,9 @@ class ThirdPartySummary extends Audit {
         timeInMs: overallSummary.wastedMs,
       }),
       details,
+      metricSavings: {
+        TBT: overallSummary.tbtImpact,
+      },
     };
   }
 }

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