lighthouse 13.5.0-dev.20261009 → 13.5.0-dev.20261012

package/cli/cli-flags.js

@@ -20,7 +20,6 @@ import {isObjectOfUnknownValues} from '../shared/type-verifiers.js';
  */
 function getYargsParser(manualArgv) {
   const y = manualArgv ?
-    // @ts-expect-error - undocumented, but yargs() supports parsing a single `string`.
     yargs(manualArgv) :
     yargs(yargsHelpers.hideBin(process.argv));
 

package/cli/sentry-prompt.js

@@ -60,16 +60,15 @@ function prompt() {
 function askPermission() {
   return Promise.resolve().then(_ => {
     const configstore = new Configstore('lighthouse');
-    let isErrorReportingEnabled = configstore.get('isErrorReportingEnabled');
+    const isErrorReportingEnabled = configstore.get('isErrorReportingEnabled');
     if (typeof isErrorReportingEnabled === 'boolean') {
       return Promise.resolve(isErrorReportingEnabled);
     }
 
     return prompt()
       .then(response => {
-        isErrorReportingEnabled = response;
-        configstore.set('isErrorReportingEnabled', isErrorReportingEnabled);
-        return isErrorReportingEnabled;
+        configstore.set('isErrorReportingEnabled', response);
+        return response;
       });
   // Error accessing configstore; default to false.
   }).catch(_ => false);

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