lighthouse 9.5.0-dev.20230125 → 9.5.0-dev.20230127

package/core/audits/byte-efficiency/legacy-javascript.js

@@ -222,7 +222,6 @@ class LegacyJavascript extends ByteEfficiencyAudit {
       ['String.fromCodePoint', 'es6.string.from-code-point'],
       ['String.raw', 'es6.string.raw'],
       ['String.prototype.repeat', 'es6.string.repeat'],
-      ['Array.prototype.includes', 'es7.array.includes'],
       ['Object.entries', 'es7.object.entries'],
       ['Object.getOwnPropertyDescriptors', 'es7.object.get-own-property-descriptors'],
       ['Object.values', 'es7.object.values'],
@@ -266,7 +265,7 @@ class LegacyJavascript extends ByteEfficiencyAudit {
       },
       {
         name: '@babel/plugin-transform-regenerator',
-        expression: /regeneratorRuntime\.a?wrap/.source,
+        expression: /regeneratorRuntime\(?\)?\.a?wrap/.source,
         // Example of this transform: https://gist.github.com/connorjclark/af8bccfff377ac44efc104a79bc75da2
         // `regeneratorRuntime.awrap` is generated for every usage of `await`, and adds ~80 bytes each.
         estimateBytes: result => result.count * 80,

package/core/audits/preload-lcp-image.d.ts

@@ -27,14 +27,22 @@ declare class PreloadLCPImageAudit extends Audit {
     /**
      * @param {LH.Artifacts.NetworkRequest} mainResource
      * @param {LH.Gatherer.Simulation.GraphNode} graph
-     * @param {LH.Artifacts.TraceElement} lcpElement
-     * @param {Array<LH.Artifacts.ImageElement>} imageElements
+     * @param {string | undefined} lcpUrl
      * @return {{lcpNodeToPreload?: LH.Gatherer.Simulation.GraphNetworkNode, initiatorPath?: InitiatorPath}}
      */
-    static getLCPNodeToPreload(mainResource: LH.Artifacts.NetworkRequest, graph: LH.Gatherer.Simulation.GraphNode, lcpElement: LH.Artifacts.TraceElement, imageElements: Array<LH.Artifacts.ImageElement>): {
+    static getLCPNodeToPreload(mainResource: LH.Artifacts.NetworkRequest, graph: LH.Gatherer.Simulation.GraphNode, lcpUrl: string | undefined): {
         lcpNodeToPreload?: import("../lib/dependency-graph/network-node.js").NetworkNode | undefined;
         initiatorPath?: InitiatorPath | undefined;
     };
+    /**
+     * Match the LCP event with the paint event to get the URL 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.
+     * @param {LH.Trace} trace
+     * @param {LH.Artifacts.ProcessedNavigation} processedNavigation
+     * @return {string | undefined}
+     */
+    static getLcpUrl(trace: LH.Trace, processedNavigation: LH.Artifacts.ProcessedNavigation): string | undefined;
     /**
      * Computes the estimated effect of preloading the LCP image.
      * @param {LH.Artifacts.TraceElement} lcpElement
@@ -64,4 +72,5 @@ export namespace UIStrings {
 }
 import { Audit } from "./audit.js";
 import { NetworkRequest } from "../lib/network-request.js";
+import { ProcessedNavigation } from "../computed/processed-navigation.js";
 //# sourceMappingURL=preload-lcp-image.d.ts.map

package/core/audits/preload-lcp-image.js

@@ -11,6 +11,7 @@ import {MainResource} from '../computed/main-resource.js';
 import {LanternLargestContentfulPaint} from '../computed/metrics/lantern-largest-contentful-paint.js';
 import {LoadSimulator} from '../computed/load-simulator.js';
 import {ByteEfficiencyAudit} from './byte-efficiency/byte-efficiency-audit.js';
+import {ProcessedNavigation} from '../computed/processed-navigation.js';
 
 const UIStrings = {
   /** Title of a lighthouse audit that tells a user to preload an image in order to improve their LCP time. */
@@ -36,8 +37,7 @@ class PreloadLCPImageAudit extends Audit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext', 'URL', 'TraceElements',
-        'ImageElements'],
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext', 'URL', 'TraceElements'],
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
     };
   }
@@ -87,17 +87,11 @@ class PreloadLCPImageAudit extends Audit {
   /**
    * @param {LH.Artifacts.NetworkRequest} mainResource
    * @param {LH.Gatherer.Simulation.GraphNode} graph
-   * @param {LH.Artifacts.TraceElement} lcpElement
-   * @param {Array<LH.Artifacts.ImageElement>} imageElements
+   * @param {string | undefined} lcpUrl
    * @return {{lcpNodeToPreload?: LH.Gatherer.Simulation.GraphNetworkNode, initiatorPath?: InitiatorPath}}
    */
-  static getLCPNodeToPreload(mainResource, graph, lcpElement, imageElements) {
-    const lcpImageElement = imageElements.find(elem => {
-      return elem.node.devtoolsNodePath === lcpElement.node.devtoolsNodePath;
-    });
-
-    if (!lcpImageElement) return {};
-    const lcpUrl = lcpImageElement.src;
+  static getLCPNodeToPreload(mainResource, graph, lcpUrl) {
+    if (!lcpUrl) return {};
     const {lcpNode, path} = PreloadLCPImageAudit.findLCPNode(graph, lcpUrl);
     if (!lcpNode || !path) return {};
 
@@ -116,6 +110,29 @@ class PreloadLCPImageAudit extends Audit {
     };
   }
 
+  /**
+   * Match the LCP event with the paint event to get the URL 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.
+   * @param {LH.Trace} trace
+   * @param {LH.Artifacts.ProcessedNavigation} processedNavigation
+   * @return {string | undefined}
+   */
+  static getLcpUrl(trace, processedNavigation) {
+    const lcpEvent = processedNavigation.largestContentfulPaintAllFramesEvt;
+    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];
+
+    return lcpImagePaintEvent?.args.data?.imageUrl;
+  }
+
   /**
    * Computes the estimated effect of preloading the LCP image.
    * @param {LH.Artifacts.TraceElement} lcpElement
@@ -223,15 +240,17 @@ class PreloadLCPImageAudit extends Audit {
       return {score: null, notApplicable: true};
     }
 
-    const [mainResource, lanternLCP, simulator] = await Promise.all([
+    const [processedNavigation, mainResource, lanternLCP, simulator] = await Promise.all([
+      ProcessedNavigation.request(trace, context),
       MainResource.request({devtoolsLog, URL}, context),
       LanternLargestContentfulPaint.request(metricData, context),
       LoadSimulator.request({devtoolsLog, settings: context.settings}, context),
     ]);
 
+    const lcpUrl = PreloadLCPImageAudit.getLcpUrl(trace, processedNavigation);
     const graph = lanternLCP.pessimisticGraph;
     // eslint-disable-next-line max-len
-    const {lcpNodeToPreload, initiatorPath} = PreloadLCPImageAudit.getLCPNodeToPreload(mainResource, graph, lcpElement, artifacts.ImageElements);
+    const {lcpNodeToPreload, initiatorPath} = PreloadLCPImageAudit.getLCPNodeToPreload(mainResource, graph, lcpUrl);
 
     const {results, wastedMs} =
       PreloadLCPImageAudit.computeWasteWithGraph(lcpElement, lcpNodeToPreload, graph, simulator);

package/core/config/constants.d.ts

@@ -80,7 +80,7 @@ declare const MOTOG4_EMULATION_METRICS: Required<LH.SharedFlagsSettings['screenE
  * @type {Required<LH.SharedFlagsSettings['screenEmulation']>}
  */
 declare const DESKTOP_EMULATION_METRICS: Required<LH.SharedFlagsSettings['screenEmulation']>;
-declare const MOTOG4_USERAGENT: "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4695.0 Mobile Safari/537.36 Chrome-Lighthouse";
-declare const DESKTOP_USERAGENT: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4695.0 Safari/537.36 Chrome-Lighthouse";
+declare const MOTOG4_USERAGENT: "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Mobile Safari/537.36";
+declare const DESKTOP_USERAGENT: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36";
 export {};
 //# sourceMappingURL=constants.d.ts.map

package/core/config/constants.js

@@ -81,8 +81,8 @@ const screenEmulationMetrics = {
 };
 
 
-const MOTOG4_USERAGENT = 'Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4695.0 Mobile Safari/537.36 Chrome-Lighthouse'; // eslint-disable-line max-len
-const DESKTOP_USERAGENT = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4695.0 Safari/537.36 Chrome-Lighthouse'; // eslint-disable-line max-len
+const MOTOG4_USERAGENT = 'Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Mobile Safari/537.36'; // eslint-disable-line max-len
+const DESKTOP_USERAGENT = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36'; // eslint-disable-line max-len
 
 const userAgents = {
   mobile: MOTOG4_USERAGENT,

package/core/config/metrics-to-audits.js

@@ -26,6 +26,7 @@ const lcpRelevantAudits = [
   'unused-javascript',
   'efficient-animated-content',
   'total-byte-weight',
+  'lcp-lazy-loaded',
 ];
 
 const tbtRelevantAudits = [

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

@@ -231,7 +231,7 @@ class TraceElements extends FRGatherer {
     }
 
     // These should exist, but trace types are loose.
-    const lcpData = processedNavigation.largestContentfulPaintEvt?.args?.data;
+    const lcpData = processedNavigation.largestContentfulPaintAllFramesEvt?.args?.data;
     if (lcpData?.nodeId === undefined || !lcpData.type) return;
 
     return {