lighthouse 9.6.7 → 10.0.0-dev.20230209

package/core/audits/byte-efficiency/render-blocking-resources.js

@@ -0,0 +1,307 @@
+/**
+ * @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.
+ */
+
+/**
+ * @fileoverview Audit a page to see if it does have resources that are blocking first paint
+ */
+
+
+import {Audit} from '../audit.js';
+import * as i18n from '../../lib/i18n/i18n.js';
+import {BaseNode} from '../../lib/dependency-graph/base-node.js';
+import {ByteEfficiencyAudit} from './byte-efficiency-audit.js';
+import {UnusedCSS} from '../../computed/unused-css.js';
+import {NetworkRequest} from '../../lib/network-request.js';
+import {ProcessedNavigation} from '../../computed/processed-navigation.js';
+import {LoadSimulator} from '../../computed/load-simulator.js';
+import {FirstContentfulPaint} from '../../computed/metrics/first-contentful-paint.js';
+
+/** @typedef {import('../../lib/dependency-graph/simulator/simulator').Simulator} Simulator */
+/** @typedef {import('../../lib/dependency-graph/base-node.js').Node} Node */
+/** @typedef {import('../../lib/dependency-graph/network-node.js')} NetworkNode */
+
+// Because of the way we detect blocking stylesheets, asynchronously loaded
+// CSS with link[rel=preload] and an onload handler (see https://github.com/filamentgroup/loadCSS)
+// can be falsely flagged as blocking. Therefore, ignore stylesheets that loaded fast enough
+// to possibly be non-blocking (and they have minimal impact anyway).
+const MINIMUM_WASTED_MS = 50;
+
+const UIStrings = {
+  /** Imperative title of a Lighthouse audit that tells the user to reduce or remove network resources that block the initial render of the page. This is displayed in a list of audit titles that Lighthouse generates. */
+  title: 'Eliminate render-blocking resources',
+  /** Description of a Lighthouse audit that tells the user *why* they should reduce or remove network resources that block the initial render of the 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: 'Resources are blocking the first paint of your page. Consider ' +
+    'delivering critical JS/CSS inline and deferring all non-critical ' +
+    'JS/styles. [Learn how to eliminate render-blocking resources](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+/**
+ * Given a simulation's nodeTimings, return an object with the nodes/timing keyed by network URL
+ * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings
+ * @return {Object<string, {node: Node, nodeTiming: LH.Gatherer.Simulation.NodeTiming}>}
+ */
+function getNodesAndTimingByUrl(nodeTimings) {
+  /** @type {Object<string, {node: Node, nodeTiming: LH.Gatherer.Simulation.NodeTiming}>} */
+  const urlMap = {};
+  const nodes = Array.from(nodeTimings.keys());
+  nodes.forEach(node => {
+    if (node.type !== 'network') return;
+    const nodeTiming = nodeTimings.get(node);
+    if (!nodeTiming) return;
+
+    urlMap[node.record.url] = {node, nodeTiming};
+  });
+
+  return urlMap;
+}
+
+/**
+ * Adjust the timing of a node and its dependencies to account for stack specific overrides.
+ * @param {Map<Node, LH.Gatherer.Simulation.NodeTiming>} adjustedNodeTimings
+ * @param {Node} node
+ * @param {LH.Artifacts.DetectedStack[]} Stacks
+ */
+function adjustNodeTimings(adjustedNodeTimings, node, Stacks) {
+  const nodeTiming = adjustedNodeTimings.get(node);
+  if (!nodeTiming) return;
+  const stackSpecificTiming = computeStackSpecificTiming(node, nodeTiming, Stacks);
+  const difference = nodeTiming.duration - stackSpecificTiming.duration;
+  if (!difference) return;
+
+  // AMP's method of removal of stylesheets effectively removes all dependent nodes from the FCP graph
+  node.traverse(childNode => {
+    adjustedNodeTimings.delete(childNode);
+  });
+  adjustedNodeTimings.set(node, stackSpecificTiming);
+}
+
+/**
+ * Any stack specific timing overrides should go in this function.
+ * @see https://github.com/GoogleChrome/lighthouse/issues/2832#issuecomment-591066081
+ *
+ * @param {Node} node
+ * @param {LH.Gatherer.Simulation.NodeTiming} nodeTiming
+ * @param {LH.Artifacts.DetectedStack[]} Stacks
+ */
+function computeStackSpecificTiming(node, nodeTiming, Stacks) {
+  const stackSpecificTiming = {...nodeTiming};
+  if (Stacks.some(stack => stack.id === 'amp')) {
+    // AMP will load a linked stylesheet asynchronously if it has not been loaded after 2.1 seconds:
+    // https://github.com/ampproject/amphtml/blob/8e03ac2f315774070651584a7e046ff24212c9b1/src/font-stylesheet-timeout.js#L54-L59
+    // Any potential savings must only include time spent on AMP stylesheet nodes before 2.1 seconds.
+    if (node.type === BaseNode.TYPES.NETWORK &&
+        node.record.resourceType === NetworkRequest.TYPES.Stylesheet &&
+        nodeTiming.endTime > 2100) {
+      stackSpecificTiming.endTime = Math.max(nodeTiming.startTime, 2100);
+      stackSpecificTiming.duration = stackSpecificTiming.endTime - stackSpecificTiming.startTime;
+    }
+  }
+  return stackSpecificTiming;
+}
+
+class RenderBlockingResources extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'render-blocking-resources',
+      title: str_(UIStrings.title),
+      supportedModes: ['navigation'],
+      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      description: str_(UIStrings.description),
+      // TODO: look into adding an `optionalArtifacts` property that captures the non-required nature
+      // of CSSUsage
+      requiredArtifacts: ['URL', 'TagsBlockingFirstPaint', 'traces', 'devtoolsLogs', 'CSSUsage',
+        'GatherContext', 'Stacks'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<{wastedMs: number, results: Array<{url: string, totalBytes: number, wastedMs: number}>}>}
+   */
+  static async computeResults(artifacts, context) {
+    const gatherContext = artifacts.GatherContext;
+    const trace = artifacts.traces[Audit.DEFAULT_PASS];
+    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const simulatorData = {devtoolsLog, settings: context.settings};
+    const processedNavigation = await ProcessedNavigation.request(trace, context);
+    const simulator = await LoadSimulator.request(simulatorData, context);
+    const wastedCssBytes = await RenderBlockingResources.computeWastedCSSBytes(artifacts, context);
+
+    /** @type {LH.Audit.Context['settings']} */
+    const metricSettings = {
+      ...context.settings,
+      throttlingMethod: 'simulate',
+    };
+
+    const metricComputationData = {trace, devtoolsLog, gatherContext, simulator,
+      settings: metricSettings, URL: artifacts.URL};
+
+    // Cast to just `LanternMetric` since we explicitly set `throttlingMethod: 'simulate'`.
+    const fcpSimulation = /** @type {LH.Artifacts.LanternMetric} */
+      (await FirstContentfulPaint.request(metricComputationData, context));
+    const fcpTsInMs = processedNavigation.timestamps.firstContentfulPaint / 1000;
+
+    const nodesByUrl = getNodesAndTimingByUrl(fcpSimulation.optimisticEstimate.nodeTimings);
+
+    const results = [];
+    const deferredNodeIds = new Set();
+    for (const resource of artifacts.TagsBlockingFirstPaint) {
+      // Ignore any resources that finished after observed FCP (they're clearly not render-blocking)
+      if (resource.endTime > fcpTsInMs) continue;
+      // TODO: beacon to Sentry, https://github.com/GoogleChrome/lighthouse/issues/7041
+      if (!nodesByUrl[resource.tag.url]) continue;
+
+      const {node, nodeTiming} = nodesByUrl[resource.tag.url];
+
+      const stackSpecificTiming = computeStackSpecificTiming(node, nodeTiming, artifacts.Stacks);
+
+      // Mark this node and all its dependents as deferrable
+      node.traverse(node => deferredNodeIds.add(node.id));
+
+      // "wastedMs" is the download time of the network request, responseReceived - requestSent
+      const wastedMs = Math.round(stackSpecificTiming.duration);
+      if (wastedMs < MINIMUM_WASTED_MS) continue;
+
+      results.push({
+        url: resource.tag.url,
+        totalBytes: resource.transferSize,
+        wastedMs,
+      });
+    }
+
+    if (!results.length) {
+      return {results, wastedMs: 0};
+    }
+
+    const wastedMs = RenderBlockingResources.estimateSavingsWithGraphs(
+      simulator,
+      fcpSimulation.optimisticGraph,
+      deferredNodeIds,
+      wastedCssBytes,
+      artifacts.Stacks
+    );
+
+    return {results, wastedMs};
+  }
+
+  /**
+   * Estimates how much faster this page would reach FCP if we inlined all the used CSS from the
+   * render blocking stylesheets and deferred all the scripts. This is more conservative than
+   * removing all the assets and more aggressive than inlining everything.
+   *
+   * *Most* of the time, scripts in the head are there accidentally/due to lack of awareness
+   * rather than necessity, so we're comfortable with this balance. In the worst case, we're telling
+   * devs that they should be able to get to a reasonable first paint without JS, which is not a bad
+   * thing.
+   *
+   * @param {Simulator} simulator
+   * @param {Node} fcpGraph
+   * @param {Set<string>} deferredIds
+   * @param {Map<string, number>} wastedCssBytesByUrl
+   * @param {LH.Artifacts.DetectedStack[]} Stacks
+   * @return {number}
+   */
+  static estimateSavingsWithGraphs(simulator, fcpGraph, deferredIds, wastedCssBytesByUrl, Stacks) {
+    const {nodeTimings} = simulator.simulate(fcpGraph);
+    const adjustedNodeTimings = new Map(nodeTimings);
+
+    let totalChildNetworkBytes = 0;
+    const minimalFCPGraph = fcpGraph.cloneWithRelationships(node => {
+      adjustNodeTimings(adjustedNodeTimings, node, Stacks);
+
+      // If a node can be deferred, exclude it from the new FCP graph
+      const canDeferRequest = deferredIds.has(node.id);
+      if (node.type !== BaseNode.TYPES.NETWORK) return !canDeferRequest;
+
+      const isStylesheet =
+        node.record.resourceType === NetworkRequest.TYPES.Stylesheet;
+      if (canDeferRequest && isStylesheet) {
+        // We'll inline the used bytes of the stylesheet and assume the rest can be deferred
+        const wastedBytes = wastedCssBytesByUrl.get(node.record.url) || 0;
+        totalChildNetworkBytes += (node.record.transferSize || 0) - wastedBytes;
+      }
+      return !canDeferRequest;
+    });
+
+    if (minimalFCPGraph.type !== 'network') {
+      throw new Error('minimalFCPGraph not a NetworkNode');
+    }
+
+    // Recalculate the "before" time based on our adjusted node timings.
+    const estimateBeforeInline = Math.max(...Array.from(
+      Array.from(adjustedNodeTimings).map(timing => timing[1].endTime)
+    ));
+
+    // Add the inlined bytes to the HTML response
+    const originalTransferSize = minimalFCPGraph.record.transferSize;
+    const safeTransferSize = originalTransferSize || 0;
+    minimalFCPGraph.record.transferSize = safeTransferSize + totalChildNetworkBytes;
+    const estimateAfterInline = simulator.simulate(minimalFCPGraph).timeInMs;
+    minimalFCPGraph.record.transferSize = originalTransferSize;
+    return Math.round(Math.max(estimateBeforeInline - estimateAfterInline, 0));
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<Map<string, number>>}
+   */
+  static async computeWastedCSSBytes(artifacts, context) {
+    const wastedBytesByUrl = new Map();
+    try {
+      const unusedCssItems = await UnusedCSS.request({
+        CSSUsage: artifacts.CSSUsage,
+        devtoolsLog: artifacts.devtoolsLogs[Audit.DEFAULT_PASS],
+      }, context);
+      for (const item of unusedCssItems) {
+        wastedBytesByUrl.set(item.url, item.wastedBytes);
+      }
+    } catch {}
+
+    return wastedBytesByUrl;
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const {results, wastedMs} = await RenderBlockingResources.computeResults(artifacts, context);
+
+    let displayValue;
+    if (results.length > 0) {
+      displayValue = str_(i18n.UIStrings.displayValueMsSavings, {wastedMs});
+    }
+
+    /** @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: 'wastedMs', valueType: 'timespanMs', label: str_(i18n.UIStrings.columnWastedMs)},
+    ];
+
+    const details = Audit.makeOpportunityDetails(headings, results,
+      {overallSavingsMs: wastedMs});
+
+    return {
+      displayValue,
+      score: ByteEfficiencyAudit.scoreForWastedMs(wastedMs),
+      numericValue: wastedMs,
+      numericUnit: 'millisecond',
+      details,
+    };
+  }
+}
+
+export default RenderBlockingResources;
+export {UIStrings};

package/core/audits/byte-efficiency/total-byte-weight.d.ts

@@ -0,0 +1,21 @@
+export default TotalByteWeight;
+declare class TotalByteWeight extends Audit {
+    /**
+     * @return {LH.Audit.ScoreOptions}
+     */
+    static get defaultOptions(): import("../../../types/audit.js").default.ScoreOptions;
+    /**
+     * @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 failureTitle: string;
+    const description: string;
+    const displayValue: string;
+}
+import { Audit } from "../audit.js";
+//# sourceMappingURL=total-byte-weight.d.ts.map

package/core/audits/byte-efficiency/total-byte-weight.js

@@ -0,0 +1,109 @@
+/**
+ * @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 * as i18n from '../../lib/i18n/i18n.js';
+import {NetworkRequest} from '../../lib/network-request.js';
+import {NetworkRecords} from '../../computed/network-records.js';
+
+const UIStrings = {
+  /** Title of a diagnostic audit that provides detail on large network resources required during page load. 'Payloads' is roughly equivalent to 'resources'. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
+  title: 'Avoids enormous network payloads',
+  /** Title of a diagnostic audit that provides detail on large network resources required during page load. 'Payloads' is roughly equivalent to 'resources'. This imperative title is shown to users when there is a significant amount of execution time that could be reduced. */
+  failureTitle: 'Avoid enormous network payloads',
+  /** Description of a Lighthouse audit that tells the user *why* they should reduce the size of the network resources required by the 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:
+  'Large network payloads cost users real money and are highly correlated with ' +
+  'long load times. [Learn how to reduce payload sizes](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/).',
+  /** Used to summarize the total byte size of the page and all its network requests. The `{totalBytes}` placeholder will be replaced with the total byte sizes, shown in kibibytes (e.g. 142 KiB) */
+  displayValue: 'Total size was {totalBytes, number, bytes}\xa0KiB',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class TotalByteWeight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'total-byte-weight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      requiredArtifacts: ['devtoolsLogs'],
+    };
+  }
+
+  /**
+   * @return {LH.Audit.ScoreOptions}
+   */
+  static get defaultOptions() {
+    return {
+      // see https://www.desmos.com/calculator/h7kfv68jre
+      // ~25th and ~10th percentiles, with resulting p10 computed.
+      // http://httparchive.org/interesting.php?a=All&l=Feb%201%202017&s=All#bytesTotal
+      p10: 2667 * 1024,
+      median: 4000 * 1024,
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const records = await NetworkRecords.request(devtoolsLog, context);
+
+    let totalBytes = 0;
+    /** @type {Array<{url: string, totalBytes: number}>} */
+    let results = [];
+    records.forEach(record => {
+      // Exclude non-network URIs since their size is reflected in other resources.
+      // Exclude records without transfer size information (or 0 bytes which won't matter anyway).
+      if (NetworkRequest.isNonNetworkRequest(record) || !record.transferSize) return;
+
+      const result = {
+        url: record.url,
+        totalBytes: record.transferSize,
+      };
+
+      totalBytes += result.totalBytes;
+      results.push(result);
+    });
+    results = results.sort((itemA, itemB) => {
+      return itemB.totalBytes - itemA.totalBytes ||
+        itemA.url.localeCompare(itemB.url);
+    }).slice(0, 10);
+
+    const score = Audit.computeLogNormalScore(
+      {p10: context.options.p10, median: context.options.median},
+      totalBytes
+    );
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
+      {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize)},
+    ];
+
+    const tableDetails = Audit.makeTableDetails(headings, results);
+
+    return {
+      score,
+      numericValue: totalBytes,
+      numericUnit: 'byte',
+      displayValue: str_(UIStrings.displayValue, {totalBytes}),
+      details: tableDetails,
+    };
+  }
+}
+
+export default TotalByteWeight;
+export {UIStrings};

package/core/audits/byte-efficiency/unminified-css.d.ts

@@ -0,0 +1,36 @@
+export default UnminifiedCSS;
+/**
+ * @fileOverview
+ */
+declare class UnminifiedCSS extends ByteEfficiencyAudit {
+    /**
+     * Computes the total length of the meaningful tokens (CSS excluding comments and whitespace).
+     *
+     * @param {string} content
+     * @return {number}
+     */
+    static computeTokenLength(content: string): number;
+    /**
+     * @param {LH.Artifacts.CSSStyleSheetInfo} stylesheet
+     * @param {LH.Artifacts.NetworkRequest|undefined} networkRecord
+     * @return {{url: string, totalBytes: number, wastedBytes: number, wastedPercent: number}}
+     */
+    static computeWaste(stylesheet: LH.Artifacts.CSSStyleSheetInfo, networkRecord: LH.Artifacts.NetworkRequest | undefined): {
+        url: string;
+        totalBytes: number;
+        wastedBytes: number;
+        wastedPercent: number;
+    };
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+     * @return {import('./byte-efficiency-audit.js').ByteEfficiencyProduct}
+     */
+    static audit_(artifacts: LH.Artifacts, networkRecords: Array<LH.Artifacts.NetworkRequest>): import('./byte-efficiency-audit.js').ByteEfficiencyProduct;
+}
+export namespace UIStrings {
+    const title: string;
+    const description: string;
+}
+import { ByteEfficiencyAudit } from "./byte-efficiency-audit.js";
+//# sourceMappingURL=unminified-css.d.ts.map

package/core/audits/byte-efficiency/unminified-css.js

@@ -0,0 +1,114 @@
+/**
+ * @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 {ByteEfficiencyAudit} from './byte-efficiency-audit.js';
+import {UnusedCSS} from '../../computed/unused-css.js';
+import * as i18n from '../../lib/i18n/i18n.js';
+import {computeCSSTokenLength as computeTokenLength} from '../../lib/minification-estimator.js';
+
+const UIStrings = {
+  /** Imperative title of a Lighthouse audit that tells the user to minify (remove whitespace) the page's CSS code. This is displayed in a list of audit titles that Lighthouse generates. */
+  title: 'Minify CSS',
+  /** Description of a Lighthouse audit that tells the user *why* they should minify (remove whitespace) the page's CSS code. 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: 'Minifying CSS files can reduce network payload sizes. ' +
+    '[Learn how to minify CSS](https://developer.chrome.com/docs/lighthouse/performance/unminified-css/).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+const IGNORE_THRESHOLD_IN_PERCENT = 5;
+const IGNORE_THRESHOLD_IN_BYTES = 2048;
+
+/**
+ * @fileOverview
+ */
+class UnminifiedCSS extends ByteEfficiencyAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'unminified-css',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      requiredArtifacts: ['CSSUsage', 'devtoolsLogs', 'traces', 'URL', 'GatherContext'],
+    };
+  }
+
+  /**
+   * Computes the total length of the meaningful tokens (CSS excluding comments and whitespace).
+   *
+   * @param {string} content
+   * @return {number}
+   */
+  static computeTokenLength(content) {
+    return computeTokenLength(content);
+  }
+
+  /**
+   * @param {LH.Artifacts.CSSStyleSheetInfo} stylesheet
+   * @param {LH.Artifacts.NetworkRequest|undefined} networkRecord
+   * @return {{url: string, totalBytes: number, wastedBytes: number, wastedPercent: number}}
+   */
+  static computeWaste(stylesheet, networkRecord) {
+    const content = stylesheet.content;
+    const totalTokenLength = UnminifiedCSS.computeTokenLength(content);
+
+    let url = stylesheet.header.sourceURL;
+    if (!url || stylesheet.header.isInline) {
+      const contentPreview = UnusedCSS.determineContentPreview(stylesheet.content);
+      url = contentPreview;
+    }
+
+    const totalBytes = ByteEfficiencyAudit.estimateTransferSize(networkRecord, content.length,
+      'Stylesheet');
+    const wastedRatio = 1 - totalTokenLength / content.length;
+    const wastedBytes = Math.round(totalBytes * wastedRatio);
+
+    return {
+      url,
+      totalBytes,
+      wastedBytes,
+      wastedPercent: 100 * wastedRatio,
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+   * @return {import('./byte-efficiency-audit.js').ByteEfficiencyProduct}
+   */
+  static audit_(artifacts, networkRecords) {
+    const items = [];
+    for (const stylesheet of artifacts.CSSUsage.stylesheets) {
+      const networkRecord = networkRecords
+        .find(record => record.url === stylesheet.header.sourceURL);
+      if (!stylesheet.content) continue;
+
+      const result = UnminifiedCSS.computeWaste(stylesheet, networkRecord);
+
+      // If the ratio is minimal, the file is likely already minified, so ignore it.
+      // If the total number of bytes to be saved is quite small, it's also safe to ignore.
+      if (result.wastedPercent < IGNORE_THRESHOLD_IN_PERCENT ||
+          result.wastedBytes < IGNORE_THRESHOLD_IN_BYTES ||
+          !Number.isFinite(result.wastedBytes)) continue;
+      items.push(result);
+    }
+
+    /** @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 UnminifiedCSS;
+export {UIStrings};

package/core/audits/byte-efficiency/unminified-javascript.d.ts

@@ -0,0 +1,37 @@
+export default UnminifiedJavaScript;
+/**
+ * @fileOverview Estimates minification savings by determining the ratio of parseable JS tokens to the
+ * length of the entire string. Though simple, this method is quite accurate at identifying whether
+ * a script was already minified and offers a relatively conservative minification estimate (our two
+ * primary goals).
+ *
+ * This audit only examines scripts that were independent network requests and not inlined or eval'd.
+ *
+ * See https://github.com/GoogleChrome/lighthouse/pull/3950#issue-277887798 for stats on accuracy.
+ */
+declare class UnminifiedJavaScript extends ByteEfficiencyAudit {
+    /**
+     * @param {string} scriptContent
+     * @param {string} displayUrl
+     * @param {LH.Artifacts.NetworkRequest|undefined} networkRecord
+     * @return {{url: string, totalBytes: number, wastedBytes: number, wastedPercent: number}}
+     */
+    static computeWaste(scriptContent: string, displayUrl: string, networkRecord: LH.Artifacts.NetworkRequest | undefined): {
+        url: string;
+        totalBytes: number;
+        wastedBytes: number;
+        wastedPercent: number;
+    };
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+     * @return {import('./byte-efficiency-audit.js').ByteEfficiencyProduct}
+     */
+    static audit_(artifacts: LH.Artifacts, networkRecords: Array<LH.Artifacts.NetworkRequest>): import('./byte-efficiency-audit.js').ByteEfficiencyProduct;
+}
+export namespace UIStrings {
+    const title: string;
+    const description: string;
+}
+import { ByteEfficiencyAudit } from "./byte-efficiency-audit.js";
+//# sourceMappingURL=unminified-javascript.d.ts.map