npm - lighthouse - Versions diffs - 9.6.2 → 9.6.5 - Mend

lighthouse 9.6.2 → 9.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

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

@@ -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,99 @@ 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);
+    // Include starting timestamp to allow syncing requests with navStart/metric timestamps.
+    const networkStartTimeTs = Number.isFinite(earliestStartTime) ?
+        earliestStartTime * 1_000_000 : undefined;
+    tableDetails.debugData = {
+      type: 'debugdata',
+      networkStartTimeTs,
+    };
+    return {
+      score: 1,
+      details: tableDetails,
+    };
   }
 }

package/lighthouse-core/audits/preload-lcp-image.js CHANGED Viewed

@@ -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/computed/main-thread-tasks.js CHANGED Viewed

@@ -17,7 +17,8 @@ class MainThreadTasks {
    */
   static async compute_(trace, context) {
     const {mainThreadEvents, frames, timestamps} = await ProcessedTrace.request(trace, context);
-    return MainThreadTasks_.getMainThreadTasks(mainThreadEvents, frames, timestamps.traceEnd);
+    return MainThreadTasks_.getMainThreadTasks(mainThreadEvents, frames, timestamps.traceEnd,
+        timestamps.timeOrigin);
   }
 }

package/lighthouse-core/lib/dependency-graph/network-node.js CHANGED Viewed

@@ -44,7 +44,7 @@ class NetworkNode extends BaseNode {
   }
   /**
-   * @return {?string}
+   * @return {string}
    */
   get initiatorType() {
     return this._record.initiator && this._record.initiator.type;

package/lighthouse-core/lib/tracehouse/main-thread-tasks.js CHANGED Viewed

@@ -561,9 +561,10 @@ class MainThreadTasks {
    * @param {LH.TraceEvent[]} mainThreadEvents
    * @param {Array<{id: string, url: string}>} frames
    * @param {number} traceEndTs
+   * @param {number} [traceStartTs] Optional time-0 ts for tasks. Tasks before this point will have negative start/end times. Defaults to the first task found.
    * @return {TaskNode[]}
    */
-  static getMainThreadTasks(mainThreadEvents, frames, traceEndTs) {
+  static getMainThreadTasks(mainThreadEvents, frames, traceEndTs, traceStartTs) {
     const timers = new Map();
     const xhrs = new Map();
     const frameURLsById = new Map();
@@ -587,8 +588,8 @@ class MainThreadTasks {
       priorTaskData.lastTaskURLs = task.attributableURLs;
     }
-    // Rebase all the times to be relative to start of trace in ms
-    const firstTs = (tasks[0] || {startTime: 0}).startTime;
+    // Rebase all the times to be relative to start of trace and covert to ms.
+    const firstTs = traceStartTs ?? tasks[0].startTime;
     for (const task of tasks) {
       task.startTime = (task.startTime - firstTs) / 1000;
       task.endTime = (task.endTime - firstTs) / 1000;

package/lighthouse-core/scripts/package.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.6.2",
+  "version": "9.6.5",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -192,7 +192,7 @@
     "jpeg-js": "^0.4.3",
     "js-library-detector": "^6.5.0",
     "lighthouse-logger": "^1.3.0",
-    "lighthouse-stack-packs": "^1.8.1",
+    "lighthouse-stack-packs": "1.8.2",
     "lodash": "^4.17.21",
     "lookup-closest-locale": "6.2.0",
     "metaviewport-parser": "0.2.0",

package/shared/localization/locales/en-US.json CHANGED Viewed

@@ -2586,7 +2586,7 @@
     "message": "If you are using React Router, minimize usage of the `<Redirect>` component for [route navigations](https://reacttraining.com/react-router/web/api/Redirect)."
   },
   "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": {
-    "message": "If you are server-side rendering any React components, consider using `renderToNodeStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#rendertonodestream)."
+    "message": "If you are server-side rendering any React components, consider using `renderToPipeableStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream)."
   },
   "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": {
     "message": "If your build system minifies CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build)."
@@ -2604,7 +2604,7 @@
     "message": "Consider uploading your GIF to a service which will make it available to embed as an HTML5 video."
   },
   "node_modules/lighthouse-stack-packs/packs/wordpress.js | modern-image-formats": {
-    "message": "Consider using a [plugin](https://wordpress.org/plugins/search/convert+webp/) or service that will automatically convert your uploaded images to the optimal formats."
+    "message": "Consider using the [Performance Lab](https://wordpress.org/plugins/performance-lab/) plugin to automatically convert your uploaded JPEG images into WebP, wherever supported."
   },
   "node_modules/lighthouse-stack-packs/packs/wordpress.js | offscreen-images": {
     "message": "Install a [lazy-load WordPress plugin](https://wordpress.org/plugins/search/lazy+load/) that provides the ability to defer any offscreen images, or switch to a theme that provides that functionality. Also consider using [the AMP plugin](https://wordpress.org/plugins/amp/)."

package/shared/localization/locales/en-XL.json CHANGED Viewed

@@ -2586,7 +2586,7 @@
     "message": "Îf́ ŷóû ár̂é ûśîńĝ Ŕêáĉt́ R̂óût́êŕ, m̂ín̂ím̂íẑé ûśâǵê óf̂ t́ĥé `<Redirect>` ĉóm̂ṕôńêńt̂ f́ôŕ [r̂óût́ê ńâv́îǵât́îón̂ś](https://reacttraining.com/react-router/web/api/Redirect)."
   },
   "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": {
-    "message": "Îf́ ŷóû ár̂é ŝér̂v́êŕ-ŝíd̂é r̂én̂d́êŕîńĝ án̂ý R̂éâćt̂ ćôḿp̂ón̂én̂t́ŝ, ćôńŝíd̂ér̂ úŝín̂ǵ `renderToNodeStream()` ôŕ `renderToStaticNodeStream()` t̂ó âĺl̂óŵ t́ĥé ĉĺîén̂t́ t̂ó r̂éĉéîv́ê án̂d́ ĥýd̂ŕât́ê d́îf́f̂ér̂én̂t́ p̂ár̂t́ŝ óf̂ t́ĥé m̂ár̂ḱûṕ îńŝt́êád̂ óf̂ ál̂ĺ ât́ ôńĉé. [L̂éâŕn̂ ḿôŕê](https://reactjs.org/docs/react-dom-server.html#rendertonodestream)."
+    "message": "Îf́ ŷóû ár̂é ŝér̂v́êŕ-ŝíd̂é r̂én̂d́êŕîńĝ án̂ý R̂éâćt̂ ćôḿp̂ón̂én̂t́ŝ, ćôńŝíd̂ér̂ úŝín̂ǵ `renderToPipeableStream()` ôŕ `renderToStaticNodeStream()` t̂ó âĺl̂óŵ t́ĥé ĉĺîén̂t́ t̂ó r̂éĉéîv́ê án̂d́ ĥýd̂ŕât́ê d́îf́f̂ér̂én̂t́ p̂ár̂t́ŝ óf̂ t́ĥé m̂ár̂ḱûṕ îńŝt́êád̂ óf̂ ál̂ĺ ât́ ôńĉé. [L̂éâŕn̂ ḿôŕê](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream)."
   },
   "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": {
     "message": "Îf́ ŷóûŕ b̂úîĺd̂ śŷśt̂ém̂ ḿîńîf́îéŝ ĆŜŚ f̂íl̂éŝ áût́ôḿât́îćâĺl̂ý, êńŝúr̂é t̂h́ât́ ŷóû ár̂é d̂ép̂ĺôýîńĝ t́ĥé p̂ŕôd́ûćt̂íôń b̂úîĺd̂ óf̂ ýôúr̂ áp̂ṕl̂íĉát̂íôń. Ŷóû ćâń ĉh́êćk̂ t́ĥíŝ ẃît́ĥ t́ĥé R̂éâćt̂ D́êv́êĺôṕêŕ T̂óôĺŝ éx̂t́êńŝíôń. [L̂éâŕn̂ ḿôŕê](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build)."
@@ -2604,7 +2604,7 @@
     "message": "Ĉón̂śîd́êŕ ûṕl̂óâd́îńĝ ýôúr̂ ǴÎF́ t̂ó â śêŕv̂íĉé ŵh́îćĥ ẃîĺl̂ ḿâḱê ít̂ áv̂áîĺâb́l̂é t̂ó êḿb̂éd̂ áŝ án̂ H́T̂ḾL̂5 v́îd́êó."
   },
   "node_modules/lighthouse-stack-packs/packs/wordpress.js | modern-image-formats": {
-    "message": "Ĉón̂śîd́êŕ ûśîńĝ á [p̂ĺûǵîń](https://wordpress.org/plugins/search/convert+webp/) ôŕ ŝér̂v́îćê t́ĥát̂ ẃîĺl̂ áût́ôḿât́îćâĺl̂ý ĉón̂v́êŕt̂ ýôúr̂ úp̂ĺôád̂éd̂ ím̂áĝéŝ t́ô t́ĥé ôṕt̂ím̂ál̂ f́ôŕm̂át̂ś."
+    "message": "Ĉón̂śîd́êŕ ûśîńĝ t́ĥé [P̂ér̂f́ôŕm̂án̂ćê Ĺâb́](https://wordpress.org/plugins/performance-lab/) p̂ĺûǵîń t̂ó âút̂óm̂át̂íĉál̂ĺŷ ćôńv̂ér̂t́ ŷóûŕ ûṕl̂óâd́êd́ ĴṔÊǴ îḿâǵêś îńt̂ó Ŵéb̂Ṕ, ŵh́êŕêv́êŕ ŝúp̂ṕôŕt̂éd̂."
   },
   "node_modules/lighthouse-stack-packs/packs/wordpress.js | offscreen-images": {
     "message": "Îńŝt́âĺl̂ á [l̂áẑý-l̂óâd́ Ŵór̂d́P̂ŕêśŝ ṕl̂úĝín̂](https://wordpress.org/plugins/search/lazy+load/) t́ĥát̂ ṕr̂óv̂íd̂éŝ t́ĥé âb́îĺît́ŷ t́ô d́êf́êŕ âńŷ óf̂f́ŝćr̂éêń îḿâǵêś, ôŕ ŝẃît́ĉh́ t̂ó â t́ĥém̂é t̂h́ât́ p̂ŕôv́îd́êś t̂h́ât́ f̂ún̂ćt̂íôńâĺît́ŷ. Ál̂śô ćôńŝíd̂ér̂ úŝín̂ǵ [t̂h́ê ÁM̂Ṕ p̂ĺûǵîń](https://wordpress.org/plugins/amp/)."