lighthouse 13.5.0-dev.20261020 → 13.5.0-dev.20261021

package/cli/bin.d.ts

@@ -1,5 +1,5 @@
 /**
- * @return {Promise<LH.RunnerResult|void>}
+ * @return {Promise<LH.RunnerResult|LH.RunnerResult[]|void>}
  */
-export function begin(): Promise<LH.RunnerResult | void>;
+export function begin(): Promise<LH.RunnerResult | LH.RunnerResult[] | void>;
 //# sourceMappingURL=bin.d.ts.map

package/cli/bin.js

@@ -41,7 +41,7 @@ function isDev() {
 }
 
 /**
- * @return {Promise<LH.RunnerResult|void>}
+ * @return {Promise<LH.RunnerResult|LH.RunnerResult[]|void>}
  */
 async function begin() {
   const cliFlags = getFlags();
@@ -61,7 +61,7 @@ async function begin() {
     commands.listTraceCategories();
   }
 
-  const urlUnderTest = cliFlags._[0];
+  const urlsUnderTest = cliFlags._.length > 1 ? cliFlags._ : cliFlags._[0];
 
   /** @type {LH.Config|undefined} */
   let config;
@@ -89,6 +89,7 @@ async function begin() {
   log.setLevel(cliFlags.logLevel);
 
   if (
+    cliFlags._.length <= 1 &&
     cliFlags.output.length === 1 &&
     cliFlags.output[0] === Printer.OutputMode.json &&
     !cliFlags.outputPath
@@ -120,7 +121,7 @@ async function begin() {
   }
   if (cliFlags.enableErrorReporting) {
     await Sentry.init({
-      url: urlUnderTest,
+      url: cliFlags._.join(', '),
       flags: cliFlags,
       config,
       environmentData: {
@@ -131,7 +132,7 @@ async function begin() {
     });
   }
 
-  return runLighthouse(urlUnderTest, cliFlags, config);
+  return runLighthouse(urlsUnderTest, cliFlags, config);
 }
 
 export {

package/cli/cli-flags.d.ts

@@ -24,7 +24,7 @@ export function getYargsParser(manualArgv?: string | undefined): import("yargs")
         default: boolean;
         describe: string;
     };
-}>, "port" | "screenEmulation" | "emulatedUserAgent" | "hostname" | "preset" | "save-assets" | "list-all-audits" | "list-locales" | "list-trace-categories" | "debug-navigation" | "additional-trace-categories" | "config-path" | "chrome-flags" | "form-factor" | "max-wait-for-load" | "enable-error-reporting" | "gather-mode" | "audit-mode" | "only-audits" | "only-categories" | "skip-audits" | "disable-full-page-screenshot" | "ignore-status-code"> & import("yargs").InferredOptionTypes<{
+}>, "port" | "screenEmulation" | "emulatedUserAgent" | "hostname" | "preset" | "save-assets" | "list-all-audits" | "list-locales" | "list-trace-categories" | "debug-navigation" | "additional-trace-categories" | "config-path" | "chrome-flags" | "form-factor" | "max-wait-for-load" | "enable-error-reporting" | "gather-mode" | "audit-mode" | "only-audits" | "only-categories" | "skip-audits" | "disable-full-page-screenshot" | "ignore-status-code" | "url-file" | "fail-fast"> & import("yargs").InferredOptionTypes<{
     'save-assets': {
         type: "boolean";
         default: boolean;
@@ -133,6 +133,15 @@ export function getYargsParser(manualArgv?: string | undefined): import("yargs")
         type: "boolean";
         describe: string;
     };
+    'url-file': {
+        type: "string";
+        coerce: typeof coerceUrlFile;
+        describe: string;
+    };
+    'fail-fast': {
+        type: "boolean";
+        describe: string;
+    };
 }>, "output" | "view" | "output-path"> & import("yargs").InferredOptionTypes<{
     output: {
         type: "array";
@@ -221,6 +230,12 @@ declare function coerceOptionalStringBoolean(value: unknown): boolean | string |
  * @return {Array<string>=}
  */
 declare function splitCommaSeparatedValues(strings?: Array<string> | undefined): Array<string> | undefined;
+/**
+ * Reads newline-delimited URLs from a file, ignoring empty lines and `#` comments.
+ * @param {unknown=} value
+ * @return {Array<string>=}
+ */
+declare function coerceUrlFile(value?: unknown | undefined): Array<string> | undefined;
 /**
  * Coerce output CLI input to `LH.SharedFlagsSettings['output']` or throw if not possible.
  * @param {Array<unknown>} values

package/cli/cli-flags.js

@@ -203,12 +203,22 @@ function getYargsParser(manualArgv) {
         type: 'boolean',
         describe: 'Disables failing on all error status codes, and instead issues a warning.',
       },
+      'url-file': {
+        type: 'string',
+        coerce: coerceUrlFile,
+        describe: 'The path to a file containing newline-delimited URLs to audit.',
+      },
+      'fail-fast': {
+        type: 'boolean',
+        describe: 'Stop auditing remaining URLs immediately if a run fails.',
+      },
     })
     .group([
       'save-assets', 'list-all-audits', 'list-locales', 'list-trace-categories', 'additional-trace-categories',
       'config-path', 'preset', 'chrome-flags', 'port', 'hostname', 'form-factor', 'screenEmulation', 'emulatedUserAgent',
       'max-wait-for-load', 'enable-error-reporting', 'gather-mode', 'audit-mode',
       'only-audits', 'only-categories', 'skip-audits', 'disable-full-page-screenshot', 'ignore-status-code',
+      'url-file', 'fail-fast',
     ], 'Configuration:')
 
     // Output
@@ -305,6 +315,24 @@ Example: --output-path=./lighthouse-results.html`,
     .choices('preset', /** @type {const} */ (['perf', 'experimental', 'desktop']))
 
     .check(argv => {
+      if (Array.isArray(argv.urlFile)) {
+        argv._.push(...argv.urlFile);
+      }
+
+      if (argv._.length > 1) {
+        if (argv.gatherMode || argv.auditMode) {
+          throw new Error('Cannot use -G/--gather-mode or -A/--audit-mode when auditing multiple URLs');
+        }
+
+        if (
+          typeof argv.outputPath === 'string' &&
+          argv.outputPath &&
+          (!fs.existsSync(argv.outputPath) || !fs.lstatSync(argv.outputPath).isDirectory())
+        ) {
+          throw new Error('--output-path must be an existing directory when auditing multiple URLs');
+        }
+      }
+
       // Lighthouse doesn't need a URL if...
       //   - We're just listing the available options.
       //   - We're just printing the config.
@@ -418,6 +446,29 @@ function coerceOutputPath(value) {
   return value;
 }
 
+/**
+ * Reads newline-delimited URLs from a file, ignoring empty lines and `#` comments.
+ * @param {unknown=} value
+ * @return {Array<string>=}
+ */
+function coerceUrlFile(value) {
+  if (value === undefined) return;
+
+  if (
+    typeof value !== 'string' ||
+    !value ||
+    !fs.existsSync(value) ||
+    fs.lstatSync(value).isDirectory()
+  ) {
+    throw new Error(`--url-file (${value}) cannot be read`);
+  }
+
+  return fs.readFileSync(value, 'utf-8')
+    .split(/\r?\n/)
+    .map(line => line.trim())
+    .filter(line => line.length > 0 && !line.startsWith('#'));
+}
+
 /**
  * Verifies value is a string, then coerces type to LH.Locale for convenience. However, don't
  * allowlist specific locales. Why? So we can support the user who requests 'es-MX' (unsupported)

package/cli/run.d.ts

@@ -11,14 +11,14 @@ export function parseChromeFlags(flags?: string | Array<string>): Array<string>;
 /**
  * @param {LH.RunnerResult} runnerResult
  * @param {LH.CliFlags} flags
- * @return {Promise<void>}
+ * @return {Promise<string|undefined>}
  */
-export function saveResults(runnerResult: LH.RunnerResult, flags: LH.CliFlags): Promise<void>;
+export function saveResults(runnerResult: LH.RunnerResult, flags: LH.CliFlags): Promise<string | undefined>;
 /**
- * @param {string} url
+ * @param {string|string[]|undefined} urlOrUrls
  * @param {LH.CliFlags} flags
  * @param {LH.Config|undefined} config
- * @return {Promise<LH.RunnerResult|undefined>}
+ * @return {Promise<LH.RunnerResult|LH.RunnerResult[]|undefined>}
  */
-export function runLighthouse(url: string, flags: LH.CliFlags, config: LH.Config | undefined): Promise<LH.RunnerResult | undefined>;
+export function runLighthouse(urlOrUrls: string | string[] | undefined, flags: LH.CliFlags, config: LH.Config | undefined): Promise<LH.RunnerResult | LH.RunnerResult[] | undefined>;
 //# sourceMappingURL=run.d.ts.map

package/cli/run.js

@@ -6,6 +6,7 @@
 
 /* eslint-disable no-console */
 
+import fs from 'fs';
 import path from 'path';
 import os from 'os';
 
@@ -131,7 +132,7 @@ function printErrorAndExit(err) {
 /**
  * @param {LH.RunnerResult} runnerResult
  * @param {LH.CliFlags} flags
- * @return {Promise<void>}
+ * @return {Promise<string|undefined>}
  */
 async function saveResults(runnerResult, flags) {
   const cwd = process.cwd();
@@ -145,43 +146,55 @@ async function saveResults(runnerResult, flags) {
   if (!shouldSaveResults) return;
   const {lhr, artifacts, report} = runnerResult;
 
+  const isDirectoryOutput = Boolean(
+    flags.outputPath &&
+    fs.existsSync(flags.outputPath) &&
+    fs.lstatSync(flags.outputPath).isDirectory()
+  );
+
   // Use the output path as the prefix for all generated files.
   // If no output path is set, generate a file prefix using the URL and date.
-  const configuredPath = !flags.outputPath || flags.outputPath === 'stdout' ?
-      getLhrFilenamePrefix(lhr) :
-      flags.outputPath.replace(/\.\w{2,4}$/, '');
+  let configuredPath;
+  if (!flags.outputPath || flags.outputPath === 'stdout') {
+    configuredPath = getLhrFilenamePrefix(lhr);
+  } else if (isDirectoryOutput) {
+    configuredPath = path.join(flags.outputPath, getLhrFilenamePrefix(lhr));
+  } else {
+    configuredPath = flags.outputPath.replace(/\.\w{2,4}$/, '');
+  }
   const resolvedPath = path.resolve(cwd, configuredPath);
 
   if (flags.saveAssets) {
     await assetSaver.saveAssets(artifacts, lhr.audits, resolvedPath);
   }
 
+  /** @type {string|undefined} */
+  let htmlOutputPath;
   for (const outputType of flags.output) {
     const extension = outputType;
     const output = report[flags.output.indexOf(outputType)];
     let outputPath = `${resolvedPath}.report.${extension}`;
-    // If there was only a single output and the user specified an outputPath, force usage of it.
-    if (flags.outputPath && flags.output.length === 1) outputPath = flags.outputPath;
+    // If there was only a single output and the user specified a file outputPath, force usage of it.
+    if (flags.outputPath && !isDirectoryOutput && flags.output.length === 1) {
+      outputPath = flags.outputPath;
+    }
     await Printer.write(output, outputType, outputPath);
 
     if (outputType === Printer.OutputMode[Printer.OutputMode.html]) {
-      if (flags.view) {
-        open(outputPath, {wait: false});
-      } else {
-        // eslint-disable-next-line max-len
-        log.log('CLI', 'Protip: Run lighthouse with `--view` to immediately open the HTML report in your browser');
-      }
+      htmlOutputPath = outputPath;
     }
   }
+
+  return htmlOutputPath;
 }
 
 /**
- * @param {string} url
+ * @param {string|string[]|undefined} urlOrUrls
  * @param {LH.CliFlags} flags
  * @param {LH.Config|undefined} config
- * @return {Promise<LH.RunnerResult|undefined>}
+ * @return {Promise<LH.RunnerResult|LH.RunnerResult[]|undefined>}
  */
-async function runLighthouse(url, flags, config) {
+async function runLighthouse(urlOrUrls, flags, config) {
   /** @param {any} reason */
   function handleTheUnhandled(reason) {
     process.stderr.write(`Unhandled Rejection. Reason: ${reason}\n`);
@@ -193,48 +206,85 @@ async function runLighthouse(url, flags, config) {
   /** @type {ChromeLauncher.LaunchedChrome|undefined} */
   let launchedChrome;
 
-  try {
-    if (url && flags.auditMode && !flags.gatherMode) {
-      log.warn('CLI', 'URL parameter is ignored if -A flag is used without -G flag');
-    }
+  const urls = [urlOrUrls].flat();
+  if (urls.length === 0) urls.push(undefined);
+  const isBatch = urls.length > 1;
 
-    const shouldGather = flags.gatherMode || flags.gatherMode === flags.auditMode;
-    const shouldUseLocalChrome = UrlUtils.isLikeLocalhost(flags.hostname);
-    if (shouldGather && shouldUseLocalChrome) {
-      launchedChrome = await getDebuggableChrome(flags);
-      flags.port = launchedChrome.port;
-    }
+  const shouldGather = flags.gatherMode || flags.gatherMode === flags.auditMode;
+  const shouldUseLocalChrome = UrlUtils.isLikeLocalhost(flags.hostname);
+  const initialPort = flags.port;
+  flags.channel = 'cli';
 
-    flags.channel = 'cli';
+  /** @type {Array<LH.RunnerResult>} */
+  const results = [];
+  /** @type {Array<string>} */
+  const htmlReportPaths = [];
+  /** @type {Array<ExitError>} */
+  const errors = [];
 
-    const runnerResult = await lighthouse(url, flags, config);
+  try {
+    for (const url of urls) {
+      if (url && flags.auditMode && !flags.gatherMode) {
+        log.warn('CLI', 'URL parameter is ignored if -A flag is used without -G flag');
+      }
 
-    // If in gatherMode only, there will be no runnerResult.
-    if (runnerResult) {
-      await saveResults(runnerResult, flags);
+      try {
+        if (shouldGather && shouldUseLocalChrome && !launchedChrome) {
+          launchedChrome = await getDebuggableChrome({...flags, port: initialPort});
+          flags.port = launchedChrome.port;
+        }
+
+        const runnerResult = await lighthouse(url, flags, config);
+
+        // If in gatherMode only, there will be no runnerResult.
+        if (runnerResult) {
+          const htmlPath = await saveResults(runnerResult, flags);
+          if (htmlPath) htmlReportPaths.push(htmlPath);
+          results.push(runnerResult);
+        }
+
+        // Runtime errors indicate something was *very* wrong with the page result.
+        // We don't want the user to have to parse the report to figure it out, so we'll still exit
+        // with an error code after we saved the results.
+        if (runnerResult?.lhr.runtimeError) {
+          const {runtimeError} = runnerResult.lhr;
+          throw Object.assign(new Error(runtimeError.message), {
+            name: 'LighthouseError',
+            friendlyMessage: runtimeError.message,
+            code: runtimeError.code,
+            stack: undefined,
+          });
+        }
+      } catch (err) {
+        errors.push(err);
+        await launchedChrome?.kill();
+        launchedChrome = undefined;
+        if (!isBatch || flags.failFast) break;
+        const errMsg = err.friendlyMessage || err.message;
+        log.error('CLI', `Runtime error encountered for ${url}: ${errMsg}`);
+      }
     }
-
-    launchedChrome?.kill();
+  } finally {
+    await launchedChrome?.kill();
     process.removeListener('unhandledRejection', handleTheUnhandled);
+  }
 
-    // Runtime errors indicate something was *very* wrong with the page result.
-    // We don't want the user to have to parse the report to figure it out, so we'll still exit
-    // with an error code after we saved the results.
-    if (runnerResult?.lhr.runtimeError) {
-      const {runtimeError} = runnerResult.lhr;
-      return printErrorAndExit({
-        name: 'LighthouseError',
-        friendlyMessage: runtimeError.message,
-        code: runtimeError.code,
-        message: runtimeError.message,
-      });
+  if (htmlReportPaths.length > 0) {
+    if (flags.view) {
+      for (const htmlPath of htmlReportPaths) {
+        open(htmlPath, {wait: false});
+      }
+    } else {
+      // eslint-disable-next-line max-len
+      log.log('CLI', 'Protip: Run lighthouse with `--view` to immediately open the HTML report in your browser');
     }
+  }
 
-    return runnerResult;
-  } catch (err) {
-    launchedChrome?.kill();
-    return printErrorAndExit(err);
+  if (errors.length > 0) {
+    return printErrorAndExit(errors[0]);
   }
+
+  return isBatch ? results : results[0];
 }
 
 export {

package/core/audits/baseline.d.ts

@@ -656,6 +656,7 @@ declare class Baseline extends Audit {
             "word-break": string;
             "word-spacing": string;
             "writing-mode": string;
+            "x-frame-options": string;
             xhr: string;
             "xml-serializer": string;
             xpath: string;
@@ -668,6 +669,7 @@ declare class Baseline extends Audit {
             "align-content-block": string;
             alpha: string;
             "alt-text-generated-content": string;
+            "animations-css-animation-accessors": string;
             arianotify: string;
             "async-clipboard": string;
             "async-iterable-streams": string;
@@ -737,6 +739,7 @@ declare class Baseline extends Audit {
             "request-video-frame-callback": string;
             requestclose: string;
             "resizable-buffers": string;
+            "revert-rule": string;
             rex: string;
             ric: string;
             "round-mod-rem": string;

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/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

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

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * 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 LCPNetworkRecord {
+  /**
+   * @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' || record.resourceType === 'Media';
+    });
+
+    // 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 LCPNetworkRecordComputed = makeComputedArtifact(LCPNetworkRecord, ['devtoolsLog', 'trace']);
+export {LCPNetworkRecordComputed as LCPNetworkRecord};
+

package/core/computed/metrics/lcp-breakdown.js

@@ -9,7 +9,7 @@ import {LighthouseError} from '../../lib/lh-error.js';
 import {LargestContentfulPaint} from './largest-contentful-paint.js';
 import {ProcessedNavigation} from '../processed-navigation.js';
 import {TimeToFirstByte} from './time-to-first-byte.js';
-import {LCPImageRecord} from '../lcp-image-record.js';
+import {LCPNetworkRecord} from '../lcp-network-record.js';
 import {NavigationInsights} from '../navigation-insights.js';
 
 /**
@@ -32,7 +32,7 @@ class LCPBreakdown {
 
       const {timing: ttfb} = await TimeToFirstByte.request(data, context);
 
-      const lcpRecord = await LCPImageRecord.request(data, context);
+      const lcpRecord = await LCPNetworkRecord.request(data, context);
       if (!lcpRecord) {
         return {ttfb};
       }