lighthouse 9.6.4 → 9.6.7

package/lighthouse-core/audits/lcp-lazy-loaded.js

@@ -50,8 +50,9 @@ class LargestContentfulPaintLazyLoaded extends Audit {
    * @return {LH.Audit.Product}
    */
   static audit(artifacts) {
-    const lcpElement = artifacts.TraceElements
-      .find(element => element.traceEventType === 'largest-contentful-paint');
+    const lcpElement = artifacts.TraceElements.find(element => {
+      return element.traceEventType === 'largest-contentful-paint' && element.type === 'image';
+    });
     const lcpElementImage = lcpElement ? artifacts.ImageElements.find(elem => {
       return elem.node.devtoolsNodePath === lcpElement.node.devtoolsNodePath;
     }) : undefined;
@@ -59,7 +60,7 @@ class LargestContentfulPaintLazyLoaded extends Audit {
 
     if (!lcpElementImage ||
       !this.isImageInViewport(lcpElementImage, artifacts.ViewportDimensions)) {
-      return {score: 1, notApplicable: true};
+      return {score: null, notApplicable: true};
     }
 
     /** @type {LH.Audit.Details.Table['headings']} */

package/lighthouse-core/audits/network-requests.js

@@ -73,6 +73,7 @@ class NetworkRequests extends Audit {
         statusCode: record.statusCode,
         mimeType: record.mimeType,
         resourceType: record.resourceType,
+        priority: record.priority,
         isLinkPreload,
         experimentalFromMainFrame,
         lrEndTimeDeltaMs: endTimeDeltaMs, // Only exists on Lightrider runs
@@ -110,6 +111,14 @@ class NetworkRequests extends Audit {
 
     const tableDetails = Audit.makeTableDetails(headings, results);
 
+    // Include starting timestamp to allow syncing requests with navStart/metric timestamps.
+    const networkStartTimeTs = Number.isFinite(earliestStartTime) ?
+        earliestStartTime * 1_000_000 : undefined;
+    tableDetails.debugData = {
+      type: 'debugdata',
+      networkStartTimeTs,
+    };
+
     return {
       score: 1,
       details: tableDetails,

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

@@ -88,7 +88,7 @@ class PreloadLCPImageAudit extends Audit {
   /**
    * @param {LH.Artifacts.NetworkRequest} mainResource
    * @param {LH.Gatherer.Simulation.GraphNode} graph
-   * @param {LH.Artifacts.TraceElement|undefined} lcpElement
+   * @param {LH.Artifacts.TraceElement} lcpElement
    * @param {Array<LH.Artifacts.ImageElement>} imageElements
    * @return {{lcpNodeToPreload?: LH.Gatherer.Simulation.GraphNetworkNode, initiatorPath?: InitiatorPath}}
    */
@@ -121,14 +121,14 @@ class PreloadLCPImageAudit extends Audit {
 
   /**
    * Computes the estimated effect of preloading the LCP image.
-   * @param {LH.Artifacts.TraceElement|undefined} lcpElement
+   * @param {LH.Artifacts.TraceElement} lcpElement
    * @param {LH.Gatherer.Simulation.GraphNetworkNode|undefined} lcpNode
    * @param {LH.Gatherer.Simulation.GraphNode} graph
    * @param {LH.Gatherer.Simulation.Simulator} simulator
    * @return {{wastedMs: number, results: Array<{node: LH.Audit.Details.NodeValue, url: string, wastedMs: number}>}}
    */
   static computeWasteWithGraph(lcpElement, lcpNode, graph, simulator) {
-    if (!lcpElement || !lcpNode) {
+    if (!lcpNode) {
       return {
         wastedMs: 0,
         results: [],
@@ -222,6 +222,10 @@ class PreloadLCPImageAudit extends Audit {
     const lcpElement = artifacts.TraceElements
       .find(element => element.traceEventType === 'largest-contentful-paint');
 
+    if (!lcpElement || lcpElement.type !== 'image') {
+      return {score: null, notApplicable: true};
+    }
+
     const [mainResource, lanternLCP, simulator] = await Promise.all([
       MainResource.request({devtoolsLog, URL}, context),
       LanternLCP.request(metricData, context),

package/lighthouse-core/computed/main-thread-tasks.js

@@ -17,7 +17,8 @@ class MainThreadTasks {
    */
   static async compute_(trace, context) {
     const {mainThreadEvents, frames, timestamps} = await ProcessedTrace.request(trace, context);
-    return MainThreadTasks_.getMainThreadTasks(mainThreadEvents, frames, timestamps.traceEnd);
+    return MainThreadTasks_.getMainThreadTasks(mainThreadEvents, frames, timestamps.traceEnd,
+        timestamps.timeOrigin);
   }
 }
 

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

@@ -24,7 +24,7 @@ const ProcessedNavigation = require('../../computed/processed-navigation.js');
 const LighthouseError = require('../../lib/lh-error.js');
 const ComputedResponsivenes = require('../../computed/metrics/responsiveness.js');
 
-/** @typedef {{nodeId: number, score?: number, animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[]}} TraceElementData */
+/** @typedef {{nodeId: number, score?: number, animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[], type?: string}} TraceElementData */
 
 /**
  * @this {HTMLElement}
@@ -213,6 +213,34 @@ class TraceElements extends FRGatherer {
     return animatedElementData;
   }
 
+  /**
+   * @param {LH.Artifacts.ProcessedTrace} processedTrace
+   * @param {LH.Gatherer.FRTransitionalContext} context
+   * @return {Promise<{nodeId: number, type: string} | undefined>}
+   */
+  static async getLcpElement(processedTrace, context) {
+    let processedNavigation;
+    try {
+      processedNavigation = await ProcessedNavigation.request(processedTrace, context);
+    } catch (err) {
+      // If we were running in timespan mode and there was no paint, treat LCP as missing.
+      if (context.gatherMode === 'timespan' && err.code === LighthouseError.errors.NO_FCP.code) {
+        return;
+      }
+
+      throw err;
+    }
+
+    // These should exist, but trace types are loose.
+    const lcpData = processedNavigation.largestContentfulPaintEvt?.args?.data;
+    if (lcpData?.nodeId === undefined || !lcpData.type) return;
+
+    return {
+      nodeId: lcpData.nodeId,
+      type: lcpData.type,
+    };
+  }
+
   /**
    * @param {LH.Gatherer.FRTransitionalContext} context
    */
@@ -241,26 +269,16 @@ class TraceElements extends FRGatherer {
     }
 
     const processedTrace = await ProcessedTrace.request(trace, context);
-    const {largestContentfulPaintEvt} = await ProcessedNavigation
-      .request(processedTrace, context)
-      .catch(err => {
-        // If we were running in timespan mode and there was no paint, treat LCP as missing.
-        if (context.gatherMode === 'timespan' && err.code === LighthouseError.errors.NO_FCP.code) {
-          return {largestContentfulPaintEvt: undefined};
-        }
-
-        throw err;
-      });
     const {mainThreadEvents} = processedTrace;
 
-    const lcpNodeId = largestContentfulPaintEvt?.args?.data?.nodeId;
+    const lcpNodeData = await TraceElements.getLcpElement(processedTrace, context);
     const clsNodeData = TraceElements.getTopLayoutShiftElements(mainThreadEvents);
     const animatedElementData = await this.getAnimatedElements(mainThreadEvents);
     const responsivenessElementData = await TraceElements.getResponsivenessElement(trace, context);
 
     /** @type {Map<string, TraceElementData[]>} */
     const backendNodeDataMap = new Map([
-      ['largest-contentful-paint', lcpNodeId ? [{nodeId: lcpNodeId}] : []],
+      ['largest-contentful-paint', lcpNodeData ? [lcpNodeData] : []],
       ['layout-shift', clsNodeData],
       ['animation', animatedElementData],
       ['responsiveness', responsivenessElementData ? [responsivenessElementData] : []],
@@ -299,6 +317,7 @@ class TraceElements extends FRGatherer {
             score: backendNodeData[i].score,
             animations: backendNodeData[i].animations,
             nodeId: backendNodeId,
+            type: backendNodeData[i].type,
           });
         }
       }

package/lighthouse-core/lib/tracehouse/main-thread-tasks.js

@@ -561,9 +561,10 @@ class MainThreadTasks {
    * @param {LH.TraceEvent[]} mainThreadEvents
    * @param {Array<{id: string, url: string}>} frames
    * @param {number} traceEndTs
+   * @param {number} [traceStartTs] Optional time-0 ts for tasks. Tasks before this point will have negative start/end times. Defaults to the first task found.
    * @return {TaskNode[]}
    */
-  static getMainThreadTasks(mainThreadEvents, frames, traceEndTs) {
+  static getMainThreadTasks(mainThreadEvents, frames, traceEndTs, traceStartTs) {
     const timers = new Map();
     const xhrs = new Map();
     const frameURLsById = new Map();
@@ -587,8 +588,8 @@ class MainThreadTasks {
       priorTaskData.lastTaskURLs = task.attributableURLs;
     }
 
-    // Rebase all the times to be relative to start of trace in ms
-    const firstTs = (tasks[0] || {startTime: 0}).startTime;
+    // Rebase all the times to be relative to start of trace and covert to ms.
+    const firstTs = traceStartTs ?? tasks[0].startTime;
     for (const task of tasks) {
       task.startTime = (task.startTime - firstTs) / 1000;
       task.endTime = (task.endTime - firstTs) / 1000;

package/lighthouse-core/lib/url-shim.js

@@ -236,9 +236,9 @@ class URLShim extends URL {
     }
 
     if (url.protocol === 'data:') {
-      const match = url.pathname.match(/image\/(png|jpeg|svg\+xml|webp|gif|avif)(?=;)/);
+      const match = url.pathname.match(/^(image\/(png|jpeg|svg\+xml|webp|gif|avif))[;,]/);
       if (!match) return undefined;
-      return match[0];
+      return match[1];
     }
 
     const match = url.pathname.toLowerCase().match(/\.(png|jpeg|jpg|svg|webp|gif|avif)$/);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.6.4",
+  "version": "9.6.7",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -184,7 +184,7 @@
     "axe-core": "4.4.1",
     "chrome-launcher": "^0.15.0",
     "configstore": "^5.0.1",
-    "csp_evaluator": "1.1.0",
+    "csp_evaluator": "1.1.1",
     "cssstyle": "1.2.1",
     "enquirer": "^2.3.6",
     "http-link-header": "^0.8.0",

package/types/artifacts.d.ts

@@ -542,6 +542,7 @@ declare module Artifacts {
     node: NodeDetails;
     nodeId?: number;
     animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[];
+    type?: string;
   }
 
   interface ViewportDimensions {