lighthouse 10.3.0 → 10.4.0

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/long-tasks.d.ts

@@ -1,5 +1,53 @@
 export default LongTasks;
+export type TaskGroupIds = import('../lib/tracehouse/task-groups.js').TaskGroupIds;
+export type Timing = {
+    startTime: number;
+    duration: number;
+};
+export type DebugTask = Timing & {
+    [p: string]: number;
+    urlIndex: number;
+};
+/** @typedef {import('../lib/tracehouse/task-groups.js').TaskGroupIds} TaskGroupIds */
+/** @typedef {{startTime: number, duration: number}} Timing */
+/** @typedef {Timing & {urlIndex: number, [p: string]: number}} DebugTask */
 declare class LongTasks extends Audit {
+    /**
+     * Returns the timing information for the given task, recursively walking the
+     * task's children and adding up time spent in each type of task activity.
+     * If `taskTimingsByEvent` is present, it will be used for task timing instead
+     * of the timings on the tasks themselves.
+     * If `timeByTaskGroup` is not provided, a new Map will be populated with
+     * timing breakdown; if one is provided, timing breakdown will be added to the
+     * existing breakdown.
+     *
+     * TODO: when simulated, a significant number of child tasks are dropped, so
+     * most time will be attributed to 'other' (the category of the top-level
+     * RunTask). See pruning in `PageDependencyGraph.linkCPUNodes`.
+     * @param {LH.Artifacts.TaskNode} task
+     * @param {Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming>|undefined} taskTimingsByEvent
+     * @param {Map<TaskGroupIds, number>} [timeByTaskGroup]
+     * @return {{startTime: number, duration: number, timeByTaskGroup: Map<TaskGroupIds, number>}}
+     */
+    static getTimingBreakdown(task: LH.Artifacts.TaskNode, taskTimingsByEvent: Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming> | undefined, timeByTaskGroup?: Map<import("../lib/tracehouse/task-groups.js").TaskGroupIds, number> | undefined): {
+        startTime: number;
+        duration: number;
+        timeByTaskGroup: Map<TaskGroupIds, number>;
+    };
+    /**
+     * @param {Array<LH.Artifacts.TaskNode>} longTasks
+     * @param {Set<string>} jsUrls
+     * @param {Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming>|undefined} taskTimingsByEvent
+     * @return {LH.Audit.Details.DebugData}
+     */
+    static makeDebugData(longTasks: Array<LH.Artifacts.TaskNode>, jsUrls: Set<string>, taskTimingsByEvent: Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming> | undefined): LH.Audit.Details.DebugData;
+    /**
+     * Get timing from task, overridden by taskTimingsByEvent if provided.
+     * @param {LH.Artifacts.TaskNode} task
+     * @param {Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming>|undefined} taskTimingsByEvent
+     * @return {Timing}
+     */
+    static getTiming(task: LH.Artifacts.TaskNode, taskTimingsByEvent: Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming> | undefined): Timing;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context

package/core/audits/long-tasks.js

@@ -14,6 +14,7 @@ import {getJavaScriptURLs, getAttributableURLForTask} from '../lib/tracehouse/ta
 
 /** We don't always have timing data for short tasks, if we're missing timing data. Treat it as though it were 0ms. */
 const DEFAULT_TIMING = {startTime: 0, endTime: 0, duration: 0};
+const DISPLAYED_TASK_COUNT = 20;
 
 const UIStrings = {
   /** Title of a diagnostic LH audit that provides details on the longest running tasks that occur when the page loads. */
@@ -31,6 +32,30 @@ const UIStrings = {
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
 
+/**
+ * Insert `url` into `urls` array if not already present. Returns
+ * the index of `url` in `urls` for later lookup.
+ * @param {Array<string>} urls
+ * @param {string} url
+ */
+function insertUrl(urls, url) {
+  const index = urls.indexOf(url);
+  if (index > -1) return index;
+  return urls.push(url) - 1;
+}
+
+/**
+ * @param {number} value
+ * @return {number}
+ */
+function roundTenths(value) {
+  return Math.round(value * 10) / 10;
+}
+
+/** @typedef {import('../lib/tracehouse/task-groups.js').TaskGroupIds} TaskGroupIds */
+/** @typedef {{startTime: number, duration: number}} Timing */
+/** @typedef {Timing & {urlIndex: number, [p: string]: number}} DebugTask */
+
 class LongTasks extends Audit {
   /**
    * @return {LH.Audit.Meta}
@@ -45,6 +70,102 @@ class LongTasks extends Audit {
     };
   }
 
+  /**
+   * Returns the timing information for the given task, recursively walking the
+   * task's children and adding up time spent in each type of task activity.
+   * If `taskTimingsByEvent` is present, it will be used for task timing instead
+   * of the timings on the tasks themselves.
+   * If `timeByTaskGroup` is not provided, a new Map will be populated with
+   * timing breakdown; if one is provided, timing breakdown will be added to the
+   * existing breakdown.
+   *
+   * TODO: when simulated, a significant number of child tasks are dropped, so
+   * most time will be attributed to 'other' (the category of the top-level
+   * RunTask). See pruning in `PageDependencyGraph.linkCPUNodes`.
+   * @param {LH.Artifacts.TaskNode} task
+   * @param {Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming>|undefined} taskTimingsByEvent
+   * @param {Map<TaskGroupIds, number>} [timeByTaskGroup]
+   * @return {{startTime: number, duration: number, timeByTaskGroup: Map<TaskGroupIds, number>}}
+   */
+  static getTimingBreakdown(task, taskTimingsByEvent, timeByTaskGroup = new Map()) {
+    const taskTiming = LongTasks.getTiming(task, taskTimingsByEvent);
+
+    // Add up child time, while recursively stepping in to accumulate group times.
+    let childrenTime = 0;
+    if (taskTiming.duration > 0) {
+      for (const child of task.children) {
+        const {duration} = LongTasks.getTimingBreakdown(child, taskTimingsByEvent, timeByTaskGroup);
+        childrenTime += duration;
+      }
+    }
+
+    // Add this task's selfTime to its group's total time.
+    const selfTime = taskTiming.duration - childrenTime;
+    const taskGroupTime = timeByTaskGroup.get(task.group.id) || 0;
+    timeByTaskGroup.set(task.group.id, taskGroupTime + selfTime);
+
+    return {
+      startTime: taskTiming.startTime,
+      duration: taskTiming.duration,
+      timeByTaskGroup,
+    };
+  }
+
+  /**
+   * @param {Array<LH.Artifacts.TaskNode>} longTasks
+   * @param {Set<string>} jsUrls
+   * @param {Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming>|undefined} taskTimingsByEvent
+   * @return {LH.Audit.Details.DebugData}
+   */
+  static makeDebugData(longTasks, jsUrls, taskTimingsByEvent) {
+    /** @type {Array<string>} */
+    const urls = [];
+    /** @type {Array<DebugTask>} */
+    const tasks = [];
+
+    for (const longTask of longTasks) {
+      const attributableUrl = getAttributableURLForTask(longTask, jsUrls);
+
+      const {startTime, duration, timeByTaskGroup} =
+          LongTasks.getTimingBreakdown(longTask, taskTimingsByEvent);
+
+      // Round time per group and sort entries so order is consistent.
+      const timeByTaskGroupEntries = [...timeByTaskGroup]
+        .map(/** @return {[TaskGroupIds, number]} */ ([group, time]) => [group, roundTenths(time)])
+        .sort((a, b) => a[0].localeCompare(b[0]));
+
+      tasks.push({
+        urlIndex: insertUrl(urls, attributableUrl),
+        startTime: roundTenths(startTime),
+        duration: roundTenths(duration),
+        ...Object.fromEntries(timeByTaskGroupEntries),
+      });
+    }
+
+    return {
+      type: 'debugdata',
+      urls,
+      tasks,
+    };
+  }
+
+  /**
+   * Get timing from task, overridden by taskTimingsByEvent if provided.
+   * @param {LH.Artifacts.TaskNode} task
+   * @param {Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming>|undefined} taskTimingsByEvent
+   * @return {Timing}
+   */
+  static getTiming(task, taskTimingsByEvent) {
+    /** @type {Timing} */
+    let timing = task;
+    if (taskTimingsByEvent) {
+      timing = taskTimingsByEvent.get(task.event) || DEFAULT_TIMING;
+    }
+
+    const {duration, startTime} = timing;
+    return {duration, startTime};
+  }
+
   /**
    * @param {LH.Artifacts} artifacts
    * @param {LH.Audit.Context} context
@@ -58,10 +179,12 @@ class LongTasks extends Audit {
     const devtoolsLog = artifacts.devtoolsLogs[LongTasks.DEFAULT_PASS];
     const networkRecords = await NetworkRecords.request(devtoolsLog, context);
 
-    /** @type {Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming>} */
-    const taskTimingsByEvent = new Map();
+    /** @type {Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming>|undefined} */
+    let taskTimingsByEvent;
 
     if (settings.throttlingMethod === 'simulate') {
+      taskTimingsByEvent = new Map();
+
       const simulatorOptions = {devtoolsLog, settings: context.settings};
       const pageGraph = await PageDependencyGraph.request({trace, devtoolsLog, URL}, context);
       const simulator = await LoadSimulator.request(simulatorOptions, context);
@@ -70,30 +193,32 @@ class LongTasks extends Audit {
         if (node.type !== 'cpu') continue;
         taskTimingsByEvent.set(node.event, timing);
       }
-    } else {
-      for (const task of tasks) {
-        if (task.unbounded || task.parent) continue;
-        taskTimingsByEvent.set(task.event, task);
-      }
     }
 
     const jsURLs = getJavaScriptURLs(networkRecords);
-    // Only consider up to 20 long, top-level (no parent) tasks that have an explicit endTime
-    const longtasks = tasks
-      .map(t => {
-        const timing = taskTimingsByEvent.get(t.event) || DEFAULT_TIMING;
-        return {...t, duration: timing.duration, startTime: timing.startTime};
+
+    // Only consider top-level (no parent) long tasks that have an explicit endTime.
+    const longTasks = tasks
+      .map(task => {
+        // Use duration from simulation, if available.
+        const {duration} = LongTasks.getTiming(task, taskTimingsByEvent);
+        return {task, duration};
+      })
+      .filter(({task, duration}) => {
+        return duration >= 50 && !task.unbounded && !task.parent;
       })
-      .filter(t => t.duration >= 50 && !t.unbounded && !t.parent)
       .sort((a, b) => b.duration - a.duration)
-      .slice(0, 20);
+      .map(({task}) => task);
 
     // TODO(beytoven): Add start time that matches with the simulated throttling
-    const results = longtasks.map(task => ({
-      url: getAttributableURLForTask(task, jsURLs),
-      duration: task.duration,
-      startTime: task.startTime,
-    }));
+    const results = longTasks.map(task => {
+      const timing = LongTasks.getTiming(task, taskTimingsByEvent);
+      return {
+        url: getAttributableURLForTask(task, jsURLs),
+        duration: timing.duration,
+        startTime: timing.startTime,
+      };
+    }).slice(0, DISPLAYED_TASK_COUNT);
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
@@ -107,6 +232,8 @@ class LongTasks extends Audit {
     const tableDetails = Audit.makeTableDetails(headings, results,
       {sortedBy: ['duration'], skipSumming: ['startTime']});
 
+    tableDetails.debugData = LongTasks.makeDebugData(longTasks, jsURLs, taskTimingsByEvent);
+
     let displayValue;
     if (results.length > 0) {
       displayValue = str_(UIStrings.displayValue, {itemCount: results.length});

package/core/audits/non-composited-animations.js

@@ -125,6 +125,7 @@ class NonCompositedAnimations extends Audit {
       return {
         score: 1,
         notApplicable: true,
+        metricSavings: {CLS: 0},
       };
     }
 
@@ -195,6 +196,12 @@ class NonCompositedAnimations extends Audit {
     return {
       score: results.length === 0 ? 1 : 0,
       notApplicable: results.length === 0,
+      metricSavings: {
+        // We do not have enough information to accurately predict the impact of individual animations on CLS.
+        // It is also not worth the effort since only a small percentage of sites have their CLS affected by non-composited animations.
+        // https://github.com/GoogleChrome/lighthouse/pull/15099#issuecomment-1558107906
+        CLS: 0,
+      },
       details,
       displayValue,
     };

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

@@ -244,7 +244,7 @@ class PrioritizeLcpImage extends Audit {
       .find(element => element.traceEventType === 'largest-contentful-paint');
 
     if (!lcpElement || lcpElement.type !== 'image') {
-      return {score: null, notApplicable: true};
+      return {score: null, notApplicable: true, metricSavings: {LCP: 0}};
     }
 
     const mainResource = await MainResource.request({devtoolsLog, URL}, context);
@@ -286,6 +286,7 @@ class PrioritizeLcpImage extends Audit {
       numericUnit: 'millisecond',
       displayValue: wastedMs ? str_(i18n.UIStrings.displayValueMsSavings, {wastedMs}) : '',
       details,
+      metricSavings: {LCP: wastedMs},
     };
   }
 }

package/core/audits/redirects.js

@@ -154,6 +154,10 @@ class Redirects extends Audit {
         str_(i18n.UIStrings.displayValueMsSavings, {wastedMs: totalWastedMs}) :
         '',
       details,
+      metricSavings: {
+        LCP: totalWastedMs,
+        FCP: totalWastedMs,
+      },
     };
   }
 }

package/core/audits/seo/link-text.js

@@ -74,6 +74,16 @@ const BLOCKLIST = new Set([
   'mer',
   'mer info',
   'mer information',
+  // Tamil
+  'அடுத்த பக்கம்',
+  'மறுபக்கம்',
+  'முந்தைய பக்கம்',
+  'முன்பக்கம்',
+  'மேலும் அறிக',
+  'மேலும் தகவலுக்கு',
+  'மேலும் தரவுகளுக்கு',
+  'தயவுசெய்து இங்கே அழுத்தவும்',
+  'இங்கே கிளிக் செய்யவும்',
 ]);
 
 const UIStrings = {

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/audits/viewport.js

@@ -46,15 +46,26 @@ class Viewport extends Audit {
   static async audit(artifacts, context) {
     const viewportMeta = await ViewportMeta.request(artifacts.MetaElements, context);
 
+    let inpSavings = 300;
     if (!viewportMeta.hasViewportTag) {
       return {
         score: 0,
         explanation: str_(UIStrings.explanationNoTag),
+        metricSavings: {
+          INP: inpSavings,
+        },
       };
     }
 
+    if (viewportMeta.isMobileOptimized) {
+      inpSavings = 0;
+    }
+
     return {
       score: Number(viewportMeta.isMobileOptimized),
+      metricSavings: {
+        INP: inpSavings,
+      },
       warnings: viewportMeta.parserWarnings,
     };
   }

package/core/audits/work-during-interaction.js

@@ -224,7 +224,11 @@ class WorkDuringInteraction extends Audit {
     const {settings} = context;
     // TODO: responsiveness isn't yet supported by lantern.
     if (settings.throttlingMethod === 'simulate') {
-      return {score: null, notApplicable: true};
+      return {
+        score: null,
+        notApplicable: true,
+        metricSavings: {INP: 0},
+      };
     }
 
     const trace = artifacts.traces[WorkDuringInteraction.DEFAULT_PASS];
@@ -232,7 +236,11 @@ class WorkDuringInteraction extends Audit {
     const interactionEvent = await Responsiveness.request(metricData, context);
     // If no interaction, diagnostic audit is n/a.
     if (interactionEvent === null) {
-      return {score: null, notApplicable: true};
+      return {
+        score: null,
+        notApplicable: true,
+        metricSavings: {INP: 0},
+      };
     }
     // TODO: remove workaround once 103.0.5052.0 is sufficiently released.
     if (interactionEvent.name === 'FallbackTiming') {
@@ -271,6 +279,9 @@ class WorkDuringInteraction extends Audit {
         type: 'list',
         items: auditDetailsItems,
       },
+      metricSavings: {
+        INP: duration,
+      },
     };
   }
 }

package/core/computed/js-bundles.js

@@ -99,7 +99,7 @@ class JSBundles {
 
       const compiledUrl = SourceMap.scriptUrl || 'compiled.js';
       const mapUrl = SourceMap.sourceMapUrl || 'compiled.js.map';
-      const map = new SDK.TextSourceMap(compiledUrl, mapUrl, rawMap);
+      const map = new SDK.SourceMap(compiledUrl, mapUrl, rawMap);
 
       const sizes = computeGeneratedFileSizes(map, script.length || 0, script.content || '');
 

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