lighthouse 13.5.0-dev.20261008 → 13.5.0-dev.20261012

package/core/computed/page-dependency-graph.js

@@ -36,10 +36,6 @@ class PageDependencyGraph {
       return graph;
     }
 
-    // TODO: currently the trace version has no requests that failed, or requests that have "Preflight".
-    //       so the following gets the devtools log version _closer_ to the exact same results as the trace.
-    // const lanternRequests = networkRecords.map(NetworkRequest.asLanternNetworkRequest).filter(r => !r.failed && r.resourceType !== 'Preflight');
-
     const lanternRequests = networkRecords.map(NetworkRequest.asLanternNetworkRequest);
     return Lantern.Graph.PageDependencyGraph.createGraph(mainThreadEvents, lanternRequests, URL);
   }

package/core/computed/speedline.js

@@ -20,13 +20,10 @@ class Speedline {
     // speedline() may throw without a promise, so we resolve immediately
     // to get in a promise chain.
     return ProcessedTrace.request(trace, context).then(processedTrace => {
-      // Use a shallow copy of traceEvents so speedline can sort as it pleases.
-      // See https://github.com/GoogleChrome/lighthouse/issues/2333
-      const traceEvents = trace.traceEvents.slice();
       // Force use of timeOrigin as reference point for speedline
       // See https://github.com/GoogleChrome/lighthouse/issues/2095
       const timeOrigin = processedTrace.timestamps.timeOrigin;
-      return speedline(traceEvents, {
+      return speedline(trace.traceEvents, {
         timeOrigin,
         fastMode: true,
         include: 'speedIndex',
@@ -46,7 +43,25 @@ class Speedline {
         throw new LighthouseError(LighthouseError.errors.SPEEDINDEX_OF_ZERO);
       }
 
-      return speedline;
+      // Evict the ~1 MB per-frame decoded RGBA buffers and histograms cached inside
+      // speedline-core's frame closures, keeping only the getters Lighthouse uses.
+      // TODO(https://github.com/paulirish/speedline/issues/122): Upstream to speedline-core
+      // so `frame()` in `lib/frame.js` does not cache `_parsedImage` on frame closures.
+      const frames = speedline.frames.map(frame => {
+        const imgBuff = frame.getImage();
+        const timeStamp = frame.getTimeStamp();
+        const isProgressInterpolated = frame.isProgressInterpolated();
+        return {
+          getImage: () => imgBuff,
+          getTimeStamp: () => timeStamp,
+          isProgressInterpolated: () => isProgressInterpolated,
+        };
+      });
+
+      return {
+        ...speedline,
+        frames,
+      };
     });
   }
 }

package/core/gather/gatherers/agentic/ard.d.ts

@@ -1,26 +1,81 @@
 export default AgentResourceDiscovery;
+export type ArdLinks = {
+    ard: string | null;
+    legacy: string | null;
+};
+export type DiscoverySignals = LH.Artifacts["AgentResourceDiscovery"]["discoverySignals"];
+export type FetchResult = {
+    status: number | null;
+    content: string | null;
+    headers: Record<string, string> | null;
+    errorMessage?: string | undefined;
+};
+/**
+ * A location to try when resolving the manifest. `advertised` locations are ones the site
+ * points at (robots.txt, link tags, Link headers); the well-known paths are probed by
+ * Lighthouse, so a failure there is not the site's fault and is not reported.
+ */
+export type ManifestCandidate = {
+    source: LH.Artifacts.ArdDiscoverySource;
+    url: string | null;
+    advertised: boolean;
+};
 declare class AgentResourceDiscovery extends BaseGatherer {
     /**
+     * Returns the absolute URL from the first `Agentmap:` directive in robots.txt, if any.
      * @param {LH.Artifacts['RobotsTxt']|null|undefined} robotsTxt
      * @param {string} finalDisplayedUrl
      * @return {string|null}
      */
     static getRobotsTxtAgentmap(robotsTxt: LH.Artifacts["RobotsTxt"] | null | undefined, finalDisplayedUrl: string): string | null;
     /**
+     * Finds `<link rel="ard">` and `<link rel="ai-catalog">` in the page.
      * @param {LH.Gatherer.Context} context
      * @param {string} finalDisplayedUrl
-     * @return {Promise<string|null>}
+     * @return {Promise<ArdLinks>}
      */
-    static getHtmlLinkFromDom(context: LH.Gatherer.Context, finalDisplayedUrl: string): Promise<string | null>;
+    static getHtmlLinksFromDom(context: LH.Gatherer.Context, finalDisplayedUrl: string): Promise<ArdLinks>;
     /**
+     * Finds `rel="ard"` and `rel="ai-catalog"` in the main document's HTTP `Link` header.
      * @param {LH.Gatherer.Context} context
      * @param {string} finalDisplayedUrl
-     * @return {Promise<string|null>}
+     * @return {Promise<ArdLinks>}
      */
-    static getHttpHeaderLink(context: LH.Gatherer.Context, finalDisplayedUrl: string): Promise<string | null>;
+    static getHttpHeaderLinks(context: LH.Gatherer.Context, finalDisplayedUrl: string): Promise<ArdLinks>;
+    /**
+     * Fetches a candidate manifest URL. Never throws; network errors are returned as a
+     * null status with an `errorMessage`.
+     * @param {LH.Gatherer.Context} context
+     * @param {string} url
+     * @return {Promise<FetchResult>}
+     */
+    static fetchManifest(context: LH.Gatherer.Context, url: string): Promise<FetchResult>;
+    /**
+     * Tries each candidate in order and returns the first that loads. Advertised candidates
+     * that fail are recorded in `failedSources` and skipped. If nothing loads, the result
+     * describes the first advertised location that failed, or else the `/.well-known/ard.json`
+     * path consumers are required to fetch.
+     * @param {LH.Gatherer.Context} context
+     * @param {ManifestCandidate[]} candidates
+     * @return {Promise<{
+     *   discoverySource: LH.Artifacts.ArdDiscoverySource,
+     *   catalogUrl: string,
+     *   fetchResult: FetchResult,
+     *   failedSources: LH.Artifacts['AgentResourceDiscovery']['failedSources'],
+     * }>}
+     */
+    static resolveManifest(context: LH.Gatherer.Context, candidates: ManifestCandidate[]): Promise<{
+        discoverySource: LH.Artifacts.ArdDiscoverySource;
+        catalogUrl: string;
+        fetchResult: FetchResult;
+        failedSources: LH.Artifacts["AgentResourceDiscovery"]["failedSources"];
+    }>;
     /** @type {LH.Gatherer.GathererMeta<'RobotsTxt'>} */
     meta: LH.Gatherer.GathererMeta<"RobotsTxt">;
     /**
+     * Resolves the manifest following ARD §5.1: explicit ARD signals first, then the
+     * `/.well-known/ard.json` path consumers MUST fetch, and only then the predecessor
+     * `ai-catalog` relation and well-known path, which consumers MAY consult.
      * @param {LH.Gatherer.Context<'RobotsTxt'>} context
      * @return {Promise<LH.Artifacts['AgentResourceDiscovery']>}
      */

package/core/gather/gatherers/agentic/ard.js

@@ -4,17 +4,112 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+/**
+ * @fileoverview Gatherer that discovers and fetches a site's Agentic Resource Discovery (ARD)
+ * manifest. It follows the discovery mechanisms in ARD §5.1 and also consults the predecessor
+ * `ai-catalog` names so that sites that have not yet migrated are still audited.
+ * @see https://agenticresourcediscovery.org/spec/
+ */
+
 import log from 'lighthouse-logger';
 import LinkHeader from 'http-link-header';
 
 import BaseGatherer from '../../base-gatherer.js';
 import RobotsTxt from '../seo/robots-txt.js';
-import {pageFunctions} from '../../../lib/page-functions.js';
-function getAiCatalogLinkInDOM() {
-  const link = document.querySelector('link[rel~="ai-catalog" i]');
-  return link instanceof HTMLLinkElement ? link.href : null;
+
+/**
+ * Link relations for ARD entry sources. `ai-catalog` is the predecessor relation, which
+ * consumers MAY consult but are not required to (ARD §5.1).
+ */
+const REL_ARD = 'ard';
+const REL_LEGACY = 'ai-catalog';
+
+const WELL_KNOWN_PATH = '/.well-known/ard.json';
+const LEGACY_WELL_KNOWN_PATH = '/.well-known/ai-catalog.json';
+
+const HTTP_OK = 200;
+
+/** @typedef {{ard: string|null, legacy: string|null}} ArdLinks */
+
+/** @typedef {LH.Artifacts['AgentResourceDiscovery']['discoverySignals']} DiscoverySignals */
+
+/**
+ * @typedef FetchResult
+ * @property {number|null} status
+ * @property {string|null} content
+ * @property {Record<string, string>|null} headers
+ * @property {string} [errorMessage]
+ */
+
+/**
+ * A location to try when resolving the manifest. `advertised` locations are ones the site
+ * points at (robots.txt, link tags, Link headers); the well-known paths are probed by
+ * Lighthouse, so a failure there is not the site's fault and is not reported.
+ * @typedef ManifestCandidate
+ * @property {LH.Artifacts.ArdDiscoverySource} source
+ * @property {string|null} url
+ * @property {boolean} advertised
+ */
+
+/** @type {ReadonlyArray<LH.Artifacts.ArdDiscoverySource>} */
+const SOURCE_PRIORITY = [
+  'robotsTxtAgentmap',
+  'htmlLink',
+  'httpHeaderLink',
+  'wellKnown',
+  'legacyHtmlLink',
+  'legacyHttpHeaderLink',
+  'legacyWellKnown',
+];
+
+/** @type {Set<LH.Artifacts.ArdDiscoverySource>} */
+const PROBED_SOURCES = new Set(['wellKnown', 'legacyWellKnown']);
+
+/**
+ * @param {DiscoverySignals} discoverySignals
+ * @return {ManifestCandidate[]}
+ */
+function getManifestCandidates(discoverySignals) {
+  return SOURCE_PRIORITY.map(source => ({
+    source,
+    url: discoverySignals[source],
+    advertised: !PROBED_SOURCES.has(source),
+  }));
+}
+
+/**
+ * Resolves `href` against `baseUrl`, returning null for empty or unparseable values.
+ * @param {string|null|undefined} href
+ * @param {string} baseUrl
+ * @return {string|null}
+ */
+function resolveUrl(href, baseUrl) {
+  if (!href) return null;
+  try {
+    return new URL(href, baseUrl).href;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Runs in the page. Returns the `href` of the first `<link>` for each relation, or null.
+ * @param {string} relArd
+ * @param {string} relLegacy
+ * @return {ArdLinks}
+ */
+function getArdLinksInDOM(relArd, relLegacy) {
+  /** @param {string} rel */
+  const getHref = rel => {
+    const link = document.querySelector(`link[rel~="${rel}" i]`);
+    return link instanceof HTMLLinkElement ? link.href : null;
+  };
+  return {ard: getHref(relArd), legacy: getHref(relLegacy)};
 }
 
+/** @type {ArdLinks} */
+const NO_LINKS = {ard: null, legacy: null};
+
 class AgentResourceDiscovery extends BaseGatherer {
   /** @type {LH.Gatherer.GathererMeta<'RobotsTxt'>} */
   meta = {
@@ -23,6 +118,7 @@ class AgentResourceDiscovery extends BaseGatherer {
   };
 
   /**
+   * Returns the absolute URL from the first `Agentmap:` directive in robots.txt, if any.
    * @param {LH.Artifacts['RobotsTxt']|null|undefined} robotsTxt
    * @param {string} finalDisplayedUrl
    * @return {string|null}
@@ -31,93 +127,159 @@ class AgentResourceDiscovery extends BaseGatherer {
     if (!robotsTxt?.content) return null;
     const match = robotsTxt.content.match(/^\s*Agentmap:\s*(\S+)/im);
     if (!match) return null;
-    try {
-      return new URL(match[1], finalDisplayedUrl).href;
-    } catch {
-      return null;
-    }
+    return resolveUrl(match[1], finalDisplayedUrl);
   }
 
   /**
+   * Finds `<link rel="ard">` and `<link rel="ai-catalog">` in the page.
    * @param {LH.Gatherer.Context} context
    * @param {string} finalDisplayedUrl
-   * @return {Promise<string|null>}
+   * @return {Promise<ArdLinks>}
    */
-  static async getHtmlLinkFromDom(context, finalDisplayedUrl) {
+  static async getHtmlLinksFromDom(context, finalDisplayedUrl) {
     try {
-      const href = await context.driver.executionContext.evaluate(getAiCatalogLinkInDOM, {
-        args: [],
+      const links = await context.driver.executionContext.evaluate(getArdLinksInDOM, {
+        args: [REL_ARD, REL_LEGACY],
         useIsolation: true,
-        deps: [pageFunctions.getNodeDetails],
       });
-      if (!href) return null;
-      return new URL(href, finalDisplayedUrl).href;
-    } catch {
-      return null;
+      return {
+        ard: resolveUrl(links?.ard, finalDisplayedUrl),
+        legacy: resolveUrl(links?.legacy, finalDisplayedUrl),
+      };
+    } catch (err) {
+      log.verbose('AgentResourceDiscovery', `Could not read link tags: ${err.message}`);
+      return NO_LINKS;
     }
   }
 
   /**
+   * Finds `rel="ard"` and `rel="ai-catalog"` in the main document's HTTP `Link` header.
    * @param {LH.Gatherer.Context} context
    * @param {string} finalDisplayedUrl
-   * @return {Promise<string|null>}
+   * @return {Promise<ArdLinks>}
    */
-  static async getHttpHeaderLink(context, finalDisplayedUrl) {
-    // Only check in navigation mode
-    if (context.gatherMode !== 'navigation') return null;
+  static async getHttpHeaderLinks(context, finalDisplayedUrl) {
+    if (context.gatherMode !== 'navigation') return NO_LINKS;
 
     try {
       const mainResourceResponse = await context.driver.fetcher.fetchResource(finalDisplayedUrl);
-      const linkHeader = mainResourceResponse.headers?.['link'];
-      if (!linkHeader) return null;
+      const linkHeader = mainResourceResponse.headers?.link;
+      if (!linkHeader) return NO_LINKS;
+
+      const parsed = LinkHeader.parse(linkHeader.replace(/\n/g, ','));
+      /** @param {string} rel */
+      const getUri = rel =>
+        resolveUrl(parsed.refs.find(ref => ref.rel?.toLowerCase() === rel)?.uri, finalDisplayedUrl);
+      return {ard: getUri(REL_ARD), legacy: getUri(REL_LEGACY)};
+    } catch (err) {
+      log.verbose('AgentResourceDiscovery', `Could not read Link header: ${err.message}`);
+      return NO_LINKS;
+    }
+  }
+
+  /**
+   * Fetches a candidate manifest URL. Never throws; network errors are returned as a
+   * null status with an `errorMessage`.
+   * @param {LH.Gatherer.Context} context
+   * @param {string} url
+   * @return {Promise<FetchResult>}
+   */
+  static async fetchManifest(context, url) {
+    try {
+      const {status, content, headers} = await context.driver.fetcher.fetchResource(url);
+      return {status, content, headers: headers || null};
+    } catch (err) {
+      log.error('AgentResourceDiscovery', err);
+      return {status: null, content: null, headers: null, errorMessage: err.message};
+    }
+  }
 
-      const parsed = LinkHeader.parse(linkHeader);
-      const aiCatalogRef = parsed.get('rel', 'ai-catalog')[0];
-      if (!aiCatalogRef?.uri) return null;
+  /**
+   * Tries each candidate in order and returns the first that loads. Advertised candidates
+   * that fail are recorded in `failedSources` and skipped. If nothing loads, the result
+   * describes the first advertised location that failed, or else the `/.well-known/ard.json`
+   * path consumers are required to fetch.
+   * @param {LH.Gatherer.Context} context
+   * @param {ManifestCandidate[]} candidates
+   * @return {Promise<{
+   *   discoverySource: LH.Artifacts.ArdDiscoverySource,
+   *   catalogUrl: string,
+   *   fetchResult: FetchResult,
+   *   failedSources: LH.Artifacts['AgentResourceDiscovery']['failedSources'],
+   * }>}
+   */
+  static async resolveManifest(context, candidates) {
+    /** @type {Array<{source: LH.Artifacts.ArdDiscoverySource, url: string, advertised: boolean, fetchResult: FetchResult}>} */
+    const attempts = [];
+    const failedSources = () => attempts
+      .filter(attempt => attempt.advertised)
+      .map(({source, url, fetchResult}) => ({
+        source,
+        url,
+        status: fetchResult.status,
+        errorMessage: fetchResult.errorMessage,
+      }));
+
+    for (const {source, url, advertised} of candidates) {
+      if (!url || attempts.some(attempt => attempt.url === url)) continue;
 
-      return new URL(aiCatalogRef.uri, finalDisplayedUrl).href;
-    } catch {
-      return null;
+      const fetchResult = await AgentResourceDiscovery.fetchManifest(context, url);
+      if (fetchResult.status === HTTP_OK && fetchResult.content) {
+        return {discoverySource: source, catalogUrl: url, fetchResult,
+          failedSources: failedSources()};
+      }
+      attempts.push({source, url, advertised, fetchResult});
     }
+
+    const fallback = attempts.find(attempt => attempt.advertised) ||
+      attempts.find(attempt => attempt.source === 'wellKnown');
+    if (!fallback) throw new Error('ARD discovery attempted no candidates');
+
+    return {
+      discoverySource: fallback.source,
+      catalogUrl: fallback.url,
+      fetchResult: fallback.fetchResult,
+      failedSources: failedSources(),
+    };
   }
 
   /**
+   * Resolves the manifest following ARD §5.1: explicit ARD signals first, then the
+   * `/.well-known/ard.json` path consumers MUST fetch, and only then the predecessor
+   * `ai-catalog` relation and well-known path, which consumers MAY consult.
    * @param {LH.Gatherer.Context<'RobotsTxt'>} context
    * @return {Promise<LH.Artifacts['AgentResourceDiscovery']>}
    */
   async getArtifact(context) {
     const {finalDisplayedUrl} = context.baseArtifacts.URL;
-    const robotsTxt = context.dependencies.RobotsTxt;
     const robotsTxtAgentmap = AgentResourceDiscovery.getRobotsTxtAgentmap(
-      robotsTxt, finalDisplayedUrl);
-    const [htmlLink, httpHeaderLink] = await Promise.all([
-      AgentResourceDiscovery.getHtmlLinkFromDom(context, finalDisplayedUrl),
-      AgentResourceDiscovery.getHttpHeaderLink(context, finalDisplayedUrl),
+      context.dependencies.RobotsTxt, finalDisplayedUrl);
+    const [htmlLinks, httpHeaderLinks] = await Promise.all([
+      AgentResourceDiscovery.getHtmlLinksFromDom(context, finalDisplayedUrl),
+      AgentResourceDiscovery.getHttpHeaderLinks(context, finalDisplayedUrl),
     ]);
-    const wellKnown = new URL('/.well-known/ai-catalog.json', finalDisplayedUrl).href;
-    const catalogUrl = robotsTxtAgentmap || htmlLink || httpHeaderLink || wellKnown;
-
-    /** @type {string|undefined} */
-    let errorMessage;
-    const fetchResult = await context.driver.fetcher.fetchResource(catalogUrl)
-      .catch(err => {
-        log.error('AgentResourceDiscovery', err);
-        errorMessage = err.message;
-        return {status: null, content: null, headers: null};
-      });
+
+    /** @type {DiscoverySignals} */
+    const discoverySignals = {
+      robotsTxtAgentmap,
+      htmlLink: htmlLinks.ard,
+      httpHeaderLink: httpHeaderLinks.ard,
+      legacyHtmlLink: htmlLinks.legacy,
+      legacyHttpHeaderLink: httpHeaderLinks.legacy,
+      wellKnown: new URL(WELL_KNOWN_PATH, finalDisplayedUrl).href,
+      legacyWellKnown: new URL(LEGACY_WELL_KNOWN_PATH, finalDisplayedUrl).href,
+    };
+
+    const candidates = getManifestCandidates(discoverySignals);
+    const {discoverySource, catalogUrl, fetchResult, failedSources} =
+      await AgentResourceDiscovery.resolveManifest(context, candidates);
 
     return {
-      status: fetchResult.status,
-      content: fetchResult.content,
-      headers: fetchResult.headers || null,
+      ...fetchResult,
       catalogUrl,
-      discoverySignals: {
-        robotsTxtAgentmap,
-        htmlLink,
-        httpHeaderLink,
-        wellKnown,
-      },
-      errorMessage,
+      discoverySource,
+      discoverySignals,
+      failedSources,
     };
   }
 }

package/core/gather/gatherers/image-elements.d.ts

@@ -1,5 +1,12 @@
 export default ImageElements;
 declare class ImageElements extends BaseGatherer {
+    /**
+     * 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;
     /** @type {Map<string, {naturalWidth: number, naturalHeight: number}>} */
     _naturalSizeCache: Map<string, {
         naturalWidth: number;

package/core/gather/gatherers/image-elements.js

@@ -238,6 +238,21 @@ function getEffectiveSizingRule({attributesStyle, inlineStyle, matchedCSSRules},
   return null;
 }
 
+/**
+ * @param {LH.Artifacts.ImageElement} element
+ * @return {boolean}
+ */
+function needsSourceRules(element) {
+  if (element.isInShadowDOM || element.isCss) return false;
+  if (
+    ImageElements.doesHtmlAttrProvideExplicitSize(element.attributeWidth) &&
+    ImageElements.doesHtmlAttrProvideExplicitSize(element.attributeHeight)
+  ) {
+    return false;
+  }
+  return true;
+}
+
 /**
  * @param {LH.Artifacts.ImageElement} element
  * @return {number}
@@ -255,6 +270,28 @@ class ImageElements extends BaseGatherer {
     supportedModes: ['snapshot', 'timespan', 'navigation'],
   };
 
+  /**
+   * 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;
+  }
+
   constructor() {
     super();
     /** @type {Map<string, {naturalWidth: number, naturalHeight: number}>} */
@@ -322,24 +359,32 @@ class ImageElements extends BaseGatherer {
   async collectExtraDetails(driver, elements) {
     // Don't do more than 5s of this expensive devtools protocol work. See #11289
     let reachedGatheringBudget = false;
-    setTimeout(_ => (reachedGatheringBudget = true), 5000);
+    const timeoutId = setTimeout(_ => (reachedGatheringBudget = true), 5000);
     let skippedCount = 0;
 
-    for (const element of elements) {
-      if (reachedGatheringBudget) {
-        skippedCount++;
-        continue;
-      }
-
-      // Need source rules to determine if sized via CSS (for unsized-images).
-      if (!element.isInShadowDOM && !element.isCss) {
-        await this.fetchSourceRules(driver.defaultSession, element.node.devtoolsNodePath, element);
-      }
-      // Images within `picture` behave strangely and natural size information isn't accurate,
-      // CSS images have no natural size information at all. Try to get the actual size if we can.
-      if (element.isPicture || element.isCss || element.srcset) {
-        await this.fetchElementWithSizeInformation(driver, element);
+    try {
+      for (const element of elements) {
+        if (reachedGatheringBudget) {
+          skippedCount++;
+          continue;
+        }
+
+        // Need source rules to determine if sized via CSS (for unsized-images).
+        if (needsSourceRules(element)) {
+          await this.fetchSourceRules(
+            driver.defaultSession,
+            element.node.devtoolsNodePath,
+            element
+          );
+        }
+        // Images within `picture` behave strangely and natural size information isn't accurate,
+        // CSS images have no natural size information at all. Try to get the actual size if we can.
+        if (element.isPicture || element.isCss || element.srcset) {
+          await this.fetchElementWithSizeInformation(driver, element);
+        }
       }
+    } finally {
+      clearTimeout(timeoutId);
     }
 
     if (reachedGatheringBudget) {
@@ -369,11 +414,14 @@ class ImageElements extends BaseGatherer {
       ],
     });
 
-    await Promise.all([
-      session.sendCommand('DOM.enable'),
-      session.sendCommand('CSS.enable'),
-      session.sendCommand('DOM.getDocument', {depth: -1, pierce: true}),
-    ]);
+    const shouldFetchSourceRules = elements.some(needsSourceRules);
+    if (shouldFetchSourceRules) {
+      await Promise.all([
+        session.sendCommand('DOM.enable'),
+        session.sendCommand('CSS.enable'),
+        session.sendCommand('DOM.getDocument', {depth: -1, pierce: true}),
+      ]);
+    }
 
     // Spend our extra details budget on highest impact images.
     // Our best approximation of impact without network records is to use pixel area.
@@ -381,11 +429,14 @@ class ImageElements extends BaseGatherer {
 
     await this.collectExtraDetails(context.driver, elements);
 
-    await Promise.all([
-      session.sendCommand('DOM.disable'),
-      session.sendCommand('CSS.disable'),
-    ]);
+    if (shouldFetchSourceRules) {
+      await Promise.all([
+        session.sendCommand('DOM.disable'),
+        session.sendCommand('CSS.disable'),
+      ]);
+    }
 
+    this._naturalSizeCache.clear();
     return elements;
   }
 }