lighthouse 9.6.8 → 10.0.0-dev.20230209

package/core/audits/byte-efficiency/modern-image-formats.d.ts

@@ -0,0 +1,38 @@
+export default ModernImageFormats;
+declare class ModernImageFormats extends ByteEfficiencyAudit {
+    /**
+     * @param {{naturalWidth: number, naturalHeight: number}} imageElement
+     * @return {number}
+     */
+    static estimateWebPSizeFromDimensions(imageElement: {
+        naturalWidth: number;
+        naturalHeight: number;
+    }): number;
+    /**
+     * @param {{naturalWidth: number, naturalHeight: number}} imageElement
+     * @return {number}
+     */
+    static estimateAvifSizeFromDimensions(imageElement: {
+        naturalWidth: number;
+        naturalHeight: number;
+    }): number;
+    /**
+     * @param {{jpegSize: number | undefined, webpSize: number | undefined}} otherFormatSizes
+     * @return {number|undefined}
+     */
+    static estimateAvifSizeFromWebPAndJpegEstimates(otherFormatSizes: {
+        jpegSize: number | undefined;
+        webpSize: number | undefined;
+    }): number | undefined;
+    /**
+     * @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=modern-image-formats.d.ts.map

package/core/audits/byte-efficiency/modern-image-formats.js

@@ -0,0 +1,186 @@
+/**
+ * @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 This audit determines if the images could be smaller when compressed with WebP.
+ */
+
+
+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 serve images in newer and more efficient image formats in order to enhance the performance of a page. A non-modern image format was designed 20+ years ago. This is displayed in a list of audit titles that Lighthouse generates. */
+  title: 'Serve images in next-gen formats',
+  /** Description of a Lighthouse audit that tells the user *why* they should use newer and more efficient image formats. 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: 'Image formats like WebP and AVIF often provide better ' +
+    'compression than PNG or JPEG, which means faster downloads and less data consumption. ' +
+    '[Learn more about modern image formats](https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images/).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+const IGNORE_THRESHOLD_IN_BYTES = 8192;
+
+class ModernImageFormats extends ByteEfficiencyAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'modern-image-formats',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      requiredArtifacts: ['OptimizedImages', 'devtoolsLogs', 'traces', 'URL', 'GatherContext',
+        'ImageElements'],
+    };
+  }
+
+  /**
+   * @param {{naturalWidth: number, naturalHeight: number}} imageElement
+   * @return {number}
+   */
+  static estimateWebPSizeFromDimensions(imageElement) {
+    const totalPixels = imageElement.naturalWidth * imageElement.naturalHeight;
+    // See uses-optimized-images for the rationale behind our 2 byte-per-pixel baseline and
+    // JPEG compression ratio of 8:1.
+    // WebP usually gives ~20% additional savings on top of that, so we will use 10:1.
+    // This is quite pessimistic as their study shows a photographic compression ratio of ~29:1.
+    // https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study#results
+    const expectedBytesPerPixel = 2 * 1 / 10;
+    return Math.round(totalPixels * expectedBytesPerPixel);
+  }
+
+  /**
+   * @param {{naturalWidth: number, naturalHeight: number}} imageElement
+   * @return {number}
+   */
+  static estimateAvifSizeFromDimensions(imageElement) {
+    const totalPixels = imageElement.naturalWidth * imageElement.naturalHeight;
+    // See above for the rationale behind our 2 byte-per-pixel baseline and WebP ratio of 10:1.
+    // AVIF usually gives ~20% additional savings on top of that, so we will use 12:1.
+    // This is quite pessimistic as Netflix study shows a photographic compression ratio of ~40:1
+    // (0.4 *bits* per pixel at SSIM 0.97).
+    // https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4
+    const expectedBytesPerPixel = 2 * 1 / 12;
+    return Math.round(totalPixels * expectedBytesPerPixel);
+  }
+
+  /**
+   * @param {{jpegSize: number | undefined, webpSize: number | undefined}} otherFormatSizes
+   * @return {number|undefined}
+   */
+  static estimateAvifSizeFromWebPAndJpegEstimates(otherFormatSizes) {
+    if (!otherFormatSizes.jpegSize || !otherFormatSizes.webpSize) return undefined;
+
+    // AVIF saves at least ~50% on JPEG, ~20% on WebP at low quality.
+    // http://downloads.aomedia.org/assets/pdf/symposium-2019/slides/CyrilConcolato_Netflix-AVIF-AOM-Research-Symposium-2019.pdf
+    // https://jakearchibald.com/2020/avif-has-landed/
+    // https://www.finally.agency/blog/what-is-avif-image-format
+    // See https://github.com/GoogleChrome/lighthouse/issues/12295#issue-840261460 for more.
+    const estimateFromJpeg = otherFormatSizes.jpegSize * 5 / 10;
+    const estimateFromWebp = otherFormatSizes.webpSize * 8 / 10;
+    return estimateFromJpeg / 2 + estimateFromWebp / 2;
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {import('./byte-efficiency-audit.js').ByteEfficiencyProduct}
+   */
+  static audit_(artifacts) {
+    const pageURL = artifacts.URL.finalDisplayedUrl;
+    const images = artifacts.OptimizedImages;
+    const imageElements = artifacts.ImageElements;
+    /** @type {Map<string, LH.Artifacts.ImageElement>} */
+    const imageElementsByURL = new Map();
+    imageElements.forEach(img => imageElementsByURL.set(img.src, img));
+
+    /** @type {Array<LH.Audit.ByteEfficiencyItem>} */
+    const items = [];
+    const warnings = [];
+    for (const image of images) {
+      const imageElement = imageElementsByURL.get(image.url);
+
+      if (image.failed) {
+        warnings.push(`Unable to decode ${UrlUtils.getURLDisplayName(image.url)}`);
+        continue;
+      }
+
+      // Skip if the image was already using a modern format.
+      if (image.mimeType === 'image/webp' || image.mimeType === 'image/avif') continue;
+
+      const jpegSize = image.jpegSize;
+      let webpSize = image.webpSize;
+      let avifSize = ModernImageFormats.estimateAvifSizeFromWebPAndJpegEstimates({
+        jpegSize,
+        webpSize,
+      });
+      let fromProtocol = true;
+
+      if (typeof webpSize === 'undefined') {
+        if (!imageElement) {
+          warnings.push(`Unable to locate resource ${UrlUtils.getURLDisplayName(image.url)}`);
+          continue;
+        }
+
+        // Skip if we couldn't collect natural image size information.
+        if (!imageElement.naturalDimensions) continue;
+        const naturalHeight = imageElement.naturalDimensions.height;
+        const naturalWidth = imageElement.naturalDimensions.width;
+        // If naturalHeight or naturalWidth are falsy, information is not valid, skip.
+        if (!naturalWidth || !naturalHeight) continue;
+
+        webpSize = ModernImageFormats.estimateWebPSizeFromDimensions({
+          naturalHeight,
+          naturalWidth,
+        });
+        avifSize = ModernImageFormats.estimateAvifSizeFromDimensions({
+          naturalHeight,
+          naturalWidth,
+        });
+        fromProtocol = false;
+      }
+
+      if (webpSize === undefined || avifSize === undefined) continue;
+
+      // Visible wasted bytes uses AVIF, but we still include the WebP savings in the LHR.
+      const wastedWebpBytes = image.originalSize - webpSize;
+      const wastedBytes = image.originalSize - avifSize;
+      if (wastedBytes < IGNORE_THRESHOLD_IN_BYTES) continue;
+
+      const url = UrlUtils.elideDataURI(image.url);
+      const isCrossOrigin = !UrlUtils.originsMatch(pageURL, image.url);
+
+      items.push({
+        node: imageElement ? ByteEfficiencyAudit.makeNodeItem(imageElement.node) : undefined,
+        url,
+        fromProtocol,
+        isCrossOrigin,
+        totalBytes: image.originalSize,
+        wastedBytes,
+        wastedWebpBytes,
+      });
+    }
+
+    /** @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 {
+      warnings,
+      items,
+      headings,
+    };
+  }
+}
+
+export default ModernImageFormats;
+export {UIStrings};

package/core/audits/byte-efficiency/offscreen-images.d.ts

@@ -0,0 +1,75 @@
+export default OffscreenImages;
+export type WasteResult = {
+    node: LH.Audit.Details.NodeValue;
+    url: string;
+    requestStartTime: number;
+    totalBytes: number;
+    wastedBytes: number;
+    wastedPercent: number;
+};
+/** @typedef {{node: LH.Audit.Details.NodeValue, url: string, requestStartTime: number, totalBytes: number, wastedBytes: number, wastedPercent: number}} WasteResult */
+declare class OffscreenImages extends ByteEfficiencyAudit {
+    /**
+     * @param {{top: number, bottom: number, left: number, right: number}} imageRect
+     * @param {{innerWidth: number, innerHeight: number}} viewportDimensions
+     * @return {number}
+     */
+    static computeVisiblePixels(imageRect: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    }, viewportDimensions: {
+        innerWidth: number;
+        innerHeight: number;
+    }): number;
+    /**
+     * @param {LH.Artifacts.ImageElement} image
+     * @param {{innerWidth: number, innerHeight: number}} viewportDimensions
+     * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+     * @return {null|Error|WasteResult}
+     */
+    static computeWaste(image: LH.Artifacts.ImageElement, viewportDimensions: {
+        innerWidth: number;
+        innerHeight: number;
+    }, networkRecords: Array<LH.Artifacts.NetworkRequest>): null | Error | WasteResult;
+    /**
+     * Filters out image requests that were requested after the last long task based on lantern timings.
+     *
+     * @param {WasteResult[]} images
+     * @param {LH.Artifacts.LanternMetric} lanternMetricData
+     */
+    static filterLanternResults(images: WasteResult[], lanternMetricData: LH.Artifacts.LanternMetric): WasteResult[];
+    /**
+     * Filters out image requests that were requested after TTI.
+     *
+     * @param {WasteResult[]} images
+     * @param {number} interactiveTimestamp
+     */
+    static filterObservedResults(images: WasteResult[], interactiveTimestamp: number): WasteResult[];
+    /**
+     * The default byte efficiency audit will report max(TTI, load), since lazy-loading offscreen
+     * images won't reduce the overall time and the wasted bytes are really only "wasted" for TTI,
+     * override the function to just look at TTI savings.
+     *
+     * @param {Array<LH.Audit.ByteEfficiencyItem>} results
+     * @param {LH.Gatherer.Simulation.GraphNode} graph
+     * @param {LH.Gatherer.Simulation.Simulator} simulator
+     * @return {number}
+     */
+    static computeWasteWithTTIGraph(results: Array<LH.Audit.ByteEfficiencyItem>, graph: LH.Gatherer.Simulation.GraphNode, simulator: LH.Gatherer.Simulation.Simulator): number;
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+     * @param {LH.Audit.Context} context
+     * @return {Promise<import('./byte-efficiency-audit.js').ByteEfficiencyProduct>}
+     */
+    static audit_(artifacts: LH.Artifacts, networkRecords: Array<LH.Artifacts.NetworkRequest>, context: LH.Audit.Context): Promise<import('./byte-efficiency-audit.js').ByteEfficiencyProduct>;
+}
+export namespace UIStrings {
+    const title: string;
+    const description: string;
+}
+import { ByteEfficiencyAudit } from "./byte-efficiency-audit.js";
+import { NetworkRequest } from "../../lib/network-request.js";
+//# sourceMappingURL=offscreen-images.d.ts.map

package/core/audits/byte-efficiency/offscreen-images.js

@@ -0,0 +1,253 @@
+/**
+ * @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 images are displayed only outside of the viewport.
+ *     Images requested after TTI are not flagged as violations.
+ */
+
+
+import {ByteEfficiencyAudit} from './byte-efficiency-audit.js';
+import {NetworkRequest} from '../../lib/network-request.js';
+import {Sentry} from '../../lib/sentry.js';
+import UrlUtils from '../../lib/url-utils.js';
+import * as i18n from '../../lib/i18n/i18n.js';
+import {Interactive} from '../../computed/metrics/interactive.js';
+import {ProcessedTrace} from '../../computed/processed-trace.js';
+
+const UIStrings = {
+  /** Imperative title of a Lighthouse audit that tells the user to defer loading offscreen images. Offscreen images are images located outside of the visible browser viewport. As they are unseen by the user and slow down page load, they should be loaded later, closer to when the user is going to see them. This is displayed in a list of audit titles that Lighthouse generates. */
+  title: 'Defer offscreen images',
+  /** Description of a Lighthouse audit that tells the user *why* they should defer loading offscreen images. Offscreen images are images located outside of the visible browser viewport. As they are unseen by the user and slow down page load, they should be loaded later, closer to when the user is going to see them. 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 lazy-loading offscreen and hidden images after all critical resources have ' +
+    'finished loading to lower time to interactive. ' +
+    '[Learn how to defer offscreen images](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+// See https://github.com/GoogleChrome/lighthouse/issues/10471 for discussion about the thresholds here.
+const ALLOWABLE_OFFSCREEN_IN_PX = 100;
+const ALLOWABLE_OFFSCREEN_BOTTOM_IN_VIEWPORTS = 3;
+
+const IGNORE_THRESHOLD_IN_BYTES = 2048;
+const IGNORE_THRESHOLD_IN_PERCENT = 75;
+const IGNORE_THRESHOLD_IN_MS = 50;
+
+/** @typedef {{node: LH.Audit.Details.NodeValue, url: string, requestStartTime: number, totalBytes: number, wastedBytes: number, wastedPercent: number}} WasteResult */
+
+class OffscreenImages extends ByteEfficiencyAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'offscreen-images',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      supportedModes: ['navigation'],
+      requiredArtifacts: ['ImageElements', 'ViewportDimensions', 'GatherContext', 'devtoolsLogs',
+        'traces', 'URL'],
+    };
+  }
+
+  /**
+   * @param {{top: number, bottom: number, left: number, right: number}} imageRect
+   * @param {{innerWidth: number, innerHeight: number}} viewportDimensions
+   * @return {number}
+   */
+  static computeVisiblePixels(imageRect, viewportDimensions) {
+    const innerWidth = viewportDimensions.innerWidth;
+    const innerHeight = viewportDimensions.innerHeight;
+    const allowableOffscreenBottomInPx = ALLOWABLE_OFFSCREEN_BOTTOM_IN_VIEWPORTS *
+      viewportDimensions.innerHeight;
+
+    const top = Math.max(imageRect.top, -1 * ALLOWABLE_OFFSCREEN_IN_PX);
+    const right = Math.min(imageRect.right, innerWidth + ALLOWABLE_OFFSCREEN_IN_PX);
+    const bottom = Math.min(imageRect.bottom, innerHeight + allowableOffscreenBottomInPx);
+    const left = Math.max(imageRect.left, -1 * ALLOWABLE_OFFSCREEN_IN_PX);
+
+    return Math.max(right - left, 0) * Math.max(bottom - top, 0);
+  }
+
+  /**
+   * @param {LH.Artifacts.ImageElement} image
+   * @param {{innerWidth: number, innerHeight: number}} viewportDimensions
+   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+   * @return {null|Error|WasteResult}
+   */
+  static computeWaste(image, viewportDimensions, networkRecords) {
+    const networkRecord = networkRecords.find(record => record.url === image.src);
+    // If we don't know how big it was, we can't really report savings, treat it as passed.
+    if (!networkRecord) return null;
+    // If the image had its loading behavior explicitly controlled already, treat it as passed.
+    if (image.loading === 'lazy' || image.loading === 'eager') return null;
+
+    const url = UrlUtils.elideDataURI(image.src);
+    const totalPixels = image.displayedWidth * image.displayedHeight;
+    const visiblePixels = this.computeVisiblePixels(image.clientRect, viewportDimensions);
+    // Treat images with 0 area as if they're offscreen. See https://github.com/GoogleChrome/lighthouse/issues/1914
+    const wastedRatio = totalPixels === 0 ? 1 : 1 - visiblePixels / totalPixels;
+    const totalBytes = NetworkRequest.getResourceSizeOnNetwork(networkRecord);
+    const wastedBytes = Math.round(totalBytes * wastedRatio);
+
+    if (!Number.isFinite(wastedRatio)) {
+      return new Error(`Invalid image sizing information ${url}`);
+    }
+
+    return {
+      node: ByteEfficiencyAudit.makeNodeItem(image.node),
+      url,
+      requestStartTime: networkRecord.networkRequestTime,
+      totalBytes,
+      wastedBytes,
+      wastedPercent: 100 * wastedRatio,
+    };
+  }
+
+  /**
+   * Filters out image requests that were requested after the last long task based on lantern timings.
+   *
+   * @param {WasteResult[]} images
+   * @param {LH.Artifacts.LanternMetric} lanternMetricData
+   */
+  static filterLanternResults(images, lanternMetricData) {
+    const nodeTimings = lanternMetricData.pessimisticEstimate.nodeTimings;
+
+    // Find the last long task start time
+    let lastLongTaskStartTime = 0;
+    // Find the start time of all requests
+    /** @type {Map<string, number>} */
+    const startTimesByURL = new Map();
+    for (const [node, timing] of nodeTimings) {
+      if (node.type === 'cpu' && timing.duration >= 50) {
+        lastLongTaskStartTime = Math.max(lastLongTaskStartTime, timing.startTime);
+      } else if (node.type === 'network') {
+        startTimesByURL.set(node.record.url, timing.startTime);
+      }
+    }
+
+    return images.filter(image => {
+      // Filter out images that had little waste
+      if (image.wastedBytes < IGNORE_THRESHOLD_IN_BYTES) return false;
+      if (image.wastedPercent < IGNORE_THRESHOLD_IN_PERCENT) return false;
+      // Filter out images that started after the last long task
+      const imageRequestStartTime = startTimesByURL.get(image.url) || 0;
+      return imageRequestStartTime < lastLongTaskStartTime - IGNORE_THRESHOLD_IN_MS;
+    });
+  }
+
+  /**
+   * Filters out image requests that were requested after TTI.
+   *
+   * @param {WasteResult[]} images
+   * @param {number} interactiveTimestamp
+   */
+  static filterObservedResults(images, interactiveTimestamp) {
+    return images.filter(image => {
+      if (image.wastedBytes < IGNORE_THRESHOLD_IN_BYTES) return false;
+      if (image.wastedPercent < IGNORE_THRESHOLD_IN_PERCENT) return false;
+      return image.requestStartTime < interactiveTimestamp / 1000 - IGNORE_THRESHOLD_IN_MS;
+    });
+  }
+
+  /**
+   * The default byte efficiency audit will report max(TTI, load), since lazy-loading offscreen
+   * images won't reduce the overall time and the wasted bytes are really only "wasted" for TTI,
+   * override the function to just look at TTI savings.
+   *
+   * @param {Array<LH.Audit.ByteEfficiencyItem>} results
+   * @param {LH.Gatherer.Simulation.GraphNode} graph
+   * @param {LH.Gatherer.Simulation.Simulator} simulator
+   * @return {number}
+   */
+  static computeWasteWithTTIGraph(results, graph, simulator) {
+    return super.computeWasteWithTTIGraph(results, graph, simulator,
+      {includeLoad: false});
+  }
+
+  /**
+   * @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 = artifacts.ImageElements;
+    const viewportDimensions = artifacts.ViewportDimensions;
+    const gatherContext = artifacts.GatherContext;
+    const trace = artifacts.traces[ByteEfficiencyAudit.DEFAULT_PASS];
+    const devtoolsLog = artifacts.devtoolsLogs[ByteEfficiencyAudit.DEFAULT_PASS];
+    const URL = artifacts.URL;
+
+    /** @type {string[]} */
+    const warnings = [];
+    /** @type {Map<string, WasteResult>} */
+    const resultsMap = new Map();
+    for (const image of images) {
+      const processed = OffscreenImages.computeWaste(image, viewportDimensions, networkRecords);
+      if (processed === null) {
+        continue;
+      }
+
+      if (processed instanceof Error) {
+        warnings.push(processed.message);
+        Sentry.captureException(processed, {tags: {audit: this.meta.id}, level: 'warning'});
+        continue;
+      }
+
+      // If an image was used more than once, warn only about its least wasteful usage
+      const existing = resultsMap.get(processed.url);
+      if (!existing || existing.wastedBytes > processed.wastedBytes) {
+        resultsMap.set(processed.url, processed);
+      }
+    }
+
+    const settings = context.settings;
+
+    let items;
+    const unfilteredResults = Array.from(resultsMap.values());
+    // get the interactive time or fallback to getting the end of trace time
+    try {
+      const metricComputationData = {trace, devtoolsLog, gatherContext, settings, URL};
+      const interactive = await Interactive.request(metricComputationData, context);
+
+      // use interactive to generate items
+      const lanternInteractive = /** @type {LH.Artifacts.LanternMetric} */ (interactive);
+      // Filter out images that were loaded after all CPU activity
+      items = context.settings.throttlingMethod === 'simulate' ?
+        OffscreenImages.filterLanternResults(unfilteredResults, lanternInteractive) :
+        // @ts-expect-error - .timestamp will exist if throttlingMethod isn't lantern
+        OffscreenImages.filterObservedResults(unfilteredResults, interactive.timestamp);
+    } catch (err) {
+      // if the error is during a Lantern run, end of trace may also be inaccurate, so rethrow
+      if (context.settings.throttlingMethod === 'simulate') {
+        throw err;
+      }
+      // use end of trace as a substitute for finding interactive time
+      items = OffscreenImages.filterObservedResults(unfilteredResults,
+        await ProcessedTrace.request(trace, context).then(tot => tot.timestamps.traceEnd));
+    }
+
+    /** @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 {
+      warnings,
+      items,
+      headings,
+    };
+  }
+}
+
+export default OffscreenImages;
+export {UIStrings};

package/core/audits/byte-efficiency/render-blocking-resources.d.ts

@@ -0,0 +1,55 @@
+export default RenderBlockingResources;
+export type Simulator = import('../../lib/dependency-graph/simulator/simulator').Simulator;
+export type Node = import('../../lib/dependency-graph/base-node.js').Node;
+export type NetworkNode = typeof import("../../lib/dependency-graph/network-node.js");
+declare class RenderBlockingResources extends Audit {
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<{wastedMs: number, results: Array<{url: string, totalBytes: number, wastedMs: number}>}>}
+     */
+    static computeResults(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<{
+        wastedMs: number;
+        results: {
+            url: string;
+            totalBytes: number;
+            wastedMs: number;
+        }[];
+    }>;
+    /**
+     * 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: Simulator, fcpGraph: Node, deferredIds: Set<string>, wastedCssBytesByUrl: Map<string, number>, Stacks: LH.Artifacts.DetectedStack[]): number;
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<Map<string, number>>}
+     */
+    static computeWastedCSSBytes(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<Map<string, 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";
+//# sourceMappingURL=render-blocking-resources.d.ts.map