lighthouse 11.7.0 → 12.0.0-dev.20240422

package/core/lib/lantern/metrics/total-blocking-time.js

@@ -0,0 +1,128 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Lantern from '../types/lantern.js';
+import {Metric} from '../metric.js';
+import {BaseNode} from '../base-node.js';
+import {BLOCKING_TIME_THRESHOLD, calculateSumOfBlockingTime} from '../../../computed/metrics/tbt-utils.js';
+
+/** @typedef {import('../base-node.js').Node} Node */
+
+class TotalBlockingTime extends Metric {
+  /**
+   * @return {LH.Gatherer.Simulation.MetricCoefficients}
+   */
+  static get COEFFICIENTS() {
+    return {
+      intercept: 0,
+      optimistic: 0.5,
+      pessimistic: 0.5,
+    };
+  }
+
+  /**
+   * @param {Node} dependencyGraph
+   * @return {Node}
+   */
+  static getOptimisticGraph(dependencyGraph) {
+    return dependencyGraph;
+  }
+
+  /**
+   * @param {Node} dependencyGraph
+   * @return {Node}
+   */
+  static getPessimisticGraph(dependencyGraph) {
+    return dependencyGraph;
+  }
+
+  /**
+   * @param {LH.Gatherer.Simulation.Result} simulation
+   * @param {import('../metric.js').Extras} extras
+   * @return {LH.Gatherer.Simulation.Result}
+   */
+  static getEstimateFromSimulation(simulation, extras) {
+    if (!extras.fcpResult) throw new Error('missing fcpResult');
+    if (!extras.interactiveResult) throw new Error('missing interactiveResult');
+
+    // Intentionally use the opposite FCP estimate. A pessimistic FCP is higher than equal to an
+    // optimistic FCP, which means potentially more tasks are excluded from the Total Blocking Time
+    // computation. So a more pessimistic FCP gives a more optimistic Total Blocking Time for the
+    // same work.
+    const fcpTimeInMs = extras.optimistic
+      ? extras.fcpResult.pessimisticEstimate.timeInMs
+      : extras.fcpResult.optimisticEstimate.timeInMs;
+
+    // Similarly, we always have pessimistic TTI >= optimistic TTI. Therefore, picking optimistic
+    // TTI means our window of interest is smaller and thus potentially more tasks are excluded from
+    // Total Blocking Time computation, yielding a lower (more optimistic) Total Blocking Time value
+    // for the same work.
+    const interactiveTimeMs = extras.optimistic
+      ? extras.interactiveResult.optimisticEstimate.timeInMs
+      : extras.interactiveResult.pessimisticEstimate.timeInMs;
+
+    const minDurationMs = BLOCKING_TIME_THRESHOLD;
+
+    const events = TotalBlockingTime.getTopLevelEvents(
+      simulation.nodeTimings,
+      minDurationMs
+    );
+
+    return {
+      timeInMs: calculateSumOfBlockingTime(
+        events,
+        fcpTimeInMs,
+        interactiveTimeMs
+      ),
+      nodeTimings: simulation.nodeTimings,
+    };
+  }
+
+  /**
+   * @param {Lantern.Simulation.MetricComputationDataInput} data
+   * @param {Omit<import('../metric.js').Extras, 'optimistic'>=} extras
+   * @return {Promise<LH.Artifacts.LanternMetric>}
+   */
+  static async compute(data, extras) {
+    const fcpResult = extras?.fcpResult;
+    if (!fcpResult) {
+      throw new Error('FCP is required to calculate the TBT metric');
+    }
+
+    const interactiveResult = extras?.fcpResult;
+    if (!interactiveResult) {
+      throw new Error('Interactive is required to calculate the TBT metric');
+    }
+
+    return super.compute(data, extras);
+  }
+
+  /**
+   * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings
+   * @param {number} minDurationMs
+   */
+  static getTopLevelEvents(nodeTimings, minDurationMs) {
+    /** @type {Array<{start: number, end: number, duration: number}>}
+     */
+    const events = [];
+
+    for (const [node, timing] of nodeTimings.entries()) {
+      if (node.type !== BaseNode.TYPES.CPU) continue;
+      // Filtering out events below minimum duration.
+      if (timing.duration < minDurationMs) continue;
+
+      events.push({
+        start: timing.startTime,
+        end: timing.endTime,
+        duration: timing.duration,
+      });
+    }
+
+    return events;
+  }
+}
+
+export {TotalBlockingTime};

package/core/lib/lantern/network-node.js

@@ -7,8 +7,32 @@
 import * as Lantern from './types/lantern.js';
 import {NetworkRequestTypes} from './lantern.js';
 import {BaseNode} from './base-node.js';
-// TODO(15841): bring impl of isNonNetworkRequest inside lantern and remove this.
-import UrlUtils from '../url-utils.js';
+
+const NON_NETWORK_SCHEMES = [
+  'blob', // @see https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
+  'data', // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
+  'intent', // @see https://developer.chrome.com/docs/multidevice/android/intents/
+  'file', // @see https://en.wikipedia.org/wiki/File_URI_scheme
+  'filesystem', // @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystem
+  'chrome-extension',
+];
+
+/**
+ * Use `NetworkRequest.isNonNetworkRequest(req)` if working with a request.
+ * Note: the `protocol` field from CDP can be 'h2', 'http', (not 'https'!) or it'll be url's scheme.
+ *   https://source.chromium.org/chromium/chromium/src/+/main:content/browser/devtools/protocol/network_handler.cc;l=598-611;drc=56d4a9a9deb30be73adcee8737c73bcb2a5ab64f
+ * However, a `new URL(href).protocol` has a colon suffix.
+ *   https://url.spec.whatwg.org/#dom-url-protocol
+ * A URL's `scheme` is specced as the `protocol` sans-colon, but isn't exposed on a URL object.
+ * This method can take all 3 of these string types as a parameter.
+ * @param {string} protocol Either a networkRequest's `protocol` per CDP or a `new URL(href).protocol`
+ * @return {boolean}
+ */
+function isNonNetworkProtocol(protocol) {
+  // Strip off any colon
+  const urlScheme = protocol.includes(':') ? protocol.slice(0, protocol.indexOf(':')) : protocol;
+  return NON_NETWORK_SCHEMES.includes(urlScheme);
+}
 
 /**
  * @template [T=any]
@@ -75,9 +99,9 @@ class NetworkNode extends BaseNode {
    */
   get isNonNetworkProtocol() {
     // The 'protocol' field in devtools a string more like a `scheme`
-    return UrlUtils.isNonNetworkProtocol(this.request.protocol) ||
+    return isNonNetworkProtocol(this.request.protocol) ||
       // But `protocol` can fail to be populated if the request fails, so fallback to scheme.
-      UrlUtils.isNonNetworkProtocol(this.request.parsedURL.scheme);
+      isNonNetworkProtocol(this.request.parsedURL.scheme);
   }
 
   /**

package/core/lib/lantern/page-dependency-graph.d.ts

@@ -18,10 +18,10 @@ export class PageDependencyGraph {
      */
     static getNetworkNodeOutput(networkRecords: Array<Lantern.NetworkRequest>): NetworkNodeOutput;
     /**
-     * @param {LH.Artifacts.ProcessedTrace} processedTrace
+     * @param {LH.TraceEvent[]} mainThreadEvents
      * @return {Array<CPUNode>}
      */
-    static getCPUNodes({ mainThreadEvents }: LH.Artifacts.ProcessedTrace): Array<CPUNode>;
+    static getCPUNodes(mainThreadEvents: LH.TraceEvent[]): Array<CPUNode>;
     /**
      * @param {NetworkNode} rootNode
      * @param {NetworkNodeOutput} networkNodeOutput
@@ -40,12 +40,12 @@ export class PageDependencyGraph {
      */
     static _pruneNode(node: Node): void;
     /**
-     * @param {LH.Artifacts.ProcessedTrace} processedTrace
+     * @param {LH.TraceEvent[]} mainThreadEvents
      * @param {Array<Lantern.NetworkRequest>} networkRecords
      * @param {URLArtifact} URL
      * @return {Node}
      */
-    static createGraph(processedTrace: LH.Artifacts.ProcessedTrace, networkRecords: Array<Lantern.NetworkRequest>, URL: URLArtifact): Node;
+    static createGraph(mainThreadEvents: LH.TraceEvent[], networkRecords: Array<Lantern.NetworkRequest>, URL: URLArtifact): Node;
     /**
      *
      * @param {Node} rootNode

package/core/lib/lantern/page-dependency-graph.js

@@ -109,10 +109,10 @@ class PageDependencyGraph {
   }
 
   /**
-   * @param {LH.Artifacts.ProcessedTrace} processedTrace
+   * @param {LH.TraceEvent[]} mainThreadEvents
    * @return {Array<CPUNode>}
    */
-  static getCPUNodes({mainThreadEvents}) {
+  static getCPUNodes(mainThreadEvents) {
     /** @type {Array<CPUNode>} */
     const nodes = [];
     let i = 0;
@@ -128,6 +128,9 @@ class PageDependencyGraph {
         continue;
       }
 
+      /** @type {number|undefined} */
+      let correctedEndTs = undefined;
+
       // Capture all events that occurred within the task
       /** @type {Array<LH.TraceEvent>} */
       const children = [];
@@ -136,10 +139,19 @@ class PageDependencyGraph {
         i < mainThreadEvents.length && mainThreadEvents[i].ts < endTime;
         i++
       ) {
+        // Temporary fix for a Chrome bug where some RunTask events can be overlapping.
+        // We correct that here be ensuring each RunTask ends at least 1 microsecond before the next
+        // https://github.com/GoogleChrome/lighthouse/issues/15896
+        // https://issues.chromium.org/issues/329678173
+        if (TraceProcessor.isScheduleableTask(mainThreadEvents[i]) && mainThreadEvents[i].dur) {
+          correctedEndTs = mainThreadEvents[i].ts - 1;
+          break;
+        }
+
         children.push(mainThreadEvents[i]);
       }
 
-      nodes.push(new CPUNode(evt, children));
+      nodes.push(new CPUNode(evt, children, correctedEndTs));
     }
 
     return nodes;
@@ -359,7 +371,7 @@ class PageDependencyGraph {
         isFirst = foundFirstParse = true;
       }
 
-      if (isFirst || node.event.dur >= minimumEvtDur) {
+      if (isFirst || node.duration >= minimumEvtDur) {
         // Don't prune this node. The task is long / important so it will impact simulation.
         continue;
       }
@@ -393,14 +405,14 @@ class PageDependencyGraph {
   }
 
   /**
-   * @param {LH.Artifacts.ProcessedTrace} processedTrace
+   * @param {LH.TraceEvent[]} mainThreadEvents
    * @param {Array<Lantern.NetworkRequest>} networkRecords
    * @param {URLArtifact} URL
    * @return {Node}
    */
-  static createGraph(processedTrace, networkRecords, URL) {
+  static createGraph(mainThreadEvents, networkRecords, URL) {
     const networkNodeOutput = PageDependencyGraph.getNetworkNodeOutput(networkRecords);
-    const cpuNodes = PageDependencyGraph.getCPUNodes(processedTrace);
+    const cpuNodes = PageDependencyGraph.getCPUNodes(mainThreadEvents);
     const {requestedUrl, mainDocumentUrl} = URL;
     if (!requestedUrl) throw new Error('requestedUrl is required to get the root request');
     if (!mainDocumentUrl) throw new Error('mainDocumentUrl is required to get the main resource');

package/core/lib/lantern/simulator/connection-pool.d.ts

@@ -19,27 +19,17 @@ export class ConnectionPool {
     _initializeConnections(): void;
     /**
      * @param {Array<TcpConnection>} connections
-     * @param {{ignoreConnectionReused?: boolean, observedConnectionWasReused: boolean}} options
      */
-    _findAvailableConnectionWithLargestCongestionWindow(connections: Array<TcpConnection>, options: {
-        ignoreConnectionReused?: boolean | undefined;
-        observedConnectionWasReused: boolean;
-    }): TcpConnection | null;
+    _findAvailableConnectionWithLargestCongestionWindow(connections: Array<TcpConnection>): TcpConnection | null;
     /**
      * This method finds an available connection to the origin specified by the network record or null
      * if no connection was available. If returned, connection will not be available for other network
      * records until release is called.
      *
-     * If ignoreConnectionReused is true, acquire will consider all connections not in use as available.
-     * Otherwise, only connections that have matching "warmth" are considered available.
-     *
      * @param {Lantern.NetworkRequest} record
-     * @param {{ignoreConnectionReused?: boolean}} options
      * @return {?TcpConnection}
      */
-    acquire(record: Lantern.NetworkRequest, options?: {
-        ignoreConnectionReused?: boolean;
-    }): TcpConnection | null;
+    acquire(record: Lantern.NetworkRequest): TcpConnection | null;
     /**
      * Return the connection currently being used to fetch a record. If no connection
      * currently being used for this record, an error will be thrown.

package/core/lib/lantern/simulator/connection-pool.js

@@ -85,24 +85,13 @@ export class ConnectionPool {
 
   /**
    * @param {Array<TcpConnection>} connections
-   * @param {{ignoreConnectionReused?: boolean, observedConnectionWasReused: boolean}} options
    */
-  _findAvailableConnectionWithLargestCongestionWindow(connections, options) {
-    const {ignoreConnectionReused, observedConnectionWasReused} = options;
-
+  _findAvailableConnectionWithLargestCongestionWindow(connections) {
     /** @type {TcpConnection|null} */
     let maxConnection = null;
     for (let i = 0; i < connections.length; i++) {
       const connection = connections[i];
 
-      // Normally, we want to make sure the connection warmth matches the state of the record
-      // we're acquiring for. Do this check first since it's the common case and cheaper than our
-      // "in use" check below.
-      // Use the _warmed property instead of the getter because this is a surprisingly hot code path.
-      if (!ignoreConnectionReused && connection._warmed !== observedConnectionWasReused) {
-        continue;
-      }
-
       // Connections that are in use are never available.
       if (this._connectionsInUse.has(connection)) {
         continue;
@@ -121,23 +110,15 @@ export class ConnectionPool {
    * if no connection was available. If returned, connection will not be available for other network
    * records until release is called.
    *
-   * If ignoreConnectionReused is true, acquire will consider all connections not in use as available.
-   * Otherwise, only connections that have matching "warmth" are considered available.
-   *
    * @param {Lantern.NetworkRequest} record
-   * @param {{ignoreConnectionReused?: boolean}} options
    * @return {?TcpConnection}
    */
-  acquire(record, options = {}) {
+  acquire(record) {
     if (this._connectionsByRecord.has(record)) throw new Error('Record already has a connection');
 
     const origin = record.parsedURL.securityOrigin;
-    const observedConnectionWasReused = !!this._connectionReusedByRequestId.get(record.requestId);
     const connections = this._connectionsByOrigin.get(origin) || [];
-    const connectionToUse = this._findAvailableConnectionWithLargestCongestionWindow(connections, {
-      ignoreConnectionReused: options.ignoreConnectionReused,
-      observedConnectionWasReused,
-    });
+    const connectionToUse = this._findAvailableConnectionWithLargestCongestionWindow(connections);
 
     if (!connectionToUse) return null;
 

package/core/lib/lantern/simulator/network-analyzer.js

@@ -140,15 +140,6 @@ class NetworkAnalyzer {
     const {timing, connectionReused, record} = info;
     if (connectionReused) return;
 
-    // In LR, network records are missing connection timing, but we've smuggled it in via headers.
-    if (global.isLightrider && record.lrStatistics) {
-      if (record.protocol.startsWith('h3')) {
-        return record.lrStatistics.TCPMs;
-      } else {
-        return [record.lrStatistics.TCPMs / 2, record.lrStatistics.TCPMs / 2];
-      }
-    }
-
     const {connectStart, sslStart, sslEnd, connectEnd} = timing;
     if (connectEnd >= 0 && connectStart >= 0 && record.protocol.startsWith('h3')) {
       // These values are equal to sslStart and sslEnd for h3.
@@ -256,9 +247,7 @@ class NetworkAnalyzer {
    */
   static _estimateResponseTimeByOrigin(records, rttByOrigin) {
     return NetworkAnalyzer._estimateValueByOrigin(records, ({record, timing}) => {
-      // Lightrider does not have timings for sendEnd, but we do have this timing which should be
-      // close to the response time.
-      if (global.isLightrider && record.lrStatistics) return record.lrStatistics.requestMs;
+      if (record.serverResponseTime !== undefined) return record.serverResponseTime;
 
       if (!Number.isFinite(timing.receiveHeadersEnd) || timing.receiveHeadersEnd < 0) return;
       if (!Number.isFinite(timing.sendEnd) || timing.sendEnd < 0) return;

package/core/lib/lantern/simulator/simulator.d.ts

@@ -29,7 +29,6 @@ export class Simulator<T = any> {
     _layoutTaskMultiplier: number;
     /** @type {Array<Node>} */
     _cachedNodeListByStartPosition: Array<Node>;
-    _flexibleOrdering: boolean;
     _nodeTimings: SimulatorTimingMap;
     /** @type {Map<string, number>} */
     _numberInProgressByType: Map<string, number>;
@@ -131,17 +130,16 @@ export class Simulator<T = any> {
      * Estimates the time taken to process all of the graph's nodes, returns the overall time along with
      * each node annotated by start/end times.
      *
-     * If flexibleOrdering is set, simulator/connection pool are allowed to deviate from what was
+     * Simulator/connection pool are allowed to deviate from what was
      * observed in the trace/devtoolsLog and start requests as soon as they are queued (i.e. do not
      * wait around for a warm connection to be available if the original record was fetched on a warm
      * connection).
      *
      * @param {Node} graph
-     * @param {{flexibleOrdering?: boolean, label?: string}=} options
+     * @param {{label?: string}=} options
      * @return {Lantern.Simulation.Result<T>}
      */
     simulate(graph: Node, options?: {
-        flexibleOrdering?: boolean;
         label?: string;
     } | undefined): Lantern.Simulation.Result<T>;
     /**

package/core/lib/lantern/simulator/simulator.js

@@ -80,7 +80,6 @@ class Simulator {
     this._cachedNodeListByStartPosition = [];
 
     // Properties reset on every `.simulate` call but duplicated here for type checking
-    this._flexibleOrdering = false;
     this._nodeTimings = new SimulatorTimingMap();
     /** @type {Map<string, number>} */
     this._numberInProgressByType = new Map();
@@ -197,9 +196,7 @@ class Simulator {
    * @return {?TcpConnection}
    */
   _acquireConnection(record) {
-    return this._connectionPool.acquire(record, {
-      ignoreConnectionReused: this._flexibleOrdering,
-    });
+    return this._connectionPool.acquire(record);
   }
 
   /**
@@ -276,7 +273,7 @@ class Simulator {
       ? this._layoutTaskMultiplier
       : this._cpuSlowdownMultiplier;
     const totalDuration = Math.min(
-      Math.round(cpuNode.event.dur / 1000 * multiplier),
+      Math.round(cpuNode.duration / 1000 * multiplier),
       DEFAULT_MAXIMUM_CPU_TASK_DURATION
     );
     const estimatedTimeElapsed = totalDuration - timingData.timeElapsed;
@@ -425,13 +422,13 @@ class Simulator {
    * Estimates the time taken to process all of the graph's nodes, returns the overall time along with
    * each node annotated by start/end times.
    *
-   * If flexibleOrdering is set, simulator/connection pool are allowed to deviate from what was
+   * Simulator/connection pool are allowed to deviate from what was
    * observed in the trace/devtoolsLog and start requests as soon as they are queued (i.e. do not
    * wait around for a warm connection to be available if the original record was fetched on a warm
    * connection).
    *
    * @param {Node} graph
-   * @param {{flexibleOrdering?: boolean, label?: string}=} options
+   * @param {{label?: string}=} options
    * @return {Lantern.Simulation.Result<T>}
    */
   simulate(graph, options) {
@@ -441,11 +438,9 @@ class Simulator {
 
     options = Object.assign({
       label: undefined,
-      flexibleOrdering: false,
     }, options);
 
     // initialize the necessary data containers
-    this._flexibleOrdering = !!options.flexibleOrdering;
     this._dns = new DNSCache({rtt: this._rtt});
     this._initializeConnectionPool(graph);
     this._initializeAuxiliaryData();
@@ -470,11 +465,9 @@ class Simulator {
       }
 
       if (!nodesInProgress.size) {
-        // interplay between fromDiskCache and connectionReused can be incorrect
-        // proceed with flexibleOrdering if we can, otherwise give up
-        if (this._flexibleOrdering) throw new Error('Failed to start a node');
-        this._flexibleOrdering = true;
-        continue;
+        // Interplay between fromDiskCache and connectionReused can be incorrect,
+        // have to give up.
+        throw new Error('Failed to start a node');
       }
 
       // set the available throughput for all connections based on # inflight

package/core/lib/lantern/types/lantern.d.ts

@@ -67,9 +67,6 @@ export class NetworkRequest<T = any> {
     resourceSize: number;
     fromDiskCache: boolean;
     fromMemoryCache: boolean;
-    // TODO(15841): remove from lantern.
-    /** Extra timing information available only when run in Lightrider. */
-    lrStatistics: LightriderStatistics | undefined;
     finished: boolean;
     statusCode: number;
     /** The network request that this one redirected to */
@@ -80,6 +77,11 @@ export class NetworkRequest<T = any> {
     /** The chain of network requests that redirected to this one */
     redirects: NetworkRequest[] | undefined;
     timing: LH.Crdp.Network.ResourceTiming | undefined;
+    /**
+     * Optional value for how long the server took to respond to this request.
+     * When not provided, the server response time is derived from the timing object.
+     */
+    serverResponseTime: number | undefined;
     resourceType: LH.Crdp.Network.ResourceType | undefined;
     mimeType: string;
     priority: LH.Crdp.Network.ResourcePriority;

package/core/lib/lantern-trace-saver.js

@@ -255,7 +255,6 @@ export default {
     'unlabeled',
     // These node timings should be nearly identical to the ones produced for Interactive
     'optimisticSpeedIndex',
-    'optimisticFlexSpeedIndex',
     'pessimisticSpeedIndex',
   ],
   convertNodeTimingsToTrace,

package/core/lib/lh-error.d.ts

@@ -105,6 +105,7 @@ export namespace UIStrings {
     const missingRequiredArtifact: string;
     const erroredRequiredArtifact: string;
     const oldChromeDoesNotSupportFeature: string;
+    const targetCrashed: string;
 }
 declare namespace ERRORS {
     namespace NO_SPEEDLINE_FRAMES {
@@ -340,6 +341,14 @@ declare namespace ERRORS {
         import message_30 = UIStrings.erroredRequiredArtifact;
         export { message_30 as message };
     }
+    namespace TARGET_CRASHED {
+        const code_31: string;
+        export { code_31 as code };
+        import message_31 = UIStrings.targetCrashed;
+        export { message_31 as message };
+        const lhrRuntimeError_22: boolean;
+        export { lhrRuntimeError_22 as lhrRuntimeError };
+    }
 }
 export {};
 //# sourceMappingURL=lh-error.d.ts.map

package/core/lib/lh-error.js

@@ -76,13 +76,13 @@ const UIStrings = {
   criTimeout: 'Timeout waiting for initial Debugger Protocol connection.',
   /**
    * @description Error message explaining that a resource that was required for testing was never collected. "artifactName" will be replaced with the name of the resource that wasn't collected.
-   * @example {WebAppManifest} artifactName
+   * @example {MainDocumentContent} artifactName
    * */
   missingRequiredArtifact: 'Required {artifactName} gatherer did not run.',
   /**
    * @description Error message explaining that there was an error while trying to collect a resource that was required for testing. "artifactName" will be replaced with the name of the resource that wasn't collected; "errorMessage" will be replaced with a string description of the error that occurred.
-   * @example {WebAppManifest} artifactName
-   * @example {Manifest invalid} errorMessage
+   * @example {MainDocumentContent} artifactName
+   * @example {Could not find main document} errorMessage
    * */
   erroredRequiredArtifact: 'Required {artifactName} gatherer encountered an error: {errorMessage}',
 
@@ -91,6 +91,9 @@ const UIStrings = {
    * @example {Largest Contentful Paint} featureName
    * */
   oldChromeDoesNotSupportFeature: 'This version of Chrome is too old to support \'{featureName}\'. Use a newer version to see full results.',
+
+  /** Error message explaining that the browser tab that Lighthouse is inspecting has crashed. */
+  targetCrashed: 'Browser tab has unexpectedly crashed.',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
@@ -423,6 +426,13 @@ const ERRORS = {
     message: UIStrings.erroredRequiredArtifact,
   },
 
+  /** The page has crashed and will no longer respond to 99% of CDP commmands. */
+  TARGET_CRASHED: {
+    code: 'TARGET_CRASHED',
+    message: UIStrings.targetCrashed,
+    lhrRuntimeError: true,
+  },
+
   // Hey! When adding a new error type, update lighthouse-result.proto too.
   // Only necessary for runtime errors, which come from artifacts or pageLoadErrors.
 };

package/core/lib/lighthouse-compatibility.js

@@ -108,19 +108,62 @@ function upgradeLhrForCompatibility(lhr) {
     }
   }
 
-  // This backcompat converts old LHRs (<9.0.0) to use the new "hidden" group.
-  // Old LHRs used "no group" to identify audits that should be hidden in performance instead of the "hidden" group.
-  // Newer LHRs use "no group" to identify opportunities and diagnostics whose groups are assigned by details type.
+  // This backcompat converts old LHRs to use the "hidden" and "diagnostics" groups.
+  // <9.0.0 LHRs used "no group" to identify audits that should be hidden in performance instead of the "hidden" group.
+  // <9.0.0 LHRs used "load-opportunities" for opportunity audits that are now grouped under "diagnostics".
+  // >=9.0.0 && <12.0.0 LHRs use "no group" to identify opportunities and diagnostics whose groups are assigned by details type.
+  // >=12.0.0 LHRs use the "hidden" group to identify hidden audits and "diagnostics" to identify diagnostics. "no group" is meaningless.
   const [majorVersion] = lhr.lighthouseVersion.split('.').map(Number);
   const perfCategory = lhr.categories['performance'];
-  if (majorVersion < 9 && perfCategory) {
-    if (!lhr.categoryGroups) lhr.categoryGroups = {};
-    lhr.categoryGroups['hidden'] = {title: ''};
+  if (perfCategory) {
+    if (majorVersion < 9) {
+      if (!lhr.categoryGroups) lhr.categoryGroups = {};
+      lhr.categoryGroups['hidden'] = {title: ''};
+      for (const auditRef of perfCategory.auditRefs) {
+        if (!auditRef.group) {
+          auditRef.group = 'hidden';
+        } else if (auditRef.group === 'load-opportunities') {
+          auditRef.group = 'diagnostics';
+        }
+      }
+    } else if (majorVersion < 12) {
+      for (const auditRef of perfCategory.auditRefs) {
+        if (!auditRef.group) {
+          auditRef.group = 'diagnostics';
+        }
+      }
+    }
+  }
+
+  if (majorVersion < 12 && perfCategory) {
+    /** @type {Map<string, string[]>} */
+    const metricRelevanceMap = new Map();
+
     for (const auditRef of perfCategory.auditRefs) {
-      if (!auditRef.group) {
-        auditRef.group = 'hidden';
-      } else if (['load-opportunities', 'diagnostics'].includes(auditRef.group)) {
-        delete auditRef.group;
+      /** @type {string[]|undefined} */
+      // @ts-expect-error Removed in v12
+      const relevantAudits = auditRef.relevantAudits;
+      if (!relevantAudits || !auditRef.acronym) continue;
+
+      for (const auditId of relevantAudits) {
+        const acronyms = metricRelevanceMap.get(auditId) || [];
+        acronyms.push(auditRef.acronym);
+        metricRelevanceMap.set(auditId, acronyms);
+      }
+    }
+
+    for (const [auditId, acronyms] of metricRelevanceMap) {
+      if (!acronyms.length) continue;
+
+      const audit = lhr.audits[auditId];
+      if (!audit) continue;
+
+      // Old versions can still define metric savings, let's not mess with it.
+      if (audit.metricSavings) continue;
+
+      audit.metricSavings = {};
+      for (const acronym of acronyms) {
+        audit.metricSavings[acronym] = 0;
       }
     }
   }

package/core/lib/navigation-error.js

@@ -150,6 +150,9 @@ function getPageLoadError(navigationError, context) {
   let finalRecord;
   if (mainRecord) {
     finalRecord = NetworkAnalyzer.resolveRedirects(mainRecord);
+  } else {
+    // We have no network requests to process, use the navError
+    return navigationError;
   }
 
   if (finalRecord?.mimeType === XHTML_MIME_TYPE) {