lighthouse 9.6.7 → 10.0.0

package/core/audits/uses-rel-preconnect.js

@@ -0,0 +1,253 @@
+/**
+ * @license Copyright 2018 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 UrlUtils from '../lib/url-utils.js';
+import * as i18n from '../lib/i18n/i18n.js';
+import {NetworkRecords} from '../computed/network-records.js';
+import {MainResource} from '../computed/main-resource.js';
+import {LoadSimulator} from '../computed/load-simulator.js';
+import {ProcessedNavigation} from '../computed/processed-navigation.js';
+import {PageDependencyGraph} from '../computed/page-dependency-graph.js';
+import {LanternLargestContentfulPaint} from '../computed/metrics/lantern-largest-contentful-paint.js';
+
+// Preconnect establishes a "clean" socket. Chrome's socket manager will keep an unused socket
+// around for 10s. Meaning, the time delta between processing preconnect a request should be <10s,
+// otherwise it's wasted. We add a 5s margin so we are sure to capture all key requests.
+// @see https://github.com/GoogleChrome/lighthouse/issues/3106#issuecomment-333653747
+const PRECONNECT_SOCKET_MAX_IDLE_IN_MS = 15_000;
+
+const IGNORE_THRESHOLD_IN_MS = 50;
+
+const UIStrings = {
+  /** Imperative title of a Lighthouse audit that tells the user to connect early to internet domains that will be used to load page resources. Origin is the correct term, however 'domain name' could be used if neccsesary. This is displayed in a list of audit titles that Lighthouse generates. */
+  title: 'Preconnect to required origins',
+  /** Description of a Lighthouse audit that tells the user how to connect early to third-party domains that will be used to load page resources. 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:
+    'Consider adding `preconnect` or `dns-prefetch` resource hints to establish early ' +
+    'connections to important third-party origins. ' +
+    '[Learn how to preconnect to required origins](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/).',
+  /**
+   * @description A warning message that is shown when the user tried to follow the advice of the audit, but it's not working as expected.
+   * @example {https://example.com} securityOrigin
+   * */
+  unusedWarning: 'A `<link rel=preconnect>` was found for "{securityOrigin}" but was not used ' +
+    'by the browser. Only use `preconnect` for important origins ' +
+    'that the page will certainly request.',
+  /**
+   * @description A warning message that is shown when the user tried to follow the advice of the audit, but it's not working as expected. Forgetting to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preconnect links.
+   * @example {https://example.com} securityOrigin
+   * */
+  crossoriginWarning: 'A `<link rel=preconnect>` was found for "{securityOrigin}" but was not ' +
+    'used by the browser. Check that you are using the `crossorigin` attribute properly.',
+  /** A warning message that is shown when found more than 2 preconnected links */
+  tooManyPreconnectLinksWarning: 'More than 2 `<link rel=preconnect>` connections were found. ' +
+   'These should be used sparingly and only to the most important origins.',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class UsesRelPreconnectAudit extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'uses-rel-preconnect',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      supportedModes: ['navigation'],
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL', 'LinkElements'],
+      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+    };
+  }
+
+  /**
+   * Check if record has valid timing
+   * @param {LH.Artifacts.NetworkRequest} record
+   * @return {boolean}
+   */
+  static hasValidTiming(record) {
+    return !!record.timing && record.timing.connectEnd > 0 && record.timing.connectStart > 0;
+  }
+
+  /**
+   * Check is the connection is already open
+   * @param {LH.Artifacts.NetworkRequest} record
+   * @return {boolean}
+   */
+  static hasAlreadyConnectedToOrigin(record) {
+    return (
+      !!record.timing &&
+      record.timing.dnsEnd - record.timing.dnsStart === 0 &&
+      record.timing.connectEnd - record.timing.connectStart === 0
+    );
+  }
+
+  /**
+   * Check is the connection has started before the socket idle time
+   * @param {LH.Artifacts.NetworkRequest} record
+   * @param {LH.Artifacts.NetworkRequest} mainResource
+   * @return {boolean}
+   */
+  static socketStartTimeIsBelowThreshold(record, mainResource) {
+    const timeSinceMainEnd = Math.max(0, record.networkRequestTime - mainResource.networkEndTime);
+    return timeSinceMainEnd < PRECONNECT_SOCKET_MAX_IDLE_IN_MS;
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const trace = artifacts.traces[UsesRelPreconnectAudit.DEFAULT_PASS];
+    const devtoolsLog = artifacts.devtoolsLogs[UsesRelPreconnectAudit.DEFAULT_PASS];
+    const settings = context.settings;
+
+    let maxWasted = 0;
+    /** @type {Array<LH.IcuMessage>} */
+    const warnings = [];
+
+    const [networkRecords, mainResource, loadSimulator, processedNavigation, pageGraph] =
+      await Promise.all([
+        NetworkRecords.request(devtoolsLog, context),
+        MainResource.request({devtoolsLog, URL: artifacts.URL}, context),
+        LoadSimulator.request({devtoolsLog, settings}, context),
+        ProcessedNavigation.request(trace, context),
+        PageDependencyGraph.request({trace, devtoolsLog, URL: artifacts.URL}, context),
+      ]);
+
+    const {rtt, additionalRttByOrigin} = loadSimulator.getOptions();
+    const lcpGraph =
+      await LanternLargestContentfulPaint.getPessimisticGraph(pageGraph, processedNavigation);
+    /** @type {Set<string>} */
+    const lcpGraphURLs = new Set();
+    lcpGraph.traverse(node => {
+      if (node.type === 'network' ) lcpGraphURLs.add(node.record.url);
+    });
+
+    /** @type {Map<string, LH.Artifacts.NetworkRequest[]>}  */
+    const origins = new Map();
+    networkRecords
+      .forEach(record => {
+        if (
+          // Filter out all resources where timing info was invalid.
+          !UsesRelPreconnectAudit.hasValidTiming(record) ||
+          // Filter out all resources that are loaded by the document. Connections are already early.
+          record.initiator.url === mainResource.url ||
+          // Filter out urls that do not have an origin (data, file, etc).
+          !record.parsedURL || !record.parsedURL.securityOrigin ||
+          // Filter out all resources that have the same origin. We're already connected.
+          mainResource.parsedURL.securityOrigin === record.parsedURL.securityOrigin ||
+          // Filter out anything that wasn't part of LCP. Only recommend important origins.
+          !lcpGraphURLs.has(record.url) ||
+          // Filter out all resources where origins are already resolved.
+          UsesRelPreconnectAudit.hasAlreadyConnectedToOrigin(record) ||
+          // Make sure the requests are below the PRECONNECT_SOCKET_MAX_IDLE_IN_MS (15s) mark.
+          !UsesRelPreconnectAudit.socketStartTimeIsBelowThreshold(record, mainResource)
+        ) {
+          return;
+        }
+
+        const securityOrigin = record.parsedURL.securityOrigin;
+        const records = origins.get(securityOrigin) || [];
+        records.push(record);
+        origins.set(securityOrigin, records);
+      });
+
+    const preconnectLinks = artifacts.LinkElements.filter(el => el.rel === 'preconnect');
+    const preconnectOrigins =
+      new Set(preconnectLinks.map(link => UrlUtils.getOrigin(link.href || '')));
+
+    /** @type {Array<{url: string, wastedMs: number}>}*/
+    let results = [];
+    origins.forEach(records => {
+      // Sometimes requests are done simultaneous and the connection has not been made
+      // chrome will try to connect for each network record, we get the first record
+      const firstRecordOfOrigin = records.reduce((firstRecord, record) => {
+        return (record.networkRequestTime < firstRecord.networkRequestTime) ? record : firstRecord;
+      });
+
+      // Skip the origin if we don't have timing information
+      if (!firstRecordOfOrigin.timing) return;
+
+      const securityOrigin = firstRecordOfOrigin.parsedURL.securityOrigin;
+
+      // Approximate the connection time with the duration of TCP (+potentially SSL) handshake
+      // DNS time can be large but can also be 0 if a commonly used origin that's cached, so make
+      // no assumption about DNS.
+      const additionalRtt = additionalRttByOrigin.get(securityOrigin) || 0;
+      let connectionTime = rtt + additionalRtt;
+      // TCP Handshake will be at least 2 RTTs for TLS connections
+      if (firstRecordOfOrigin.parsedURL.scheme === 'https') connectionTime = connectionTime * 2;
+
+      const timeBetweenMainResourceAndDnsStart =
+        firstRecordOfOrigin.networkRequestTime -
+        mainResource.networkEndTime +
+        firstRecordOfOrigin.timing.dnsStart;
+
+      const wastedMs = Math.min(connectionTime, timeBetweenMainResourceAndDnsStart);
+      if (wastedMs < IGNORE_THRESHOLD_IN_MS) return;
+
+      if (preconnectOrigins.has(securityOrigin)) {
+        // Add a warning for any origin the user tried to preconnect to but failed
+        warnings.push(str_(UIStrings.crossoriginWarning, {securityOrigin}));
+        return;
+      }
+
+      maxWasted = Math.max(wastedMs, maxWasted);
+      results.push({
+        url: securityOrigin,
+        wastedMs: wastedMs,
+      });
+    });
+
+    results = results
+      .sort((a, b) => b.wastedMs - a.wastedMs);
+
+    // Add warnings for any preconnect origins that aren't being used.
+    for (const origin of preconnectOrigins) {
+      if (!origin) continue;
+      if (networkRecords.some(record => origin === record.parsedURL.securityOrigin)) continue;
+      warnings.push(str_(UIStrings.unusedWarning, {securityOrigin: origin}));
+    }
+
+    // Shortcut early with a pass when the user has already configured preconnect.
+    // https://twitter.com/_tbansal/status/1197771385172480001
+    if (preconnectLinks.length >= 2) {
+      return {
+        score: 1,
+        warnings: preconnectLinks.length >= 3 ?
+          [...warnings, str_(UIStrings.tooManyPreconnectLinksWarning)] : warnings,
+      };
+    }
+
+    /** @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.columnWastedMs)},
+    ];
+
+    const details = Audit.makeOpportunityDetails(headings, results,
+      {overallSavingsMs: maxWasted});
+
+    return {
+      score: ByteEfficiencyAudit.scoreForWastedMs(maxWasted),
+      numericValue: maxWasted,
+      numericUnit: 'millisecond',
+      displayValue: maxWasted ?
+        str_(i18n.UIStrings.displayValueMsSavings, {wastedMs: maxWasted}) :
+        '',
+      warnings,
+      details,
+    };
+  }
+}
+
+export default UsesRelPreconnectAudit;
+export {UIStrings};

package/core/audits/uses-rel-preload.d.ts

@@ -0,0 +1,61 @@
+export default UsesRelPreloadAudit;
+declare class UsesRelPreloadAudit extends Audit {
+    /**
+     * @param {LH.Artifacts.NetworkRequest} mainResource
+     * @param {LH.Gatherer.Simulation.GraphNode} graph
+     * @return {Set<string>}
+     */
+    static getURLsToPreload(mainResource: LH.Artifacts.NetworkRequest, graph: LH.Gatherer.Simulation.GraphNode): Set<string>;
+    /**
+     * Finds which URLs were attempted to be preloaded, but failed to be reused and were requested again.
+     *
+     * @param {LH.Gatherer.Simulation.GraphNode} graph
+     * @return {Set<string>}
+     */
+    static getURLsFailedToPreload(graph: LH.Gatherer.Simulation.GraphNode): Set<string>;
+    /**
+     * We want to preload all first party critical requests at depth 2.
+     * Third party requests can be tricky to know the URL ahead of time.
+     * Critical requests at depth 1 would already be identified by the browser for preloading.
+     * Critical requests deeper than depth 2 are more likely to be a case-by-case basis such that it
+     * would be a little risky to recommend blindly.
+     *
+     * @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;
+    /**
+     * Computes the estimated effect of preloading all the resources.
+     * @param {Set<string>} urls The array of byte savings results per resource
+     * @param {LH.Gatherer.Simulation.GraphNode} graph
+     * @param {LH.Gatherer.Simulation.Simulator} simulator
+     * @return {{wastedMs: number, results: Array<{url: string, wastedMs: number}>}}
+     */
+    static computeWasteWithGraph(urls: Set<string>, graph: LH.Gatherer.Simulation.GraphNode, simulator: LH.Gatherer.Simulation.Simulator): {
+        wastedMs: number;
+        results: Array<{
+            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>;
+    /**
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(): Promise<LH.Audit.Product>;
+}
+export namespace UIStrings {
+    const title: string;
+    const description: string;
+    const crossoriginWarning: string;
+}
+import { Audit } from "./audit.js";
+import { NetworkRequest } from "../lib/network-request.js";
+//# sourceMappingURL=uses-rel-preload.d.ts.map

package/core/audits/uses-rel-preload.js

@@ -0,0 +1,269 @@
+/**
+ * @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 UrlUtils from '../lib/url-utils.js';
+import {NetworkRequest} from '../lib/network-request.js';
+import {Audit} from './audit.js';
+import {ByteEfficiencyAudit} from './byte-efficiency/byte-efficiency-audit.js';
+import {CriticalRequestChains} from '../computed/critical-request-chains.js';
+import * as i18n from '../lib/i18n/i18n.js';
+import {MainResource} from '../computed/main-resource.js';
+import {PageDependencyGraph} from '../computed/page-dependency-graph.js';
+import {LoadSimulator} from '../computed/load-simulator.js';
+
+const UIStrings = {
+  /** Imperative title of a Lighthouse audit that tells the user to use <link rel=preload> to initiate important network requests earlier during page load. This is displayed in a list of audit titles that Lighthouse generates. */
+  title: 'Preload key requests',
+  /** Description of a Lighthouse audit that tells the user *why* they should preload important network requests. The associated network requests are started halfway through pageload (or later) but should be started at the beginning. This is displayed after a user expands the section to see more. No character length limits. '<link rel=preload>' is the html code the user would include in their page and shouldn't be translated. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'Consider using `<link rel=preload>` to prioritize fetching resources that are ' +
+    'currently requested later in page load. ' +
+    '[Learn how to preload key requests](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/).',
+  /**
+   * @description A warning message that is shown when the user tried to follow the advice of the audit, but it's not working as expected. Forgetting to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preload links.
+   * @example {https://example.com} preloadURL
+   * */
+  crossoriginWarning: 'A preload `<link>` was found for "{preloadURL}" but was not used ' +
+    'by the browser. Check that you are using the `crossorigin` attribute properly.',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+const THRESHOLD_IN_MS = 100;
+
+class UsesRelPreloadAudit extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'uses-rel-preload',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      supportedModes: ['navigation'],
+      requiredArtifacts: ['devtoolsLogs', 'traces', 'URL'],
+      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts.NetworkRequest} mainResource
+   * @param {LH.Gatherer.Simulation.GraphNode} graph
+   * @return {Set<string>}
+   */
+  static getURLsToPreload(mainResource, graph) {
+    /** @type {Set<string>} */
+    const urls = new Set();
+
+    graph.traverse((node, traversalPath) => {
+      if (node.type !== 'network') return;
+      // Don't include the node itself or any CPU nodes in the initiatorPath
+      const path = traversalPath.slice(1).filter(initiator => initiator.type === 'network');
+      if (!UsesRelPreloadAudit.shouldPreloadRequest(node.record, mainResource, path)) return;
+      urls.add(node.record.url);
+    });
+
+    return urls;
+  }
+
+  /**
+   * Finds which URLs were attempted to be preloaded, but failed to be reused and were requested again.
+   *
+   * @param {LH.Gatherer.Simulation.GraphNode} graph
+   * @return {Set<string>}
+   */
+  static getURLsFailedToPreload(graph) {
+    /** @type {Array<LH.Artifacts.NetworkRequest>} */
+    const requests = [];
+    graph.traverse(node => node.type === 'network' && requests.push(node.record));
+
+    const preloadRequests = requests.filter(req => req.isLinkPreload);
+    const preloadURLsByFrame = new Map();
+    for (const request of preloadRequests) {
+      const preloadURLs = preloadURLsByFrame.get(request.frameId) || new Set();
+      preloadURLs.add(request.url);
+      preloadURLsByFrame.set(request.frameId, preloadURLs);
+    }
+
+    // A failed preload attempt will manifest as a URL that was requested twice within the same frame.
+    // Once with `isLinkPreload` AND again without `isLinkPreload` but not hitting the cache.
+    const duplicateRequestsAfterPreload = requests.filter(request => {
+      const preloadURLsForFrame = preloadURLsByFrame.get(request.frameId);
+      if (!preloadURLsForFrame) return false;
+      if (!preloadURLsForFrame.has(request.url)) return false;
+      const fromCache = request.fromDiskCache ||
+        request.fromMemoryCache ||
+        request.fromPrefetchCache;
+      return !fromCache && !request.isLinkPreload;
+    });
+
+    return new Set(duplicateRequestsAfterPreload.map(req => req.url));
+  }
+
+  /**
+   * We want to preload all first party critical requests at depth 2.
+   * Third party requests can be tricky to know the URL ahead of time.
+   * Critical requests at depth 1 would already be identified by the browser for preloading.
+   * Critical requests deeper than depth 2 are more likely to be a case-by-case basis such that it
+   * would be a little risky to recommend blindly.
+   *
+   * @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 critical, don't recommend it.
+    if (!CriticalRequestChains.isCritical(request, mainResource)) return false;
+    // It's not a request loaded over the network, don't recommend it.
+    if (NetworkRequest.isNonNetworkRequest(request)) return false;
+    // It's not at the right depth, don't recommend it.
+    if (initiatorPath.length !== mainResourceDepth + 2) return false;
+    // It's not a request for the main frame, it wouldn't get reused even if you did preload it.
+    if (request.frameId !== mainResource.frameId) return false;
+    // We survived everything else, just check that it's a first party request.
+    return UrlUtils.rootDomainsMatch(request.url, mainResource.url);
+  }
+
+  /**
+   * Computes the estimated effect of preloading all the resources.
+   * @param {Set<string>} urls The array of byte savings results per resource
+   * @param {LH.Gatherer.Simulation.GraphNode} graph
+   * @param {LH.Gatherer.Simulation.Simulator} simulator
+   * @return {{wastedMs: number, results: Array<{url: string, wastedMs: number}>}}
+   */
+  static computeWasteWithGraph(urls, graph, simulator) {
+    if (!urls.size) {
+      return {wastedMs: 0, results: []};
+    }
+
+    // Preload changes the ordering of requests, simulate the original graph with flexible ordering
+    // to have a reasonable baseline for comparison.
+    const simulationBeforeChanges = simulator.simulate(graph, {flexibleOrdering: true});
+    const modifiedGraph = graph.cloneWithRelationships();
+
+    /** @type {Array<LH.Gatherer.Simulation.GraphNetworkNode>} */
+    const nodesToPreload = [];
+    /** @type {LH.Gatherer.Simulation.GraphNode|null} */
+    let mainDocumentNode = null;
+    modifiedGraph.traverse(node => {
+      if (node.type !== 'network') return;
+
+      if (node.isMainDocument()) {
+        mainDocumentNode = node;
+      } else if (node.record && urls.has(node.record.url)) {
+        nodesToPreload.push(node);
+      }
+    });
+
+    if (!mainDocumentNode) {
+      // Should always find the main document node
+      throw new Error('Could not find main document node');
+    }
+
+    // Preload has the effect of moving the resource's only dependency to the main HTML document
+    // Remove all dependencies of the nodes
+    for (const node of nodesToPreload) {
+      node.removeAllDependencies();
+      node.addDependency(mainDocumentNode);
+    }
+
+    // Once we've modified the dependencies, simulate the new graph with flexible ordering.
+    const simulationAfterChanges = simulator.simulate(modifiedGraph, {flexibleOrdering: true});
+    const originalNodesByRecord = Array.from(simulationBeforeChanges.nodeTimings.keys())
+        // @ts-expect-error we don't care if all nodes without a record collect on `undefined`
+        .reduce((map, node) => map.set(node.record, node), new Map());
+
+    const results = [];
+    for (const node of nodesToPreload) {
+      const originalNode = originalNodesByRecord.get(node.record);
+      const timingAfter = simulationAfterChanges.nodeTimings.get(node);
+      const timingBefore = simulationBeforeChanges.nodeTimings.get(originalNode);
+      if (!timingBefore || !timingAfter) throw new Error('Missing preload node');
+
+      const wastedMs = Math.round(timingBefore.endTime - timingAfter.endTime);
+      if (wastedMs < THRESHOLD_IN_MS) continue;
+      results.push({url: node.record.url, wastedMs});
+    }
+
+    if (!results.length) {
+      return {wastedMs: 0, results};
+    }
+
+    return {
+      // Preload won't necessarily impact the deepest chain/overall time
+      // We'll use the maximum endTime improvement for now
+      wastedMs: Math.max(...results.map(item => item.wastedMs)),
+      results,
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit_(artifacts, context) {
+    const trace = artifacts.traces[UsesRelPreloadAudit.DEFAULT_PASS];
+    const devtoolsLog = artifacts.devtoolsLogs[UsesRelPreloadAudit.DEFAULT_PASS];
+    const URL = artifacts.URL;
+    const simulatorOptions = {devtoolsLog, settings: context.settings};
+
+    const [mainResource, graph, simulator] = await Promise.all([
+      MainResource.request({devtoolsLog, URL}, context),
+      PageDependencyGraph.request({trace, devtoolsLog, URL}, context),
+      LoadSimulator.request(simulatorOptions, context),
+    ]);
+
+    const urls = UsesRelPreloadAudit.getURLsToPreload(mainResource, graph);
+    const {results, wastedMs} = UsesRelPreloadAudit.computeWasteWithGraph(urls, graph, simulator);
+    // sort results by wastedTime DESC
+    results.sort((a, b) => b.wastedMs - a.wastedMs);
+
+    /** @type {Array<LH.IcuMessage>|undefined} */
+    let warnings;
+    const failedURLs = UsesRelPreloadAudit.getURLsFailedToPreload(graph);
+    if (failedURLs.size) {
+      warnings = Array.from(failedURLs)
+        .map(preloadURL => str_(UIStrings.crossoriginWarning, {preloadURL}));
+    }
+
+    /** @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.columnWastedMs)},
+    ];
+    const details = Audit.makeOpportunityDetails(headings, results,
+      {overallSavingsMs: wastedMs});
+
+    return {
+      score: ByteEfficiencyAudit.scoreForWastedMs(wastedMs),
+      numericValue: wastedMs,
+      numericUnit: 'millisecond',
+      displayValue: wastedMs ?
+        str_(i18n.UIStrings.displayValueMsSavings, {wastedMs}) :
+        '',
+      details,
+      warnings,
+    };
+  }
+
+  /**
+   * @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,
+      details: Audit.makeOpportunityDetails([], [], {overallSavingsMs: 0})};
+  }
+}
+
+export default UsesRelPreloadAudit;
+export {UIStrings};

package/core/audits/valid-source-maps.d.ts

@@ -0,0 +1,29 @@
+export default ValidSourceMaps;
+declare class ValidSourceMaps extends Audit {
+    /**
+     * Returns true if the size of the script exceeds a static threshold.
+     * @param {LH.Artifacts.Script} script
+     * @param {LH.Artifacts.EntityClassification} classifiedEntities
+     * @return {boolean}
+     */
+    static isLargeFirstPartyJS(script: LH.Artifacts.Script, classifiedEntities: LH.Artifacts.EntityClassification): boolean;
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<{
+        score: number;
+        details: import("../../types/lhr/audit-details.js").default.Table;
+    }>;
+}
+export namespace UIStrings {
+    const title: string;
+    const failureTitle: string;
+    const description: string;
+    const columnMapURL: string;
+    const missingSourceMapErrorMessage: string;
+    const missingSourceMapItemsWarningMesssage: string;
+}
+import { Audit } from "./audit.js";
+import { EntityClassification } from "../computed/entity-classification.js";
+//# sourceMappingURL=valid-source-maps.d.ts.map