lighthouse 10.2.0-dev.20230611 → 10.2.0-dev.20230612

package/cli/test/smokehouse/__snapshots__/report-assert-test.js.snap

@@ -3,7 +3,7 @@
 exports[`getAssertionReport works (multiple failing) 1`] = `
 "X difference at cumulative-layout-shift audit.details.items.length
               expected: []
-                 found: [{\\"cumulativeLayoutShiftMainFrame\\":0.13570762803819444,\\"totalCumulativeLayoutShift\\":0.13570762803819444}]
+                 found: [{\\"cumulativeLayoutShiftMainFrame\\":0.13570762803819444}]
 
 
   X difference at cumulative-layout-shift audit.details.blah
@@ -24,8 +24,7 @@ exports[`getAssertionReport works (multiple failing) 1`] = `
           \\"type\\": \\"debugdata\\",
           \\"items\\": [
             {
-              \\"cumulativeLayoutShiftMainFrame\\": 0.13570762803819444,
-              \\"totalCumulativeLayoutShift\\": 0.13570762803819444
+              \\"cumulativeLayoutShiftMainFrame\\": 0.13570762803819444
             }
           ]
         }
@@ -35,7 +34,7 @@ exports[`getAssertionReport works (multiple failing) 1`] = `
 exports[`getAssertionReport works (trivial failing) 1`] = `
 "X difference at cumulative-layout-shift audit.details.items.length
               expected: []
-                 found: [{\\"cumulativeLayoutShiftMainFrame\\":0.13570762803819444,\\"totalCumulativeLayoutShift\\":0.13570762803819444}]
+                 found: [{\\"cumulativeLayoutShiftMainFrame\\":0.13570762803819444}]
 
           found result:
       {
@@ -51,8 +50,7 @@ exports[`getAssertionReport works (trivial failing) 1`] = `
           \\"type\\": \\"debugdata\\",
           \\"items\\": [
             {
-              \\"cumulativeLayoutShiftMainFrame\\": 0.13570762803819444,
-              \\"totalCumulativeLayoutShift\\": 0.13570762803819444
+              \\"cumulativeLayoutShiftMainFrame\\": 0.13570762803819444
             }
           ]
         }

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

@@ -1,11 +1,23 @@
 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}
+     */
+    static makeElementTable(artifacts: LH.Artifacts): LH.Audit.Details.Table | undefined;
+    /**
+     * @param {number} metricLcp
+     * @param {LH.Artifacts.MetricComputationDataInput} metricComputationData
      * @param {LH.Audit.Context} context
-     * @return {Promise<LH.Audit.Details.Table|undefined>}
+     * @return {Promise<LH.Audit.Details.Table>}
      */
-    static makePhaseTable(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Details.Table | undefined>;
+    static makePhaseTable(metricLcp: number, metricComputationData: LH.Artifacts.MetricComputationDataInput, context: LH.Audit.Context): Promise<LH.Audit.Details.Table>;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context

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

@@ -50,19 +50,44 @@ class LargestContentfulPaintElement extends Audit {
   }
 
   /**
-   * @param {LH.Artifacts} artifacts
+   * @param {LH.Artifacts.MetricComputationDataInput} metricComputationData
    * @param {LH.Audit.Context} context
-   * @return {Promise<LH.Audit.Details.Table|undefined>}
+   * @return {Promise<number|undefined>}
    */
-  static async makePhaseTable(artifacts, context) {
-    const trace = artifacts.traces[Audit.DEFAULT_PASS];
-    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const gatherContext = artifacts.GatherContext;
-    const metricComputationData = {trace, devtoolsLog, gatherContext,
-      settings: context.settings, URL: artifacts.URL};
+  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}
+   */
+  static makeElementTable(artifacts) {
+    const lcpElement = artifacts.TraceElements
+      .find(element => element.traceEventType === 'largest-contentful-paint');
+    if (!lcpElement) return;
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'node', valueType: 'node', label: str_(i18n.UIStrings.columnElement)},
+    ];
 
-    const {timing: metricLcp} =
-      await LargestContentfulPaint.request(metricComputationData, context);
+    const lcpElementDetails = [{node: Audit.makeNodeItem(lcpElement.node)}];
+
+    return Audit.makeTableDetails(headings, lcpElementDetails);
+  }
+
+  /**
+   * @param {number} metricLcp
+   * @param {LH.Artifacts.MetricComputationDataInput} metricComputationData
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Details.Table>}
+   */
+  static async makePhaseTable(metricLcp, metricComputationData, context) {
     const {ttfb, loadStart, loadEnd} = await LCPBreakdown.request(metricComputationData, context);
 
     let loadDelay = 0;
@@ -102,36 +127,29 @@ class LargestContentfulPaintElement extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    const lcpElement = artifacts.TraceElements
-      .find(element => element.traceEventType === 'largest-contentful-paint');
-    const lcpElementDetails = [];
-    if (lcpElement) {
-      lcpElementDetails.push({
-        node: Audit.makeNodeItem(lcpElement.node),
-      });
-    }
-
-    /** @type {LH.Audit.Details.Table['headings']} */
-    const headings = [
-      {key: 'node', valueType: 'node', label: str_(i18n.UIStrings.columnElement)},
-    ];
+    const trace = artifacts.traces[Audit.DEFAULT_PASS];
+    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const gatherContext = artifacts.GatherContext;
+    const metricComputationData = {trace, devtoolsLog, gatherContext,
+      settings: context.settings, URL: artifacts.URL};
 
-    const elementTable = Audit.makeTableDetails(headings, lcpElementDetails);
+    const elementTable = this.makeElementTable(artifacts);
+    if (!elementTable) return {score: null, notApplicable: true};
 
     const items = [elementTable];
-    if (elementTable.items.length) {
-      const phaseTable = await this.makePhaseTable(artifacts, context);
-      if (phaseTable) items.push(phaseTable);
+    let displayValue;
+
+    const metricLcp = await this.getOptionalLCPMetric(metricComputationData, context);
+    if (metricLcp) {
+      displayValue = str_(i18n.UIStrings.ms, {timeInMs: metricLcp});
+      const phaseTable = await this.makePhaseTable(metricLcp, metricComputationData, context);
+      items.push(phaseTable);
     }
 
     const details = Audit.makeListDetails(items);
 
-    const displayValue = str_(i18n.UIStrings.displayValueElementsFound,
-      {nodeCount: lcpElementDetails.length});
-
     return {
       score: 1,
-      notApplicable: lcpElementDetails.length === 0,
       displayValue,
       details,
     };

package/core/audits/metrics.js

@@ -11,10 +11,8 @@ import {TimingSummary} from '../computed/metrics/timing-summary.js';
 const DECIMAL_METRIC_KEYS = new Set([
   'cumulativeLayoutShift',
   'cumulativeLayoutShiftMainFrame',
-  'totalCumulativeLayoutShift',
   'observedCumulativeLayoutShift',
   'observedCumulativeLayoutShiftMainFrame',
-  'observedTotalCumulativeLayoutShift',
 ]);
 
 class Metrics extends Audit {

package/core/audits/server-response-time.js

@@ -46,7 +46,7 @@ class ServerResponseTime extends Audit {
    */
   static calculateResponseTime(record) {
     const timing = record.timing;
-    return timing ? timing.receiveHeadersEnd - timing.sendEnd : 0;
+    return timing ? timing.receiveHeadersStart - timing.sendEnd : 0;
   }
 
   /**

package/core/computed/metrics/cumulative-layout-shift.d.ts

@@ -11,7 +11,6 @@ declare const CumulativeLayoutShiftComputed: typeof CumulativeLayoutShift & {
     }>) => Promise<{
         cumulativeLayoutShift: number;
         cumulativeLayoutShiftMainFrame: number;
-        totalCumulativeLayoutShift: number;
     }>;
 };
 declare class CumulativeLayoutShift {
@@ -33,21 +32,14 @@ declare class CumulativeLayoutShift {
      * @return {number}
      */
     static calculate(layoutShiftEvents: Array<LayoutShiftEvent>): number;
-    /**
-     * Sum all layout shift events from the entire trace.
-     * @param {Array<LayoutShiftEvent>} layoutShiftEvents
-     * @return {number}
-     */
-    static calculateTotalCumulativeLayoutShift(layoutShiftEvents: Array<LayoutShiftEvent>): number;
     /**
      * @param {LH.Trace} trace
      * @param {LH.Artifacts.ComputedContext} context
-     * @return {Promise<{cumulativeLayoutShift: number, cumulativeLayoutShiftMainFrame: number, totalCumulativeLayoutShift: number}>}
+     * @return {Promise<{cumulativeLayoutShift: number, cumulativeLayoutShiftMainFrame: number}>}
      */
     static compute_(trace: LH.Trace, context: LH.Artifacts.ComputedContext): Promise<{
         cumulativeLayoutShift: number;
         cumulativeLayoutShiftMainFrame: number;
-        totalCumulativeLayoutShift: number;
     }>;
 }
 import { ProcessedTrace } from '../processed-trace.js';

package/core/computed/metrics/cumulative-layout-shift.js

@@ -101,19 +101,10 @@ class CumulativeLayoutShift {
     return maxScore;
   }
 
-  /**
-   * Sum all layout shift events from the entire trace.
-   * @param {Array<LayoutShiftEvent>} layoutShiftEvents
-   * @return {number}
-   */
-  static calculateTotalCumulativeLayoutShift(layoutShiftEvents) {
-    return layoutShiftEvents.reduce((sum, e) => sum += e.weightedScore, 0);
-  }
-
   /**
    * @param {LH.Trace} trace
    * @param {LH.Artifacts.ComputedContext} context
-   * @return {Promise<{cumulativeLayoutShift: number, cumulativeLayoutShiftMainFrame: number, totalCumulativeLayoutShift: number}>}
+   * @return {Promise<{cumulativeLayoutShift: number, cumulativeLayoutShiftMainFrame: number}>}
    */
   static async compute_(trace, context) {
     const processedTrace = await ProcessedTrace.request(trace, context);
@@ -122,14 +113,9 @@ class CumulativeLayoutShift {
         CumulativeLayoutShift.getLayoutShiftEvents(processedTrace);
     const mainFrameShiftEvents = allFrameShiftEvents.filter(e => e.isMainFrame);
 
-    // The original Cumulative Layout Shift metric, the sum of all main-frame shift events.
-    const totalCumulativeLayoutShift =
-        CumulativeLayoutShift.calculateTotalCumulativeLayoutShift(mainFrameShiftEvents);
-
     return {
       cumulativeLayoutShift: CumulativeLayoutShift.calculate(allFrameShiftEvents),
       cumulativeLayoutShiftMainFrame: CumulativeLayoutShift.calculate(mainFrameShiftEvents),
-      totalCumulativeLayoutShift,
     };
   }
 }

package/core/computed/metrics/time-to-first-byte.js

@@ -41,15 +41,17 @@ class TimeToFirstByte extends NavigationMetric {
    * @return {Promise<LH.Artifacts.Metric>}
    */
   static async computeObservedMetric(data, context) {
-    const {processedNavigation} = data;
-    const timeOriginTs = processedNavigation.timestamps.timeOrigin;
     const mainResource = await MainResource.request(data, context);
+    if (!mainResource.timing) {
+      throw new Error('missing timing for main resource');
+    }
 
-    // Technically TTFB is the start of the response headers not the end.
-    // That signal isn't available to us so we use header end time as a best guess.
-    const timestamp = mainResource.responseHeadersEndTime * 1000;
+    const {processedNavigation} = data;
+    const timeOriginTs = processedNavigation.timestamps.timeOrigin;
+    const timestampMs =
+      mainResource.timing.requestTime * 1000 + mainResource.timing.receiveHeadersStart;
+    const timestamp = timestampMs * 1000;
     const timing = (timestamp - timeOriginTs) / 1000;
-
     return {timing, timestamp};
   }
 }

package/core/computed/metrics/timing-summary.js

@@ -65,7 +65,6 @@ class TimingSummary {
     const {
       cumulativeLayoutShift,
       cumulativeLayoutShiftMainFrame,
-      totalCumulativeLayoutShift,
     } = cumulativeLayoutShiftValues || {};
 
     /** @type {LH.Artifacts.TimingSummary} */
@@ -89,7 +88,6 @@ class TimingSummary {
       maxPotentialFID: maxPotentialFID?.timing,
       cumulativeLayoutShift,
       cumulativeLayoutShiftMainFrame,
-      totalCumulativeLayoutShift,
 
       lcpLoadStart: lcpBreakdown?.loadStart,
       lcpLoadEnd: lcpBreakdown?.loadEnd,
@@ -123,7 +121,6 @@ class TimingSummary {
       observedDomContentLoadedTs: processedNavigation?.timestamps.domContentLoaded,
       observedCumulativeLayoutShift: cumulativeLayoutShift,
       observedCumulativeLayoutShiftMainFrame: cumulativeLayoutShiftMainFrame,
-      observedTotalCumulativeLayoutShift: totalCumulativeLayoutShift,
 
       // Include some visual metrics from speedline
       observedFirstVisualChange: speedline.first,

package/core/lib/dependency-graph/simulator/network-analyzer.js

@@ -139,14 +139,15 @@ class NetworkAnalyzer {
     return NetworkAnalyzer._estimateValueByOrigin(records, ({timing, connectionReused, record}) => {
       if (connectionReused) return;
 
-      if (timing.connectEnd > 0 && timing.connectStart > 0 && record.protocol.startsWith('h3')) {
+      const {connectStart, sslStart, sslEnd, connectEnd} = timing;
+      if (connectEnd >= 0 && connectStart >= 0 && record.protocol.startsWith('h3')) {
         // These values are equal to sslStart and sslEnd for h3.
-        return timing.connectEnd - timing.connectStart;
-      } else if (timing.sslStart > 0 && timing.sslEnd > 0) {
+        return connectEnd - connectStart;
+      } else if (sslStart >= 0 && sslEnd >= 0 && sslStart !== connectStart) {
         // SSL can also be more than 1 RT but assume False Start was used.
-        return [timing.connectEnd - timing.sslStart, timing.sslStart - timing.connectStart];
-      } else if (timing.connectStart > 0 && timing.connectEnd > 0) {
-        return timing.connectEnd - timing.connectStart;
+        return [connectEnd - sslStart, sslStart - connectStart];
+      } else if (connectStart >= 0 && connectEnd >= 0) {
+        return connectEnd - connectStart;
       }
     });
   }

package/core/lib/network-request.d.ts

@@ -219,6 +219,13 @@ export class NetworkRequest {
      * LR loses protocol information.
      */
     _updateProtocolForLightrider(): void;
+    /**
+     * TODO(compat): remove M116.
+     * `timing.receiveHeadersStart` was added recently, and will be in M116. Until then,
+     * set it to receiveHeadersEnd, which is close enough, to allow consumers of NetworkRequest
+     * to use the new field without accounting for this backcompat.
+     */
+    _backfillReceiveHeaderStartTiming(): void;
     /**
      * LR gets additional, accurate timing information from its underlying fetch infrastructure.  This
      * is passed in via X-Headers similar to 'X-TotalFetchedSize'.

package/core/lib/network-request.js

@@ -274,6 +274,7 @@ class NetworkRequest {
     }
 
     this._updateResponseHeadersEndTimeIfNecessary();
+    this._backfillReceiveHeaderStartTiming();
     this._updateTransferSizeForLightrider();
     this._updateTimingsForLightrider();
   }
@@ -293,6 +294,7 @@ class NetworkRequest {
     this.localizedFailDescription = data.errorText;
 
     this._updateResponseHeadersEndTimeIfNecessary();
+    this._backfillReceiveHeaderStartTiming();
     this._updateTransferSizeForLightrider();
     this._updateTimingsForLightrider();
   }
@@ -315,6 +317,7 @@ class NetworkRequest {
     this.networkEndTime = data.timestamp * 1000;
 
     this._updateResponseHeadersEndTimeIfNecessary();
+    this._backfillReceiveHeaderStartTiming();
   }
 
   /**
@@ -449,6 +452,19 @@ class NetworkRequest {
     }
   }
 
+  /**
+   * TODO(compat): remove M116.
+   * `timing.receiveHeadersStart` was added recently, and will be in M116. Until then,
+   * set it to receiveHeadersEnd, which is close enough, to allow consumers of NetworkRequest
+   * to use the new field without accounting for this backcompat.
+   */
+  _backfillReceiveHeaderStartTiming() {
+    // Do nothing if a value is already present!
+    if (!this.timing || this.timing.receiveHeadersStart !== undefined) return;
+
+    this.timing.receiveHeadersStart = this.timing.receiveHeadersEnd;
+  }
+
   /**
    * LR gets additional, accurate timing information from its underlying fetch infrastructure.  This
    * is passed in via X-Headers similar to 'X-TotalFetchedSize'.

package/package.json

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

package/types/artifacts.d.ts

@@ -802,7 +802,6 @@ declare module Artifacts {
     maxPotentialFID: number | undefined;
     cumulativeLayoutShift: number | undefined;
     cumulativeLayoutShiftMainFrame: number | undefined;
-    totalCumulativeLayoutShift: number | undefined;
     totalBlockingTime: number | undefined;
     observedTimeOrigin: number;
     observedTimeOriginTs: number;
@@ -810,7 +809,6 @@ declare module Artifacts {
     observedNavigationStartTs: number | undefined;
     observedCumulativeLayoutShift: number | undefined;
     observedCumulativeLayoutShiftMainFrame: number | undefined;
-    observedTotalCumulativeLayoutShift: number | undefined;
     observedFirstPaint: number | undefined;
     observedFirstPaintTs: number | undefined;
     observedFirstContentfulPaint: number | undefined;