lighthouse 9.5.0-dev.20220831 → 9.5.0-dev.20220901

package/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/core/audits/preload-lcp-image.js

@@ -88,13 +88,11 @@ 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}}
    */
   static getLCPNodeToPreload(mainResource, graph, lcpElement, imageElements) {
-    if (!lcpElement) return {};
-
     const lcpImageElement = imageElements.find(elem => {
       return elem.node.devtoolsNodePath === lcpElement.node.devtoolsNodePath;
     });
@@ -121,14 +119,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 +220,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/core/gather/gatherers/trace-elements.js

@@ -25,7 +25,7 @@ import ProcessedNavigation from '../../computed/processed-navigation.js';
 import {LighthouseError} from '../../lib/lh-error.js';
 import ComputedResponsiveness from '../../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}
@@ -214,6 +214,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
    */
@@ -242,26 +270,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] : []],
@@ -300,6 +318,7 @@ class TraceElements extends FRGatherer {
             score: backendNodeData[i].score,
             animations: backendNodeData[i].animations,
             nodeId: backendNodeId,
+            type: backendNodeData[i].type,
           });
         }
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "9.5.0-dev.20220831",
+  "version": "9.5.0-dev.20220901",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {

package/types/artifacts.d.ts

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