lighthouse 9.6.8 → 10.0.0

package/core/audits/byte-efficiency/uses-responsive-images.js

@@ -0,0 +1,201 @@
+/**
+ * @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.
+ */
+/**
+ * @fileoverview Checks to see if the images used on the page are larger than
+ *   their display sizes. The audit will list all images that are larger than
+ *   their display size with DPR (a 1000px wide image displayed as a
+ *   500px high-res image on a Retina display is 100% used);
+ *   However, the audit will only fail pages that use images that have waste
+ *   beyond a particular byte threshold.
+ */
+
+
+import {ByteEfficiencyAudit} from './byte-efficiency-audit.js';
+import {NetworkRequest} from '../../lib/network-request.js';
+import {ImageRecords} from '../../computed/image-records.js';
+import UrlUtils from '../../lib/url-utils.js';
+import * as i18n from '../../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Imperative title of a Lighthouse audit that tells the user to resize images to match the display dimensions. This is displayed in a list of audit titles that Lighthouse generates. */
+  title: 'Properly size images',
+  /** Description of a Lighthouse audit that tells the user *why* they need to serve appropriately sized images. 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:
+  'Serve images that are appropriately-sized to save cellular data ' +
+  'and improve load time. ' +
+  '[Learn how to size images](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+const IGNORE_THRESHOLD_IN_BYTES = 4096;
+
+// Ignore up to 12KB of waste if an effort was made with breakpoints.
+const IGNORE_THRESHOLD_IN_BYTES_BREAKPOINTS_PRESENT = 12288;
+
+class UsesResponsiveImages extends ByteEfficiencyAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'uses-responsive-images',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      requiredArtifacts: ['ImageElements', 'ViewportDimensions', 'GatherContext',
+        'devtoolsLogs', 'traces', 'URL'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts.ImageElement & {naturalWidth: number, naturalHeight: number}} image
+   * @param {LH.Artifacts.ViewportDimensions} ViewportDimensions
+   * @return {{width: number, height: number}};
+   */
+  static getDisplayedDimensions(image, ViewportDimensions) {
+    if (image.displayedWidth && image.displayedHeight) {
+      return {
+        width: image.displayedWidth * ViewportDimensions.devicePixelRatio,
+        height: image.displayedHeight * ViewportDimensions.devicePixelRatio,
+      };
+    }
+
+    // If the image has 0 dimensions, it's probably hidden/offscreen, so we'll be as forgiving as possible
+    // and assume it's the size of two viewports. See https://github.com/GoogleChrome/lighthouse/issues/7236
+    const viewportWidth = ViewportDimensions.innerWidth;
+    const viewportHeight = ViewportDimensions.innerHeight * 2;
+    const imageAspectRatio = image.naturalWidth / image.naturalHeight;
+    const viewportAspectRatio = viewportWidth / viewportHeight;
+    let usedViewportWidth = viewportWidth;
+    let usedViewportHeight = viewportHeight;
+    if (imageAspectRatio > viewportAspectRatio) {
+      usedViewportHeight = viewportWidth / imageAspectRatio;
+    } else {
+      usedViewportWidth = viewportHeight * imageAspectRatio;
+    }
+
+    return {
+      width: usedViewportWidth * ViewportDimensions.devicePixelRatio,
+      height: usedViewportHeight * ViewportDimensions.devicePixelRatio,
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts.ImageElement & {naturalWidth: number, naturalHeight: number}} image
+   * @param {LH.Artifacts.ViewportDimensions} ViewportDimensions
+   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+   * @return {null|LH.Audit.ByteEfficiencyItem};
+   */
+  static computeWaste(image, ViewportDimensions, networkRecords) {
+    const networkRecord = networkRecords.find(record => record.url === image.src);
+    // Nothing can be done without network info, ignore images without resource size information.
+    if (!networkRecord) {
+      return null;
+    }
+
+    const displayed = this.getDisplayedDimensions(image, ViewportDimensions);
+    const usedPixels = displayed.width * displayed.height;
+
+    const url = UrlUtils.elideDataURI(image.src);
+    const actualPixels = image.naturalWidth * image.naturalHeight;
+    const wastedRatio = 1 - (usedPixels / actualPixels);
+    const totalBytes = NetworkRequest.getResourceSizeOnNetwork(networkRecord);
+    const wastedBytes = Math.round(totalBytes * wastedRatio);
+
+    return {
+      node: ByteEfficiencyAudit.makeNodeItem(image.node),
+      url,
+      totalBytes,
+      wastedBytes,
+      wastedPercent: 100 * wastedRatio,
+    };
+  }
+
+
+  /**
+   * @param {LH.Artifacts.ImageElement} image
+   * @return {number};
+   */
+  static determineAllowableWaste(image) {
+    if (image.srcset || image.isPicture) {
+      return IGNORE_THRESHOLD_IN_BYTES_BREAKPOINTS_PRESENT;
+    }
+    return IGNORE_THRESHOLD_IN_BYTES;
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+   * @param {LH.Audit.Context} context
+   * @return {Promise<import('./byte-efficiency-audit.js').ByteEfficiencyProduct>}
+   */
+  static async audit_(artifacts, networkRecords, context) {
+    const images = await ImageRecords.request({
+      ImageElements: artifacts.ImageElements,
+      networkRecords,
+    }, context);
+    const ViewportDimensions = artifacts.ViewportDimensions;
+    /** @type {Map<string, LH.Audit.ByteEfficiencyItem>} */
+    const resultsMap = new Map();
+    /** @type {Array<string>} */
+    const passedImageList = [];
+    for (const image of images) {
+      // Give SVG a free pass because creating a "responsive" SVG is of questionable value.
+      // Ignore CSS images because it's difficult to determine what is a spritesheet,
+      // and the reward-to-effort ratio for responsive CSS images is quite low https://css-tricks.com/responsive-images-css/.
+      if (image.mimeType === 'image/svg+xml' || image.isCss) {
+        continue;
+      }
+
+      // Skip if we couldn't collect natural image size information.
+      if (!image.naturalDimensions) continue;
+      const naturalHeight = image.naturalDimensions.height;
+      const naturalWidth = image.naturalDimensions.width;
+      // If naturalHeight or naturalWidth are falsy, information is not valid, skip.
+      if (!naturalWidth || !naturalHeight) continue;
+      const processed =
+        UsesResponsiveImages.computeWaste(
+          {...image, naturalHeight, naturalWidth},
+          ViewportDimensions, networkRecords
+        );
+      if (!processed) continue;
+
+      // Verify the image wastes more than the minimum.
+      const exceedsAllowableWaste = processed.wastedBytes > this.determineAllowableWaste(image);
+
+      const existing = resultsMap.get(processed.url);
+      // Don't warn about an image that was later used appropriately, or wastes a trivial amount of data.
+      if (exceedsAllowableWaste && !passedImageList.includes(processed.url)) {
+        if ((!existing || existing.wastedBytes > processed.wastedBytes)) {
+          resultsMap.set(processed.url, processed);
+        }
+      } else {
+        // Ensure this url passes for future tests.
+        resultsMap.delete(processed.url);
+        passedImageList.push(processed.url);
+      }
+    }
+
+    const items = Array.from(resultsMap.values());
+
+    /** @type {LH.Audit.Details.Opportunity['headings']} */
+    const headings = [
+      {key: 'node', valueType: 'node', label: ''},
+      {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
+      {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnResourceSize)},
+      {key: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnWastedBytes)},
+    ];
+
+    return {
+      items,
+      headings,
+    };
+  }
+}
+
+export default UsesResponsiveImages;
+export {UIStrings, str_};

package/core/audits/byte-efficiency/uses-text-compression.d.ts

@@ -0,0 +1,14 @@
+export default ResponsesAreCompressed;
+declare class ResponsesAreCompressed extends ByteEfficiencyAudit {
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @return {import('./byte-efficiency-audit.js').ByteEfficiencyProduct}
+     */
+    static audit_(artifacts: LH.Artifacts): import('./byte-efficiency-audit.js').ByteEfficiencyProduct;
+}
+export namespace UIStrings {
+    const title: string;
+    const description: string;
+}
+import { ByteEfficiencyAudit } from "./byte-efficiency-audit.js";
+//# sourceMappingURL=uses-text-compression.d.ts.map

package/core/audits/byte-efficiency/uses-text-compression.js

@@ -0,0 +1,100 @@
+/**
+ * @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.
+ */
+/*
+ * @fileoverview Audit a page to ensure that resources loaded with
+ * gzip/br/deflate compression.
+ */
+
+
+import {ByteEfficiencyAudit} from './byte-efficiency-audit.js';
+import UrlUtils from '../../lib/url-utils.js';
+import * as i18n from '../../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Imperative title of a Lighthouse audit that tells the user to enable text compression (like gzip) in order to enhance the performance of a page. This is displayed in a list of audit titles that Lighthouse generates. */
+  title: 'Enable text compression',
+  /** Description of a Lighthouse audit that tells the user *why* their text-based resources should be served with compression (like gzip). 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: 'Text-based resources should be served with compression (gzip, deflate or' +
+    ' brotli) to minimize total network bytes.' +
+    ' [Learn more about text compression](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+const IGNORE_THRESHOLD_IN_BYTES = 1400;
+const IGNORE_THRESHOLD_IN_PERCENT = 0.1;
+
+class ResponsesAreCompressed extends ByteEfficiencyAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'uses-text-compression',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      requiredArtifacts: ['ResponseCompression', 'GatherContext', 'devtoolsLogs', 'traces', 'URL'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {import('./byte-efficiency-audit.js').ByteEfficiencyProduct}
+   */
+  static audit_(artifacts) {
+    const uncompressedResponses = artifacts.ResponseCompression;
+
+    /** @type {Array<LH.Audit.ByteEfficiencyItem>} */
+    const items = [];
+    uncompressedResponses.forEach(record => {
+      // Ignore invalid GZIP size values (undefined, NaN, 0, -n, etc)
+      if (!record.gzipSize || record.gzipSize < 0) return;
+
+      const originalSize = record.resourceSize;
+      const gzipSize = record.gzipSize;
+      const gzipSavings = originalSize - gzipSize;
+
+      // we require at least 10% savings off the original size AND at least 1400 bytes
+      // if the savings is smaller than either, we don't care
+      if (1 - gzipSize / originalSize < IGNORE_THRESHOLD_IN_PERCENT ||
+          gzipSavings < IGNORE_THRESHOLD_IN_BYTES ||
+          record.transferSize < gzipSize
+      ) {
+        return;
+      }
+
+      // remove duplicates
+      const url = UrlUtils.elideDataURI(record.url);
+      const isDuplicate = items.find(item => item.url === url &&
+        item.totalBytes === record.resourceSize);
+      if (isDuplicate) {
+        return;
+      }
+
+      items.push({
+        url,
+        totalBytes: originalSize,
+        wastedBytes: gzipSavings,
+      });
+    });
+
+    /** @type {LH.Audit.Details.Opportunity['headings']} */
+    const headings = [
+      {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
+      {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize)},
+      {key: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnWastedBytes)},
+    ];
+
+    return {
+      items,
+      headings,
+    };
+  }
+}
+
+export default ResponsesAreCompressed;
+export {UIStrings};

package/core/audits/content-width.d.ts

@@ -0,0 +1,17 @@
+export default ContentWidth;
+declare class ContentWidth extends Audit {
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {LH.Audit.Product}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): LH.Audit.Product;
+}
+export namespace UIStrings {
+    const title: string;
+    const failureTitle: string;
+    const description: string;
+    const explanation: string;
+}
+import { Audit } from "./audit.js";
+//# sourceMappingURL=content-width.d.ts.map

package/core/audits/content-width.js

@@ -0,0 +1,76 @@
+/**
+ * @license Copyright 2016 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';
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the content size of a web site compared to the viewport, which is the size of the screen the site is displayed on. This descriptive title is shown to users when the site's content is sized appropriately. */
+  title: 'Content is sized correctly for the viewport',
+  /** Title of a Lighthouse audit that provides detail on the content size of a web site compared to the viewport, which is the size of the screen the site is displayed on. This descriptive title is shown to users when the site's content is not sized appropriately. */
+  failureTitle: 'Content is not sized correctly for the viewport',
+  /** Description of a Lighthouse audit that tells the user why they should care that a site's content size should match its viewport size, which is the size of the screen the site is displayed on. 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: 'If the width of your app\'s content doesn\'t match the width ' +
+    'of the viewport, your app might not be optimized for mobile screens. ' +
+    '[Learn how to size content for the viewport](https://developer.chrome.com/docs/lighthouse/pwa/content-width/).',
+  /**
+   * @description Explanatory message stating that the viewport size and window size differ.
+   * @example {100} innerWidth
+   * @example {101} outerWidth
+   * */
+  explanation: 'The viewport size of {innerWidth}px does not match the window ' +
+    'size of {outerWidth}px.',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class ContentWidth extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'content-width',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['ViewportDimensions'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {LH.Audit.Product}
+   */
+  static audit(artifacts, context) {
+    const viewportWidth = artifacts.ViewportDimensions.innerWidth;
+    const windowWidth = artifacts.ViewportDimensions.outerWidth;
+    const widthsMatch = viewportWidth === windowWidth;
+
+    if (context.settings.formFactor === 'desktop') {
+      return {
+        score: 1,
+        notApplicable: true,
+      };
+    }
+
+    let explanation;
+    if (!widthsMatch) {
+      explanation = str_(UIStrings.explanation,
+        {innerWidth: artifacts.ViewportDimensions.innerWidth,
+          outerWidth: artifacts.ViewportDimensions.outerWidth});
+    }
+
+    return {
+      score: Number(widthsMatch),
+      explanation,
+    };
+  }
+}
+
+export default ContentWidth;
+export {UIStrings};

package/core/audits/critical-request-chains.d.ts

@@ -0,0 +1,44 @@
+export default CriticalRequestChains;
+declare class CriticalRequestChains extends Audit {
+    /** @typedef {{depth: number, id: string, chainDuration: number, chainTransferSize: number, node: LH.Artifacts.CriticalRequestNode[string]}} CrcNodeInfo */
+    /**
+     * @param {LH.Artifacts.CriticalRequestNode} tree
+     * @param {function(CrcNodeInfo): void} cb
+     */
+    static _traverse(tree: LH.Artifacts.CriticalRequestNode, cb: (arg0: {
+        depth: number;
+        id: string;
+        chainDuration: number;
+        chainTransferSize: number;
+        node: LH.Artifacts.CriticalRequestNode[string];
+    }) => void): void;
+    /**
+     * Get stats about the longest initiator chain (as determined by time duration)
+     * @param {LH.Artifacts.CriticalRequestNode} tree
+     * @return {{duration: number, length: number, transferSize: number}}
+     */
+    static _getLongestChain(tree: LH.Artifacts.CriticalRequestNode): {
+        duration: number;
+        length: number;
+        transferSize: number;
+    };
+    /**
+     * @param {LH.Artifacts.CriticalRequestNode} tree
+     * @return {LH.Audit.Details.SimpleCriticalRequestNode}
+     */
+    static flattenRequests(tree: LH.Artifacts.CriticalRequestNode): LH.Audit.Details.SimpleCriticalRequestNode;
+    /**
+     * Audits the page to give a score for First Meaningful Paint.
+     * @param {LH.Artifacts} artifacts The artifacts from the gather phase.
+     * @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;
+    const displayValue: string;
+}
+import { Audit } from "./audit.js";
+//# sourceMappingURL=critical-request-chains.d.ts.map

package/core/audits/critical-request-chains.js

@@ -0,0 +1,218 @@
+/**
+ * @license Copyright 2016 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 {CriticalRequestChains as ComputedChains} from '../computed/critical-request-chains.js';
+
+const UIStrings = {
+  /** Imperative title of a Lighthouse audit that tells the user to reduce the depth of critical network requests to enhance initial load of a page. Critical request chains are series of dependent network requests that are important for page rendering. For example, here's a 4-request-deep chain: The biglogo.jpg image is required, but is requested via the styles.css style code, which is requested by the initialize.js javascript, which is requested by the page's HTML. This is displayed in a list of audit titles that Lighthouse generates. */
+  title: 'Avoid chaining critical requests',
+  /** Description of a Lighthouse audit that tells the user *why* they should reduce the depth of critical network requests to enhance initial load of a 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: 'The Critical Request Chains below show you what resources are ' +
+      'loaded with a high priority. Consider reducing ' +
+      'the length of chains, reducing the download size of resources, or ' +
+      'deferring the download of unnecessary resources to improve page load. ' +
+      '[Learn how to avoid chaining critical requests](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/).',
+  /** [ICU Syntax] Label for an audit identifying the number of sequences of dependent network requests used to load the page. */
+  displayValue: `{itemCount, plural,
+    =1 {1 chain found}
+    other {# chains found}
+    }`,
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class CriticalRequestChains extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'critical-request-chains',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      supportedModes: ['navigation'],
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL'],
+    };
+  }
+
+  /** @typedef {{depth: number, id: string, chainDuration: number, chainTransferSize: number, node: LH.Artifacts.CriticalRequestNode[string]}} CrcNodeInfo */
+
+  /**
+   * @param {LH.Artifacts.CriticalRequestNode} tree
+   * @param {function(CrcNodeInfo): void} cb
+   */
+  static _traverse(tree, cb) {
+    /**
+     * @param {LH.Artifacts.CriticalRequestNode} node
+     * @param {number} depth
+     * @param {number=} networkRequestTime
+     * @param {number=} transferSize
+     */
+    function walk(node, depth, networkRequestTime, transferSize = 0) {
+      const children = Object.keys(node);
+      if (children.length === 0) {
+        return;
+      }
+      children.forEach(id => {
+        const child = node[id];
+        if (!networkRequestTime) {
+          networkRequestTime = child.request.networkRequestTime;
+        }
+
+        // Call the callback with the info for this child.
+        cb({
+          depth,
+          id,
+          node: child,
+          chainDuration: child.request.networkEndTime - networkRequestTime,
+          chainTransferSize: transferSize + child.request.transferSize,
+        });
+
+        // Carry on walking.
+        if (child.children) {
+          walk(child.children, depth + 1, networkRequestTime);
+        }
+      }, '');
+    }
+
+    walk(tree, 0);
+  }
+
+  /**
+   * Get stats about the longest initiator chain (as determined by time duration)
+   * @param {LH.Artifacts.CriticalRequestNode} tree
+   * @return {{duration: number, length: number, transferSize: number}}
+   */
+  static _getLongestChain(tree) {
+    const longest = {
+      duration: 0,
+      length: 0,
+      transferSize: 0,
+    };
+    CriticalRequestChains._traverse(tree, opts => {
+      const duration = opts.chainDuration;
+      if (duration > longest.duration) {
+        longest.duration = duration;
+        longest.transferSize = opts.chainTransferSize;
+        longest.length = opts.depth;
+      }
+    });
+    // Always return the longest chain + 1 because the depth is zero indexed.
+    longest.length++;
+    return longest;
+  }
+
+  /**
+   * @param {LH.Artifacts.CriticalRequestNode} tree
+   * @return {LH.Audit.Details.SimpleCriticalRequestNode}
+   */
+  static flattenRequests(tree) {
+    /** @type {LH.Audit.Details.SimpleCriticalRequestNode} */
+    const flattendChains = {};
+    /** @type {Map<string, LH.Audit.Details.SimpleCriticalRequestNode[string]>} */
+    const chainMap = new Map();
+
+    /** @param {CrcNodeInfo} opts */
+    function flatten(opts) {
+      const request = opts.node.request;
+      const simpleRequest = {
+        url: request.url,
+        startTime: request.networkRequestTime / 1000,
+        endTime: request.networkEndTime / 1000,
+        responseReceivedTime: request.responseHeadersEndTime / 1000,
+        transferSize: request.transferSize,
+      };
+
+      let chain = chainMap.get(opts.id);
+      if (chain) {
+        chain.request = simpleRequest;
+      } else {
+        chain = {
+          request: simpleRequest,
+        };
+        flattendChains[opts.id] = chain;
+      }
+
+      if (opts.node.children) {
+        for (const chainId of Object.keys(opts.node.children)) {
+          // Note: cast should be Partial<>, but filled in when child node is traversed.
+          const childChain = /** @type {LH.Audit.Details.SimpleCriticalRequestNode[string]} */ ({
+            request: {},
+          });
+          chainMap.set(chainId, childChain);
+          if (!chain.children) {
+            chain.children = {};
+          }
+          chain.children[chainId] = childChain;
+        }
+      }
+      chainMap.set(opts.id, chain);
+    }
+
+    CriticalRequestChains._traverse(tree, flatten);
+
+    return flattendChains;
+  }
+
+  /**
+   * Audits the page to give a score for First Meaningful Paint.
+   * @param {LH.Artifacts} artifacts The artifacts from the gather phase.
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const trace = artifacts.traces[Audit.DEFAULT_PASS];
+    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const URL = artifacts.URL;
+    const chains = await ComputedChains.request({devtoolsLog, trace, URL}, context);
+    let chainCount = 0;
+    /**
+     * @param {LH.Audit.Details.SimpleCriticalRequestNode} node
+     * @param {number} depth
+     */
+    function walk(node, depth) {
+      const childIds = Object.keys(node);
+
+      childIds.forEach(id => {
+        const child = node[id];
+        if (child.children) {
+          walk(child.children, depth + 1);
+        } else {
+          // if the node doesn't have a children field, then it is a leaf, so +1
+          chainCount++;
+        }
+      }, '');
+    }
+    // Convert
+    const flattenedChains = CriticalRequestChains.flattenRequests(chains);
+
+    // Account for initial navigation
+    const initialNavKey = Object.keys(flattenedChains)[0];
+    const initialNavChildren = initialNavKey && flattenedChains[initialNavKey].children;
+    if (initialNavChildren && Object.keys(initialNavChildren).length > 0) {
+      walk(initialNavChildren, 0);
+    }
+
+    const longestChain = CriticalRequestChains._getLongestChain(chains);
+
+    return {
+      score: Number(chainCount === 0),
+      notApplicable: chainCount === 0,
+      displayValue: chainCount ? str_(UIStrings.displayValue, {itemCount: chainCount}) : '',
+      details: {
+        type: 'criticalrequestchain',
+        chains: flattenedChains,
+        longestChain,
+      },
+    };
+  }
+}
+
+export default CriticalRequestChains;
+export {UIStrings};