lighthouse 13.5.0 → 13.6.0-dev.20261028

package/core/audits/baseline.js

@@ -18,7 +18,7 @@ const UIStrings = {
    */
   description:
     'Lists web features used on the page and their Baseline status as of {date}. ' +
-    '[Learn more about Baseline](https://webstatus.dev/).',
+    '[Learn more about Baseline](https://developer.chrome.com/docs/lighthouse/best-practices/baseline-features).',
   /** Label for the column displaying the feature ID. */
   columnFeature: 'Web-features',
   /** Label for the column displaying the feature\'s baseline status. */
@@ -48,6 +48,18 @@ class Baseline extends Audit {
 
   /**
    * Determines the baseline status and display string for a given feature ID.
+   *
+   * Baseline tiers & dates (built by `build/build-baseline-data.js`):
+   * - `limited`: `baseline === false` (Limited Availability — not yet in all core browsers, no date).
+   * - `low`: `baseline === 'low'` (Newly Available — in all core browsers; value is `baseline_low_date`).
+   * - `high`: `baseline === 'high'` (Widely Available — 30 months past `baseline_low_date`; note that
+   *   `featureData.high[id]` still stores the feature's `baseline_low_date`).
+   *
+   * Widely Available rows always show `baseline_low_date`, including rows promoted at runtime.
+   * If a feature in `featureData.low` has reached `baseline_low_date + 30 months <= currentDate` at runtime,
+   * we dynamically promote it from `low` (Newly Available) to `high` (Widely Available); promotion
+   * only changes the tier.
+   *
    * @param {string} featureId
    * @param {{high: Record<string, string>, low: Record<string, string>, limited: string[]}} featureData
    * @param {Date} currentDate
@@ -66,11 +78,10 @@ class Baseline extends Audit {
       const lowData = /** @type {Record<string, string>} */ (featureData.low);
       const widelyAvailableDate = new Date(lowData[featureId]);
       widelyAvailableDate.setUTCMonth(widelyAvailableDate.getUTCMonth() + 30);
-      const widelyAvailableDateStr = widelyAvailableDate.toISOString().slice(0, 10);
 
       if (widelyAvailableDate <= currentDate) {
         return {
-          displayStatus: `Widely Available (${widelyAvailableDateStr})`,
+          displayStatus: `Widely Available (${lowData[featureId]})`,
           baselineTier: 'high',
         };
       } else {
@@ -92,6 +103,10 @@ class Baseline extends Audit {
   }
 
   /**
+   * Returns the `baseline_low_date` (YYYY-MM-DD, when the feature became Newly Available)
+   * for both `low` and `high` features, since `build/build-baseline-data.js` stores
+   * `baseline_low_date` in both `featureData.low` and `featureData.high`.
+   *
    * @param {string} featureId
    * @param {{high: Record<string, string>, low: Record<string, string>, limited: string[]}} featureData
    * @return {string|null}
@@ -103,9 +118,7 @@ class Baseline extends Audit {
     }
     if (featureId in featureData.high) {
       const highData = /** @type {Record<string, string>} */ (featureData.high);
-      const date = new Date(highData[featureId]);
-      date.setUTCMonth(date.getUTCMonth() - 30);
-      return date.toISOString().slice(0, 10);
+      return highData[featureId];
     }
     return null;
   }

package/core/audits/byte-efficiency/byte-efficiency-audit.js

@@ -10,7 +10,7 @@ import {NetworkRecords} from '../../computed/network-records.js';
 import {LoadSimulator} from '../../computed/load-simulator.js';
 import {LanternLargestContentfulPaint as LanternLCP} from '../../computed/metrics/lantern-largest-contentful-paint.js';
 import {LanternFirstContentfulPaint as LanternFCP} from '../../computed/metrics/lantern-first-contentful-paint.js';
-import {LCPImageRecord} from '../../computed/lcp-image-record.js';
+import {LCPNetworkRecord} from '../../computed/lcp-network-record.js';
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, {});
 
@@ -190,7 +190,7 @@ class ByteEfficiencyAudit extends Audit {
 
       // The LCP graph can underestimate the LCP savings if there is potential savings on the LCP record itself.
       let lcpRecordSavings = 0;
-      const lcpRecord = await LCPImageRecord.request(metricComputationInput, context);
+      const lcpRecord = await LCPNetworkRecord.request(metricComputationInput, context);
       if (lcpRecord) {
         const lcpResult = results.find(result => result.url === lcpRecord.url);
         if (lcpResult) {

package/core/audits/insights/insight-audit.d.ts

@@ -21,6 +21,15 @@ export function adaptInsightToAuditProduct<T extends keyof import("@paulirish/tr
     numericValue?: number;
     numericUnit?: LH.Audit.NumericProduct["numericUnit"];
 } | LH.Audit.Details | undefined): Promise<LH.Audit.Product>;
+/**
+ * @param {LH.Artifacts} artifacts
+ * @param {LH.Audit.Context} context
+ * @return {Promise<{insights: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet|undefined, data: LH.Artifacts.TraceEngineResult['data']}>}
+ */
+export function getInsightSet(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<{
+    insights: import("@paulirish/trace_engine/models/trace/insights/types.js").InsightSet | undefined;
+    data: LH.Artifacts.TraceEngineResult["data"];
+}>;
 /**
  * @param {LH.Artifacts.TraceElement[]} traceElements
  * @param {number|null|undefined} nodeId

package/core/audits/insights/insight-audit.js

@@ -6,6 +6,7 @@
 
 import {NO_NAVIGATION} from '@paulirish/trace_engine/models/trace/types/TraceEvents.js';
 
+import {Helpers} from '../../lib/trace-engine.js';
 import {ProcessedTrace} from '../../computed/processed-trace.js';
 import {TraceEngineResult} from '../../computed/trace-engine-result.js';
 import {Audit} from '../audit.js';
@@ -28,8 +29,8 @@ async function getInsightSet(artifacts, context) {
 
   const navigationId = processedTrace.timeOriginEvt.args.data?.navigationId;
   const insights = navigationId ?
-    [...traceEngineResult.insights.values()]
-      .find(insightSet => insightSet.navigation?.args.data?.navigationId) :
+    [...traceEngineResult.insights.values()].find(insightSet =>
+      Helpers.Trace.navigationIDForEvent(insightSet.navigation) === navigationId) :
     traceEngineResult.insights.get(NO_NAVIGATION);
 
   return {insights, data: traceEngineResult.data};
@@ -136,36 +137,41 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
   // TODO: consider adding a `estimatedSavingsText` to InsightModel, which can capture
   // the exact i18n string used by RPP; and include the same est. timing savings.
   let displayValue;
+  let wastedMs;
+
+  switch (insight.insightKey) {
+    case 'DocumentLatency':
+    case 'FontDisplay':
+    case 'RenderBlocking': {
+      wastedMs = metricSavings?.FCP ?? 0;
+      break;
+    }
 
-  if (insight.wastedBytes) {
-    displayValue = str_(i18n.UIStrings.displayValueByteSavings, {wastedBytes: insight.wastedBytes});
-  } else {
-    let wastedMs;
-
-    switch (insight.insightKey) {
-      case 'DocumentLatency':
-      case 'DuplicatedJavaScript':
-      case 'FontDisplay':
-      case 'LegacyJavaScript':
-      case 'RenderBlocking': {
-        wastedMs = metricSavings?.FCP;
-        break;
-      }
-
-      case 'LCPDiscovery':
-      case 'ModernHTTP': {
-        wastedMs = metricSavings?.LCP;
-        break;
-      }
+    case 'LCPDiscovery':
+    case 'ModernHTTP': {
+      wastedMs = metricSavings?.LCP ?? 0;
+      break;
+    }
 
-      case 'Viewport': {
-        wastedMs = metricSavings?.INP;
-        break;
-      }
+    case 'Viewport': {
+      wastedMs = metricSavings?.INP ?? 0;
+      break;
     }
+  }
+
+  if (insight.wastedBytes) {
+    displayValue = str_(i18n.UIStrings.displayValueByteSavings, {wastedBytes: insight.wastedBytes});
+  } else if (wastedMs) {
+    displayValue = str_(i18n.UIStrings.displayValueMsSavings, {wastedMs});
+  }
 
-    if (wastedMs) {
-      displayValue = str_(i18n.UIStrings.displayValueMsSavings, {wastedMs});
+  if (numericValue === undefined) {
+    if (wastedMs !== undefined) {
+      numericValue = wastedMs;
+      numericUnit = 'millisecond';
+    } else if (insight.wastedBytes !== undefined) {
+      numericValue = insight.wastedBytes;
+      numericUnit = 'byte';
     }
   }
 
@@ -225,5 +231,6 @@ function makeNodeItemForNodeId(traceElements, nodeId) {
 
 export {
   adaptInsightToAuditProduct,
+  getInsightSet,
   makeNodeItemForNodeId,
 };

package/core/audits/long-tasks.js

@@ -192,9 +192,10 @@ class LongTasks extends Audit {
       taskTimingsByEvent = new Map();
 
       const simulatorOptions = {devtoolsLog, settings: context.settings};
+      const fromTrace = process.env.INTERNAL_LANTERN_USE_TRACE !== undefined;
       const pageGraph =
         // eslint-disable-next-line max-len
-        await PageDependencyGraph.request({settings, trace, devtoolsLog, URL, SourceMaps, HostDPR, fromTrace: false}, context);
+        await PageDependencyGraph.request({settings, trace, devtoolsLog, URL, SourceMaps, HostDPR, fromTrace}, context);
       const simulator = await LoadSimulator.request(simulatorOptions, context);
       const simulation = simulator.simulate(pageGraph, {label: 'long-tasks-diagnostic'});
       for (const [node, timing] of simulation.nodeTimings.entries()) {

package/core/audits/predictive-perf.js

@@ -76,8 +76,8 @@ class PredictivePerf extends Audit {
       pessimisticLCP: lcp.pessimisticEstimate.timeInMs,
 
       roughEstimateOfTTFB: timingSummary.metrics.timeToFirstByte,
-      roughEstimateOfLCPLoadStart: timingSummary.metrics.lcpLoadDelay,
-      roughEstimateOfLCPLoadEnd: timingSummary.metrics.lcpLoadDuration,
+      roughEstimateOfLCPLoadDelay: timingSummary.metrics.lcpLoadDelay,
+      roughEstimateOfLCPLoadDuration: timingSummary.metrics.lcpLoadDuration,
     };
 
     const score = Audit.computeLogNormalScore(

package/core/audits/screenshot-thumbnails.d.ts

@@ -2,19 +2,6 @@ export default ScreenshotThumbnails;
 export type SpeedlineFrame = LH.Artifacts.Speedline["frames"][0];
 /** @typedef {LH.Artifacts.Speedline['frames'][0]} SpeedlineFrame */
 declare class ScreenshotThumbnails extends Audit {
-    /**
-     * Scales down an image to THUMBNAIL_WIDTH using nearest neighbor for speed, maintains aspect
-     * ratio of the original thumbnail.
-     *
-     * @param {ReturnType<SpeedlineFrame['getParsedImage']>} imageData
-     * @param {number} scaledWidth
-     * @return {{width: number, height: number, data: Uint8Array}}
-     */
-    static scaleImageToThumbnail(imageData: ReturnType<SpeedlineFrame["getParsedImage"]>, scaledWidth: number): {
-        width: number;
-        height: number;
-        data: Uint8Array;
-    };
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context

package/core/audits/screenshot-thumbnails.js

@@ -4,8 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import jpeg from 'jpeg-js';
-
 import {Audit} from './audit.js';
 import {LighthouseError} from '../lib/lh-error.js';
 import {Speedline} from '../computed/speedline.js';
@@ -28,42 +26,6 @@ class ScreenshotThumbnails extends Audit {
     };
   }
 
-  /**
-   * Scales down an image to THUMBNAIL_WIDTH using nearest neighbor for speed, maintains aspect
-   * ratio of the original thumbnail.
-   *
-   * @param {ReturnType<SpeedlineFrame['getParsedImage']>} imageData
-   * @param {number} scaledWidth
-   * @return {{width: number, height: number, data: Uint8Array}}
-   */
-  static scaleImageToThumbnail(imageData, scaledWidth) {
-    const scaleFactor = imageData.width / scaledWidth;
-    const scaledHeight = Math.floor(imageData.height / scaleFactor);
-
-    const outPixels = new Uint8Array(scaledWidth * scaledHeight * 4);
-
-    for (let i = 0; i < scaledWidth; i++) {
-      for (let j = 0; j < scaledHeight; j++) {
-        const origX = Math.floor(i * scaleFactor);
-        const origY = Math.floor(j * scaleFactor);
-
-        const origPos = (origY * imageData.width + origX) * 4;
-        const outPos = (j * scaledWidth + i) * 4;
-
-        outPixels[outPos] = imageData.data[origPos];
-        outPixels[outPos + 1] = imageData.data[origPos + 1];
-        outPixels[outPos + 2] = imageData.data[origPos + 2];
-        outPixels[outPos + 3] = imageData.data[origPos + 3];
-      }
-    }
-
-    return {
-      width: scaledWidth,
-      height: scaledHeight,
-      data: outPixels,
-    };
-  }
-
   /**
    * @param {LH.Artifacts} artifacts
    * @param {LH.Audit.Context} context
@@ -79,7 +41,6 @@ class ScreenshotThumbnails extends Audit {
     // Make the minimum time range 3s so sites that load super quickly don't get a single screenshot
     const minimumTimelineDuration = context.options.minimumTimelineDuration || 3000;
     const numberOfThumbnails = context.options.numberOfThumbnails || NUMBER_OF_THUMBNAILS;
-    const thumbnailWidth = context.options.thumbnailWidth || null;
 
     const thumbnails = [];
     const analyzedFrames = speedline.frames.filter(frame => !frame.isProgressInterpolated());
@@ -112,12 +73,6 @@ class ScreenshotThumbnails extends Audit {
       const cachedThumbnail = cachedThumbnails.get(frameForTimestamp);
       if (cachedThumbnail) {
         base64Data = cachedThumbnail;
-      } else if (thumbnailWidth !== null) {
-        const imageData = frameForTimestamp.getParsedImage();
-        const thumbnailImageData =
-          ScreenshotThumbnails.scaleImageToThumbnail(imageData, thumbnailWidth);
-        base64Data = jpeg.encode(thumbnailImageData, 90).data.toString('base64');
-        cachedThumbnails.set(frameForTimestamp, base64Data);
       } else {
         base64Data = frameForTimestamp.getImage().toString('base64');
         cachedThumbnails.set(frameForTimestamp, base64Data);

package/core/audits/script-treemap-data.js

@@ -176,11 +176,32 @@ class ScriptTreemapDataAudit extends Audit {
     const nodes = [];
     /** @type {Map<string, LH.Treemap.Node>} */
     const htmlNodesByFrameId = new Map();
-    const bundles = await JSBundles.request(artifacts, context);
-    const duplicationByPath = await ModuleDuplication.request(artifacts, context);
+    /** @type {Set<LH.Artifacts.NetworkRequest>} */
+    const seenNetworkRecords = new Set();
+    const deduplicatedScripts = artifacts.Scripts.filter(script => {
+      if (script.scriptLanguage !== 'JavaScript') return false;
+
+      const networkRecord = isInline(script) ?
+        undefined :
+        getRequestForScript(networkRecords, script);
+      if (networkRecord) {
+        if (seenNetworkRecords.has(networkRecord)) return false;
+        seenNetworkRecords.add(networkRecord);
+      }
+
+      return true;
+    });
+    const deduplicatedArtifacts = deduplicatedScripts.length === artifacts.Scripts.length ?
+      artifacts :
+      {...artifacts, Scripts: deduplicatedScripts};
+    const bundles = await JSBundles.request(deduplicatedArtifacts, context);
+    const duplicationByPath = await ModuleDuplication.request(deduplicatedArtifacts, context);
 
-    for (const script of artifacts.Scripts) {
-      if (script.scriptLanguage !== 'JavaScript') continue;
+    for (const script of deduplicatedScripts) {
+      const isInlineScript = isInline(script);
+      const networkRecord = isInlineScript ?
+        undefined :
+        getRequestForScript(networkRecords, script);
 
       const name = script.url;
       const bundle = bundles.find(bundle => script.scriptId === bundle.script.scriptId) ?? null;
@@ -246,7 +267,7 @@ class ScriptTreemapDataAudit extends Audit {
 
       // If this is an inline script, place the node inside a top-level (aka depth-one) node.
       // Also separate each iframe / the main page's inline scripts into their own top-level nodes.
-      if (isInline(script)) {
+      if (isInlineScript) {
         let htmlNode = htmlNodesByFrameId.get(script.executionContextAuxData.frameId);
         if (!htmlNode) {
           htmlNode = {
@@ -269,7 +290,6 @@ class ScriptTreemapDataAudit extends Audit {
         // Non-inline scripts each have their own top-level node.
         nodes.push(node);
 
-        const networkRecord = getRequestForScript(networkRecords, script);
         if (networkRecord) {
           const bodyTransferSize =
             networkRecord.transferSize - networkRecord.responseHeadersTransferSize;

package/core/audits/seo/robots-txt.js

@@ -27,7 +27,7 @@ const DIRECTIVE_SAFELIST = new Set([
   DIRECTIVE_ALLOW, DIRECTIVE_SITEMAP, // universally supported
   'crawl-delay', // yahoo, bing, yandex
   'clean-param', 'host', // yandex
-  'request-rate', 'visit-time', 'noindex', 'content-signal', // not officially supported, but used in the wild
+  'request-rate', 'visit-time', 'noindex', 'content-signal', 'license', // not officially supported, but used in the wild
 ]);
 const SITEMAP_VALID_PROTOCOLS = new Set(['https:', 'http:', 'ftp:']);
 
@@ -209,7 +209,7 @@ class RobotsTxt extends Audit {
     } = artifacts.RobotsTxt;
 
     // Do specific error messages first.
-    if (status && status >= HTTP_SERVER_ERROR_CODE_LOW) {
+    if (status && (status >= HTTP_SERVER_ERROR_CODE_LOW || status === 429)) {
       return {
         score: 0,
         displayValue: str_(UIStrings.displayValueHttpBadCode, {statusCode: status}),
@@ -228,18 +228,13 @@ class RobotsTxt extends Audit {
       };
     }
 
-    if (!status) {
+    if (!status || content === null) {
       return {
         score: 0,
         explanation: str_(UIStrings.explanation),
       };
     }
 
-    // If status is good, content must be not null.
-    if (content === null) {
-      throw new Error(`Status ${status} was valid, but content was null`);
-    }
-
     const validationErrors = validateRobots(content);
 
     /** @type {LH.Audit.Details.Table['headings']} */

package/core/audits/unsized-images.d.ts

@@ -1,12 +1,5 @@
 export default UnsizedImages;
 declare class UnsizedImages extends Audit {
-    /**
-     * An img size attribute prevents layout shifts if it is a non-negative integer (incl zero!).
-     * @url https://html.spec.whatwg.org/multipage/embedded-content-other.html#dimension-attributes
-     * @param {string | null} attrValue
-     * @return {boolean}
-     */
-    static doesHtmlAttrProvideExplicitSize(attrValue: string | null): boolean;
     /**
      * An img css size property prevents layout shifts if it is defined, not empty, and not equal to 'auto'.
      * @param {string | null} property

package/core/audits/unsized-images.js

@@ -10,6 +10,7 @@
 
 
 import {Audit} from './audit.js';
+import ImageElements from '../gather/gatherers/image-elements.js';
 import * as i18n from './../lib/i18n/i18n.js';
 import UrlUtils from '../lib/url-utils.js';
 
@@ -40,28 +41,6 @@ class UnsizedImages extends Audit {
     };
   }
 
-  /**
-   * An img size attribute prevents layout shifts if it is a non-negative integer (incl zero!).
-   * @url https://html.spec.whatwg.org/multipage/embedded-content-other.html#dimension-attributes
-   * @param {string | null} attrValue
-   * @return {boolean}
-   */
-  static doesHtmlAttrProvideExplicitSize(attrValue) {
-    if (!attrValue) return false;
-
-    // First, superweird edge case of using the positive-sign. The spec _sorta_ says it's valid...
-    // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-integers
-    //   > Otherwise, if the character is … (+): Advance position to the next character.
-    //   > (The "+" is ignored, but it is not conforming.)
-    // lol.  Irrelevant though b/c Chrome (at least) doesn't ignore. It rejects this as a non-conforming value.
-    if (attrValue.startsWith('+')) return false;
-
-    // parseInt isn't exactly the same as the html's spec for parsing integers, but it's close enough
-    // https://tc39.es/ecma262/#sec-parseint-string-radix
-    const int = parseInt(attrValue, 10);
-    return int >= 0;
-  }
-
   /**
    * An img css size property prevents layout shifts if it is defined, not empty, and not equal to 'auto'.
    * @param {string | null} property
@@ -78,6 +57,12 @@ class UnsizedImages extends Audit {
    * @return {boolean}
    */
   static isSizedImage(image) {
+    const attrWidth = image.attributeWidth;
+    const attrHeight = image.attributeHeight;
+    const htmlWidthIsExplicit = ImageElements.doesHtmlAttrProvideExplicitSize(attrWidth);
+    const htmlHeightIsExplicit = ImageElements.doesHtmlAttrProvideExplicitSize(attrHeight);
+    if (htmlWidthIsExplicit && htmlHeightIsExplicit) return true;
+
     // Perhaps we hit reachedGatheringBudget before collecting this image's cssWidth/Height
     // in fetchSourceRules. In this case, we don't have enough information to determine if it's sized.
     // We don't want to show the user a false positive, so we'll call it sized to give it as pass.
@@ -85,14 +70,10 @@ class UnsizedImages extends Audit {
     // Handwavey TODO: explore ways to avoid this.
     if (image.cssEffectiveRules === undefined) return true;
 
-    const attrWidth = image.attributeWidth;
-    const attrHeight = image.attributeHeight;
     const cssWidth = image.cssEffectiveRules.width;
     const cssHeight = image.cssEffectiveRules.height;
     const cssAspectRatio = image.cssEffectiveRules.aspectRatio;
-    const htmlWidthIsExplicit = UnsizedImages.doesHtmlAttrProvideExplicitSize(attrWidth);
     const cssWidthIsExplicit = UnsizedImages.isCssPropExplicitlySet(cssWidth);
-    const htmlHeightIsExplicit = UnsizedImages.doesHtmlAttrProvideExplicitSize(attrHeight);
     const cssHeightIsExplicit = UnsizedImages.isCssPropExplicitlySet(cssHeight);
     const explicitAspectRatio = UnsizedImages.isCssPropExplicitlySet(cssAspectRatio);
     const explicitWidth = htmlWidthIsExplicit || cssWidthIsExplicit;

package/core/computed/lcp-image-record.d.ts

@@ -1,24 +1,3 @@
-export { LCPImageRecordComputed as LCPImageRecord };
-declare const LCPImageRecordComputed: typeof LCPImageRecord & {
-    request: (dependencies: {
-        trace: LH.Trace;
-        devtoolsLog: LH.DevtoolsLog;
-    }, context: LH.Artifacts.ComputedContext) => Promise<import("../lib/network-request.js").NetworkRequest | undefined>;
-};
-/**
- * @fileoverview Match the LCP event with the paint event to get the request of the image actually painted.
- * This could differ from the `ImageElement` associated with the nodeId if e.g. the LCP
- * was a pseudo-element associated with a node containing a smaller background-image.
- */
-declare class LCPImageRecord {
-    /**
-     * @param {{trace: LH.Trace, devtoolsLog: LH.DevtoolsLog}} data
-     * @param {LH.Artifacts.ComputedContext} context
-     * @return {Promise<LH.Artifacts.NetworkRequest|undefined>}
-     */
-    static compute_(data: {
-        trace: LH.Trace;
-        devtoolsLog: LH.DevtoolsLog;
-    }, context: LH.Artifacts.ComputedContext): Promise<LH.Artifacts.NetworkRequest | undefined>;
-}
+export { LCPNetworkRecord as LCPImageRecord };
+import { LCPNetworkRecord } from './lcp-network-record.js';
 //# sourceMappingURL=lcp-image-record.d.ts.map

package/core/computed/lcp-image-record.js

@@ -4,71 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {makeComputedArtifact} from './computed-artifact.js';
-import {NetworkRecords} from './network-records.js';
-import {ProcessedNavigation} from './processed-navigation.js';
-import {LighthouseError} from '../lib/lh-error.js';
-
-/**
- * @fileoverview Match the LCP event with the paint event to get the request of the image actually painted.
- * This could differ from the `ImageElement` associated with the nodeId if e.g. the LCP
- * was a pseudo-element associated with a node containing a smaller background-image.
- */
-
-class LCPImageRecord {
-  /**
-   * @param {{trace: LH.Trace, devtoolsLog: LH.DevtoolsLog}} data
-   * @param {LH.Artifacts.ComputedContext} context
-   * @return {Promise<LH.Artifacts.NetworkRequest|undefined>}
-   */
-  static async compute_(data, context) {
-    const {trace, devtoolsLog} = data;
-    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
-    const processedNavigation = await ProcessedNavigation.request(trace, context);
-    if (processedNavigation.timings.largestContentfulPaint === undefined) {
-      throw new LighthouseError(LighthouseError.errors.NO_LCP);
-    }
-
-    // Use main-frame-only LCP to match the metric value.
-    const lcpEvent = processedNavigation.largestContentfulPaintEvt;
-    if (!lcpEvent) return;
-
-    const lcpImagePaintEvent = trace.traceEvents.filter(e => {
-      return e.name === 'LargestImagePaint::Candidate' &&
-          e.args.frame === lcpEvent.args.frame &&
-          e.args.data?.DOMNodeId === lcpEvent.args.data?.nodeId &&
-          e.args.data?.size === lcpEvent.args.data?.size;
-    // Get last candidate, in case there was more than one.
-    }).sort((a, b) => b.ts - a.ts)[0];
-
-    const lcpUrl = lcpImagePaintEvent?.args.data?.imageUrl;
-    if (!lcpUrl) return;
-
-    const candidates = networkRecords.filter(record => {
-      return record.url === lcpUrl &&
-          record.finished &&
-          // Same frame as LCP trace event.
-          record.frameId === lcpImagePaintEvent.args.frame &&
-          record.networkRequestTime < (processedNavigation.timestamps.largestContentfulPaint || 0);
-    }).map(record => {
-      // Follow any redirects to find the real image request.
-      while (record.redirectDestination) {
-        record = record.redirectDestination;
-      }
-      return record;
-    }).filter(record => {
-      // Don't select if also loaded by some other means (xhr, etc). `resourceType`
-      // isn't set on redirect _sources_, so have to check after following redirects.
-      return record.resourceType === 'Image';
-    });
-
-    // If there are still multiple candidates, at this point it appears the page
-    // simply made multiple requests for the image. The first loaded is the best
-    // guess of the request that made the image available for use.
-    return candidates.sort((a, b) => a.networkEndTime - b.networkEndTime)[0];
-  }
-}
-
-const LCPImageRecordComputed = makeComputedArtifact(LCPImageRecord, ['devtoolsLog', 'trace']);
-export {LCPImageRecordComputed as LCPImageRecord};
+// TODO(v14): remove
+import {LCPNetworkRecord} from './lcp-network-record.js';
 
+export {LCPNetworkRecord as LCPImageRecord};

package/core/computed/lcp-network-record.d.ts

@@ -0,0 +1,24 @@
+export { LCPNetworkRecordComputed as LCPNetworkRecord };
+declare const LCPNetworkRecordComputed: typeof LCPNetworkRecord & {
+    request: (dependencies: {
+        trace: LH.Trace;
+        devtoolsLog: LH.DevtoolsLog;
+    }, context: LH.Artifacts.ComputedContext) => Promise<import("../lib/network-request.js").NetworkRequest | undefined>;
+};
+/**
+ * @fileoverview Match the LCP event with the paint event to get the request of the image actually painted.
+ * This could differ from the `ImageElement` associated with the nodeId if e.g. the LCP
+ * was a pseudo-element associated with a node containing a smaller background-image.
+ */
+declare class LCPNetworkRecord {
+    /**
+     * @param {{trace: LH.Trace, devtoolsLog: LH.DevtoolsLog}} data
+     * @param {LH.Artifacts.ComputedContext} context
+     * @return {Promise<LH.Artifacts.NetworkRequest|undefined>}
+     */
+    static compute_(data: {
+        trace: LH.Trace;
+        devtoolsLog: LH.DevtoolsLog;
+    }, context: LH.Artifacts.ComputedContext): Promise<LH.Artifacts.NetworkRequest | undefined>;
+}
+//# sourceMappingURL=lcp-network-record.d.ts.map