lighthouse 10.2.0-dev.20230517 → 10.2.0-dev.20230519

package/core/audits/layout-shift-elements.d.ts

@@ -2,9 +2,10 @@ export default LayoutShiftElements;
 declare class LayoutShiftElements extends Audit {
     /**
      * @param {LH.Artifacts} artifacts
-     * @return {LH.Audit.Product}
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
      */
-    static audit(artifacts: LH.Artifacts): LH.Audit.Product;
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
 }
 export namespace UIStrings {
     const title: string;

package/core/audits/layout-shift-elements.js

@@ -6,6 +6,7 @@
 
 import {Audit} from './audit.js';
 import * as i18n from '../lib/i18n/i18n.js';
+import {CumulativeLayoutShift} from '../computed/metrics/cumulative-layout-shift.js';
 
 const UIStrings = {
   /** Descriptive title of a diagnostic audit that provides up to the top five elements contributing to Cumulative Layout Shift. */
@@ -34,9 +35,10 @@ class LayoutShiftElements extends Audit {
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
+  static async audit(artifacts, context) {
     const clsElements = artifacts.TraceElements
       .filter(element => element.traceEventType === 'layout-shift');
 
@@ -61,8 +63,14 @@ class LayoutShiftElements extends Audit {
         {nodeCount: clsElementData.length});
     }
 
+    const {cumulativeLayoutShift: clsSavings} =
+      await CumulativeLayoutShift.request(artifacts.traces[Audit.DEFAULT_PASS], context);
+
     return {
       score: 1,
+      metricSavings: {
+        CLS: clsSavings,
+      },
       notApplicable: details.items.length === 0,
       displayValue,
       details,

package/core/audits/seo/is-crawlable.d.ts

@@ -6,7 +6,6 @@ declare class IsCrawlable extends Audit {
     static handleMetaElement(metaElement: LH.Artifacts.MetaElement): {
         source: {
             snippet: string;
-            /** @type {Array<string|undefined>} */
             type: "node";
             lhId?: string | undefined;
             path?: string | undefined;

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

@@ -76,10 +76,6 @@ class ServerResponseTime extends Audit {
       [{url: mainResource.url, responseTime}],
       {overallSavingsMs}
     );
-    details.metricSavings = {
-      FCP: overallSavingsMs,
-      LCP: overallSavingsMs,
-    };
 
     return {
       numericValue: responseTime,
@@ -87,6 +83,10 @@ class ServerResponseTime extends Audit {
       score: Number(passed),
       displayValue,
       details,
+      metricSavings: {
+        FCP: overallSavingsMs,
+        LCP: overallSavingsMs,
+      },
     };
   }
 }

package/core/gather/driver/target-manager.d.ts

@@ -18,12 +18,15 @@ export class TargetManager extends TargetManager_base {
     constructor(cdpSession: LH.Puppeteer.CDPSession);
     _enabled: boolean;
     _rootCdpSession: import("../../../types/puppeteer.js").default.CDPSession;
+    _mainFrameId: string;
     /**
      * A map of target id to target/session information. Used to ensure unique
      * attached targets.
      * @type {Map<string, TargetWithSession>}
      */
     _targetIdToTargets: Map<string, TargetWithSession>;
+    /** @type {Map<string, LH.Crdp.Runtime.ExecutionContextDescription>} */
+    _executionContextIdToDescriptions: Map<string, LH.Crdp.Runtime.ExecutionContextDescription>;
     /**
      * @param {LH.Puppeteer.CDPSession} cdpSession
      */
@@ -32,6 +35,15 @@ export class TargetManager extends TargetManager_base {
      * @param {LH.Crdp.Page.FrameNavigatedEvent} frameNavigatedEvent
      */
     _onFrameNavigated(frameNavigatedEvent: LH.Crdp.Page.FrameNavigatedEvent): Promise<void>;
+    /**
+     * @param {LH.Crdp.Runtime.ExecutionContextCreatedEvent} event
+     */
+    _onExecutionContextCreated(event: LH.Crdp.Runtime.ExecutionContextCreatedEvent): void;
+    /**
+     * @param {LH.Crdp.Runtime.ExecutionContextDestroyedEvent} event
+     */
+    _onExecutionContextDestroyed(event: LH.Crdp.Runtime.ExecutionContextDestroyedEvent): void;
+    _onExecutionContextsCleared(): void;
     /**
      * @param {string} sessionId
      * @return {LH.Gatherer.FRProtocolSession}
@@ -42,6 +54,7 @@ export class TargetManager extends TargetManager_base {
      * @return {LH.Gatherer.FRProtocolSession}
      */
     rootSession(): LH.Gatherer.FRProtocolSession;
+    mainFrameExecutionContexts(): import("devtools-protocol").Protocol.Runtime.ExecutionContextDescription[];
     /**
      * Returns a listener for all protocol events from session, and augments the
      * event with the sessionId.

package/core/gather/driver/target-manager.js

@@ -40,6 +40,7 @@ class TargetManager extends ProtocolEventEmitter {
 
     this._enabled = false;
     this._rootCdpSession = cdpSession;
+    this._mainFrameId = '';
 
     /**
      * A map of target id to target/session information. Used to ensure unique
@@ -47,9 +48,14 @@ class TargetManager extends ProtocolEventEmitter {
      * @type {Map<string, TargetWithSession>}
      */
     this._targetIdToTargets = new Map();
+    /** @type {Map<string, LH.Crdp.Runtime.ExecutionContextDescription>} */
+    this._executionContextIdToDescriptions = new Map();
 
     this._onSessionAttached = this._onSessionAttached.bind(this);
     this._onFrameNavigated = this._onFrameNavigated.bind(this);
+    this._onExecutionContextCreated = this._onExecutionContextCreated.bind(this);
+    this._onExecutionContextDestroyed = this._onExecutionContextDestroyed.bind(this);
+    this._onExecutionContextsCleared = this._onExecutionContextsCleared.bind(this);
   }
 
   /**
@@ -97,6 +103,12 @@ class TargetManager extends ProtocolEventEmitter {
     return this._findSession(rootSessionId);
   }
 
+  mainFrameExecutionContexts() {
+    return [...this._executionContextIdToDescriptions.values()].filter(executionContext => {
+      return executionContext.auxData.frameId === this._mainFrameId;
+    });
+  }
+
   /**
    * @param {LH.Puppeteer.CDPSession} cdpSession
    */
@@ -153,6 +165,27 @@ class TargetManager extends ProtocolEventEmitter {
     }
   }
 
+  /**
+   * @param {LH.Crdp.Runtime.ExecutionContextCreatedEvent} event
+   */
+  _onExecutionContextCreated(event) {
+    if (event.context.name === '__puppeteer_utility_world__') return;
+    if (event.context.name === 'lighthouse_isolated_context') return;
+
+    this._executionContextIdToDescriptions.set(event.context.uniqueId, event.context);
+  }
+
+  /**
+   * @param {LH.Crdp.Runtime.ExecutionContextDestroyedEvent} event
+   */
+  _onExecutionContextDestroyed(event) {
+    this._executionContextIdToDescriptions.delete(event.executionContextUniqueId);
+  }
+
+  _onExecutionContextsCleared() {
+    this._executionContextIdToDescriptions.clear();
+  }
+
   /**
    * Returns a listener for all protocol events from session, and augments the
    * event with the sessionId.
@@ -183,10 +216,17 @@ class TargetManager extends ProtocolEventEmitter {
 
     this._enabled = true;
     this._targetIdToTargets = new Map();
+    this._executionContextIdToDescriptions = new Map();
 
     this._rootCdpSession.on('Page.frameNavigated', this._onFrameNavigated);
+    this._rootCdpSession.on('Runtime.executionContextCreated', this._onExecutionContextCreated);
+    this._rootCdpSession.on('Runtime.executionContextDestroyed', this._onExecutionContextDestroyed);
+    this._rootCdpSession.on('Runtime.executionContextsCleared', this._onExecutionContextsCleared);
 
     await this._rootCdpSession.send('Page.enable');
+    await this._rootCdpSession.send('Runtime.enable');
+
+    this._mainFrameId = (await this._rootCdpSession.send('Page.getFrameTree')).frameTree.frame.id;
 
     // Start with the already attached root session.
     await this._onSessionAttached(this._rootCdpSession);
@@ -197,14 +237,23 @@ class TargetManager extends ProtocolEventEmitter {
    */
   async disable() {
     this._rootCdpSession.off('Page.frameNavigated', this._onFrameNavigated);
+    this._rootCdpSession.off('Runtime.executionContextCreated', this._onExecutionContextCreated);
+    this._rootCdpSession.off('Runtime.executionContextDestroyed',
+      this._onExecutionContextDestroyed);
+    this._rootCdpSession.off('Runtime.executionContextsCleared', this._onExecutionContextsCleared);
 
     for (const {cdpSession, protocolListener} of this._targetIdToTargets.values()) {
       cdpSession.off('*', protocolListener);
       cdpSession.off('sessionattached', this._onSessionAttached);
     }
 
+    await this._rootCdpSession.send('Page.disable');
+    await this._rootCdpSession.send('Runtime.disable');
+
     this._enabled = false;
     this._targetIdToTargets = new Map();
+    this._executionContextIdToDescriptions = new Map();
+    this._mainFrameId = '';
   }
 }
 

package/core/gather/gatherers/global-listeners.js

@@ -11,6 +11,8 @@
  * around page unload, but this can be expanded in the future.
  */
 
+import log from 'lighthouse-logger';
+
 import FRGatherer from '../base-gatherer.js';
 
 class GlobalListeners extends FRGatherer {
@@ -61,30 +63,45 @@ class GlobalListeners extends FRGatherer {
   async getArtifact(passContext) {
     const session = passContext.driver.defaultSession;
 
-    // Get a RemoteObject handle to `window`.
-    const {result: {objectId}} = await session.sendCommand('Runtime.evaluate', {
-      expression: 'window',
-      returnByValue: false,
-    });
-    if (!objectId) {
-      throw new Error('Error fetching information about the global object');
-    }
+    /** @type {Array<LH.Artifacts.GlobalListener>} */
+    const listeners = [];
 
-    // And get all its listeners of interest.
-    const {listeners} = await session.sendCommand('DOMDebugger.getEventListeners', {objectId});
-    const filteredListeners = listeners.filter(GlobalListeners._filterForAllowlistedTypes)
-    .map(listener => {
-      const {type, scriptId, lineNumber, columnNumber} = listener;
-      return {
-        type,
-        scriptId,
-        lineNumber,
-        columnNumber,
-      };
-    });
+    for (const executionContext of passContext.driver.targetManager.mainFrameExecutionContexts()) {
+      // Get a RemoteObject handle to `window`.
+      let objectId;
+      try {
+        const {result} = await session.sendCommand('Runtime.evaluate', {
+          expression: 'window',
+          returnByValue: false,
+          uniqueContextId: executionContext.uniqueId,
+        });
+        if (!result.objectId) {
+          throw new Error('Error fetching information about the global object');
+        }
+        objectId = result.objectId;
+      } catch (err) {
+        // Execution context is no longer valid, but don't let that fail the gatherer.
+        log.warn('Execution context is no longer valid', executionContext, err);
+        continue;
+      }
+
+      // And get all its listeners of interest.
+      const response = await session.sendCommand('DOMDebugger.getEventListeners', {objectId});
+      for (const listener of response.listeners) {
+        if (GlobalListeners._filterForAllowlistedTypes(listener)) {
+          const {type, scriptId, lineNumber, columnNumber} = listener;
+          listeners.push({
+            type,
+            scriptId,
+            lineNumber,
+            columnNumber,
+          });
+        }
+      }
+    }
 
     // Dedupe listeners with same underlying data.
-    return this.dedupeListeners(filteredListeners);
+    return this.dedupeListeners(listeners);
   }
 }
 

package/core/legacy/gather/driver.d.ts

@@ -43,6 +43,7 @@ export class Driver implements LH.Gatherer.FRTransitionalDriver {
     private evaluateAsync;
     targetManager: {
         rootSession: () => Driver;
+        mainFrameExecutionContexts: () => LH.Crdp.Runtime.ExecutionContextDescription[];
         /**
          * Bind to *any* protocol event.
          * @param {'protocolevent'} event

package/core/legacy/gather/driver.js

@@ -101,6 +101,17 @@ class Driver {
       rootSession: () => {
         return this.defaultSession;
       },
+      // For legacy driver, only bother supporting access to the default execution context.
+      mainFrameExecutionContexts: () => {
+        // @ts-expect-error - undefined ids are OK for purposes of calling protocol commands like Runtime.evaluate.
+        return [/** @type {LH.Crdp.Runtime.ExecutionContextDescription} */({
+          id: undefined,
+          uniqueId: undefined,
+          origin: '',
+          name: '',
+          auxData: {isDefault: true, type: 'default', frameId: ''},
+        })];
+      },
       /**
        * Bind to *any* protocol event.
        * @param {'protocolevent'} event

package/core/lib/dependency-graph/simulator/network-analyzer.d.ts

@@ -58,13 +58,17 @@ export class NetworkAnalyzer {
         connectionReused?: boolean | undefined;
     }) => number | number[] | undefined): Map<string, number[]>;
     /**
-     * Estimates the observed RTT to each origin based on how long the TCP handshake took.
+     * Estimates the observed RTT to each origin based on how long the connection setup.
+     * For h1 and h2, this could includes two estimates - one for the TCP handshake, another for
+     * SSL negotiation.
+     * For h3, we get only one estimate since QUIC establishes a secure connection in a
+     * single handshake.
      * This is the most accurate and preferred method of measurement when the data is available.
      *
      * @param {LH.Artifacts.NetworkRequest[]} records
      * @return {Map<string, number[]>}
      */
-    static _estimateRTTByOriginViaTCPTiming(records: LH.Artifacts.NetworkRequest[]): Map<string, number[]>;
+    static _estimateRTTByOriginViaConnectionTiming(records: LH.Artifacts.NetworkRequest[]): Map<string, number[]>;
     /**
      * Estimates the observed RTT to each origin based on how long a download took on a fresh connection.
      * NOTE: this will tend to overestimate the actual RTT quite significantly as the download can be

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

@@ -52,11 +52,22 @@ class NetworkAnalyzer {
   static getSummary(values) {
     values.sort((a, b) => a - b);
 
+    let median;
+    if (values.length === 0) {
+      median = values[0];
+    } else if (values.length % 2 === 0) {
+      const a = values[Math.floor((values.length - 1) / 2)];
+      const b = values[Math.floor((values.length - 1) / 2) + 1];
+      median = (a + b) / 2;
+    } else {
+      median = values[Math.floor((values.length - 1) / 2)];
+    }
+
     return {
       min: values[0],
       max: values[values.length - 1],
       avg: values.reduce((a, b) => a + b, 0) / values.length,
-      median: values[Math.floor((values.length - 1) / 2)],
+      median,
     };
   }
 
@@ -114,19 +125,25 @@ class NetworkAnalyzer {
   }
 
   /**
-   * Estimates the observed RTT to each origin based on how long the TCP handshake took.
+   * Estimates the observed RTT to each origin based on how long the connection setup.
+   * For h1 and h2, this could includes two estimates - one for the TCP handshake, another for
+   * SSL negotiation.
+   * For h3, we get only one estimate since QUIC establishes a secure connection in a
+   * single handshake.
    * This is the most accurate and preferred method of measurement when the data is available.
    *
    * @param {LH.Artifacts.NetworkRequest[]} records
    * @return {Map<string, number[]>}
    */
-  static _estimateRTTByOriginViaTCPTiming(records) {
-    return NetworkAnalyzer._estimateValueByOrigin(records, ({timing, connectionReused}) => {
+  static _estimateRTTByOriginViaConnectionTiming(records) {
+    return NetworkAnalyzer._estimateValueByOrigin(records, ({timing, connectionReused, record}) => {
       if (connectionReused) return;
 
-      // If the request was SSL we get two estimates, one for the SSL negotiation and another for the
-      // regular handshake. SSL can also be more than 1 RT but assume False Start was used.
-      if (timing.sslStart > 0 && timing.sslEnd > 0) {
+      if (timing.connectEnd > 0 && timing.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) {
+        // 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;
@@ -318,7 +335,7 @@ class NetworkAnalyzer {
       useHeadersEndEstimates = true,
     } = options || {};
 
-    let estimatesByOrigin = NetworkAnalyzer._estimateRTTByOriginViaTCPTiming(records);
+    let estimatesByOrigin = NetworkAnalyzer._estimateRTTByOriginViaConnectionTiming(records);
     if (!estimatesByOrigin.size || forceCoarseEstimates) {
       estimatesByOrigin = new Map();
       const estimatesViaDownload = NetworkAnalyzer._estimateRTTByOriginViaDownloadTiming(records);

package/package.json

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

package/readme.md

@@ -399,6 +399,7 @@ Other awesome open source projects that use Lighthouse.
 * **[site-audit-seo](https://github.com/viasite/site-audit-seo)** - CLI tool for SEO site audit, crawl site, lighthouse each page. Output to console and tables in csv, xlsx, json, web or Google Drive.
 * **[webpack-lighthouse-plugin](https://github.com/addyosmani/webpack-lighthouse-plugin)** - Run Lighthouse from a Webpack build.
 * **[cypress-audit](https://github.com/mfrachet/cypress-audit)** - Run Lighthouse and Pa11y audits directly in your E2E test suites.
+* **[laravel-lighthouse](https://github.com/adityadees/laravel-lighthouse)** - Google Lighthouse wrapper for laravel framework to run Google Lighthouse CLI with custom option and can automatically save result in your server directory.
 
 ## FAQ
 

package/types/audit.d.ts

@@ -18,6 +18,7 @@ declare module Audit {
   export type Result = AuditResult.Result;
   export type ScoreDisplayMode = AuditResult.ScoreDisplayMode;
   export type ScoreDisplayModes = AuditResult.ScoreDisplayModes;
+  export type MetricSavings = AuditResult.MetricSavings;
 
   type Context = Util.Immutable<{
     /** audit options */
@@ -81,6 +82,8 @@ declare module Audit {
     details?: AuditDetails;
     /** If an audit encounters unusual execution circumstances, strings can be put in this optional array to add top-level warnings to the LHR. */
     runWarnings?: Array<IcuMessage>;
+    /** [EXPERIMENTAL] Estimates of how much this audit affects various performance metrics. Values will be in the unit of the respective metrics. */
+    metricSavings?: MetricSavings;
   }
 
   /** The Audit.Product type for audits that do not return a `numericValue`. */

package/types/gatherer.d.ts

@@ -47,6 +47,7 @@ declare module Gatherer {
     url: () => Promise<string>;
     targetManager: {
       rootSession(): FRProtocolSession;
+      mainFrameExecutionContexts(): Array<Crdp.Runtime.ExecutionContextDescription>;
       on(event: 'protocolevent', callback: (payload: Protocol.RawEventMessage) => void): void
       off(event: 'protocolevent', callback: (payload: Protocol.RawEventMessage) => void): void
     };

package/types/lhr/audit-details.d.ts

@@ -15,8 +15,6 @@ interface BaseDetails {
   overallSavingsBytes?: number;
   /** Additional information, usually used for including debug or meta information in the LHR */
   debugData?: Details.DebugData;
-  /** Estimates of how much this audit affects various performance metrics. Values will be in the unit of the respective metrics. */
-  metricSavings?: Details.MetricSavings;
 }
 
 type Details =
@@ -306,13 +304,6 @@ declare module Details {
     granularity?: number,
   }
 
-  interface MetricSavings {
-    LCP?: number;
-    FCP?: number;
-    CLS?: number;
-    TBT?: number;
-    INP?: number;
-  }
 }
 
 export default Details;

package/types/lhr/audit-result.d.ts

@@ -24,6 +24,14 @@ interface ScoreDisplayModes {
 
 type ScoreDisplayMode = ScoreDisplayModes[keyof ScoreDisplayModes];
 
+interface MetricSavings {
+  LCP?: number;
+  FCP?: number;
+  CLS?: number;
+  TBT?: number;
+  INP?: number;
+}
+
 /** Audit result returned in Lighthouse report. All audits offer a description and score of 0-1. */
 export interface Result {
   displayValue?: string;
@@ -50,8 +58,6 @@ export interface Result {
   id: string;
   /** A more detailed description that describes why the audit is important and links to Lighthouse documentation on the audit; markdown links supported. */
   description: string;
-  /** Estimates of how much this audit affects various performance metrics. Values will be in the unit of the respective metrics. */
-  metricSavings?: AuditDetails.MetricSavings;
   /** A numeric value that has a meaning specific to the audit, e.g. the number of nodes in the DOM or the timestamp of a specific load event. More information can be found in the audit details, if present. */
   numericValue?: number;
   /** The unit of `numericValue`, used when the consumer wishes to convert numericValue to a display string. */