lighthouse 12.3.0-dev.20250209 → 12.3.0-dev.20250211

package/core/audits/insights/third-parties-insight.d.ts

@@ -1,5 +1,22 @@
 export default ThirdPartiesInsight;
+export type URLSummary = {
+    transferSize: number;
+    mainThreadTime: number;
+    url: string | LH.IcuMessage;
+};
+/**
+ * @typedef URLSummary
+ * @property {number} transferSize
+ * @property {number} mainThreadTime
+ * @property {string | LH.IcuMessage} url
+ */
 declare class ThirdPartiesInsight extends Audit {
+    /**
+     * @param {LH.Artifacts.Entity} entity
+     * @param {import('@paulirish/trace_engine/models/trace/insights/ThirdParties.js').ThirdPartiesInsightModel} insight
+     * @return {Array<URLSummary>}
+     */
+    static makeSubItems(entity: LH.Artifacts.Entity, insight: import("@paulirish/trace_engine/models/trace/insights/ThirdParties.js").ThirdPartiesInsightModel): Array<URLSummary>;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context

package/core/audits/insights/third-parties-insight.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
-
 /**
  * @license
  * Copyright 2025 Google LLC
@@ -10,11 +8,18 @@ import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/ThirdPart
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
-import {adaptInsightToAuditProduct, makeNodeItemForNodeId} from './insight-audit.js';
+import {adaptInsightToAuditProduct} from './insight-audit.js';
 
 // eslint-disable-next-line max-len
 const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/ThirdParties.js', UIStrings);
 
+/**
+ * @typedef URLSummary
+ * @property {number} transferSize
+ * @property {number} mainThreadTime
+ * @property {string | LH.IcuMessage} url
+ */
+
 class ThirdPartiesInsight extends Audit {
   /**
    * @return {LH.Audit.Meta}
@@ -30,21 +35,53 @@ class ThirdPartiesInsight extends Audit {
     };
   }
 
+  /**
+   * @param {LH.Artifacts.Entity} entity
+   * @param {import('@paulirish/trace_engine/models/trace/insights/ThirdParties.js').ThirdPartiesInsightModel} insight
+   * @return {Array<URLSummary>}
+   */
+  static makeSubItems(entity, insight) {
+    const urls = [...insight.urlsByEntity.get(entity) ?? []];
+    return urls
+      .map(url => ({
+        url,
+        mainThreadTime: 0,
+        transferSize: 0,
+        ...insight.summaryByUrl.get(url),
+      }))
+      // Sort by main thread time first, then transfer size to break ties.
+      .sort((a, b) => (b.mainThreadTime - a.mainThreadTime) || (b.transferSize - a.transferSize));
+  }
+
   /**
    * @param {LH.Artifacts} artifacts
    * @param {LH.Audit.Context} context
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    // TODO: implement.
     return adaptInsightToAuditProduct(artifacts, context, 'ThirdParties', (insight) => {
+      const thirdPartyEntities = [...insight.summaryByEntity.entries()]
+        .filter((([entity, _]) => entity !== insight.firstPartyEntity));
+
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
+        /* eslint-disable max-len */
+        {key: 'entity', valueType: 'text', label: str_(UIStrings.columnThirdParty), subItemsHeading: {key: 'url', valueType: 'url'}},
+        {key: 'transferSize', granularity: 1, valueType: 'bytes', label: str_(UIStrings.columnTransferSize), subItemsHeading: {key: 'transferSize'}},
+        {key: 'mainThreadTime', granularity: 1, valueType: 'ms', label: str_(UIStrings.columnMainThreadTime), subItemsHeading: {key: 'mainThreadTime'}},
+        /* eslint-enable max-len */
       ];
       /** @type {LH.Audit.Details.Table['items']} */
-      const items = [
-      ];
-      return Audit.makeTableDetails(headings, items);
+      const items = thirdPartyEntities.map(([entity, summary]) => ({
+        entity: entity.name,
+        transferSize: summary.transferSize,
+        mainThreadTime: summary.mainThreadTime,
+        subItems: {
+          type: /** @type {const} */ ('subitems'),
+          items: ThirdPartiesInsight.makeSubItems(entity, insight),
+        },
+      }));
+      return Audit.makeTableDetails(headings, items, {isEntityGrouped: true});
     });
   }
 }

package/core/audits/mainthread-work-breakdown.js

@@ -16,7 +16,6 @@ import * as i18n from '../lib/i18n/i18n.js';
 import {MainThreadTasks} from '../computed/main-thread-tasks.js';
 import {TotalBlockingTime} from '../computed/metrics/total-blocking-time.js';
 import {Sentry} from '../lib/sentry.js';
-import {Util} from '../../shared/util.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides detail on the main thread work the browser did to load the page. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -142,7 +141,6 @@ class MainThreadWorkBreakdown extends Audit {
 
     return {
       score,
-      scoreDisplayMode: score >= Util.PASS_THRESHOLD ? Audit.SCORING_MODES.INFORMATIVE : undefined,
       numericValue: totalExecutionTime,
       numericUnit: 'millisecond',
       displayValue: str_(i18n.UIStrings.seconds, {timeInMs: totalExecutionTime}),

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

@@ -12,6 +12,7 @@ declare class IsCrawlable extends Audit {
             selector?: string;
             boundingRect?: import("../../../types/lhr/audit-details.js").default.Rect;
             nodeLabel?: string;
+            explanation?: string;
         };
     } | undefined;
     /**

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

@@ -92,7 +92,6 @@ class ServerResponseTime extends Audit {
       numericValue: responseTime,
       numericUnit: 'millisecond',
       score: Number(passed),
-      scoreDisplayMode: passed ? Audit.SCORING_MODES.INFORMATIVE : undefined,
       displayValue,
       details,
       metricSavings: {

package/core/computed/trace-engine-result.d.ts

@@ -13,6 +13,10 @@ declare class TraceEngineResult {
      * @return {Promise<LH.Artifacts.TraceEngineResult>}
      */
     static runTraceEngine(traceEvents: LH.TraceEvent[]): Promise<LH.Artifacts.TraceEngineResult>;
+    /**
+     * @param {import('@paulirish/trace_engine/models/trace/insights/types.js').TraceInsightSets} insightSets
+     */
+    static localizeInsights(insightSets: import("@paulirish/trace_engine/models/trace/insights/types.js").TraceInsightSets): void;
     /**
      * @param {{trace: LH.Trace}} data
      * @param {LH.Artifacts.ComputedContext} context

package/core/computed/trace-engine-result.js

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as i18n from '../lib/i18n/i18n.js';
 import * as TraceEngine from '../lib/trace-engine.js';
 import {makeComputedArtifact} from './computed-artifact.js';
 import {CumulativeLayoutShift} from './metrics/cumulative-layout-shift.js';
@@ -27,9 +28,96 @@ class TraceEngineResult {
     ), {});
     if (!processor.parsedTrace) throw new Error('No data');
     if (!processor.insights) throw new Error('No insights');
+    this.localizeInsights(processor.insights);
     return {data: processor.parsedTrace, insights: processor.insights};
   }
 
+  /**
+   * @param {import('@paulirish/trace_engine/models/trace/insights/types.js').TraceInsightSets} insightSets
+   */
+  static localizeInsights(insightSets) {
+    /**
+     * Execute `cb(traceEngineI18nObject)` on every i18n object, recursively. The cb return
+     * value replaces traceEngineI18nObject.
+     * @param {any} obj
+     * @param {(traceEngineI18nObject: {i18nId: string, values?: {}}) => LH.IcuMessage} cb
+     * @param {Set<object>} seen
+     */
+    function recursiveReplaceLocalizableStrings(obj, cb, seen) {
+      if (seen.has(seen)) {
+        return;
+      }
+
+      seen.add(obj);
+
+      if (obj instanceof Map) {
+        for (const [key, value] of obj) {
+          if (value && typeof value === 'object' && 'i18nId' in value) {
+            obj.set(key, cb(value));
+          } else {
+            recursiveReplaceLocalizableStrings(value, cb, seen);
+          }
+        }
+      } else if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+        Object.keys(obj).forEach(key => {
+          const value = obj[key];
+          if (value && typeof value === 'object' && 'i18nId' in value) {
+            obj[key] = cb(value);
+          } else {
+            recursiveReplaceLocalizableStrings(value, cb, seen);
+          }
+        });
+      } else if (Array.isArray(obj)) {
+        for (let i = 0; i < obj.length; i++) {
+          const value = obj[i];
+          if (value && typeof value === 'object' && 'i18nId' in value) {
+            obj[i] = cb(value);
+          } else {
+            recursiveReplaceLocalizableStrings(value, cb, seen);
+          }
+        }
+      }
+    }
+
+    for (const insightSet of insightSets.values()) {
+      for (const [name, model] of Object.entries(insightSet.model)) {
+        if (model instanceof Error) {
+          continue;
+        }
+
+        /** @type {Record<string, string>} */
+        let traceEngineUIStrings;
+        if (name in TraceEngine.Insights.Models) {
+          const nameAsKey = /** @type {keyof typeof TraceEngine.Insights.Models} */ (name);
+          traceEngineUIStrings = TraceEngine.Insights.Models[nameAsKey].UIStrings;
+        } else {
+          throw new Error(`insight missing UIStrings: ${name}`);
+        }
+
+        const key = `node_modules/@paulirish/trace_engine/models/trace/insights/${name}.js`;
+        const str_ = i18n.createIcuMessageFn(key, traceEngineUIStrings);
+
+        // Pass `{i18nId: string, values?: {}}` through Lighthouse's i18n pipeline.
+        // This is equivalent to if we directly did `str_(UIStrings.whatever, ...)`
+        recursiveReplaceLocalizableStrings(model, (traceEngineI18nObject) => {
+          let values = traceEngineI18nObject.values;
+          if (values) {
+            values = structuredClone(values);
+            for (const [key, value] of Object.entries(values)) {
+              if (value && typeof value === 'object' && '__i18nBytes' in value) {
+                // @ts-expect-error
+                values[key] = value.__i18nBytes;
+                // TODO: use an actual byte formatter. Right now, this shows the exact number of bytes.
+              }
+            }
+          }
+
+          return str_(traceEngineI18nObject.i18nId, values);
+        }, new Set());
+      }
+    }
+  }
+
   /**
    * @param {{trace: LH.Trace}} data
    * @param {LH.Artifacts.ComputedContext} context

package/core/config/default-config.js

@@ -408,20 +408,20 @@ const defaultConfig = {
         {id: 'interaction-to-next-paint', weight: 0, group: 'metrics', acronym: 'INP'},
 
         // Insight audits.
-        {id: 'cls-culprits-insight', weight: 0, group: 'hidden'},
-        {id: 'document-latency-insight', weight: 0, group: 'hidden'},
-        {id: 'dom-size-insight', weight: 0, group: 'hidden'},
-        {id: 'font-display-insight', weight: 0, group: 'hidden'},
-        {id: 'forced-reflow-insight', weight: 0, group: 'hidden'},
-        {id: 'image-delivery-insight', weight: 0, group: 'hidden'},
-        {id: 'interaction-to-next-paint-insight', weight: 0, group: 'hidden'},
-        {id: 'lcp-discovery-insight', weight: 0, group: 'hidden'},
-        {id: 'lcp-phases-insight', weight: 0, group: 'hidden'},
-        {id: 'long-critical-network-tree-insight', weight: 0, group: 'hidden'},
-        {id: 'render-blocking-insight', weight: 0, group: 'hidden'},
-        {id: 'slow-css-selector-insight', weight: 0, group: 'hidden'},
-        {id: 'third-parties-insight', weight: 0, group: 'hidden'},
-        {id: 'viewport-insight', weight: 0, group: 'hidden'},
+        {id: 'cls-culprits-insight', weight: 0, group: 'insights'},
+        {id: 'document-latency-insight', weight: 0, group: 'insights'},
+        {id: 'dom-size-insight', weight: 0, group: 'insights'},
+        {id: 'font-display-insight', weight: 0, group: 'insights'},
+        {id: 'forced-reflow-insight', weight: 0, group: 'insights'},
+        {id: 'image-delivery-insight', weight: 0, group: 'insights'},
+        {id: 'interaction-to-next-paint-insight', weight: 0, group: 'insights'},
+        {id: 'lcp-discovery-insight', weight: 0, group: 'insights'},
+        {id: 'lcp-phases-insight', weight: 0, group: 'insights'},
+        {id: 'long-critical-network-tree-insight', weight: 0, group: 'insights'},
+        {id: 'render-blocking-insight', weight: 0, group: 'insights'},
+        {id: 'slow-css-selector-insight', weight: 0, group: 'insights'},
+        {id: 'third-parties-insight', weight: 0, group: 'insights'},
+        {id: 'viewport-insight', weight: 0, group: 'insights'},
 
         // These are our "invisible" metrics. Not displayed, but still in the LHR.
         {id: 'interactive', weight: 0, group: 'hidden', acronym: 'TTI'},

package/core/gather/gatherers/trace-elements.js

@@ -92,7 +92,7 @@ class TraceElements extends BaseGatherer {
     /**
      * Execute `cb(obj, key)` on every object property (non-objects only), recursively.
      * @param {any} obj
-     * @param {(obj: Record<string, string>, key: string) => void} cb
+     * @param {(obj: Record<string, unknown>, key: string) => void} cb
      * @param {Set<object>} seen
      */
     function recursiveObjectEnumerate(obj, cb, seen) {

package/core/lib/trace-engine.d.ts

@@ -7,5 +7,6 @@ export type SaneSyntheticLayoutShift = SyntheticLayoutShift & {
 export const TraceProcessor: typeof TraceEngine.Processor.TraceProcessor;
 export const TraceHandlers: typeof TraceEngine.Handlers.ModelHandlers;
 export const RootCauses: typeof TraceEngine.RootCauses.RootCauses.RootCauses;
+export const Insights: typeof TraceEngine.Insights;
 import * as TraceEngine from '@paulirish/trace_engine';
 //# sourceMappingURL=trace-engine.d.ts.map

package/core/lib/trace-engine.js

@@ -10,9 +10,11 @@ polyfillDOMRect();
 const TraceProcessor = TraceEngine.Processor.TraceProcessor;
 const TraceHandlers = TraceEngine.Handlers.ModelHandlers;
 const RootCauses = TraceEngine.RootCauses.RootCauses.RootCauses;
+const Insights = TraceEngine.Insights;
 
 export {
   TraceProcessor,
   TraceHandlers,
   RootCauses,
+  Insights,
 };