lighthouse 9.6.7 → 10.0.0

package/core/audits/preload-fonts.js

@@ -0,0 +1,106 @@
+/**
+ * @license Copyright 2020 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.
+ */
+
+/**
+ * @fileoverview
+ * Audit that checks whether fonts that use `font-display: optional` were preloaded.
+ */
+
+import {Audit} from './audit.js';
+import * as i18n from './../lib/i18n/i18n.js';
+import FontDisplay from './../audits/font-display.js';
+const PASSING_FONT_DISPLAY_REGEX = /^(optional)$/;
+import {NetworkRecords} from '../computed/network-records.js';
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on whether fonts that used `font-display: optional` were preloaded. This descriptive title is shown to users when all fonts that used `font-display: optional` were preloaded. */
+  title: 'Fonts with `font-display: optional` are preloaded',
+  /** Title of a Lighthouse audit that provides detail on whether fonts that used `font-display: optional` were preloaded. This descriptive title is shown to users when one or more fonts used `font-display: optional` and were not preloaded. */
+  failureTitle: 'Fonts with `font-display: optional` are not preloaded',
+  /** Description of a Lighthouse audit that tells the user why they should preload fonts if they are using `font-display: optional`. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'Preload `optional` fonts so first-time visitors may use them. [Learn more about preloading fonts](https://web.dev/preload-optional-fonts/)',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class PreloadFontsAudit extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'preload-fonts',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['devtoolsLogs', 'URL', 'CSSUsage'],
+    };
+  }
+
+  /**
+   * Finds which font URLs were attempted to be preloaded,
+   * ignoring those that failed to be reused and were requested again.
+   * Note: document.fonts.load() is a valid way to preload fonts,
+   * but we are not currently checking for that.
+   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+   * @return {Set<string>}
+   */
+  static getURLsAttemptedToPreload(networkRecords) {
+    const attemptedURLs = networkRecords
+      .filter(req => req.resourceType === 'Font')
+      .filter(req => req.isLinkPreload)
+      .map(req => req.url);
+
+    return new Set(attemptedURLs);
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit_(artifacts, context) {
+    const devtoolsLog = artifacts.devtoolsLogs[this.DEFAULT_PASS];
+    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
+
+    // Gets the URLs of fonts where font-display: optional.
+    const optionalFontURLs =
+      FontDisplay.findFontDisplayDeclarations(artifacts, PASSING_FONT_DISPLAY_REGEX).passingURLs;
+
+    // Gets the URLs of fonts attempted to be preloaded.
+    const preloadedFontURLs =
+      PreloadFontsAudit.getURLsAttemptedToPreload(networkRecords);
+
+    const results = Array.from(optionalFontURLs)
+      .filter(url => !preloadedFontURLs.has(url))
+      .map(url => {
+        return {url};
+      });
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
+    ];
+
+    return {
+      score: results.length > 0 ? 0 : 1,
+      details: Audit.makeTableDetails(headings, results),
+      notApplicable: optionalFontURLs.size === 0,
+    };
+  }
+
+  /**
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit() {
+    // Preload advice is on hold until https://github.com/GoogleChrome/lighthouse/issues/11960
+    // is resolved.
+    return {score: 1, notApplicable: true};
+  }
+}
+
+export default PreloadFontsAudit;
+export {UIStrings};

package/core/audits/prioritize-lcp-image.d.ts

@@ -0,0 +1,76 @@
+export default PrioritizeLcpImage;
+export type InitiatorPath = Array<{
+    url: string;
+    initiatorType: string;
+}>;
+/**
+ * @typedef {Array<{url: string, initiatorType: string}>} InitiatorPath
+ */
+declare class PrioritizeLcpImage extends Audit {
+    /**
+     *
+     * @param {LH.Artifacts.NetworkRequest} request
+     * @param {LH.Artifacts.NetworkRequest} mainResource
+     * @param {Array<LH.Gatherer.Simulation.GraphNode>} initiatorPath
+     * @return {boolean}
+     */
+    static shouldPreloadRequest(request: LH.Artifacts.NetworkRequest, mainResource: LH.Artifacts.NetworkRequest, initiatorPath: Array<LH.Gatherer.Simulation.GraphNode>): boolean;
+    /**
+     * @param {LH.Gatherer.Simulation.GraphNode} graph
+     * @param {string} imageUrl
+     * @return {{lcpNode: LH.Gatherer.Simulation.GraphNetworkNode|undefined, path: Array<LH.Gatherer.Simulation.GraphNetworkNode>|undefined}}
+     */
+    static findLCPNode(graph: LH.Gatherer.Simulation.GraphNode, imageUrl: string): {
+        lcpNode: LH.Gatherer.Simulation.GraphNetworkNode | undefined;
+        path: Array<LH.Gatherer.Simulation.GraphNetworkNode> | undefined;
+    };
+    /**
+     * @param {LH.Artifacts.NetworkRequest} mainResource
+     * @param {LH.Gatherer.Simulation.GraphNode} graph
+     * @param {string | undefined} lcpUrl
+     * @return {{lcpNodeToPreload?: LH.Gatherer.Simulation.GraphNetworkNode, initiatorPath?: InitiatorPath}}
+     */
+    static getLCPNodeToPreload(mainResource: LH.Artifacts.NetworkRequest, graph: LH.Gatherer.Simulation.GraphNode, lcpUrl: string | undefined): {
+        lcpNodeToPreload?: import("../lib/dependency-graph/network-node.js").NetworkNode | undefined;
+        initiatorPath?: InitiatorPath | undefined;
+    };
+    /**
+     * Match the LCP event with the paint event to get the URL of the image actually painted.
+     * This could differ from the `ImageElement` associated with the nodeId if e.g. the LCP
+     * was a pseudo-element associated with a node containing a smaller background-image.
+     * @param {LH.Trace} trace
+     * @param {LH.Artifacts.ProcessedNavigation} processedNavigation
+     * @return {string | undefined}
+     */
+    static getLcpUrl(trace: LH.Trace, processedNavigation: LH.Artifacts.ProcessedNavigation): string | undefined;
+    /**
+     * Computes the estimated effect of preloading the LCP image.
+     * @param {LH.Artifacts.TraceElement} lcpElement
+     * @param {LH.Gatherer.Simulation.GraphNetworkNode|undefined} lcpNode
+     * @param {LH.Gatherer.Simulation.GraphNode} graph
+     * @param {LH.Gatherer.Simulation.Simulator} simulator
+     * @return {{wastedMs: number, results: Array<{node: LH.Audit.Details.NodeValue, url: string, wastedMs: number}>}}
+     */
+    static computeWasteWithGraph(lcpElement: LH.Artifacts.TraceElement, lcpNode: LH.Gatherer.Simulation.GraphNetworkNode | undefined, graph: LH.Gatherer.Simulation.GraphNode, simulator: LH.Gatherer.Simulation.Simulator): {
+        wastedMs: number;
+        results: {
+            node: LH.Audit.Details.NodeValue;
+            url: string;
+            wastedMs: number;
+        }[];
+    };
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+}
+export namespace UIStrings {
+    const title: string;
+    const description: string;
+}
+import { Audit } from "./audit.js";
+import { NetworkRequest } from "../lib/network-request.js";
+import { ProcessedNavigation } from "../computed/processed-navigation.js";
+//# sourceMappingURL=prioritize-lcp-image.d.ts.map

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

@@ -0,0 +1,290 @@
+/**
+ * @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {Audit} from './audit.js';
+import * as i18n from '../lib/i18n/i18n.js';
+import {NetworkRequest} from '../lib/network-request.js';
+import {MainResource} from '../computed/main-resource.js';
+import {LanternLargestContentfulPaint} from '../computed/metrics/lantern-largest-contentful-paint.js';
+import {LoadSimulator} from '../computed/load-simulator.js';
+import {ByteEfficiencyAudit} from './byte-efficiency/byte-efficiency-audit.js';
+import {ProcessedNavigation} from '../computed/processed-navigation.js';
+
+const UIStrings = {
+  /** Title of a lighthouse audit that tells a user to preload an image in order to improve their LCP time. */
+  title: 'Preload Largest Contentful Paint image',
+  /** Description of a lighthouse audit that tells a user to preload an image in order to improve their LCP time.  */
+  description: 'If the LCP element is dynamically added to the page, you should preload the ' +
+    'image in order to improve LCP. [Learn more about preloading LCP elements](https://web.dev/optimize-lcp/#optimize-when-the-resource-is-discovered).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+/**
+ * @typedef {Array<{url: string, initiatorType: string}>} InitiatorPath
+ */
+
+class PrioritizeLcpImage extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'prioritize-lcp-image',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      supportedModes: ['navigation'],
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext', 'URL', 'TraceElements'],
+      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+    };
+  }
+
+  /**
+   *
+   * @param {LH.Artifacts.NetworkRequest} request
+   * @param {LH.Artifacts.NetworkRequest} mainResource
+   * @param {Array<LH.Gatherer.Simulation.GraphNode>} initiatorPath
+   * @return {boolean}
+   */
+  static shouldPreloadRequest(request, mainResource, initiatorPath) {
+    const mainResourceDepth = mainResource.redirects ? mainResource.redirects.length : 0;
+
+    // If it's already preloaded, no need to recommend it.
+    if (request.isLinkPreload) return false;
+    // It's not a request loaded over the network, don't recommend it.
+    if (NetworkRequest.isNonNetworkRequest(request)) return false;
+    // It's already discoverable from the main document, don't recommend it.
+    if (initiatorPath.length <= mainResourceDepth) return false;
+    // Finally, return whether or not it belongs to the main frame
+    return request.frameId === mainResource.frameId;
+  }
+
+  /**
+   * @param {LH.Gatherer.Simulation.GraphNode} graph
+   * @param {string} imageUrl
+   * @return {{lcpNode: LH.Gatherer.Simulation.GraphNetworkNode|undefined, path: Array<LH.Gatherer.Simulation.GraphNetworkNode>|undefined}}
+   */
+  static findLCPNode(graph, imageUrl) {
+    let lcpNode;
+    let path;
+    graph.traverse((node, traversalPath) => {
+      if (node.type !== 'network') return;
+      if (node.record.url === imageUrl) {
+        lcpNode = node;
+        path =
+          traversalPath.slice(1).filter(initiator => initiator.type === 'network');
+      }
+    });
+    return {
+      lcpNode,
+      path,
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts.NetworkRequest} mainResource
+   * @param {LH.Gatherer.Simulation.GraphNode} graph
+   * @param {string | undefined} lcpUrl
+   * @return {{lcpNodeToPreload?: LH.Gatherer.Simulation.GraphNetworkNode, initiatorPath?: InitiatorPath}}
+   */
+  static getLCPNodeToPreload(mainResource, graph, lcpUrl) {
+    if (!lcpUrl) return {};
+    const {lcpNode, path} = PrioritizeLcpImage.findLCPNode(graph, lcpUrl);
+    if (!lcpNode || !path) return {};
+
+    // eslint-disable-next-line max-len
+    const shouldPreload = PrioritizeLcpImage.shouldPreloadRequest(lcpNode.record, mainResource, path);
+    const lcpNodeToPreload = shouldPreload ? lcpNode : undefined;
+
+    const initiatorPath = [
+      {url: lcpNode.record.url, initiatorType: lcpNode.initiatorType},
+      ...path.map(n => ({url: n.record.url, initiatorType: n.initiatorType})),
+    ];
+
+    return {
+      lcpNodeToPreload,
+      initiatorPath,
+    };
+  }
+
+  /**
+   * Match the LCP event with the paint event to get the URL of the image actually painted.
+   * This could differ from the `ImageElement` associated with the nodeId if e.g. the LCP
+   * was a pseudo-element associated with a node containing a smaller background-image.
+   * @param {LH.Trace} trace
+   * @param {LH.Artifacts.ProcessedNavigation} processedNavigation
+   * @return {string | undefined}
+   */
+  static getLcpUrl(trace, processedNavigation) {
+    // Use main-frame-only LCP to match the metric value.
+    const lcpEvent = processedNavigation.largestContentfulPaintEvt;
+    if (!lcpEvent) return;
+
+    const lcpImagePaintEvent = trace.traceEvents.filter(e => {
+      return e.name === 'LargestImagePaint::Candidate' &&
+          e.args.frame === lcpEvent.args.frame &&
+          e.args.data?.DOMNodeId === lcpEvent.args.data?.nodeId &&
+          e.args.data?.size === lcpEvent.args.data?.size;
+    // Get last candidate, in case there was more than one.
+    }).sort((a, b) => b.ts - a.ts)[0];
+
+    return lcpImagePaintEvent?.args.data?.imageUrl;
+  }
+
+  /**
+   * Computes the estimated effect of preloading the LCP image.
+   * @param {LH.Artifacts.TraceElement} lcpElement
+   * @param {LH.Gatherer.Simulation.GraphNetworkNode|undefined} lcpNode
+   * @param {LH.Gatherer.Simulation.GraphNode} graph
+   * @param {LH.Gatherer.Simulation.Simulator} simulator
+   * @return {{wastedMs: number, results: Array<{node: LH.Audit.Details.NodeValue, url: string, wastedMs: number}>}}
+   */
+  static computeWasteWithGraph(lcpElement, lcpNode, graph, simulator) {
+    if (!lcpNode) {
+      return {
+        wastedMs: 0,
+        results: [],
+      };
+    }
+
+    const modifiedGraph = graph.cloneWithRelationships();
+
+    // Store the IDs of the LCP Node's dependencies for later
+    /** @type {Set<string>} */
+    const dependenciesIds = new Set();
+    for (const node of lcpNode.getDependencies()) {
+      dependenciesIds.add(node.id);
+    }
+
+    /** @type {LH.Gatherer.Simulation.GraphNode|null} */
+    let modifiedLCPNode = null;
+    /** @type {LH.Gatherer.Simulation.GraphNode|null} */
+    let mainDocumentNode = null;
+
+    for (const {node} of modifiedGraph.traverseGenerator()) {
+      if (node.type !== 'network') continue;
+
+      if (node.isMainDocument()) {
+        mainDocumentNode = node;
+      } else if (node.id === lcpNode.id) {
+        modifiedLCPNode = node;
+      }
+    }
+
+    if (!mainDocumentNode) {
+      // Should always find the main document node
+      throw new Error('Could not find main document node');
+    }
+
+    if (!modifiedLCPNode) {
+      // Should always find the LCP node as well or else this function wouldn't have been called
+      throw new Error('Could not find the LCP node');
+    }
+
+    // Preload will request the resource as soon as its discovered in the main document.
+    // Reflect this change in the dependencies in our modified graph.
+    modifiedLCPNode.removeAllDependencies();
+    modifiedLCPNode.addDependency(mainDocumentNode);
+
+    const simulationBeforeChanges = simulator.simulate(graph, {flexibleOrdering: true});
+    const simulationAfterChanges = simulator.simulate(modifiedGraph, {flexibleOrdering: true});
+    const lcpTimingsBefore = simulationBeforeChanges.nodeTimings.get(lcpNode);
+    if (!lcpTimingsBefore) throw new Error('Impossible - node timings should never be undefined');
+    const lcpTimingsAfter = simulationAfterChanges.nodeTimings.get(modifiedLCPNode);
+    if (!lcpTimingsAfter) throw new Error('Impossible - node timings should never be undefined');
+    /** @type {Map<String, LH.Gatherer.Simulation.GraphNode>} */
+    const modifiedNodesById = Array.from(simulationAfterChanges.nodeTimings.keys())
+      .reduce((map, node) => map.set(node.id, node), new Map());
+
+    // Even with preload, the image can't be painted before it's even inserted into the DOM.
+    // New LCP time will be the max of image download and image in DOM (endTime of its deps).
+    let maxDependencyEndTime = 0;
+    for (const nodeId of Array.from(dependenciesIds)) {
+      const node = modifiedNodesById.get(nodeId);
+      if (!node) throw new Error('Impossible - node should never be undefined');
+      const timings = simulationAfterChanges.nodeTimings.get(node);
+      const endTime = timings?.endTime || 0;
+      maxDependencyEndTime = Math.max(maxDependencyEndTime, endTime);
+    }
+
+    const wastedMs = lcpTimingsBefore.endTime -
+      Math.max(lcpTimingsAfter.endTime, maxDependencyEndTime);
+
+    return {
+      wastedMs,
+      results: [{
+        node: Audit.makeNodeItem(lcpElement.node),
+        url: lcpNode.record.url,
+        wastedMs,
+      }],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const gatherContext = artifacts.GatherContext;
+    const trace = artifacts.traces[PrioritizeLcpImage.DEFAULT_PASS];
+    const devtoolsLog = artifacts.devtoolsLogs[PrioritizeLcpImage.DEFAULT_PASS];
+    const URL = artifacts.URL;
+    const metricData = {trace, devtoolsLog, gatherContext, settings: context.settings, URL};
+    const lcpElement = artifacts.TraceElements
+      .find(element => element.traceEventType === 'largest-contentful-paint');
+
+    if (!lcpElement || lcpElement.type !== 'image') {
+      return {score: null, notApplicable: true};
+    }
+
+    const [processedNavigation, mainResource, lanternLCP, simulator] = await Promise.all([
+      ProcessedNavigation.request(trace, context),
+      MainResource.request({devtoolsLog, URL}, context),
+      LanternLargestContentfulPaint.request(metricData, context),
+      LoadSimulator.request({devtoolsLog, settings: context.settings}, context),
+    ]);
+
+    const lcpUrl = PrioritizeLcpImage.getLcpUrl(trace, processedNavigation);
+    const graph = lanternLCP.pessimisticGraph;
+    // eslint-disable-next-line max-len
+    const {lcpNodeToPreload, initiatorPath} = PrioritizeLcpImage.getLCPNodeToPreload(mainResource, graph, lcpUrl);
+
+    const {results, wastedMs} =
+      PrioritizeLcpImage.computeWasteWithGraph(lcpElement, lcpNodeToPreload, graph, simulator);
+
+    /** @type {LH.Audit.Details.Opportunity['headings']} */
+    const headings = [
+      {key: 'node', valueType: 'node', label: ''},
+      {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
+      {key: 'wastedMs', valueType: 'timespanMs', label: str_(i18n.UIStrings.columnWastedMs)},
+    ];
+    const details = Audit.makeOpportunityDetails(headings, results,
+      {overallSavingsMs: wastedMs});
+
+    // If LCP element was an image and had valid network records (regardless of
+    // if it should be preloaded), it will be found first in the `initiatorPath`.
+    // Otherwise path and length will be undefined.
+    if (initiatorPath) {
+      details.debugData = {
+        type: 'debugdata',
+        initiatorPath,
+        pathLength: initiatorPath.length,
+      };
+    }
+
+    return {
+      score: ByteEfficiencyAudit.scoreForWastedMs(wastedMs),
+      numericValue: wastedMs,
+      numericUnit: 'millisecond',
+      displayValue: wastedMs ? str_(i18n.UIStrings.displayValueMsSavings, {wastedMs}) : '',
+      details,
+    };
+  }
+}
+
+export default PrioritizeLcpImage;
+export {UIStrings};

package/core/audits/redirects.d.ts

@@ -0,0 +1,33 @@
+export default Redirects;
+declare class Redirects extends Audit {
+    /**
+     * This method generates the document request chain including client-side and server-side redirects.
+     *
+     * Example:
+     *    GET /initialUrl => 302 /firstRedirect
+     *    GET /firstRedirect => 200 /firstRedirect, window.location = '/secondRedirect'
+     *    GET /secondRedirect => 302 /thirdRedirect
+     *    GET /thirdRedirect => 200 /mainDocumentUrl
+     *
+     * Returns network records [/initialUrl, /firstRedirect, /secondRedirect, /thirdRedirect, /mainDocumentUrl]
+     *
+     * @param {LH.Artifacts.NetworkRequest} mainResource
+     * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+     * @param {LH.Artifacts.ProcessedTrace} processedTrace
+     * @return {Array<LH.Artifacts.NetworkRequest>}
+     */
+    static getDocumentRequestChain(mainResource: LH.Artifacts.NetworkRequest, networkRecords: Array<LH.Artifacts.NetworkRequest>, processedTrace: LH.Artifacts.ProcessedTrace): Array<LH.Artifacts.NetworkRequest>;
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+}
+export namespace UIStrings {
+    const title: string;
+    const description: string;
+}
+import { Audit } from "./audit.js";
+import { ProcessedTrace } from "../computed/processed-trace.js";
+//# sourceMappingURL=redirects.d.ts.map

package/core/audits/redirects.js

@@ -0,0 +1,164 @@
+/**
+ * @license Copyright 2017 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {Audit} from './audit.js';
+import {ByteEfficiencyAudit} from './byte-efficiency/byte-efficiency-audit.js';
+import * as i18n from '../lib/i18n/i18n.js';
+import {ProcessedTrace} from '../computed/processed-trace.js';
+import {NetworkRecords} from '../computed/network-records.js';
+import {MainResource} from '../computed/main-resource.js';
+import {LanternInteractive} from '../computed/metrics/lantern-interactive.js';
+
+const UIStrings = {
+  /** Imperative title of a Lighthouse audit that tells the user to eliminate the redirects taken through multiple URLs to load the page. This is shown in a list of audits that Lighthouse generates. */
+  title: 'Avoid multiple page redirects',
+  /** Description of a Lighthouse audit that tells users why they should reduce the number of server-side redirects on their page. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'Redirects introduce additional delays before the page can be loaded. [Learn how to avoid page redirects](https://developer.chrome.com/docs/lighthouse/performance/redirects/).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class Redirects extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'redirects',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      supportedModes: ['navigation'],
+      requiredArtifacts: ['URL', 'GatherContext', 'devtoolsLogs', 'traces'],
+    };
+  }
+
+  /**
+   * This method generates the document request chain including client-side and server-side redirects.
+   *
+   * Example:
+   *    GET /initialUrl => 302 /firstRedirect
+   *    GET /firstRedirect => 200 /firstRedirect, window.location = '/secondRedirect'
+   *    GET /secondRedirect => 302 /thirdRedirect
+   *    GET /thirdRedirect => 200 /mainDocumentUrl
+   *
+   * Returns network records [/initialUrl, /firstRedirect, /secondRedirect, /thirdRedirect, /mainDocumentUrl]
+   *
+   * @param {LH.Artifacts.NetworkRequest} mainResource
+   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+   * @param {LH.Artifacts.ProcessedTrace} processedTrace
+   * @return {Array<LH.Artifacts.NetworkRequest>}
+   */
+  static getDocumentRequestChain(mainResource, networkRecords, processedTrace) {
+    /** @type {Array<LH.Artifacts.NetworkRequest>} */
+    const documentRequests = [];
+
+    // Find all the document requests by examining navigation events and their redirects
+    for (const event of processedTrace.processEvents) {
+      if (event.name !== 'navigationStart') continue;
+
+      const data = event.args.data || {};
+      if (!data.documentLoaderURL || !data.isLoadingMainFrame) continue;
+
+      let networkRecord = networkRecords.find(record => record.url === data.documentLoaderURL);
+      while (networkRecord) {
+        documentRequests.push(networkRecord);
+        networkRecord = networkRecord.redirectDestination;
+      }
+    }
+
+    // If we found documents in the trace, just use this directly.
+    if (documentRequests.length) return documentRequests;
+
+    // Use the main resource as a backup if we didn't find any modern navigationStart events
+    return (mainResource.redirects || []).concat(mainResource);
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const settings = context.settings;
+    const trace = artifacts.traces[Audit.DEFAULT_PASS];
+    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const gatherContext = artifacts.GatherContext;
+
+    const processedTrace = await ProcessedTrace.request(trace, context);
+    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
+    const mainResource = await MainResource.request({URL: artifacts.URL, devtoolsLog}, context);
+
+    const metricComputationData = {trace, devtoolsLog, gatherContext, settings, URL: artifacts.URL};
+    const metricResult = await LanternInteractive.request(metricComputationData, context);
+
+    /** @type {Map<string, LH.Gatherer.Simulation.NodeTiming>} */
+    const nodeTimingsByUrl = new Map();
+    for (const [node, timing] of metricResult.pessimisticEstimate.nodeTimings.entries()) {
+      if (node.type === 'network') {
+        nodeTimingsByUrl.set(node.record.url, timing);
+      }
+    }
+
+    const documentRequests = Redirects.getDocumentRequestChain(
+      mainResource, networkRecords, processedTrace);
+
+    let totalWastedMs = 0;
+    const tableRows = [];
+
+    // Iterate through all the document requests and report how much time was wasted until the
+    // next document request was issued. The final document request will have a `wastedMs` of 0.
+    for (let i = 0; i < documentRequests.length; i++) {
+      // If we didn't have enough documents for at least 1 redirect, just skip this loop.
+      if (documentRequests.length < 2) break;
+
+      const initialRequest = documentRequests[i];
+      const redirectedRequest = documentRequests[i + 1] || initialRequest;
+
+      const initialTiming = nodeTimingsByUrl.get(initialRequest.url);
+      const redirectedTiming = nodeTimingsByUrl.get(redirectedRequest.url);
+      if (!initialTiming || !redirectedTiming) {
+        throw new Error('Could not find redirects in graph');
+      }
+
+      const lanternTimingDeltaMs = redirectedTiming.startTime - initialTiming.startTime;
+      const observedTimingDeltaMs = redirectedRequest.networkRequestTime -
+          initialRequest.networkRequestTime;
+      const wastedMs = settings.throttlingMethod === 'simulate' ?
+        lanternTimingDeltaMs : observedTimingDeltaMs;
+      totalWastedMs += wastedMs;
+
+      tableRows.push({
+        url: initialRequest.url,
+        wastedMs,
+      });
+    }
+
+    /** @type {LH.Audit.Details.Opportunity['headings']} */
+    const headings = [
+      {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
+      {key: 'wastedMs', valueType: 'timespanMs', label: str_(i18n.UIStrings.columnTimeSpent)},
+    ];
+    const details = Audit.makeOpportunityDetails(headings, tableRows,
+      {overallSavingsMs: totalWastedMs});
+
+    return {
+      // We award a passing grade if you only have 1 redirect
+      // TODO(phulce): reconsider if cases like the example in https://github.com/GoogleChrome/lighthouse/issues/8984
+      // should fail this audit.
+      score: documentRequests.length <= 2 ? 1 : ByteEfficiencyAudit.scoreForWastedMs(totalWastedMs),
+      numericValue: totalWastedMs,
+      numericUnit: 'millisecond',
+      displayValue: totalWastedMs ?
+        str_(i18n.UIStrings.displayValueMsSavings, {wastedMs: totalWastedMs}) :
+        '',
+      details,
+    };
+  }
+}
+
+export default Redirects;
+export {UIStrings};