lighthouse 9.5.0 → 9.6.3

package/lighthouse-core/audits/installable-manifest.js

@@ -97,6 +97,11 @@ const UIStrings = {
   'protocol-timeout': `Lighthouse could not determine if there was a service worker. Please try with a newer version of Chrome.`,
   /** Message logged when the web app has been uninstalled o desktop, signalling that the install banner state is being reset. */
   'pipeline-restarted': 'PWA has been uninstalled and installability checks resetting.',
+  /**
+   * @description Error message explaining that the URL of the manifest uses a scheme that is not supported on Android.
+   * @example {data:} scheme
+   */
+  'scheme-not-supported-for-webapk': 'The manifest URL scheme ({scheme}) is not supported on Android.',
 };
 /* eslint-enable max-len */
 
@@ -125,7 +130,7 @@ class InstallableManifest extends Audit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
-      requiredArtifacts: ['URL', 'WebAppManifest', 'InstallabilityErrors'],
+      requiredArtifacts: ['WebAppManifest', 'InstallabilityErrors'],
     };
   }
 
@@ -156,6 +161,17 @@ class InstallableManifest extends Audit {
       // @ts-expect-error errorIds from protocol should match up against the strings dict
       const matchingString = UIStrings[err.errorId];
 
+      if (err.errorId === 'scheme-not-supported-for-webapk') {
+        // If there was no manifest, then there will be at lest one other installability error.
+        // We can ignore this error if that's the case.
+        const manifestUrl = artifacts.WebAppManifest?.url;
+        if (!manifestUrl) continue;
+
+        const scheme = new URL(manifestUrl).protocol;
+        i18nErrors.push(str_(matchingString, {scheme}));
+        continue;
+      }
+
       // Handle an errorId we don't recognize.
       if (matchingString === undefined) {
         i18nErrors.push(str_(UIStrings.noErrorId, {errorId: err.errorId}));
@@ -195,7 +211,6 @@ class InstallableManifest extends Audit {
    *
    */
   static async audit(artifacts, context) {
-    const manifestValues = await ManifestValues.request(artifacts, context);
     const {i18nErrors, warnings} = InstallableManifest.getInstallabilityErrors(artifacts);
 
     const manifestUrl = artifacts.WebAppManifest ? artifacts.WebAppManifest.url : null;
@@ -210,10 +225,16 @@ class InstallableManifest extends Audit {
     const errorReasons = i18nErrors.map(reason => {
       return {reason};
     });
-    /** DevTools InstallabilityErrors does not emit an error unless there is a manifest, so include manifestValues's error */
-    if (manifestValues.isParseFailure) {
-      errorReasons.push({
-        reason: manifestValues.parseFailureReason});
+
+    // If InstallabilityErrors is empty, double check ManifestValues to make sure nothing was missed.
+    // InstallabilityErrors can be empty erroneously in our DevTools web tests.
+    if (!errorReasons.length) {
+      const manifestValues = await ManifestValues.request(artifacts, context);
+      if (manifestValues.isParseFailure) {
+        errorReasons.push({
+          reason: manifestValues.parseFailureReason,
+        });
+      }
     }
 
     // Include the detailed pass/fail checklist as a diagnostic.

package/lighthouse-core/audits/long-tasks.js

@@ -9,9 +9,9 @@ const Audit = require('./audit.js');
 const NetworkRecords = require('../computed/network-records.js');
 const i18n = require('../lib/i18n/i18n.js');
 const MainThreadTasks = require('../computed/main-thread-tasks.js');
-const BootupTime = require('./bootup-time.js');
 const PageDependencyGraph = require('../computed/page-dependency-graph.js');
 const LoadSimulator = require('../computed/load-simulator.js');
+const {getJavaScriptURLs, getAttributableURLForTask} = require('../lib/tracehouse/task-summary.js');
 
 /** We don't always have timing data for short tasks, if we're missing timing data. Treat it as though it were 0ms. */
 const DEFAULT_TIMING = {startTime: 0, endTime: 0, duration: 0};
@@ -77,7 +77,7 @@ class LongTasks extends Audit {
       }
     }
 
-    const jsURLs = BootupTime.getJavaScriptURLs(networkRecords);
+    const jsURLs = getJavaScriptURLs(networkRecords);
     // Only consider up to 20 long, top-level (no parent) tasks that have an explicit endTime
     const longtasks = tasks
       .map(t => {
@@ -90,7 +90,7 @@ class LongTasks extends Audit {
 
     // TODO(beytoven): Add start time that matches with the simulated throttling
     const results = longtasks.map(task => ({
-      url: BootupTime.getAttributableURLForTask(task, jsURLs),
+      url: getAttributableURLForTask(task, jsURLs),
       duration: task.duration,
       startTime: task.startTime,
     }));

package/lighthouse-core/audits/metrics/experimental-interaction-to-next-paint.js

@@ -0,0 +1,88 @@
+/**
+ * @license Copyright 2022 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+const Audit = require('../audit.js');
+const ComputedResponsivenes = require('../../computed/metrics/responsiveness.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Description of the Interaction to Next Paint metric. This description is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Interaction to Next Paint measures page responsiveness, how long it ' +
+               'takes the page to visibly respond to user input. [Learn more](https://web.dev/inp/).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+/**
+ * @fileoverview This metric gives a high-percentile measure of responsiveness to input.
+ */
+class ExperimentalInteractionToNextPaint extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'experimental-interaction-to-next-paint',
+      title: str_(i18n.UIStrings.interactionToNextPaint),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      supportedModes: ['timespan'],
+      requiredArtifacts: ['traces'],
+    };
+  }
+
+  /**
+   * @return {LH.Audit.ScoreOptions}
+   */
+  static get defaultOptions() {
+    return {
+      // https://web.dev/inp/
+      // This is using the same threshold as field tools since only supported in
+      // unsimulated user flows for now.
+      // see https://www.desmos.com/calculator/4xtrhg51th
+      p10: 200,
+      median: 500,
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const {settings} = context;
+    // TODO: responsiveness isn't yet supported by lantern.
+    if (settings.throttlingMethod === 'simulate') {
+      return {score: null, notApplicable: true};
+    }
+
+    const trace = artifacts.traces[Audit.DEFAULT_PASS];
+    const metricData = {trace, settings};
+    const interactionEvent = await ComputedResponsivenes.request(metricData, context);
+
+    // TODO: include the no-interaction state in the report instead of using n/a.
+    if (interactionEvent === null) {
+      return {score: null, notApplicable: true};
+    }
+
+    // TODO: remove workaround once 103.0.5052.0 is sufficiently released.
+    const timing = interactionEvent.name === 'FallbackTiming' ?
+        interactionEvent.duration : interactionEvent.args.data.duration;
+
+    return {
+      score: Audit.computeLogNormalScore({p10: context.options.p10, median: context.options.median},
+        timing),
+      numericValue: timing,
+      numericUnit: 'millisecond',
+      displayValue: str_(i18n.UIStrings.ms, {timeInMs: timing}),
+    };
+  }
+}
+
+module.exports = ExperimentalInteractionToNextPaint;
+module.exports.UIStrings = UIStrings;

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/audits/third-party-summary.js

@@ -6,11 +6,11 @@
 'use strict';
 
 const Audit = require('./audit.js');
-const BootupTime = require('./bootup-time.js');
 const i18n = require('../lib/i18n/i18n.js');
 const thirdPartyWeb = require('../lib/third-party-web.js');
 const NetworkRecords = require('../computed/network-records.js');
 const MainThreadTasks = require('../computed/main-thread-tasks.js');
+const {getJavaScriptURLs, getAttributableURLForTask} = require('../lib/tracehouse/task-summary.js');
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides details about the code on a web page that the user doesn't control (referred to as "third-party code"). This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -98,10 +98,10 @@ class ThirdPartySummary extends Audit {
       byURL.set(request.url, urlSummary);
     }
 
-    const jsURLs = BootupTime.getJavaScriptURLs(networkRecords);
+    const jsURLs = getJavaScriptURLs(networkRecords);
 
     for (const task of mainThreadTasks) {
-      const attributableURL = BootupTime.getAttributableURLForTask(task, jsURLs);
+      const attributableURL = getAttributableURLForTask(task, jsURLs);
 
       const urlSummary = byURL.get(attributableURL) || {...defaultSummary};
       const taskDuration = task.selfTime * cpuMultiplier;