lighthouse 9.5.0-dev.20220509 → 9.6.1

package/lighthouse-core/audits/byte-efficiency/legacy-javascript.js

@@ -30,7 +30,7 @@ const UIStrings = {
   // eslint-disable-next-line max-len
   // TODO: web.dev article. this codelab is good starting place: https://web.dev/codelab-serve-modern-code/
   /** Description of a Lighthouse audit that tells the user about old JavaScript that is no longer needed. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
-  description: 'Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren\'t necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. [Learn More](https://web.dev/publish-modern-javascript/)',
+  description: 'Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren\'t necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. [Learn More](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/)',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
@@ -109,7 +109,7 @@ class LegacyJavascript extends ByteEfficiencyAudit {
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
       description: str_(UIStrings.description),
       title: str_(UIStrings.title),
-      requiredArtifacts: ['devtoolsLogs', 'traces', 'Scripts', 'SourceMaps',
+      requiredArtifacts: ['devtoolsLogs', 'traces', 'ScriptElements', 'SourceMaps',
         'GatherContext', 'URL'],
     };
   }
@@ -274,24 +274,26 @@ class LegacyJavascript extends ByteEfficiencyAudit {
    * Returns a collection of match results grouped by script url.
    *
    * @param {CodePatternMatcher} matcher
-   * @param {LH.Artifacts['Scripts']} scripts
+   * @param {LH.GathererArtifacts['ScriptElements']} scripts
    * @param {LH.Artifacts.NetworkRequest[]} networkRecords
    * @param {LH.Artifacts.Bundle[]} bundles
-   * @return {Map<LH.Artifacts.Script, PatternMatchResult[]>}
+   * @return {Map<string, PatternMatchResult[]>}
    */
   static detectAcrossScripts(matcher, scripts, networkRecords, bundles) {
-    /** @type {Map<LH.Artifacts.Script, PatternMatchResult[]>} */
-    const scriptToMatchResults = new Map();
+    /** @type {Map<string, PatternMatchResult[]>} */
+    const urlToMatchResults = new Map();
     const polyfillData = this.getPolyfillData();
 
-    for (const script of Object.values(scripts)) {
-      if (!script.content) continue;
+    for (const {requestId, content} of Object.values(scripts)) {
+      if (!content) continue;
+      const networkRecord = networkRecords.find(record => record.requestId === requestId);
+      if (!networkRecord) continue;
 
       // Start with pattern matching against the downloaded script.
-      const matches = matcher.match(script.content);
+      const matches = matcher.match(content);
 
       // If it's a bundle with source maps, add in the polyfill modules by name too.
-      const bundle = bundles.find(b => b.script.scriptId === script.scriptId);
+      const bundle = bundles.find(b => b.script.src === networkRecord.url);
       if (bundle) {
         for (const {coreJs2Module, coreJs3Module, name} of polyfillData) {
           // Skip if the pattern matching found a match for this polyfill.
@@ -311,10 +313,10 @@ class LegacyJavascript extends ByteEfficiencyAudit {
       }
 
       if (!matches.length) continue;
-      scriptToMatchResults.set(script, matches);
+      urlToMatchResults.set(networkRecord.url, matches);
     }
 
-    return scriptToMatchResults;
+    return urlToMatchResults;
   }
 
   /**
@@ -371,14 +373,14 @@ class LegacyJavascript extends ByteEfficiencyAudit {
     let transferRatio = transferRatioByUrl.get(url);
     if (transferRatio !== undefined) return transferRatio;
 
-    const script = artifacts.Scripts.find(script => script.url === url);
+    const script = artifacts.ScriptElements.find(script => script.src === url);
+    const networkRecord = getRequestForScript(networkRecords, script);
 
     if (!script || script.content === null) {
       // Can't find content, so just use 1.
       transferRatio = 1;
     } else {
-      const networkRecord = getRequestForScript(networkRecords, script);
-      const contentLength = script.length || 0;
+      const contentLength = script.content.length;
       const transferSize =
         ByteEfficiencyAudit.estimateTransferSize(networkRecord, contentLength, 'Script');
       transferRatio = transferSize / contentLength;
@@ -409,15 +411,15 @@ class LegacyJavascript extends ByteEfficiencyAudit {
     /** @type {Map<string, number>} */
     const transferRatioByUrl = new Map();
 
-    const scriptToMatchResults =
-      this.detectAcrossScripts(matcher, artifacts.Scripts, networkRecords, bundles);
-    for (const [script, matches] of scriptToMatchResults.entries()) {
+    const urlToMatchResults =
+      this.detectAcrossScripts(matcher, artifacts.ScriptElements, networkRecords, bundles);
+    for (const [url, matches] of urlToMatchResults.entries()) {
       const transferRatio = await this.estimateTransferRatioForScript(
-        transferRatioByUrl, script.url, artifacts, networkRecords);
+        transferRatioByUrl, url, artifacts, networkRecords);
       const wastedBytes = Math.round(this.estimateWastedBytes(matches) * transferRatio);
       /** @type {typeof items[number]} */
       const item = {
-        url: script.url,
+        url,
         wastedBytes,
         subItems: {
           type: 'subitems',
@@ -427,13 +429,13 @@ class LegacyJavascript extends ByteEfficiencyAudit {
         totalBytes: 0,
       };
 
-      const bundle = bundles.find(bundle => bundle.script.scriptId === script.scriptId);
+      const bundle = bundles.find(bundle => bundle.script.src === url);
       for (const match of matches) {
         const {name, line, column} = match;
         /** @type {SubItem} */
         const subItem = {
           signal: name,
-          location: ByteEfficiencyAudit.makeSourceLocation(script.url, line, column, bundle),
+          location: ByteEfficiencyAudit.makeSourceLocation(url, line, column, bundle),
         };
         item.subItems.items.push(subItem);
       }

package/lighthouse-core/audits/byte-efficiency/offscreen-images.js

@@ -51,7 +51,7 @@ class OffscreenImages extends ByteEfficiencyAudit {
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
       supportedModes: ['navigation'],
       requiredArtifacts: ['ImageElements', 'ViewportDimensions', 'GatherContext', 'devtoolsLogs',
-        'traces', 'URL'],
+        'traces'],
     };
   }
 
@@ -182,7 +182,6 @@ class OffscreenImages extends ByteEfficiencyAudit {
     const gatherContext = artifacts.GatherContext;
     const trace = artifacts.traces[ByteEfficiencyAudit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[ByteEfficiencyAudit.DEFAULT_PASS];
-    const URL = artifacts.URL;
 
     /** @type {string[]} */
     const warnings = [];
@@ -213,7 +212,7 @@ class OffscreenImages extends ByteEfficiencyAudit {
     const unfilteredResults = Array.from(resultsMap.values());
     // get the interactive time or fallback to getting the end of trace time
     try {
-      const metricComputationData = {trace, devtoolsLog, gatherContext, settings, URL};
+      const metricComputationData = {trace, devtoolsLog, gatherContext, settings};
       const interactive = await Interactive.request(metricComputationData, context);
 
       // use interactive to generate items

package/lighthouse-core/audits/byte-efficiency/render-blocking-resources.js

@@ -145,7 +145,7 @@ class RenderBlockingResources extends Audit {
     };
 
     const metricComputationData = {trace, devtoolsLog, gatherContext, simulator,
-      settings: metricSettings, URL: artifacts.URL};
+      settings: metricSettings};
 
     // Cast to just `LanternMetric` since we explicitly set `throttlingMethod: 'simulate'`.
     const fcpSimulation = /** @type {LH.Artifacts.LanternMetric} */
@@ -262,12 +262,13 @@ class RenderBlockingResources extends Audit {
     try {
       const unusedCssItems = await UnusedCSS.request({
         CSSUsage: artifacts.CSSUsage,
+        URL: artifacts.URL,
         devtoolsLog: artifacts.devtoolsLogs[Audit.DEFAULT_PASS],
       }, context);
       for (const item of unusedCssItems) {
         wastedBytesByUrl.set(item.url, item.wastedBytes);
       }
-    } catch {}
+    } catch (_) {}
 
     return wastedBytesByUrl;
   }

package/lighthouse-core/audits/byte-efficiency/unminified-css.js

@@ -53,14 +53,15 @@ class UnminifiedCSS extends ByteEfficiencyAudit {
   /**
    * @param {LH.Artifacts.CSSStyleSheetInfo} stylesheet
    * @param {LH.Artifacts.NetworkRequest|undefined} networkRecord
+   * @param {string} pageUrl
    * @return {{url: string, totalBytes: number, wastedBytes: number, wastedPercent: number}}
    */
-  static computeWaste(stylesheet, networkRecord) {
+  static computeWaste(stylesheet, networkRecord, pageUrl) {
     const content = stylesheet.content;
     const totalTokenLength = UnminifiedCSS.computeTokenLength(content);
 
     let url = stylesheet.header.sourceURL;
-    if (!url || stylesheet.header.isInline) {
+    if (!url || url === pageUrl) {
       const contentPreview = UnusedCSS.determineContentPreview(stylesheet.content);
       url = contentPreview;
     }
@@ -84,13 +85,14 @@ class UnminifiedCSS extends ByteEfficiencyAudit {
    * @return {ByteEfficiencyAudit.ByteEfficiencyProduct}
    */
   static audit_(artifacts, networkRecords) {
+    const pageUrl = artifacts.URL.finalUrl;
     const items = [];
     for (const stylesheet of artifacts.CSSUsage.stylesheets) {
       const networkRecord = networkRecords
         .find(record => record.url === stylesheet.header.sourceURL);
       if (!stylesheet.content) continue;
 
-      const result = UnminifiedCSS.computeWaste(stylesheet, networkRecord);
+      const result = UnminifiedCSS.computeWaste(stylesheet, networkRecord, pageUrl);
 
       // If the ratio is minimal, the file is likely already minified, so ignore it.
       // If the total number of bytes to be saved is quite small, it's also safe to ignore.

package/lighthouse-core/audits/byte-efficiency/unminified-javascript.js

@@ -8,7 +8,7 @@
 const ByteEfficiencyAudit = require('./byte-efficiency-audit.js');
 const i18n = require('../../lib/i18n/i18n.js');
 const computeTokenLength = require('../../lib/minification-estimator.js').computeJSTokenLength;
-const {getRequestForScript, isInline} = require('../../lib/script-helpers.js');
+const {getRequestForScript} = require('../../lib/script-helpers.js');
 
 const UIStrings = {
   /** Imperative title of a Lighthouse audit that tells the user to minify the page’s JS code to reduce file size. This is displayed in a list of audit titles that Lighthouse generates. */
@@ -43,7 +43,7 @@ class UnminifiedJavaScript extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['Scripts', 'devtoolsLogs', 'traces', 'GatherContext', 'URL'],
+      requiredArtifacts: ['ScriptElements', 'devtoolsLogs', 'traces', 'GatherContext'],
     };
   }
 
@@ -79,16 +79,16 @@ class UnminifiedJavaScript extends ByteEfficiencyAudit {
     /** @type {Array<LH.Audit.ByteEfficiencyItem>} */
     const items = [];
     const warnings = [];
-    for (const script of artifacts.Scripts) {
-      if (!script.content) continue;
+    for (const script of artifacts.ScriptElements) {
+      const {src, content} = script;
+      if (!content) continue;
 
       const networkRecord = getRequestForScript(networkRecords, script);
-
-      const displayUrl = isInline(script) ?
-        `inline: ${script.content.substring(0, 40)}...` :
-        script.url;
+      const displayUrl = !src || !networkRecord ?
+        `inline: ${content.substr(0, 40)}...` :
+        networkRecord.url;
       try {
-        const result = UnminifiedJavaScript.computeWaste(script.content, displayUrl, networkRecord);
+        const result = UnminifiedJavaScript.computeWaste(content, displayUrl, networkRecord);
         // If the ratio is minimal, the file is likely already minified, so ignore it.
         // If the total number of bytes to be saved is quite small, it's also safe to ignore.
         if (result.wastedPercent < IGNORE_THRESHOLD_IN_PERCENT ||
@@ -96,7 +96,8 @@ class UnminifiedJavaScript extends ByteEfficiencyAudit {
           !Number.isFinite(result.wastedBytes)) continue;
         items.push(result);
       } catch (err) {
-        warnings.push(`Unable to process script ${script.url}: ${err.message}`);
+        const url = networkRecord ? networkRecord.url : '?';
+        warnings.push(`Unable to process script ${url}: ${err.message}`);
       }
     }
 

package/lighthouse-core/audits/byte-efficiency/unused-css-rules.js

@@ -47,6 +47,7 @@ class UnusedCSSRules extends ByteEfficiencyAudit {
   static async audit_(artifacts, _, context) {
     const unusedCssItems = await UnusedCSS.request({
       CSSUsage: artifacts.CSSUsage,
+      URL: artifacts.URL,
       devtoolsLog: artifacts.devtoolsLogs[ByteEfficiencyAudit.DEFAULT_PASS],
     }, context);
     const items = unusedCssItems

package/lighthouse-core/audits/byte-efficiency/unused-javascript.js

@@ -68,8 +68,8 @@ class UnusedJavaScript extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['JsUsage', 'Scripts', 'SourceMaps', 'GatherContext',
-        'devtoolsLogs', 'traces', 'URL'],
+      requiredArtifacts: ['JsUsage', 'ScriptElements', 'SourceMaps', 'GatherContext',
+        'devtoolsLogs', 'traces'],
     };
   }
 
@@ -87,16 +87,13 @@ class UnusedJavaScript extends ByteEfficiencyAudit {
     } = context.options || {};
 
     const items = [];
-    for (const [scriptId, scriptCoverage] of Object.entries(artifacts.JsUsage)) {
-      const script = artifacts.Scripts.find(s => s.scriptId === scriptId);
-      if (!script) continue; // This should never happen.
-
-      const networkRecord = getRequestForScript(networkRecords, script);
+    for (const [url, scriptCoverages] of Object.entries(artifacts.JsUsage)) {
+      const fakeScript = /** @type {LH.Artifacts.ScriptElement} */ ({src: url});
+      const networkRecord = getRequestForScript(networkRecords, fakeScript);
       if (!networkRecord) continue;
-
-      const bundle = bundles.find(b => b.script.scriptId === scriptId);
+      const bundle = bundles.find(b => b.script.src === url);
       const unusedJsSummary =
-        await UnusedJavaScriptSummary.request({scriptId, scriptCoverage, bundle}, context);
+        await UnusedJavaScriptSummary.request({url, scriptCoverages, bundle}, context);
       if (unusedJsSummary.wastedBytes === 0 || unusedJsSummary.totalBytes === 0) continue;
 
       const transfer = ByteEfficiencyAudit
@@ -104,7 +101,7 @@ class UnusedJavaScript extends ByteEfficiencyAudit {
       const transferRatio = transfer / unusedJsSummary.totalBytes;
       /** @type {LH.Audit.ByteEfficiencyItem} */
       const item = {
-        url: script.url,
+        url: unusedJsSummary.url,
         totalBytes: Math.round(transferRatio * unusedJsSummary.totalBytes),
         wastedBytes: Math.round(transferRatio * unusedJsSummary.wastedBytes),
         wastedPercent: unusedJsSummary.wastedPercent,

package/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js

@@ -44,7 +44,7 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
       requiredArtifacts: ['ImageElements', 'ViewportDimensions', 'GatherContext',
-        'devtoolsLogs', 'traces', 'URL'],
+        'devtoolsLogs', 'traces'],
     };
   }
 

package/lighthouse-core/audits/byte-efficiency/uses-text-compression.js

@@ -37,7 +37,7 @@ class ResponsesAreCompressed extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['ResponseCompression', 'GatherContext', 'devtoolsLogs', 'traces', 'URL'],
+      requiredArtifacts: ['ResponseCompression', 'GatherContext', 'devtoolsLogs', 'traces'],
     };
   }