lighthouse 9.6.2 → 9.6.3

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

@@ -8,6 +8,7 @@
 const Audit = require('./audit.js');
 const URL = require('../lib/url-shim.js');
 const NetworkRecords = require('../computed/network-records.js');
+const MainResource = require('../computed/main-resource.js');
 
 class NetworkRequests extends Audit {
   /**
@@ -19,7 +20,7 @@ class NetworkRequests extends Audit {
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
       title: 'Network Requests',
       description: 'Lists the network requests that were made during page load.',
-      requiredArtifacts: ['devtoolsLogs'],
+      requiredArtifacts: ['devtoolsLogs', 'URL', 'GatherContext'],
     };
   }
 
@@ -28,75 +29,91 @@ class NetworkRequests extends Audit {
    * @param {LH.Audit.Context} context
    * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts, context) {
+  static async audit(artifacts, context) {
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    return NetworkRecords.request(devtoolsLog, context).then(records => {
-      const earliestStartTime = records.reduce(
-        (min, record) => Math.min(min, record.startTime),
-        Infinity
-      );
+    const records = await NetworkRecords.request(devtoolsLog, context);
+    const earliestStartTime = records.reduce(
+      (min, record) => Math.min(min, record.startTime),
+      Infinity
+    );
 
-      /** @param {number} time */
-      const timeToMs = time => time < earliestStartTime || !Number.isFinite(time) ?
-        undefined : (time - earliestStartTime) * 1000;
+    // Optional mainFrameId check because the main resource is only available for
+    // navigations. TODO: https://github.com/GoogleChrome/lighthouse/issues/14157
+    // for the general solution to this.
+    /** @type {string|undefined} */
+    let mainFrameId;
+    if (artifacts.GatherContext.gatherMode === 'navigation') {
+      const mainResource = await MainResource.request({devtoolsLog, URL: artifacts.URL}, context);
+      mainFrameId = mainResource.frameId;
+    }
 
-      const results = records.map(record => {
-        const endTimeDeltaMs = record.lrStatistics?.endTimeDeltaMs;
-        const TCPMs = record.lrStatistics?.TCPMs;
-        const requestMs = record.lrStatistics?.requestMs;
-        const responseMs = record.lrStatistics?.responseMs;
+    /** @param {number} time */
+    const timeToMs = time => time < earliestStartTime || !Number.isFinite(time) ?
+      undefined : (time - earliestStartTime) * 1000;
 
-        return {
-          url: URL.elideDataURI(record.url),
-          protocol: record.protocol,
-          startTime: timeToMs(record.startTime),
-          endTime: timeToMs(record.endTime),
-          finished: record.finished,
-          transferSize: record.transferSize,
-          resourceSize: record.resourceSize,
-          statusCode: record.statusCode,
-          mimeType: record.mimeType,
-          resourceType: record.resourceType,
-          lrEndTimeDeltaMs: endTimeDeltaMs, // Only exists on Lightrider runs
-          lrTCPMs: TCPMs, // Only exists on Lightrider runs
-          lrRequestMs: requestMs, // Only exists on Lightrider runs
-          lrResponseMs: responseMs, // Only exists on Lightrider runs
-        };
-      });
-
-      // NOTE(i18n): this audit is only for debug info in the LHR and does not appear in the report.
-      /** @type {LH.Audit.Details.Table['headings']} */
-      const headings = [
-        {key: 'url', itemType: 'url', text: 'URL'},
-        {key: 'protocol', itemType: 'text', text: 'Protocol'},
-        {key: 'startTime', itemType: 'ms', granularity: 1, text: 'Start Time'},
-        {key: 'endTime', itemType: 'ms', granularity: 1, text: 'End Time'},
-        {
-          key: 'transferSize',
-          itemType: 'bytes',
-          displayUnit: 'kb',
-          granularity: 1,
-          text: 'Transfer Size',
-        },
-        {
-          key: 'resourceSize',
-          itemType: 'bytes',
-          displayUnit: 'kb',
-          granularity: 1,
-          text: 'Resource Size',
-        },
-        {key: 'statusCode', itemType: 'text', text: 'Status Code'},
-        {key: 'mimeType', itemType: 'text', text: 'MIME Type'},
-        {key: 'resourceType', itemType: 'text', text: 'Resource Type'},
-      ];
-
-      const tableDetails = Audit.makeTableDetails(headings, results);
+    const results = records.map(record => {
+      const endTimeDeltaMs = record.lrStatistics?.endTimeDeltaMs;
+      const TCPMs = record.lrStatistics?.TCPMs;
+      const requestMs = record.lrStatistics?.requestMs;
+      const responseMs = record.lrStatistics?.responseMs;
+      // Default these to undefined so omitted from JSON in the negative case.
+      const isLinkPreload = record.isLinkPreload || undefined;
+      const experimentalFromMainFrame = mainFrameId ?
+        ((record.frameId === mainFrameId) || undefined) :
+        undefined;
 
       return {
-        score: 1,
-        details: tableDetails,
+        url: URL.elideDataURI(record.url),
+        protocol: record.protocol,
+        startTime: timeToMs(record.startTime),
+        endTime: timeToMs(record.endTime),
+        finished: record.finished,
+        transferSize: record.transferSize,
+        resourceSize: record.resourceSize,
+        statusCode: record.statusCode,
+        mimeType: record.mimeType,
+        resourceType: record.resourceType,
+        isLinkPreload,
+        experimentalFromMainFrame,
+        lrEndTimeDeltaMs: endTimeDeltaMs, // Only exists on Lightrider runs
+        lrTCPMs: TCPMs, // Only exists on Lightrider runs
+        lrRequestMs: requestMs, // Only exists on Lightrider runs
+        lrResponseMs: responseMs, // Only exists on Lightrider runs
       };
     });
+
+    // NOTE(i18n): this audit is only for debug info in the LHR and does not appear in the report.
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'url', itemType: 'url', text: 'URL'},
+      {key: 'protocol', itemType: 'text', text: 'Protocol'},
+      {key: 'startTime', itemType: 'ms', granularity: 1, text: 'Start Time'},
+      {key: 'endTime', itemType: 'ms', granularity: 1, text: 'End Time'},
+      {
+        key: 'transferSize',
+        itemType: 'bytes',
+        displayUnit: 'kb',
+        granularity: 1,
+        text: 'Transfer Size',
+      },
+      {
+        key: 'resourceSize',
+        itemType: 'bytes',
+        displayUnit: 'kb',
+        granularity: 1,
+        text: 'Resource Size',
+      },
+      {key: 'statusCode', itemType: 'text', text: 'Status Code'},
+      {key: 'mimeType', itemType: 'text', text: 'MIME Type'},
+      {key: 'resourceType', itemType: 'text', text: 'Resource Type'},
+    ];
+
+    const tableDetails = Audit.makeTableDetails(headings, results);
+
+    return {
+      score: 1,
+      details: tableDetails,
+    };
   }
 }
 

package/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,

package/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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.6.2",
+  "version": "9.6.3",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {