core(preload-lcp-image): enrich debugData (#14155)

GoogleChrome · Jun 27, 2022 · 00a45a1 · 00a45a1
1 parent 70d2267
commit 00a45a1
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 10 deletions.
diff --git a/lighthouse-cli/test/smokehouse/test-definitions/perf-trace-elements.js b/lighthouse-cli/test/smokehouse/test-definitions/perf-trace-elements.js
@@ -184,6 +184,25 @@ const expectations = {
           },
         },
       },
+      'preload-lcp-image': {
+        score: 1,
+        numericValue: 0,
+        details: {
+          items: [{
+            url: 'http://localhost:10200/dobetterweb/lighthouse-480x318.jpg',
+          }],
+          debugData: {
+            initiatorPath: [{
+              url: 'http://localhost:10200/dobetterweb/lighthouse-480x318.jpg',
+              initiatorType: 'other',
+            }, {
+              url: 'http://localhost:10200/perf/trace-elements.html',
+              initiatorType: 'other',
+            }],
+            pathLength: 2,
+          },
+        },
+      },
     },
   },
 };

diff --git a/lighthouse-core/audits/preload-lcp-image.js b/lighthouse-core/audits/preload-lcp-image.js
@@ -23,6 +23,10 @@ const UIStrings = {
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
+/**
+ * @typedef {Array<{url: string, initiatorType: string}>} InitiatorPath
+ */
+
 class PreloadLCPImageAudit extends Audit {
   /**
    * @return {LH.Audit.Meta}
@@ -86,22 +90,33 @@ class PreloadLCPImageAudit extends Audit {
    * @param {LH.Gatherer.Simulation.GraphNode} graph
    * @param {LH.Artifacts.TraceElement|undefined} lcpElement
    * @param {Array<LH.Artifacts.ImageElement>} imageElements
-   * @return {LH.Gatherer.Simulation.GraphNetworkNode|undefined}
+   * @return {{lcpNodeToPreload?: LH.Gatherer.Simulation.GraphNetworkNode, initiatorPath?: InitiatorPath}}
    */
   static getLCPNodeToPreload(mainResource, graph, lcpElement, imageElements) {
-    if (!lcpElement) return undefined;
+    if (!lcpElement) return {};
 
     const lcpImageElement = imageElements.find(elem => {
       return elem.node.devtoolsNodePath === lcpElement.node.devtoolsNodePath;
     });
 
-    if (!lcpImageElement) return undefined;
+    if (!lcpImageElement) return {};
     const lcpUrl = lcpImageElement.src;
     const {lcpNode, path} = PreloadLCPImageAudit.findLCPNode(graph, lcpUrl);
-    if (!lcpNode || !path) return undefined;
+    if (!lcpNode || !path) return {};
+
     // eslint-disable-next-line max-len
     const shouldPreload = PreloadLCPImageAudit.shouldPreloadRequest(lcpNode.record, mainResource, path);
-    return shouldPreload ? lcpNode : undefined;
+    const lcpNodeToPreload = shouldPreload ? lcpNode : undefined;
+
+    const initiatorPath = [
+      {url: lcpNode.record.url, initiatorType: lcpNode.initiatorType},
+      ...path.map(n => ({url: n.record.url, initiatorType: n.initiatorType})),
+    ];
+
+    return {
+      lcpNodeToPreload,
+      initiatorPath,
+    };
   }
 
   /**
@@ -215,10 +230,10 @@ class PreloadLCPImageAudit extends Audit {
 
     const graph = lanternLCP.pessimisticGraph;
     // eslint-disable-next-line max-len
-    const lcpNode = PreloadLCPImageAudit.getLCPNodeToPreload(mainResource, graph, lcpElement, artifacts.ImageElements);
+    const {lcpNodeToPreload, initiatorPath} = PreloadLCPImageAudit.getLCPNodeToPreload(mainResource, graph, lcpElement, artifacts.ImageElements);
 
     const {results, wastedMs} =
-      PreloadLCPImageAudit.computeWasteWithGraph(lcpElement, lcpNode, graph, simulator);
+      PreloadLCPImageAudit.computeWasteWithGraph(lcpElement, lcpNodeToPreload, graph, simulator);
 
     /** @type {LH.Audit.Details.Opportunity['headings']} */
     const headings = [
@@ -228,6 +243,17 @@ class PreloadLCPImageAudit extends Audit {
     ];
     const details = Audit.makeOpportunityDetails(headings, results, wastedMs);
 
+    // If LCP element was an image and had valid network records (regardless of
+    // if it should be preloaded), it will be found first in the `initiatorPath`.
+    // Otherwise path and length will be undefined.
+    if (initiatorPath) {
+      details.debugData = {
+        type: 'debugdata',
+        initiatorPath,
+        pathLength: initiatorPath.length,
+      };
+    }
+
     return {
       score: UnusedBytes.scoreForWastedMs(wastedMs),
       numericValue: wastedMs,

diff --git a/lighthouse-core/lib/dependency-graph/network-node.js b/lighthouse-core/lib/dependency-graph/network-node.js
@@ -44,7 +44,7 @@ class NetworkNode extends BaseNode {
   }
 
   /**
-   * @return {?string}
+   * @return {string}
    */
   get initiatorType() {
     return this._record.initiator && this._record.initiator.type;

diff --git a/lighthouse-core/test/audits/preload-lcp-image-test.js b/lighthouse-core/test/audits/preload-lcp-image-test.js
@@ -135,6 +135,16 @@ describe('Performance: preload-lcp audit', () => {
     expect(results.details.overallSavingsMs).toEqual(180);
     expect(results.details.items[0].url).toEqual(imageUrl);
     expect(results.details.items[0].wastedMs).toEqual(180);
+
+    // debugData should be included even if image shouldn't be preloaded.
+    expect(results.details.debugData).toMatchObject({
+      initiatorPath: [
+        {url: 'http://www.example.com/image.png', initiatorType: 'script'},
+        {url: 'http://www.example.com/script.js', initiatorType: 'parser'},
+        {url: 'http://www.example.com:3000', initiatorType: 'other'},
+      ],
+      pathLength: 3,
+    });
   });
 
   it('should suggest preloading when LCP is waiting on the image', async () => {
@@ -159,5 +169,13 @@ describe('Performance: preload-lcp audit', () => {
     expect(results.details.overallSavingsMs).toEqual(30);
     expect(results.details.items[0].url).toEqual(imageUrl);
     expect(results.details.items[0].wastedMs).toEqual(30);
+    expect(results.details.debugData).toMatchObject({
+      initiatorPath: [
+        {url: 'http://www.example.com/image.png', initiatorType: 'script'},
+        {url: 'http://www.example.com/script.js', initiatorType: 'parser'},
+        {url: 'http://www.example.com:3000', initiatorType: 'other'},
+      ],
+      pathLength: 3,
+    });
   });
 });
diff --git a/lighthouse-core/test/fixtures/fraggle-rock/reports/sample-flow-result.json b/lighthouse-core/test/fixtures/fraggle-rock/reports/sample-flow-result.json
@@ -1785,7 +1785,21 @@
                   "wastedMs": 0
                 }
               ],
-              "overallSavingsMs": 0
+              "overallSavingsMs": 0,
+              "debugData": {
+                "type": "debugdata",
+                "initiatorPath": [
+                  {
+                    "url": "https://www.mikescerealshack.co/logo-text.svg",
+                    "initiatorType": "parser"
+                  },
+                  {
+                    "url": "https://www.mikescerealshack.co/",
+                    "initiatorType": "other"
+                  }
+                ],
+                "pathLength": 2
+              }
             }
           },
           "csp-xss": {
@@ -15855,7 +15869,21 @@
                   "wastedMs": 0
                 }
               ],
-              "overallSavingsMs": 0
+              "overallSavingsMs": 0,
+              "debugData": {
+                "type": "debugdata",
+                "initiatorPath": [
+                  {
+                    "url": "https://www.mikescerealshack.co/oscar-actually.jpg",
+                    "initiatorType": "parser"
+                  },
+                  {
+                    "url": "https://www.mikescerealshack.co/corrections",
+                    "initiatorType": "other"
+                  }
+                ],
+                "pathLength": 2
+              }
             }
           },
           "csp-xss": {