lighthouse 10.3.0 → 10.4.0-dev.20230711

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

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