lighthouse 9.5.0 → 9.6.1

package/lighthouse-core/audits/installable-manifest.js

@@ -97,6 +97,11 @@ const UIStrings = {
   'protocol-timeout': `Lighthouse could not determine if there was a service worker. Please try with a newer version of Chrome.`,
   /** Message logged when the web app has been uninstalled o desktop, signalling that the install banner state is being reset. */
   'pipeline-restarted': 'PWA has been uninstalled and installability checks resetting.',
+  /**
+   * @description Error message explaining that the URL of the manifest uses a scheme that is not supported on Android.
+   * @example {data:} scheme
+   */
+  'scheme-not-supported-for-webapk': 'The manifest URL scheme ({scheme}) is not supported on Android.',
 };
 /* eslint-enable max-len */
 
@@ -125,7 +130,7 @@ class InstallableManifest extends Audit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
-      requiredArtifacts: ['URL', 'WebAppManifest', 'InstallabilityErrors'],
+      requiredArtifacts: ['WebAppManifest', 'InstallabilityErrors'],
     };
   }
 
@@ -156,6 +161,17 @@ class InstallableManifest extends Audit {
       // @ts-expect-error errorIds from protocol should match up against the strings dict
       const matchingString = UIStrings[err.errorId];
 
+      if (err.errorId === 'scheme-not-supported-for-webapk') {
+        // If there was no manifest, then there will be at lest one other installability error.
+        // We can ignore this error if that's the case.
+        const manifestUrl = artifacts.WebAppManifest?.url;
+        if (!manifestUrl) continue;
+
+        const scheme = new URL(manifestUrl).protocol;
+        i18nErrors.push(str_(matchingString, {scheme}));
+        continue;
+      }
+
       // Handle an errorId we don't recognize.
       if (matchingString === undefined) {
         i18nErrors.push(str_(UIStrings.noErrorId, {errorId: err.errorId}));
@@ -195,7 +211,6 @@ class InstallableManifest extends Audit {
    *
    */
   static async audit(artifacts, context) {
-    const manifestValues = await ManifestValues.request(artifacts, context);
     const {i18nErrors, warnings} = InstallableManifest.getInstallabilityErrors(artifacts);
 
     const manifestUrl = artifacts.WebAppManifest ? artifacts.WebAppManifest.url : null;
@@ -210,10 +225,16 @@ class InstallableManifest extends Audit {
     const errorReasons = i18nErrors.map(reason => {
       return {reason};
     });
-    /** DevTools InstallabilityErrors does not emit an error unless there is a manifest, so include manifestValues's error */
-    if (manifestValues.isParseFailure) {
-      errorReasons.push({
-        reason: manifestValues.parseFailureReason});
+
+    // If InstallabilityErrors is empty, double check ManifestValues to make sure nothing was missed.
+    // InstallabilityErrors can be empty erroneously in our DevTools web tests.
+    if (!errorReasons.length) {
+      const manifestValues = await ManifestValues.request(artifacts, context);
+      if (manifestValues.isParseFailure) {
+        errorReasons.push({
+          reason: manifestValues.parseFailureReason,
+        });
+      }
     }
 
     // Include the detailed pass/fail checklist as a diagnostic.

package/lighthouse-core/audits/long-tasks.js

@@ -9,9 +9,9 @@ const Audit = require('./audit.js');
 const NetworkRecords = require('../computed/network-records.js');
 const i18n = require('../lib/i18n/i18n.js');
 const MainThreadTasks = require('../computed/main-thread-tasks.js');
-const BootupTime = require('./bootup-time.js');
 const PageDependencyGraph = require('../computed/page-dependency-graph.js');
 const LoadSimulator = require('../computed/load-simulator.js');
+const {getJavaScriptURLs, getAttributableURLForTask} = require('../lib/tracehouse/task-summary.js');
 
 /** 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};
@@ -77,7 +77,7 @@ class LongTasks extends Audit {
       }
     }
 
-    const jsURLs = BootupTime.getJavaScriptURLs(networkRecords);
+    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 => {
@@ -90,7 +90,7 @@ class LongTasks extends Audit {
 
     // TODO(beytoven): Add start time that matches with the simulated throttling
     const results = longtasks.map(task => ({
-      url: BootupTime.getAttributableURLForTask(task, jsURLs),
+      url: getAttributableURLForTask(task, jsURLs),
       duration: task.duration,
       startTime: task.startTime,
     }));

package/lighthouse-core/audits/metrics/experimental-interaction-to-next-paint.js

@@ -0,0 +1,88 @@
+/**
+ * @license Copyright 2022 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.
+ */
+'use strict';
+
+const Audit = require('../audit.js');
+const ComputedResponsivenes = require('../../computed/metrics/responsiveness.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Description of the Interaction to Next Paint metric. This description is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Interaction to Next Paint measures page responsiveness, how long it ' +
+               'takes the page to visibly respond to user input. [Learn more](https://web.dev/inp/).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+/**
+ * @fileoverview This metric gives a high-percentile measure of responsiveness to input.
+ */
+class ExperimentalInteractionToNextPaint extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'experimental-interaction-to-next-paint',
+      title: str_(i18n.UIStrings.interactionToNextPaint),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      supportedModes: ['timespan'],
+      requiredArtifacts: ['traces'],
+    };
+  }
+
+  /**
+   * @return {LH.Audit.ScoreOptions}
+   */
+  static get defaultOptions() {
+    return {
+      // https://web.dev/inp/
+      // This is using the same threshold as field tools since only supported in
+      // unsimulated user flows for now.
+      // see https://www.desmos.com/calculator/4xtrhg51th
+      p10: 200,
+      median: 500,
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const {settings} = context;
+    // TODO: responsiveness isn't yet supported by lantern.
+    if (settings.throttlingMethod === 'simulate') {
+      return {score: null, notApplicable: true};
+    }
+
+    const trace = artifacts.traces[Audit.DEFAULT_PASS];
+    const metricData = {trace, settings};
+    const interactionEvent = await ComputedResponsivenes.request(metricData, context);
+
+    // TODO: include the no-interaction state in the report instead of using n/a.
+    if (interactionEvent === null) {
+      return {score: null, notApplicable: true};
+    }
+
+    // TODO: remove workaround once 103.0.5052.0 is sufficiently released.
+    const timing = interactionEvent.name === 'FallbackTiming' ?
+        interactionEvent.duration : interactionEvent.args.data.duration;
+
+    return {
+      score: Audit.computeLogNormalScore({p10: context.options.p10, median: context.options.median},
+        timing),
+      numericValue: timing,
+      numericUnit: 'millisecond',
+      displayValue: str_(i18n.UIStrings.ms, {timeInMs: timing}),
+    };
+  }
+}
+
+module.exports = ExperimentalInteractionToNextPaint;
+module.exports.UIStrings = UIStrings;

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

@@ -6,11 +6,11 @@
 'use strict';
 
 const Audit = require('./audit.js');
-const BootupTime = require('./bootup-time.js');
 const i18n = require('../lib/i18n/i18n.js');
 const thirdPartyWeb = require('../lib/third-party-web.js');
 const NetworkRecords = require('../computed/network-records.js');
 const MainThreadTasks = require('../computed/main-thread-tasks.js');
+const {getJavaScriptURLs, getAttributableURLForTask} = require('../lib/tracehouse/task-summary.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. */
@@ -98,10 +98,10 @@ class ThirdPartySummary extends Audit {
       byURL.set(request.url, urlSummary);
     }
 
-    const jsURLs = BootupTime.getJavaScriptURLs(networkRecords);
+    const jsURLs = getJavaScriptURLs(networkRecords);
 
     for (const task of mainThreadTasks) {
-      const attributableURL = BootupTime.getAttributableURLForTask(task, jsURLs);
+      const attributableURL = getAttributableURLForTask(task, jsURLs);
 
       const urlSummary = byURL.get(attributableURL) || {...defaultSummary};
       const taskDuration = task.selfTime * cpuMultiplier;

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

@@ -0,0 +1,280 @@
+/**
+ * @license Copyright 2022 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.
+ */
+'use strict';
+
+const Audit = require('./audit.js');
+const ComputedResponsivenes = require('../computed/metrics/responsiveness.js');
+const ProcessedTrace = require('../computed/processed-trace.js');
+const i18n = require('../lib/i18n/i18n.js');
+const NetworkRecords = require('../computed/network-records.js');
+const MainThreadTasks = require('../lib/tracehouse/main-thread-tasks.js');
+const {taskGroups} = require('../lib/tracehouse/task-groups.js');
+const TraceProcessor = require('../lib/tracehouse/trace-processor.js');
+const {getExecutionTimingsByURL} = require('../lib/tracehouse/task-summary.js');
+const inpThresholds = require('./metrics/experimental-interaction-to-next-paint.js').defaultOptions;
+const LHError = require('../lib/lh-error.js');
+
+/** @typedef {import('../computed/metrics/responsiveness.js').EventTimingEvent} EventTimingEvent */
+/** @typedef {import('../lib/tracehouse/main-thread-tasks.js').TaskNode} TaskNode */
+
+const TASK_THRESHOLD = 1;
+
+const UIStrings = {
+  /** Title of a diagnostic audit that provides detail on the main thread work the browser did during a key user interaction. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
+  title: 'Minimizes work during key interaction',
+  /** Title of a diagnostic audit that provides detail on the main thread work the browser did during a key user interaction. This imperative title is shown to users when there is a significant amount of execution time that could be reduced. */
+  failureTitle: 'Minimize work during key interaction',
+  /** Description of the work-during-interaction metric. This description is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'This is the thread-blocking work occurring during the Interaction to Next Paint measurement. [Learn more](https://web.dev/inp/).',
+  /** Label for a column in a data table; entries will be information on the time that the browser is delayed before responding to user input. Ideally fits within a ~40 character limit. */
+  inputDelay: 'Input delay',
+  /** Label for a column in a data table; entries will be information on the time taken by code processing user input that delays a response to the user. Ideally fits within a ~40 character limit. */
+  processingDelay: 'Processing delay',
+  /** Label for a column in a data table; entries will be information on the time that the browser is delayed before presenting a response to user input on screen. Ideally fits within a ~40 character limit. */
+  presentationDelay: 'Presentation delay',
+  /**
+   * @description Summary text that identifies the time the browser took to process a user interaction.
+   * @example {mousedown} interactionType
+   */
+  displayValue: `{timeInMs, number, milliseconds}\xa0ms spent on event '{interactionType}'`,
+  /** Label for a column in a data table; entries will the UI element that was the target of a user interaction (for example, a button that was clicked on). Ideally fits within a ~40 character limit. */
+  eventTarget: 'Event target',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+/**
+ * @fileoverview This metric gives a high-percentile measure of responsiveness to input.
+ */
+class WorkDuringInteraction extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'work-during-interaction',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      supportedModes: ['timespan'],
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'TraceElements'],
+    };
+  }
+
+  /**
+   * @param {TaskNode} task
+   * @param {TaskNode|undefined} parent
+   * @param {number} startTs
+   * @param {number} endTs
+   * @return {number}
+   */
+  static recursivelyClipTasks(task, parent, startTs, endTs) {
+    const taskEventStart = task.event.ts;
+    const taskEventEnd = task.endEvent?.ts ?? task.event.ts + Number(task.event.dur || 0);
+
+    task.startTime = Math.max(startTs, Math.min(endTs, taskEventStart)) / 1000;
+    task.endTime = Math.max(startTs, Math.min(endTs, taskEventEnd)) / 1000;
+    task.duration = task.endTime - task.startTime;
+
+    const childTime = task.children
+      .map(child => WorkDuringInteraction.recursivelyClipTasks(child, task, startTs, endTs))
+      .reduce((sum, child) => sum + child, 0);
+    task.selfTime = task.duration - childTime;
+    return task.duration;
+  }
+
+  /**
+   * Clip the tasks by the start and end points. Take the easy route and drop
+   * to duration 0 if out of bounds, since only durations are needed in the
+   * end (for now).
+   * Assumes owned tasks, so modifies in place. Can be called multiple times on
+   * the same `tasks` because always computed from original event timing.
+   * @param {Array<TaskNode>} tasks
+   * @param {number} startTs
+   * @param {number} endTs
+   */
+  static clipTasksByTs(tasks, startTs, endTs) {
+    for (const task of tasks) {
+      if (task.parent) continue;
+      WorkDuringInteraction.recursivelyClipTasks(task, undefined, startTs, endTs);
+    }
+  }
+
+  /**
+   * @param {EventTimingEvent} interactionEvent
+   */
+  static getPhaseTimes(interactionEvent) {
+    const interactionData = interactionEvent.args.data;
+    const startTs = interactionEvent.ts;
+    const navStart = startTs - interactionData.timeStamp * 1000;
+    const processingStartTs = navStart + interactionData.processingStart * 1000;
+    const processingEndTs = navStart + interactionData.processingEnd * 1000;
+    const endTs = startTs + interactionData.duration * 1000;
+    return {
+      inputDelay: {startTs, endTs: processingStartTs},
+      processingDelay: {startTs: processingStartTs, endTs: processingEndTs},
+      presentationDelay: {startTs: processingEndTs, endTs},
+    };
+  }
+
+  /**
+   * @param {EventTimingEvent} interactionEvent
+   * @param {LH.Trace} trace
+   * @param {LH.Artifacts.ProcessedTrace} processedTrace
+   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+   * @return {{table: LH.Audit.Details.Table, phases: Record<string, {startTs: number, endTs: number}>}}
+   */
+  static getThreadBreakdownTable(interactionEvent, trace, processedTrace, networkRecords) {
+    // Limit to interactionEvent's thread.
+    // TODO(bckenny): limit to interactionEvent's navigation.
+    const threadEvents = TraceProcessor.filteredTraceSort(trace.traceEvents, evt => {
+      return evt.pid === interactionEvent.pid && evt.tid === interactionEvent.tid;
+    });
+    const traceEndTs = threadEvents.reduce((endTs, evt) => {
+      return Math.max(evt.ts + (evt.dur || 0), endTs);
+    }, 0);
+    // frames is only used for URL attribution, so can include all frames, even if OOPIF.
+    const {frames} = processedTrace;
+    const threadTasks = MainThreadTasks.getMainThreadTasks(threadEvents, frames, traceEndTs);
+
+    const phases = WorkDuringInteraction.getPhaseTimes(interactionEvent);
+
+    /** @type {LH.Audit.Details.TableItem[]} */
+    const items = [];
+    for (const [phaseName, phaseTimes] of Object.entries(phases)) {
+      // Clip tasks to start and end time.
+      WorkDuringInteraction.clipTasksByTs(threadTasks, phaseTimes.startTs, phaseTimes.endTs);
+      const executionTimings = getExecutionTimingsByURL(threadTasks, networkRecords);
+
+      const results = [];
+      for (const [url, timingByGroupId] of executionTimings) {
+        const totalExecutionTimeForURL = Object.values(timingByGroupId)
+            .reduce((total, timespanMs) => total + timespanMs);
+
+        const scriptingTotal = timingByGroupId[taskGroups.scriptEvaluation.id] || 0;
+        const layoutTotal = timingByGroupId[taskGroups.styleLayout.id] || 0;
+        const renderTotal = timingByGroupId[taskGroups.paintCompositeRender.id] || 0;
+
+        results.push({
+          url: url,
+          total: totalExecutionTimeForURL,
+          scripting: scriptingTotal,
+          layout: layoutTotal,
+          render: renderTotal,
+        });
+      }
+
+      const filteredResults = results
+        .filter(result => result.total > TASK_THRESHOLD)
+        .sort((a, b) => b.total - a.total);
+
+      items.push({
+        phase: str_(UIStrings[/** @type {keyof UIStrings} */ (phaseName)]),
+        total: (phaseTimes.endTs - phaseTimes.startTs) / 1000,
+        subItems: {
+          type: 'subitems',
+          items: filteredResults,
+        },
+      });
+    }
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      /* eslint-disable max-len */
+      {key: 'phase', itemType: 'text', subItemsHeading: {key: 'url', itemType: 'url'}, text: 'Phase'},
+      {key: 'total', itemType: 'ms', subItemsHeading: {key: 'total', granularity: 1, itemType: 'ms'}, granularity: 1, text: 'Total time'},
+      {key: null, itemType: 'ms', subItemsHeading: {key: 'scripting', granularity: 1, itemType: 'ms'}, text: 'Script evaluation'},
+      {key: null, itemType: 'ms', subItemsHeading: {key: 'layout', granularity: 1, itemType: 'ms'}, text: taskGroups.styleLayout.label},
+      {key: null, itemType: 'ms', subItemsHeading: {key: 'render', granularity: 1, itemType: 'ms'}, text: taskGroups.paintCompositeRender.label},
+      /* eslint-enable max-len */
+    ];
+
+    return {
+      table: Audit.makeTableDetails(headings, items),
+      phases,
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts['TraceElements']} traceElements
+   * @return {LH.Audit.Details.Table | undefined}
+   */
+  static getTraceElementTable(traceElements) {
+    const responsivenessElement = traceElements.find(el => el.traceEventType === 'responsiveness');
+    if (!responsivenessElement) return;
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'node', itemType: 'node', text: str_(UIStrings.eventTarget)},
+    ];
+    const elementItems = [{node: Audit.makeNodeItem(responsivenessElement.node)}];
+
+    return Audit.makeTableDetails(headings, elementItems);
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const {settings} = context;
+    // TODO: responsiveness isn't yet supported by lantern.
+    if (settings.throttlingMethod === 'simulate') {
+      return {score: null, notApplicable: true};
+    }
+
+    const trace = artifacts.traces[WorkDuringInteraction.DEFAULT_PASS];
+    const metricData = {trace, settings};
+    const interactionEvent = await ComputedResponsivenes.request(metricData, context);
+    // If no interaction, diagnostic audit is n/a.
+    if (interactionEvent === null) {
+      return {score: null, notApplicable: true};
+    }
+    // TODO: remove workaround once 103.0.5052.0 is sufficiently released.
+    if (interactionEvent.name === 'FallbackTiming') {
+      throw new LHError(
+        LHError.errors.UNSUPPORTED_OLD_CHROME,
+        {featureName: 'detailed EventTiming trace events'}
+      );
+    }
+
+    const auditDetailsItems = [];
+
+    const traceElementItem = WorkDuringInteraction.getTraceElementTable(artifacts.TraceElements);
+    if (traceElementItem) auditDetailsItems.push(traceElementItem);
+
+    const devtoolsLog = artifacts.devtoolsLogs[WorkDuringInteraction.DEFAULT_PASS];
+    // Network records will usually be empty for timespans.
+    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
+    const processedTrace = await ProcessedTrace.request(trace, context);
+    const {table: breakdownTable, phases} = WorkDuringInteraction.getThreadBreakdownTable(
+        interactionEvent, trace, processedTrace, networkRecords);
+    auditDetailsItems.push(breakdownTable);
+
+    const interactionType = interactionEvent.args.data.type;
+    auditDetailsItems.push({
+      type: /** @type {const} */ ('debugdata'),
+      interactionType,
+      phases,
+    });
+
+    const duration = interactionEvent.args.data.duration;
+    const displayValue = str_(UIStrings.displayValue, {timeInMs: duration, interactionType});
+    return {
+      score: duration < inpThresholds.p10 ? 1 : 0,
+      displayValue,
+      details: {
+        type: 'list',
+        items: auditDetailsItems,
+      },
+    };
+  }
+}
+
+module.exports = WorkDuringInteraction;
+module.exports.UIStrings = UIStrings;

package/lighthouse-core/computed/metrics/responsiveness.js

@@ -0,0 +1,157 @@
+/**
+ * @license Copyright 2022 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.
+ */
+'use strict';
+
+/**
+ * @fileoverview Returns a high-percentle (usually 98th) measure of how long it
+ * takes the page to visibly respond to user input (or null, if there was no
+ * user input in the provided trace).
+ */
+
+/** @typedef {LH.Trace.CompleteEvent & {name: 'Responsiveness.Renderer.UserInteraction', args: {frame: string, data: {interactionType: 'drag'|'keyboard'|'tapOrClick', maxDuration: number}}}} ResponsivenessEvent */
+/** @typedef {'keydown'|'keypress'|'keyup'|'mousedown'|'mouseup'|'pointerdown'|'pointerup'|'click'} EventTimingType */
+/**
+ * @typedef EventTimingData
+ * @property {string} frame
+ * @property {number} timeStamp The time of user interaction (in ms from navStart).
+ * @property {number} processingStart The start of interaction handling (in ms from navStart).
+ * @property {number} processingEnd The end of interaction handling (in ms from navStart).
+ * @property {number} duration The time from user interaction to browser paint (in ms).
+ * @property {EventTimingType} type
+ * @property {number} nodeId
+ * @property {number} interactionId
+ */
+/** @typedef {LH.Trace.AsyncEvent & {name: 'EventTiming', args: {data: EventTimingData}}} EventTimingEvent */
+/**
+ * A fallback EventTiming placeholder, used if updated EventTiming events are not available.
+ * TODO: Remove once 103.0.5052.0 is sufficiently released.
+ * @typedef {{name: 'FallbackTiming', duration: number}} FallbackTimingEvent
+ */
+
+const makeComputedArtifact = require('../computed-artifact.js');
+const ProcessedTrace = require('../processed-trace.js');
+
+const KEYBOARD_EVENTS = new Set(['keydown', 'keypress', 'keyup']);
+const CLICK_TAP_DRAG_EVENTS = new Set([
+  'mousedown', 'mouseup', 'pointerdown', 'pointerup', 'click']);
+/** A map of Responsiveness `interactionType` to matching EventTiming `type`s. */
+const interactionTypeToType = {
+  keyboard: KEYBOARD_EVENTS,
+  tapOrClick: CLICK_TAP_DRAG_EVENTS,
+  drag: CLICK_TAP_DRAG_EVENTS,
+};
+
+class Responsiveness {
+  /**
+   * @param {LH.Artifacts.ProcessedTrace} processedTrace
+   * @return {ResponsivenessEvent|null}
+   */
+  static getHighPercentileResponsiveness(processedTrace) {
+    const responsivenessEvents = processedTrace.frameTreeEvents
+      // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/responsiveness_metrics.cc;l=146-150;drc=a1a2302f30b0a58f7669a41c80acdf1fa11958dd
+      .filter(/** @return {e is ResponsivenessEvent} */ e => {
+        return e.name === 'Responsiveness.Renderer.UserInteraction';
+      }).sort((a, b) => b.args.data.maxDuration - a.args.data.maxDuration);
+
+    // If there were no interactions with the page, the metric is N/A.
+    if (responsivenessEvents.length === 0) {
+      return null;
+    }
+
+    // INP is the "nearest-rank"/inverted_cdf 98th percentile, except Chrome only
+    // keeps the 10 worst events around, so it can never be more than the 10th from
+    // last array element. To keep things simpler, sort desc and pick from front.
+    // See https://source.chromium.org/chromium/chromium/src/+/main:components/page_load_metrics/browser/responsiveness_metrics_normalization.cc;l=45-59;drc=cb0f9c8b559d9c7c3cb4ca94fc1118cc015d38ad
+    const index = Math.min(9, Math.floor(responsivenessEvents.length / 50));
+
+    return responsivenessEvents[index];
+  }
+
+  /**
+   * Finds the interaction event that was probably the responsivenessEvent.maxDuration
+   * source.
+   * Note that (presumably due to rounding to ms), the interaction duration may not
+   * be the same value as `maxDuration`, just the closest value. Function will throw
+   * if the closest match is off by more than 4ms.
+   * TODO: this doesn't try to match inputs to interactions and break ties if more than
+   * one interaction had this duration by returning the first found.
+   * @param {ResponsivenessEvent} responsivenessEvent
+   * @param {LH.Trace} trace
+   * @return {EventTimingEvent|FallbackTimingEvent}
+   */
+  static findInteractionEvent(responsivenessEvent, {traceEvents}) {
+    const candidates = traceEvents.filter(/** @return {evt is EventTimingEvent} */ evt => {
+      // Examine only beginning/instant EventTiming events.
+      return evt.name === 'EventTiming' && evt.ph !== 'e';
+    });
+
+    if (candidates.length && !candidates.some(candidate => candidate.args.data?.frame)) {
+      // Full EventTiming data added in https://crrev.com/c/3632661
+      return {
+        name: 'FallbackTiming',
+        duration: responsivenessEvent.args.data.maxDuration,
+      };
+    }
+
+    const {maxDuration, interactionType} = responsivenessEvent.args.data;
+    let bestMatchEvent;
+    let minDurationDiff = Number.POSITIVE_INFINITY;
+    for (const candidate of candidates) {
+      // Must be from same frame.
+      if (candidate.args.data.frame !== responsivenessEvent.args.frame) continue;
+
+      // TODO(bckenny): must be in same navigation as well.
+
+      const {type, duration} = candidate.args.data;
+      // Discard if type is incompatible with responsiveness interactionType.
+      const matchingTypes = interactionTypeToType[interactionType];
+      if (!matchingTypes) {
+        throw new Error(`unexpected responsiveness interactionType '${interactionType}'`);
+      }
+      if (!matchingTypes.has(type)) continue;
+
+      const durationDiff = Math.abs(duration - maxDuration);
+      if (durationDiff < minDurationDiff) {
+        bestMatchEvent = candidate;
+        minDurationDiff = durationDiff;
+      }
+    }
+
+    if (!bestMatchEvent) {
+      throw new Error(`no interaction event found for responsiveness type '${interactionType}'`);
+    }
+    // TODO: seems to regularly happen up to 3ms and as high as 4. Allow for up to 5ms to be sure.
+    if (minDurationDiff > 5) {
+      throw new Error(`no interaction event found within 5ms of responsiveness maxDuration (max: ${maxDuration}, closest ${bestMatchEvent.args.data.duration})`); // eslint-disable-line max-len
+    }
+
+    return bestMatchEvent;
+  }
+
+  /**
+   * @param {{trace: LH.Trace, settings: Immutable<LH.Config.Settings>}} data
+   * @param {LH.Artifacts.ComputedContext} context
+   * @return {Promise<EventTimingEvent|FallbackTimingEvent|null>}
+   */
+  static async compute_(data, context) {
+    const {settings, trace} = data;
+    if (settings.throttlingMethod === 'simulate') {
+      throw new Error('Responsiveness currently unsupported by simulated throttling');
+    }
+
+    const processedTrace = await ProcessedTrace.request(trace, context);
+    const responsivenessEvent = Responsiveness.getHighPercentileResponsiveness(processedTrace);
+    if (!responsivenessEvent) return null;
+
+    const interactionEvent = Responsiveness.findInteractionEvent(responsivenessEvent, trace);
+    return JSON.parse(JSON.stringify(interactionEvent));
+  }
+}
+
+module.exports = makeComputedArtifact(Responsiveness, [
+  'trace',
+  'settings',
+]);

package/lighthouse-core/config/config-helpers.js

@@ -6,7 +6,7 @@
 'use strict';
 
 const path = require('path');
-const {isEqual: isDeepEqual} = require('lodash');
+const isDeepEqual = require('lodash/isEqual.js');
 const constants = require('./constants.js');
 const Budget = require('./budget.js');
 const ConfigPlugin = require('./config-plugin.js');

package/lighthouse-core/config/metrics-to-audits.js

@@ -48,9 +48,14 @@ const clsRelevantAudits = [
   // 'preload-fonts', // actually in BP, rather than perf
 ];
 
+const inpRelevantAudits = [
+  'work-during-interaction',
+];
+
 module.exports = {
   fcpRelevantAudits,
   lcpRelevantAudits,
   tbtRelevantAudits,
   clsRelevantAudits,
+  inpRelevantAudits,
 };