lighthouse 9.6.6 → 9.6.8

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

@@ -32,8 +32,8 @@ class NetworkRequests extends Audit {
   static async audit(artifacts, context) {
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     const records = await NetworkRecords.request(devtoolsLog, context);
-    const earliestStartTime = records.reduce(
-      (min, record) => Math.min(min, record.startTime),
+    const earliestMainThreadStartTime = records.reduce(
+      (min, record) => Math.min(min, record.rendererStartTime),
       Infinity
     );
 
@@ -48,8 +48,8 @@ class NetworkRequests extends Audit {
     }
 
     /** @param {number} time */
-    const timeToMs = time => time < earliestStartTime || !Number.isFinite(time) ?
-      undefined : (time - earliestStartTime) * 1000;
+    const timeToMs = time => time < earliestMainThreadStartTime || !Number.isFinite(time) ?
+      undefined : (time - earliestMainThreadStartTime) * 1000;
 
     const results = records.map(record => {
       const endTimeDeltaMs = record.lrStatistics?.endTimeDeltaMs;
@@ -65,6 +65,7 @@ class NetworkRequests extends Audit {
       return {
         url: URL.elideDataURI(record.url),
         protocol: record.protocol,
+        rendererStartTime: timeToMs(record.rendererStartTime),
         startTime: timeToMs(record.startTime),
         endTime: timeToMs(record.endTime),
         finished: record.finished,
@@ -73,6 +74,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
@@ -111,8 +113,8 @@ 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;
+    const networkStartTimeTs = Number.isFinite(earliestMainThreadStartTime) ?
+        earliestMainThreadStartTime * 1_000_000 : undefined;
     tableDetails.debugData = {
       type: 'debugdata',
       networkStartTimeTs,

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