lighthouse 10.3.0-dev.20230703 → 10.3.0-dev.20230705

package/core/audits/audit.d.ts

@@ -159,6 +159,12 @@ export class Audit {
      * @return {LH.RawIcu<LH.Audit.Result>}
      */
     static generateAuditResult(audit: typeof Audit, product: LH.Audit.Product): LH.RawIcu<LH.Audit.Result>;
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @returns {LH.Artifacts.MetricComputationDataInput}
+     */
+    static makeMetricComputationDataInput(artifacts: LH.Artifacts, context: LH.Audit.Context): LH.Artifacts.MetricComputationDataInput;
 }
 import * as LH from '../../types/lh.js';
 //# sourceMappingURL=audit.d.ts.map

package/core/audits/audit.js

@@ -415,6 +415,18 @@ class Audit {
       details: product.details,
     };
   }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @returns {LH.Artifacts.MetricComputationDataInput}
+   */
+  static makeMetricComputationDataInput(artifacts, context) {
+    const trace = artifacts.traces[Audit.DEFAULT_PASS];
+    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const gatherContext = artifacts.GatherContext;
+    return {trace, devtoolsLog, gatherContext, settings: context.settings, URL: artifacts.URL};
+  }
 }
 
 export {Audit};

package/core/audits/byte-efficiency/byte-efficiency-audit.d.ts

@@ -49,6 +49,23 @@ export class ByteEfficiencyAudit extends Audit {
      * @return {Promise<LH.Audit.Product>}
      */
     static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+    /**
+     * Computes the estimated effect of all the byte savings on the provided graph.
+     *
+     * @param {Array<LH.Audit.ByteEfficiencyItem>} results The array of byte savings results per resource
+     * @param {Node} graph
+     * @param {Simulator} simulator
+     * @param {{label?: string, providedWastedBytesByUrl?: Map<string, number>}=} options
+     * @return {{savings: number, simulationBeforeChanges: LH.Gatherer.Simulation.Result, simulationAfterChanges: LH.Gatherer.Simulation.Result}}
+     */
+    static computeWasteWithGraph(results: Array<LH.Audit.ByteEfficiencyItem>, graph: Node, simulator: Simulator, options?: {
+        label?: string;
+        providedWastedBytesByUrl?: Map<string, number>;
+    } | undefined): {
+        savings: number;
+        simulationBeforeChanges: LH.Gatherer.Simulation.Result;
+        simulationAfterChanges: LH.Gatherer.Simulation.Result;
+    };
     /**
      * Computes the estimated effect of all the byte savings on the maximum of the following:
      *
@@ -58,22 +75,21 @@ export class ByteEfficiencyAudit extends Audit {
      * @param {Array<LH.Audit.ByteEfficiencyItem>} results The array of byte savings results per resource
      * @param {Node} graph
      * @param {Simulator} simulator
-     * @param {{includeLoad?: boolean, label?: string, providedWastedBytesByUrl?: Map<string, number>}=} options
+     * @param {{includeLoad?: boolean, providedWastedBytesByUrl?: Map<string, number>}=} options
      * @return {number}
      */
     static computeWasteWithTTIGraph(results: Array<LH.Audit.ByteEfficiencyItem>, graph: Node, simulator: Simulator, options?: {
         includeLoad?: boolean;
-        label?: string;
         providedWastedBytesByUrl?: Map<string, number>;
     } | undefined): number;
     /**
      * @param {ByteEfficiencyProduct} result
-     * @param {Node|null} graph
      * @param {Simulator} simulator
-     * @param {LH.Artifacts['GatherContext']} gatherContext
-     * @return {LH.Audit.Product}
+     * @param {LH.Artifacts.MetricComputationDataInput} metricComputationInput
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
      */
-    static createAuditProduct(result: ByteEfficiencyProduct, graph: Node | null, simulator: Simulator, gatherContext: LH.Artifacts['GatherContext']): LH.Audit.Product;
+    static createAuditProduct(result: ByteEfficiencyProduct, simulator: Simulator, metricComputationInput: LH.Artifacts.MetricComputationDataInput, context: LH.Audit.Context): Promise<LH.Audit.Product>;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords

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

@@ -10,6 +10,9 @@ import * as i18n from '../../lib/i18n/i18n.js';
 import {NetworkRecords} from '../../computed/network-records.js';
 import {LoadSimulator} from '../../computed/load-simulator.js';
 import {PageDependencyGraph} from '../../computed/page-dependency-graph.js';
+import {LanternLargestContentfulPaint} from '../../computed/metrics/lantern-largest-contentful-paint.js';
+import {LanternFirstContentfulPaint} from '../../computed/metrics/lantern-first-contentful-paint.js';
+import {LCPImageRecord} from '../../computed/lcp-image-record.js';
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, {});
 
@@ -104,9 +107,7 @@ class ByteEfficiencyAudit extends Audit {
    */
   static async audit(artifacts, context) {
     const gatherContext = artifacts.GatherContext;
-    const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const URL = artifacts.URL;
     const settings = context?.settings || {};
     const simulatorOptions = {
       devtoolsLog,
@@ -125,34 +126,29 @@ class ByteEfficiencyAudit extends Audit {
       };
     }
 
-    const [result, graph, simulator] = await Promise.all([
+    const metricComputationInput = Audit.makeMetricComputationDataInput(artifacts, context);
+
+    const [result, simulator] = await Promise.all([
       this.audit_(artifacts, networkRecords, context),
-      // Page dependency graph is only used in navigation mode.
-      gatherContext.gatherMode === 'navigation' ?
-        PageDependencyGraph.request({trace, devtoolsLog, URL}, context) :
-        null,
       LoadSimulator.request(simulatorOptions, context),
     ]);
 
-    return this.createAuditProduct(result, graph, simulator, gatherContext);
+    return this.createAuditProduct(result, simulator, metricComputationInput, context);
   }
 
   /**
-   * Computes the estimated effect of all the byte savings on the maximum of the following:
-   *
-   * - end time of the last long task in the provided graph
-   * - (if includeLoad is true or not provided) end time of the last node in the graph
+   * Computes the estimated effect of all the byte savings on the provided graph.
    *
    * @param {Array<LH.Audit.ByteEfficiencyItem>} results The array of byte savings results per resource
    * @param {Node} graph
    * @param {Simulator} simulator
-   * @param {{includeLoad?: boolean, label?: string, providedWastedBytesByUrl?: Map<string, number>}=} options
-   * @return {number}
+   * @param {{label?: string, providedWastedBytesByUrl?: Map<string, number>}=} options
+   * @return {{savings: number, simulationBeforeChanges: LH.Gatherer.Simulation.Result, simulationAfterChanges: LH.Gatherer.Simulation.Result}}
    */
-  static computeWasteWithTTIGraph(results, graph, simulator, options) {
-    options = Object.assign({includeLoad: true, label: this.meta.id}, options);
-    const beforeLabel = `${options.label}-before`;
-    const afterLabel = `${options.label}-after`;
+  static computeWasteWithGraph(results, graph, simulator, options) {
+    options = Object.assign({label: ''}, options);
+    const beforeLabel = `${this.meta.id}-${options.label}-before`;
+    const afterLabel = `${this.meta.id}-${options.label}-after`;
 
     const simulationBeforeChanges = simulator.simulate(graph, {label: beforeLabel});
 
@@ -187,7 +183,36 @@ class ByteEfficiencyAudit extends Audit {
       node.record.transferSize = originalTransferSize;
     });
 
-    const savingsOnOverallLoad = simulationBeforeChanges.timeInMs - simulationAfterChanges.timeInMs;
+    const savings = simulationBeforeChanges.timeInMs - simulationAfterChanges.timeInMs;
+
+    return {
+      // Round waste to nearest 10ms
+      savings: Math.round(Math.max(savings, 0) / 10) * 10,
+      simulationBeforeChanges,
+      simulationAfterChanges,
+    };
+  }
+
+  /**
+   * Computes the estimated effect of all the byte savings on the maximum of the following:
+   *
+   * - end time of the last long task in the provided graph
+   * - (if includeLoad is true or not provided) end time of the last node in the graph
+   *
+   * @param {Array<LH.Audit.ByteEfficiencyItem>} results The array of byte savings results per resource
+   * @param {Node} graph
+   * @param {Simulator} simulator
+   * @param {{includeLoad?: boolean, providedWastedBytesByUrl?: Map<string, number>}=} options
+   * @return {number}
+   */
+  static computeWasteWithTTIGraph(results, graph, simulator, options) {
+    options = Object.assign({includeLoad: true}, options);
+    const {savings: savingsOnOverallLoad, simulationBeforeChanges, simulationAfterChanges} =
+      this.computeWasteWithGraph(results, graph, simulator, {
+        ...options,
+        label: 'overallLoad',
+      });
+
     const savingsOnTTI =
       LanternInteractive.getLastLongTaskEndTime(simulationBeforeChanges.nodeTimings) -
       LanternInteractive.getLastLongTaskEndTime(simulationAfterChanges.nodeTimings);
@@ -201,24 +226,63 @@ class ByteEfficiencyAudit extends Audit {
 
   /**
    * @param {ByteEfficiencyProduct} result
-   * @param {Node|null} graph
    * @param {Simulator} simulator
-   * @param {LH.Artifacts['GatherContext']} gatherContext
-   * @return {LH.Audit.Product}
+   * @param {LH.Artifacts.MetricComputationDataInput} metricComputationInput
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static createAuditProduct(result, graph, simulator, gatherContext) {
+  static async createAuditProduct(result, simulator, metricComputationInput, context) {
     const results = result.items.sort((itemA, itemB) => itemB.wastedBytes - itemA.wastedBytes);
 
     const wastedBytes = results.reduce((sum, item) => sum + item.wastedBytes, 0);
 
+    /** @type {LH.Audit.MetricSavings} */
+    const metricSavings = {
+      FCP: 0,
+      LCP: 0,
+    };
+
     // `wastedMs` may be negative, if making the opportunity change could be detrimental.
     // This is useful information in the LHR and should be preserved.
     let wastedMs;
-    if (gatherContext.gatherMode === 'navigation') {
-      if (!graph) throw Error('Page dependency graph should always be computed in navigation mode');
+    if (metricComputationInput.gatherContext.gatherMode === 'navigation') {
+      const graph = await PageDependencyGraph.request(metricComputationInput, context);
+      const {
+        pessimisticGraph: pessimisticFCPGraph,
+      } = await LanternFirstContentfulPaint.request(metricComputationInput, context);
+      const {
+        pessimisticGraph: pessimisticLCPGraph,
+      } = await LanternLargestContentfulPaint.request(metricComputationInput, context);
+
       wastedMs = this.computeWasteWithTTIGraph(results, graph, simulator, {
         providedWastedBytesByUrl: result.wastedBytesByUrl,
       });
+
+      const {savings: fcpSavings} = this.computeWasteWithGraph(
+        results,
+        pessimisticFCPGraph,
+        simulator,
+        {providedWastedBytesByUrl: result.wastedBytesByUrl, label: 'fcp'}
+      );
+      const {savings: lcpGraphSavings} = this.computeWasteWithGraph(
+        results,
+        pessimisticLCPGraph,
+        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);
+      if (lcpRecord) {
+        const lcpResult = results.find(result => result.url === lcpRecord.url);
+        if (lcpResult) {
+          lcpRecordSavings = simulator.computeWastedMsFromWastedBytes(lcpResult.wastedBytes);
+        }
+      }
+
+      metricSavings.FCP = fcpSavings;
+      metricSavings.LCP = Math.max(lcpGraphSavings, lcpRecordSavings);
     } else {
       wastedMs = simulator.computeWastedMsFromWastedBytes(wastedBytes);
     }
@@ -232,6 +296,13 @@ class ByteEfficiencyAudit extends Audit {
     const details = Audit.makeOpportunityDetails(result.headings, results,
       {overallSavingsMs: wastedMs, overallSavingsBytes: wastedBytes, sortedBy});
 
+    // TODO: Remove from debug data once `metricSavings` is added to the LHR.
+    // For now, add it to debug data for visibility.
+    details.debugData = {
+      type: 'debugdata',
+      metricSavings,
+    };
+
     return {
       explanation: result.explanation,
       warnings: result.warnings,
@@ -240,6 +311,7 @@ class ByteEfficiencyAudit extends Audit {
       numericUnit: 'millisecond',
       score: ByteEfficiencyAudit.scoreForWastedMs(wastedMs),
       details,
+      metricSavings,
     };
   }
 

package/core/audits/unsized-images.js

@@ -154,6 +154,9 @@ class UnsizedImages extends Audit {
       score: unsizedImages.length > 0 ? 0 : 1,
       notApplicable: images.length === 0,
       details: Audit.makeTableDetails(headings, unsizedImages),
+      metricSavings: {
+        CLS: 0,
+      },
     };
   }
 }

package/core/computed/metrics/tbt-utils.d.ts

@@ -15,4 +15,30 @@ export function calculateSumOfBlockingTime(topLevelEvents: Array<{
     end: number;
     duration: number;
 }>, startTimeMs: number, endTimeMs: number): number;
+/**
+ * For TBT, We only want to consider tasks that fall in our time range
+ * - FCP and TTI for navigation mode
+ * - Trace start and trace end for timespan mode
+ *
+ * FCP is picked as `startTimeMs` because there is little risk of user input happening
+ * before FCP so Long Queuing Qelay regions do not harm user experience. Developers should be
+ * optimizing to reach FCP as fast as possible without having to worry about task lengths.
+ *
+ * TTI is picked as `endTimeMs` because we want a well defined end point for page load.
+ *
+ * @param {{start: number, end: number, duration: number}} event
+ * @param {number} startTimeMs Should be FCP in navigation mode and the trace start time in timespan mode
+ * @param {number} endTimeMs Should be TTI in navigation mode and the trace end time in timespan mode
+ * @param {{start: number, end: number, duration: number}} [topLevelEvent] Leave unset if `event` is top level. Has no effect if `event` has the same duration as `topLevelEvent`.
+ * @return {number}
+ */
+export function calculateTbtImpactForEvent(event: {
+    start: number;
+    end: number;
+    duration: number;
+}, startTimeMs: number, endTimeMs: number, topLevelEvent?: {
+    start: number;
+    end: number;
+    duration: number;
+} | undefined): number;
 //# sourceMappingURL=tbt-utils.d.ts.map

package/core/computed/metrics/tbt-utils.js

@@ -6,6 +6,52 @@
 
 const BLOCKING_TIME_THRESHOLD = 50;
 
+/**
+ * For TBT, We only want to consider tasks that fall in our time range
+ * - FCP and TTI for navigation mode
+ * - Trace start and trace end for timespan mode
+ *
+ * FCP is picked as `startTimeMs` because there is little risk of user input happening
+ * before FCP so Long Queuing Qelay regions do not harm user experience. Developers should be
+ * optimizing to reach FCP as fast as possible without having to worry about task lengths.
+ *
+ * TTI is picked as `endTimeMs` because we want a well defined end point for page load.
+ *
+ * @param {{start: number, end: number, duration: number}} event
+ * @param {number} startTimeMs Should be FCP in navigation mode and the trace start time in timespan mode
+ * @param {number} endTimeMs Should be TTI in navigation mode and the trace end time in timespan mode
+ * @param {{start: number, end: number, duration: number}} [topLevelEvent] Leave unset if `event` is top level. Has no effect if `event` has the same duration as `topLevelEvent`.
+ * @return {number}
+ */
+function calculateTbtImpactForEvent(event, startTimeMs, endTimeMs, topLevelEvent) {
+  let threshold = BLOCKING_TIME_THRESHOLD;
+
+  // If a task is not top level, it doesn't make sense to subtract the entire 50ms
+  // blocking threshold from the event.
+  //
+  // e.g. A 80ms top level task with two 40ms children should attribute some blocking
+  // time to the 40ms tasks even though they do not meet the 50ms threshold.
+  //
+  // The solution is to scale the threshold for child events to be considered blocking.
+  if (topLevelEvent) threshold *= (event.duration / topLevelEvent.duration);
+
+  if (event.duration < threshold) return 0;
+  if (event.end < startTimeMs) return 0;
+  if (event.start > endTimeMs) return 0;
+
+  // Perform the clipping and then calculate Blocking Region. So if we have a 150ms task
+  // [0, 150] and `startTimeMs` is at 50ms, we first clip the task to [50, 150], and then
+  // calculate the Blocking Region to be [100, 150]. The rational here is that tasks before
+  // the start time are unimportant, so we care whether the main thread is busy more than
+  // 50ms at a time only after the start time.
+  const clippedStart = Math.max(event.start, startTimeMs);
+  const clippedEnd = Math.min(event.end, endTimeMs);
+  const clippedDuration = clippedEnd - clippedStart;
+  if (clippedDuration < threshold) return 0;
+
+  return clippedDuration - threshold;
+}
+
 /**
  * @param {Array<{start: number, end: number, duration: number}>} topLevelEvents
  * @param {number} startTimeMs
@@ -15,36 +61,9 @@ const BLOCKING_TIME_THRESHOLD = 50;
 function calculateSumOfBlockingTime(topLevelEvents, startTimeMs, endTimeMs) {
   if (endTimeMs <= startTimeMs) return 0;
 
-  const threshold = BLOCKING_TIME_THRESHOLD;
   let sumBlockingTime = 0;
   for (const event of topLevelEvents) {
-    // Early exit for small tasks, which should far outnumber long tasks.
-    if (event.duration < threshold) continue;
-
-    // We only want to consider tasks that fall in our time range (FCP and TTI for navigations).
-    // FCP is picked as the lower bound because there is little risk of user input happening
-    // before FCP so Long Queuing Qelay regions do not harm user experience. Developers should be
-    // optimizing to reach FCP as fast as possible without having to worry about task lengths.
-    if (event.end < startTimeMs) continue;
-
-    // TTI is picked as the upper bound because we want a well defined end point for page load.
-    if (event.start > endTimeMs) continue;
-
-    // We first perform the clipping, and then calculate Blocking Region. So if we have a 150ms
-    // task [0, 150] and FCP happens midway at 50ms, we first clip the task to [50, 150], and then
-    // calculate the Blocking Region to be [100, 150]. The rational here is that tasks before FCP
-    // are unimportant, so we care whether the main thread is busy more than 50ms at a time only
-    // after FCP.
-    const clippedStart = Math.max(event.start, startTimeMs);
-    const clippedEnd = Math.min(event.end, endTimeMs);
-    const clippedDuration = clippedEnd - clippedStart;
-    if (clippedDuration < threshold) continue;
-
-    // The duration of the task beyond 50ms at the beginning is considered the Blocking Region.
-    // Example:
-    //   [              250ms Task                   ]
-    //   | First 50ms |   Blocking Region (200ms)    |
-    sumBlockingTime += clippedDuration - threshold;
+    sumBlockingTime += calculateTbtImpactForEvent(event, startTimeMs, endTimeMs);
   }
 
   return sumBlockingTime;
@@ -53,4 +72,5 @@ function calculateSumOfBlockingTime(topLevelEvents, startTimeMs, endTimeMs) {
 export {
   BLOCKING_TIME_THRESHOLD,
   calculateSumOfBlockingTime,
+  calculateTbtImpactForEvent,
 };

package/core/computed/metrics/total-blocking-time.js

@@ -60,7 +60,7 @@ class TotalBlockingTime extends ComputedMetric {
         timing: calculateSumOfBlockingTime(
           events,
           0,
-          data.processedTrace.timestamps.traceEnd
+          data.processedTrace.timings.traceEnd
         ),
       };
     }

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

@@ -0,0 +1,54 @@
+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[]>;
+};
+/** @typedef {LH.Artifacts.TaskNode & {tbtImpact: number, selfTbtImpact: number}} TBTImpactTask */
+declare class TBTImpactTasks {
+    /**
+     * @param {LH.Artifacts.TaskNode} task
+     * @return {LH.Artifacts.TaskNode}
+     */
+    static getTopLevelTask(task: LH.Artifacts.TaskNode): LH.Artifacts.TaskNode;
+    /**
+     * @param {LH.Artifacts.MetricComputationDataInput} metricComputationData
+     * @param {LH.Artifacts.ComputedContext} context
+     * @return {Promise<{startTimeMs: number, endTimeMs: number}>}
+     */
+    static getTbtBounds(metricComputationData: LH.Artifacts.MetricComputationDataInput, context: LH.Artifacts.ComputedContext): Promise<{
+        startTimeMs: number;
+        endTimeMs: number;
+    }>;
+    /**
+     * @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[];
+    /**
+     * @param {LH.Artifacts.TaskNode[]} tasks
+     * @param {number} startTimeMs
+     * @param {number} endTimeMs
+     * @return {TBTImpactTask[]}
+     */
+    static computeImpactsFromObservedTasks(tasks: LH.Artifacts.TaskNode[], startTimeMs: number, endTimeMs: number): TBTImpactTask[];
+    /**
+     * @param {LH.Artifacts.TaskNode[]} tasks
+     * @param {LH.Gatherer.Simulation.Result['nodeTimings']} tbtNodeTimings
+     * @param {number} startTimeMs
+     * @param {number} endTimeMs
+     * @return {TBTImpactTask[]}
+     */
+    static computeImpactsFromLantern(tasks: LH.Artifacts.TaskNode[], tbtNodeTimings: LH.Gatherer.Simulation.Result['nodeTimings'], startTimeMs: number, endTimeMs: number): TBTImpactTask[];
+    /**
+     * @param {LH.Artifacts.MetricComputationDataInput} metricComputationData
+     * @param {LH.Artifacts.ComputedContext} context
+     * @return {Promise<TBTImpactTask[]>}
+     */
+    static compute_(metricComputationData: LH.Artifacts.MetricComputationDataInput, context: LH.Artifacts.ComputedContext): Promise<TBTImpactTask[]>;
+}
+//# sourceMappingURL=tbt-impact-tasks.d.ts.map

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

@@ -0,0 +1,221 @@
+/**
+ * @license Copyright 2023 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {makeComputedArtifact} from './computed-artifact.js';
+import {MainThreadTasks} from './main-thread-tasks.js';
+import {FirstContentfulPaint} from './metrics/first-contentful-paint.js';
+import {Interactive} from './metrics/interactive.js';
+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
+   * @return {LH.Artifacts.TaskNode}
+   */
+  static getTopLevelTask(task) {
+    let topLevelTask = task;
+    while (topLevelTask.parent) {
+      topLevelTask = topLevelTask.parent;
+    }
+    return topLevelTask;
+  }
+
+  /**
+   * @param {LH.Artifacts.MetricComputationDataInput} metricComputationData
+   * @param {LH.Artifacts.ComputedContext} context
+   * @return {Promise<{startTimeMs: number, endTimeMs: number}>}
+   */
+  static async getTbtBounds(metricComputationData, context) {
+    const processedTrace = await ProcessedTrace.request(metricComputationData.trace, context);
+    if (metricComputationData.gatherContext.gatherMode !== 'navigation') {
+      return {
+        startTimeMs: 0,
+        endTimeMs: processedTrace.timings.traceEnd,
+      };
+    }
+
+    const fcpResult = await FirstContentfulPaint.request(metricComputationData, context);
+    const ttiResult = await Interactive.request(metricComputationData, context);
+
+    let startTimeMs = fcpResult.timing;
+    let endTimeMs = ttiResult.timing;
+
+    // When using lantern, we want to get a pessimistic view of the long tasks.
+    // This means we assume the earliest possible start time and latest possible end time.
+
+    if ('optimisticEstimate' in fcpResult) {
+      startTimeMs = fcpResult.optimisticEstimate.timeInMs;
+    }
+
+    if ('pessimisticEstimate' in ttiResult) {
+      endTimeMs = ttiResult.pessimisticEstimate.timeInMs;
+    }
+
+    return {startTimeMs, endTimeMs};
+  }
+
+  /**
+   * @param {LH.Artifacts.TaskNode[]} tasks
+   * @param {Map<LH.Artifacts.TaskNode, number>} taskToImpact
+   */
+  static createImpactTasks(tasks, taskToImpact) {
+    /** @type {TBTImpactTask[]} */
+    const tbtImpactTasks = [];
+
+    for (const task of tasks) {
+      const tbtImpact = taskToImpact.get(task) || 0;
+      let selfTbtImpact = tbtImpact;
+
+      for (const child of task.children) {
+        const childTbtImpact = taskToImpact.get(child) || 0;
+        selfTbtImpact -= childTbtImpact;
+      }
+
+      tbtImpactTasks.push({
+        ...task,
+        tbtImpact,
+        selfTbtImpact,
+      });
+    }
+
+    return tbtImpactTasks;
+  }
+
+  /**
+   * @param {LH.Artifacts.TaskNode[]} tasks
+   * @param {number} startTimeMs
+   * @param {number} endTimeMs
+   * @return {TBTImpactTask[]}
+   */
+  static computeImpactsFromObservedTasks(tasks, startTimeMs, endTimeMs) {
+    /** @type {Map<LH.Artifacts.TaskNode, number>} */
+    const taskToImpact = new Map();
+
+    for (const task of tasks) {
+      const event = {
+        start: task.startTime,
+        end: task.endTime,
+        duration: task.duration,
+      };
+
+      const topLevelTask = this.getTopLevelTask(task);
+      const topLevelEvent = {
+        start: topLevelTask.startTime,
+        end: topLevelTask.endTime,
+        duration: topLevelTask.duration,
+      };
+
+      const tbtImpact = calculateTbtImpactForEvent(event, startTimeMs, endTimeMs, topLevelEvent);
+
+      taskToImpact.set(task, tbtImpact);
+    }
+
+    return this.createImpactTasks(tasks, taskToImpact);
+  }
+
+  /**
+   * @param {LH.Artifacts.TaskNode[]} tasks
+   * @param {LH.Gatherer.Simulation.Result['nodeTimings']} tbtNodeTimings
+   * @param {number} startTimeMs
+   * @param {number} endTimeMs
+   * @return {TBTImpactTask[]}
+   */
+  static computeImpactsFromLantern(tasks, tbtNodeTimings, startTimeMs, endTimeMs) {
+    /** @type {Map<LH.Artifacts.TaskNode, number>} */
+    const taskToImpact = new Map();
+
+    /** @type {Map<LH.Artifacts.TaskNode, {start: number, end: number, duration: number}>} */
+    const topLevelTaskToEvent = new Map();
+
+    /** @type {Map<LH.TraceEvent, LH.Artifacts.TaskNode>} */
+    const traceEventToTask = new Map();
+    for (const task of tasks) {
+      traceEventToTask.set(task.event, task);
+    }
+
+    // Use lantern TBT timings to calculate the TBT impact of top level tasks.
+    for (const [node, timing] of tbtNodeTimings) {
+      if (node.type !== 'cpu') continue;
+
+      const event = {
+        start: timing.startTime,
+        end: timing.endTime,
+        duration: timing.duration,
+      };
+
+      const tbtImpact = calculateTbtImpactForEvent(event, startTimeMs, endTimeMs);
+
+      const task = traceEventToTask.get(node.event);
+      if (!task) continue;
+
+      topLevelTaskToEvent.set(task, event);
+      taskToImpact.set(task, tbtImpact);
+    }
+
+    // Interpolate the TBT impact of remaining tasks using the top level ancestor tasks.
+    // We don't have any lantern estimates for tasks that are not top level, so we need to estimate
+    // the lantern timing based on the task's observed timing relative to it's top level task's observed timing.
+    for (const task of tasks) {
+      if (taskToImpact.has(task)) continue;
+
+      const topLevelTask = this.getTopLevelTask(task);
+
+      const topLevelEvent = topLevelTaskToEvent.get(topLevelTask);
+      if (!topLevelEvent) continue;
+
+      const startRatio = (task.startTime - topLevelTask.startTime) / topLevelTask.duration;
+      const start = startRatio * topLevelEvent.duration + topLevelEvent.start;
+
+      const endRatio = (topLevelTask.endTime - task.endTime) / topLevelTask.duration;
+      const end = topLevelEvent.end - endRatio * topLevelEvent.duration;
+
+      const event = {
+        start,
+        end,
+        duration: end - start,
+      };
+
+      const tbtImpact = calculateTbtImpactForEvent(event, startTimeMs, endTimeMs, topLevelEvent);
+
+      taskToImpact.set(task, tbtImpact);
+    }
+
+    return this.createImpactTasks(tasks, taskToImpact);
+  }
+
+  /**
+   * @param {LH.Artifacts.MetricComputationDataInput} metricComputationData
+   * @param {LH.Artifacts.ComputedContext} context
+   * @return {Promise<TBTImpactTask[]>}
+   */
+  static async compute_(metricComputationData, context) {
+    const tbtResult = await TotalBlockingTime.request(metricComputationData, context);
+    const tasks = await MainThreadTasks.request(metricComputationData.trace, context);
+
+    const {startTimeMs, endTimeMs} = await this.getTbtBounds(metricComputationData, context);
+
+    if ('pessimisticEstimate' in tbtResult) {
+      return this.computeImpactsFromLantern(
+        tasks,
+        tbtResult.pessimisticEstimate.nodeTimings,
+        startTimeMs,
+        endTimeMs
+      );
+    }
+
+    return this.computeImpactsFromObservedTasks(tasks, startTimeMs, endTimeMs);
+  }
+}
+
+const TBTImpactTasksComputed = makeComputedArtifact(
+  TBTImpactTasks,
+  ['trace', 'devtoolsLog', 'URL', 'gatherContext', 'settings', 'simulator']
+);
+export {TBTImpactTasksComputed as TBTImpactTasks};

package/core/lib/dependency-graph/simulator/simulator.js

@@ -517,7 +517,9 @@ class Simulator {
 
     const wastedBits = wastedBytes * 8;
     const wastedMs = wastedBits / bitsPerSecond * 1000;
-    return wastedMs;
+
+    // This is an estimate of wasted time, so we won't be more precise than 10ms.
+    return Math.round(wastedMs / 10) * 10;
   }
 
   /** @return {Map<string, Map<Node, CompleteNodeTiming>>} */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "10.3.0-dev.20230703",
+  "version": "10.3.0-dev.20230705",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {

package/tsconfig.json

@@ -41,7 +41,6 @@
     "core/test/config/config-plugin-test.js",
     "core/test/legacy/config/config-test.js",
     "core/test/config/default-config-test.js",
-    "core/test/create-test-trace.js",
     "core/test/gather/driver/wait-for-condition-test.js",
     "core/test/gather/gatherers/accessibility-test.js",
     "core/test/gather/gatherers/cache-contents-test.js",
@@ -107,6 +106,7 @@
     "core/test/audits/bf-cache-test.js",
     "core/test/audits/script-treemap-data-test.js",
     "core/test/computed/metrics/interactive-test.js",
+    "core/test/computed/tbt-impact-tasks-test.js",
     "core/test/fixtures/config-plugins/lighthouse-plugin-simple/plugin-simple.js",
   ],
 }

package/types/artifacts.d.ts

@@ -989,7 +989,11 @@ export interface TraceEvent {
     };
     data?: {
       frame?: string;
+      parent?: string;
       frameID?: string;
+      frameTreeNodeId?: number;
+      isMainFrame?: boolean;
+      persistentIds?: boolean,
       processId?: number;
       isLoadingMainFrame?: boolean;
       documentLoaderURL?: string;
@@ -999,6 +1003,7 @@ export interface TraceEvent {
         url: string;
         parent?: string;
         processId?: number;
+        name?: string;
       }[];
       page?: string;
       readyState?: number;
@@ -1035,6 +1040,8 @@ export interface TraceEvent {
       interactionType?: 'drag'|'keyboard'|'tapOrClick';
       maxDuration?: number;
       type?: string;
+      functionName?: string;
+      name?: string;
     };
     frame?: string;
     name?: string;