v9.6.7 (GoogleChrome#14346)

changelog.md

@@ -1,6 +1,17 @@
+<a name="9.6.7"></a>
+# 9.6.7 (2022-09-01)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v9.6.6...v9.6.7)
+
+This is an npm-only release. We have no plans to release this specific version to DevTools or PSI, but the changes will be rolled up into the next release in those clients.
+
+## Core
+
+* core(trace-elements): include LCP type in artifact ([#14344](https://github.com/GoogleChrome/lighthouse/pull/14344))
+* core: add priority to network-requests debug audit ([#14340](https://github.com/GoogleChrome/lighthouse/pull/14340))
+
 <a name="9.6.6"></a>
 # 9.6.6 (2022-08-16)
-[Full Changelog](https://github.com/compare/v9.6.5...v9.6.6)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v9.6.5...v9.6.6)
 
 We expect this release to ship in the DevTools of [Chrome 106](https://chromiumdash.appspot.com/schedule), and to PageSpeed Insights within 2 weeks.
 
@@ -20,7 +31,7 @@ Thanks to our new contributor 👽🐷🐰🐯🐻!
 
 <a name="9.6.5"></a>
 # 9.6.5 (2022-08-01)
-[Full Changelog](https://github.com/compare/v9.6.4...v9.6.5)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v9.6.4...v9.6.5)
 
 This is an npm-only release and affects only the raw JSON report. We have no plans to release this specific version to DevTools or PSI, but the changes will be rolled up into the next release in those clients.
 
@@ -31,7 +42,7 @@ This is an npm-only release and affects only the raw JSON report. We have no pla
 
 <a name="9.6.4"></a>
 # 9.6.4 (2022-07-26)
-[Full Changelog](https://github.com/compare/v9.6.3...v9.6.4)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v9.6.3...v9.6.4)
 
 We expect this release to ship in the DevTools of [Chrome 106](https://chromiumdash.appspot.com/schedule), and to PageSpeed Insights within 2 weeks.
 
@@ -49,7 +60,7 @@ We expect this release to ship in the DevTools of [Chrome 106](https://chromiumd
 
 <a name="9.6.3"></a>
 # 9.6.3 (2022-06-28)
-[Full Changelog](https://github.com/compare/v9.6.2...v9.6.3)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v9.6.2...v9.6.3)
 
 This is an npm-only release and affects only the raw JSON report. We have no plans to release this specific version to DevTools or PSI, but the changes will be rolled up into the next release in those clients.
 
@@ -60,7 +71,7 @@ This is an npm-only release and affects only the raw JSON report. We have no pla
 
 <a name="9.6.2"></a>
 # 9.6.2 (2022-06-01)
-[Full Changelog](https://github.com/compare/v9.6.1...v9.6.2)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v9.6.1...v9.6.2)
 
 We expect this release to ship in the DevTools of [Chrome 104](https://chromiumdash.appspot.com/schedule), and to PageSpeed Insights within 2 weeks.
 
@@ -87,7 +98,7 @@ We expect this release to ship in the DevTools of [Chrome 104](https://chromiumd
 
  <a name="9.6.1"></a>
 # 9.6.1 (2022-05-11)
-[Full Changelog](https://github.com/compare/v9.6.0...v9.6.1)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v9.6.0...v9.6.1)
 
 We expect this release to ship in the DevTools of [Chrome 103](https://chromiumdash.appspot.com/schedule), and to PageSpeed Insights within 2 weeks.
 
@@ -107,7 +118,7 @@ We expect this release to ship in the DevTools of [Chrome 103](https://chromiumd
 
 <a name="9.6.0"></a>
 # 9.6.0 (2022-05-09)
-[Full Changelog](https://github.com/compare/v9.5.0...v9.6.0)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v9.5.0...v9.6.0)
 
 We expect this release to ship in the DevTools of [Chrome 103](https://chromiumdash.appspot.com/schedule), and to PageSpeed Insights within 2 weeks.
 
@@ -157,7 +168,7 @@ We expect this release to ship in the DevTools of [Chrome 103](https://chromiumd
 
 <a name="9.5.0"></a>
 # 9.5.0 (2022-03-09)
-[Full Changelog](https://github.com/compare/v9.4.0...v9.5.0)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v9.4.0...v9.5.0)
 
 We expect this release to ship in the DevTools of [Chrome 101](https://chromiumdash.appspot.com/schedule), and to PageSpeed Insights within 2 weeks.
 
@@ -211,7 +222,7 @@ Thanks to our new contributor 👽🐷🐰🐯🐻!
 
 <a name="9.4.0"></a>
 # 9.4.0 (2022-02-16)
-[Full Changelog](https://github.com/compare/v9.3.1...v9.4.0)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v9.3.1...v9.4.0)
 
 We expect this release to ship in the DevTools of [Chrome 100](https://chromiumdash.appspot.com/schedule), and to PageSpeed Insights within 2 weeks.
 
@@ -256,15 +267,15 @@ We expect this release to ship in the DevTools of [Chrome 100](https://chromiumd
 
 <a name="9.3.1"></a>
 # 9.3.1 (2022-01-31)
-[Full Changelog](https://github.com/compare/v9.3.0...v9.3.1)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v9.3.0...v9.3.1)
 
 ## Report
 
 * disable fireworks with flag ([#13610](https://github.com/GoogleChrome/lighthouse/pull/13610))
 
 <a name="9.3.0"></a>
 # 9.3.0 (2022-01-31)
-[Full Changelog](https://github.com/compare/v9.2.0...v9.3.0)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v9.2.0...v9.3.0)
 
 We expect this release to ship in the DevTools of [Chrome 100](https://chromiumdash.appspot.com/schedule), and to PageSpeed Insights within 2 weeks.
 

docs/plugins.md

@@ -60,10 +60,10 @@ A Lighthouse plugin is just a node module with a name that starts with `lighthou
   "name": "lighthouse-plugin-cats",
   "main": "plugin.js",
   "peerDependencies": {
-    "lighthouse": "^9.6.6"
+    "lighthouse": "^9.6.7"
   },
   "devDependencies": {
-    "lighthouse": "^9.6.6"
+    "lighthouse": "^9.6.7"
   }
 }
 ```

docs/recipes/custom-audit/package.json

@@ -3,6 +3,6 @@
   "private": true,
   "scripts": {},
   "devDependencies": {
-    "lighthouse": "^9.6.6"
+    "lighthouse": "^9.6.7"
   }
 }

docs/recipes/gulp/package.json

@@ -7,6 +7,6 @@
   "devDependencies": {
     "gulp": "^3.9.1",
     "gulp-connect": "^5.0.0",
-    "lighthouse": "^9.6.6"
+    "lighthouse": "^9.6.7"
   }
 }

docs/recipes/lighthouse-plugin-example/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "main": "./plugin.js",
   "peerDependencies": {
-    "lighthouse": "^9.6.6"
+    "lighthouse": "^9.6.7"
   },
   "devDependencies": {
     "lighthouse": "^8.6.0"

lighthouse-cli/test/smokehouse/test-definitions/perf-trace-elements.js

@@ -73,6 +73,7 @@ const expectations = {
             height: 318,
           },
         },
+        type: 'image',
       },
       {
         traceEventType: 'layout-shift',

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

@@ -50,16 +50,17 @@ 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;
 
 
     if (!lcpElementImage ||
       !this.isImageInViewport(lcpElementImage, artifacts.ViewportDimensions)) {
-      return {score: 1, notApplicable: true};
+      return {score: null, notApplicable: true};
     }
 
     /** @type {LH.Audit.Details.Table['headings']} */

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

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),

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

lighthouse-core/test/audits/largest-contentful-paint-element-test.js

@@ -20,6 +20,7 @@ describe('Performance: largest-contentful-paint-element audit', () => {
           nodeLabel: 'My Test Label',
           snippet: '<h1 class="test-class">',
         },
+        type: 'text',
       }],
     };
 

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

@@ -34,6 +34,7 @@ describe('Performance: lcp-lazy-loaded audit', () => {
       TraceElements: [{
         traceEventType: 'largest-contentful-paint',
         node: SAMPLE_NODE,
+        type: 'image',
       }],
       ImageElements: [
         generateImage('lazy', 0),
@@ -57,6 +58,7 @@ describe('Performance: lcp-lazy-loaded audit', () => {
       TraceElements: [{
         traceEventType: 'largest-contentful-paint',
         node: SAMPLE_NODE,
+        type: 'image',
       }],
       ImageElements: [
         generateImage('eager', 0),
@@ -76,6 +78,7 @@ describe('Performance: lcp-lazy-loaded audit', () => {
       TraceElements: [{
         traceEventType: 'largest-contentful-paint',
         node: SAMPLE_NODE,
+        type: 'image',
       }],
       ImageElements: [
         generateImage('lazy', 700),
@@ -96,7 +99,29 @@ describe('Performance: lcp-lazy-loaded audit', () => {
     };
 
     const auditResult = await LargestContentfulPaintLazyLoaded.audit(artifacts);
-    expect(auditResult.score).toEqual(1);
+    expect(auditResult.score).toEqual(null);
     expect(auditResult.notApplicable).toEqual(true);
   });
+
+  it('is not applicable when LCP was text', async () => {
+    const artifacts = {
+      TraceElements: [{
+        traceEventType: 'largest-contentful-paint',
+        node: SAMPLE_NODE,
+        type: 'text',
+      }],
+      ImageElements: [
+        generateImage('lazy', 700),
+      ],
+      ViewportDimensions: {
+        innerHeight: 500,
+        innerWidth: 300,
+      },
+    };
+    const auditResult = await LargestContentfulPaintLazyLoaded.audit(artifacts);
+    expect(auditResult).toEqual({
+      score: null,
+      notApplicable: true,
+    });
+  });
 });

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

@@ -36,6 +36,7 @@ describe('Network requests audit', () => {
       statusCode: 200,
       mimeType: 'text/html',
       resourceType: 'Document',
+      priority: 'VeryHigh',
     });
     expect(output.details.items[2]).toMatchObject({
       startTime: expect.toBeApproximately(711, 0),
@@ -46,6 +47,7 @@ describe('Network requests audit', () => {
       statusCode: 200,
       mimeType: 'image/png',
       resourceType: 'Image',
+      priority: 'Low',
     });
     expect(output.details.items[5]).toMatchObject({
       startTime: expect.toBeApproximately(717, 0),
@@ -56,6 +58,7 @@ describe('Network requests audit', () => {
       statusCode: 200,
       mimeType: 'application/javascript',
       resourceType: 'Script',
+      priority: 'Medium',
     });
 
     expect(output.details.debugData).toStrictEqual({