lighthouse 10.4.0-dev.20230801 → 10.4.0-dev.20230802

package/core/audits/dobetterweb/uses-http2.d.ts

@@ -2,12 +2,29 @@ export default UsesHTTP2Audit;
 export type Simulator = import('../../lib/dependency-graph/simulator/simulator').Simulator;
 export type Node = import('../../lib/dependency-graph/base-node.js').Node;
 declare class UsesHTTP2Audit extends Audit {
+    /**
+     * Computes the estimated effect of all results being converted to http/2 on the provided graph.
+     *
+     * @param {Array<{url: string}>} results
+     * @param {Node} graph
+     * @param {Simulator} simulator
+     * @param {{label?: string}=} options
+     * @return {{savings: number, simulationBefore: LH.Gatherer.Simulation.Result, simulationAfter: LH.Gatherer.Simulation.Result}}
+     */
+    static computeWasteWithGraph(results: Array<{
+        url: string;
+    }>, graph: Node, simulator: Simulator, options?: {
+        label?: string;
+    } | undefined): {
+        savings: number;
+        simulationBefore: LH.Gatherer.Simulation.Result;
+        simulationAfter: LH.Gatherer.Simulation.Result;
+    };
     /**
      * Computes the estimated effect all results being converted to use http/2, the max of:
      *
      * - end time of the last long task in the provided graph
      * - end time of the last node in the graph
-     *
      * @param {Array<{url: string}>} results
      * @param {Node} graph
      * @param {Simulator} simulator

package/core/audits/dobetterweb/uses-http2.js

@@ -21,6 +21,8 @@ import {NetworkRequest} from '../../lib/network-request.js';
 import {NetworkRecords} from '../../computed/network-records.js';
 import {LoadSimulator} from '../../computed/load-simulator.js';
 import {PageDependencyGraph} from '../../computed/page-dependency-graph.js';
+import {LanternLargestContentfulPaint} from '../../computed/metrics/lantern-largest-contentful-paint.js';
+import {LanternFirstContentfulPaint} from '../../computed/metrics/lantern-first-contentful-paint.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 
 const UIStrings = {
@@ -66,23 +68,23 @@ class UsesHTTP2Audit extends Audit {
   }
 
   /**
-   * Computes the estimated effect all results being converted to use http/2, the max of:
-   *
-   * - end time of the last long task in the provided graph
-   * - end time of the last node in the graph
+   * Computes the estimated effect of all results being converted to http/2 on the provided graph.
    *
    * @param {Array<{url: string}>} results
    * @param {Node} graph
    * @param {Simulator} simulator
-   * @return {number}
+   * @param {{label?: string}=} options
+   * @return {{savings: number, simulationBefore: LH.Gatherer.Simulation.Result, simulationAfter: LH.Gatherer.Simulation.Result}}
    */
-  static computeWasteWithTTIGraph(results, graph, simulator) {
-    const beforeLabel = `uses-http2-before`;
-    const afterLabel = `uses-http2-after`;
+  static computeWasteWithGraph(results, graph, simulator, options) {
+    options = Object.assign({label: ''}, options);
+    const beforeLabel = `${this.meta.id}-${options.label}-before`;
+    const afterLabel = `${this.meta.id}-${options.label}-after`;
     const flexibleOrdering = true;
 
     const urlsToChange = new Set(results.map(result => result.url));
-    const simulationBefore = simulator.simulate(graph, {label: beforeLabel, flexibleOrdering});
+    const simulationBefore =
+      simulator.simulate(graph, {label: beforeLabel, flexibleOrdering});
 
     // Update all the protocols to reflect implementing our recommendations
     /** @type {Map<string, string>} */
@@ -105,9 +107,36 @@ class UsesHTTP2Audit extends Audit {
       node.record.protocol = originalProtocol;
     });
 
-    const savingsOnOverallLoad = simulationBefore.timeInMs - simulationAfter.timeInMs;
-    const savingsOnTTI = LanternInteractive.getLastLongTaskEndTime(simulationBefore.nodeTimings) -
+    const savings = simulationBefore.timeInMs - simulationAfter.timeInMs;
+
+    return {
+      // Round waste to nearest 10ms
+      savings: Math.round(Math.max(savings, 0) / 10) * 10,
+      simulationBefore,
+      simulationAfter,
+    };
+  }
+
+  /**
+   * Computes the estimated effect all results being converted to use http/2, the max of:
+   *
+   * - end time of the last long task in the provided graph
+   * - end time of the last node in the graph
+   * @param {Array<{url: string}>} results
+   * @param {Node} graph
+   * @param {Simulator} simulator
+   * @return {number}
+   */
+  static computeWasteWithTTIGraph(results, graph, simulator) {
+    const {savings: savingsOnOverallLoad, simulationBefore, simulationAfter} =
+      this.computeWasteWithGraph(results, graph, simulator, {
+        label: 'tti',
+      });
+
+    const savingsOnTTI =
+      LanternInteractive.getLastLongTaskEndTime(simulationBefore.nodeTimings) -
       LanternInteractive.getLastLongTaskEndTime(simulationAfter.nodeTimings);
+
     const savings = Math.max(savingsOnTTI, savingsOnOverallLoad);
 
     // Round waste to nearest 10ms
@@ -237,9 +266,25 @@ class UsesHTTP2Audit extends Audit {
       devtoolsLog,
       settings,
     };
-    const graph = await PageDependencyGraph.request({trace, devtoolsLog, URL}, context);
+    const pageGraph = await PageDependencyGraph.request({trace, devtoolsLog, URL}, context);
     const simulator = await LoadSimulator.request(simulatorOptions, context);
-    const wastedMs = UsesHTTP2Audit.computeWasteWithTTIGraph(resources, graph, simulator);
+    const metricComputationInput = Audit.makeMetricComputationDataInput(artifacts, context);
+
+    const {
+      pessimisticGraph: fcpGraph,
+    } = await LanternFirstContentfulPaint.request(metricComputationInput, context);
+    const {
+      pessimisticGraph: lcpGraph,
+    } = await LanternLargestContentfulPaint.request(metricComputationInput, context);
+
+    const wastedMsTti = UsesHTTP2Audit.computeWasteWithTTIGraph(
+      resources, pageGraph, simulator);
+    const wasteFcp =
+      UsesHTTP2Audit.computeWasteWithGraph(resources,
+        fcpGraph, simulator, {label: 'fcp'});
+    const wasteLcp =
+      UsesHTTP2Audit.computeWasteWithGraph(resources,
+        lcpGraph, simulator, {label: 'lcp'});
 
     /** @type {LH.Audit.Details.Opportunity['headings']} */
     const headings = [
@@ -248,14 +293,15 @@ class UsesHTTP2Audit extends Audit {
     ];
 
     const details = Audit.makeOpportunityDetails(headings, resources,
-      {overallSavingsMs: wastedMs});
+      {overallSavingsMs: wastedMsTti});
 
     return {
       displayValue,
-      numericValue: wastedMs,
+      numericValue: wastedMsTti,
       numericUnit: 'millisecond',
-      score: ByteEfficiencyAudit.scoreForWastedMs(wastedMs),
+      score: ByteEfficiencyAudit.scoreForWastedMs(wastedMsTti),
       details,
+      metricSavings: {LCP: wasteLcp.savings, FCP: wasteFcp.savings},
     };
   }
 }

package/core/audits/largest-contentful-paint-element.d.ts

@@ -1,11 +1,5 @@
 export default LargestContentfulPaintElement;
 declare class LargestContentfulPaintElement extends Audit {
-    /**
-     * @param {LH.Artifacts.MetricComputationDataInput} metricComputationData
-     * @param {LH.Audit.Context} context
-     * @return {Promise<number|undefined>}
-     */
-    static getOptionalLCPMetric(metricComputationData: LH.Artifacts.MetricComputationDataInput, context: LH.Audit.Context): Promise<number | undefined>;
     /**
      * @param {LH.Artifacts} artifacts
      * @return {LH.Audit.Details.Table|undefined}

package/core/audits/largest-contentful-paint-element.js

@@ -4,10 +4,13 @@
  * 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.
  */
 
+import log from 'lighthouse-logger';
+
 import {Audit} from './audit.js';
 import * as i18n from '../lib/i18n/i18n.js';
 import {LargestContentfulPaint} from '../computed/metrics/largest-contentful-paint.js';
 import {LCPBreakdown} from '../computed/metrics/lcp-breakdown.js';
+import {Sentry} from '../lib/sentry.js';
 
 const UIStrings = {
   /** Descriptive title of a diagnostic audit that provides the element that was determined to be the Largest Contentful Paint. */
@@ -49,19 +52,6 @@ class LargestContentfulPaintElement extends Audit {
     };
   }
 
-  /**
-   * @param {LH.Artifacts.MetricComputationDataInput} metricComputationData
-   * @param {LH.Audit.Context} context
-   * @return {Promise<number|undefined>}
-   */
-  static async getOptionalLCPMetric(metricComputationData, context) {
-    try {
-      const {timing: metricLcp} =
-        await LargestContentfulPaint.request(metricComputationData, context);
-      return metricLcp;
-    } catch {}
-  }
-
   /**
    * @param {LH.Artifacts} artifacts
    * @return {LH.Audit.Details.Table|undefined}
@@ -139,11 +129,19 @@ class LargestContentfulPaintElement extends Audit {
     const items = [elementTable];
     let displayValue;
 
-    const metricLcp = await this.getOptionalLCPMetric(metricComputationData, context);
-    if (metricLcp) {
+    try {
+      const {timing: metricLcp} =
+        await LargestContentfulPaint.request(metricComputationData, context);
       displayValue = str_(i18n.UIStrings.ms, {timeInMs: metricLcp});
+
       const phaseTable = await this.makePhaseTable(metricLcp, metricComputationData, context);
       items.push(phaseTable);
+    } catch (err) {
+      Sentry.captureException(err, {
+        tags: {audit: this.meta.id},
+        level: 'error',
+      });
+      log.error(this.meta.id, err.message);
     }
 
     const details = Audit.makeListDetails(items);

package/core/config/constants.js

@@ -129,7 +129,7 @@ const defaultSettings = {
 
 /** @type {Required<LH.Config.NavigationJson>} */
 const defaultNavigationConfig = {
-  id: 'default',
+  id: 'defaultPass',
   loadFailureMode: 'fatal',
   disableThrottling: false,
   disableStorageReset: false,

package/core/config/default-config.js

@@ -593,12 +593,12 @@ const defaultConfig = {
       supportedModes: ['navigation', 'timespan', 'snapshot'],
       auditRefs: [
         // Trust & Safety
-        {id: 'is-on-https', weight: 1, group: 'best-practices-trust-safety'},
+        {id: 'is-on-https', weight: 5, group: 'best-practices-trust-safety'},
         {id: 'geolocation-on-start', weight: 1, group: 'best-practices-trust-safety'},
         {id: 'notification-on-start', weight: 1, group: 'best-practices-trust-safety'},
         {id: 'csp-xss', weight: 0, group: 'best-practices-trust-safety'},
         // User Experience
-        {id: 'paste-preventing-inputs', weight: 1, group: 'best-practices-ux'},
+        {id: 'paste-preventing-inputs', weight: 3, group: 'best-practices-ux'},
         {id: 'image-aspect-ratio', weight: 1, group: 'best-practices-ux'},
         {id: 'image-size-responsive', weight: 1, group: 'best-practices-ux'},
         {id: 'preload-fonts', weight: 1, group: 'best-practices-ux'},
@@ -608,7 +608,7 @@ const defaultConfig = {
         // General Group
         {id: 'no-unload-listeners', weight: 1, group: 'best-practices-general'},
         {id: 'js-libraries', weight: 0, group: 'best-practices-general'},
-        {id: 'deprecations', weight: 1, group: 'best-practices-general'},
+        {id: 'deprecations', weight: 5, group: 'best-practices-general'},
         {id: 'errors-in-console', weight: 1, group: 'best-practices-general'},
         {id: 'valid-source-maps', weight: 0, group: 'best-practices-general'},
         {id: 'inspector-issues', weight: 1, group: 'best-practices-general'},

package/core/gather/navigation-runner.js

@@ -188,8 +188,14 @@ async function _computeNavigationResult(
     /** @type {Partial<LH.GathererArtifacts>} */
     const artifacts = {};
     const pageLoadErrorId = `pageLoadError-${navigationContext.navigation.id}`;
-    if (debugData.devtoolsLog) artifacts.devtoolsLogs = {[pageLoadErrorId]: debugData.devtoolsLog};
-    if (debugData.trace) artifacts.traces = {[pageLoadErrorId]: debugData.trace};
+    if (debugData.devtoolsLog) {
+      artifacts.DevtoolsLogError = debugData.devtoolsLog;
+      artifacts.devtoolsLogs = {[pageLoadErrorId]: debugData.devtoolsLog};
+    }
+    if (debugData.trace) {
+      artifacts.TraceError = debugData.trace;
+      artifacts.traces = {[pageLoadErrorId]: debugData.trace};
+    }
 
     return {
       pageLoadError,

package/core/lib/asset-saver.js

@@ -62,6 +62,9 @@ function loadArtifacts(basePath) {
     if (passName === 'defaultPass') {
       artifacts.DevtoolsLog = devtoolsLog;
     }
+    if (passName === 'pageLoadError-defaultPass') {
+      artifacts.DevtoolsLogError = devtoolsLog;
+    }
   });
 
   // load traces
@@ -74,6 +77,9 @@ function loadArtifacts(basePath) {
     if (passName === 'defaultPass') {
       artifacts.Trace = artifacts.traces[passName];
     }
+    if (passName === 'pageLoadError-defaultPass') {
+      artifacts.TraceError = artifacts.traces[passName];
+    }
   });
 
   if (Array.isArray(artifacts.Timing)) {

package/core/lib/network-request.js

@@ -489,7 +489,7 @@ class NetworkRequest {
     // Bail if there was no totalTime.
     if (!totalHeader) return;
 
-    const totalMs = parseInt(totalHeader.value);
+    let totalMs = parseInt(totalHeader.value);
     const TCPMsHeader = this.responseHeaders.find(item => item.name === HEADER_TCP);
     const SSLMsHeader = this.responseHeaders.find(item => item.name === HEADER_SSL);
     const requestMsHeader = this.responseHeaders.find(item => item.name === HEADER_REQ);
@@ -502,11 +502,20 @@ class NetworkRequest {
     const requestMs = requestMsHeader ? Math.max(0, parseInt(requestMsHeader.value)) : 0;
     const responseMs = responseMsHeader ? Math.max(0, parseInt(responseMsHeader.value)) : 0;
 
-    // Bail if the timings don't add up.
-    if (TCPMs + requestMs + responseMs !== totalMs) {
+    if (Number.isNaN(TCPMs + requestMs + responseMs + totalMs)) {
       return;
     }
 
+    // If things don't add up, tweak the total a bit.
+    if (TCPMs + requestMs + responseMs !== totalMs) {
+      const delta = Math.abs(TCPMs + requestMs + responseMs - totalMs);
+      // We didn't see total being more than 5ms less than the total of the components.
+      // Allow some discrepancy in the timing, but not too much.
+      if (delta >= 25) return;
+
+      totalMs = TCPMs + requestMs + responseMs;
+    }
+
     // Bail if SSL time is > TCP time.
     if (SSLMs > TCPMs) {
       return;

package/core/runner.js

@@ -367,6 +367,8 @@ class Runner {
 
     let auditResult;
     try {
+      if (artifacts.PageLoadError) throw artifacts.PageLoadError;
+
       // Return an early error if an artifact required for the audit is missing or an error.
       for (const artifactName of audit.meta.requiredArtifacts) {
         const noArtifact = artifacts[artifactName] === undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "10.4.0-dev.20230801",
+  "version": "10.4.0-dev.20230802",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {

package/types/artifacts.d.ts

@@ -108,6 +108,8 @@ export interface GathererArtifacts extends PublicGathererArtifacts {
   CSSUsage: {rules: Crdp.CSS.RuleUsage[], stylesheets: Artifacts.CSSStyleSheetInfo[]};
   /** The primary log of devtools protocol activity. */
   DevtoolsLog: DevtoolsLog;
+  /** The log of devtools protocol activity if there was a page load error and Chrome navigated to a `chrome-error://` page. */
+  DevtoolsLogError: DevtoolsLog;
   /** Information on the document's doctype(or null if not present), specifically the name, publicId, and systemId.
       All properties default to an empty string if not present */
   Doctype: Artifacts.Doctype | null;
@@ -152,6 +154,8 @@ export interface GathererArtifacts extends PublicGathererArtifacts {
   TapTargets: Artifacts.TapTarget[];
   /** The primary trace taken over the entire run. */
   Trace: Trace;
+  /** The trace if there was a page load error and Chrome navigated to a `chrome-error://` page. */
+  TraceError: Trace;
   /** Elements associated with metrics (ie: Largest Contentful Paint element). */
   TraceElements: Artifacts.TraceElement[];
   /** Parsed version of the page's Web App Manifest, or null if none found. */