lighthouse 12.5.1-dev.20250424 → 12.5.1-dev.20250426

package/core/audits/insights/cache-insight.js

@@ -41,20 +41,19 @@ class CacheInsight extends Audit {
         /* eslint-disable max-len */
         {key: 'url', valueType: 'url', label: str_(UIStrings.requestColumn)},
         {key: 'cacheLifetimeMs', valueType: 'ms', label: str_(UIStrings.cacheTTL), displayUnit: 'duration'},
-        {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize), displayUnit: 'kb', granularity: 1},
+        {key: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize), displayUnit: 'kb', granularity: 1},
         /* eslint-enable max-len */
       ];
-      // TODO: this should be sorting in the model.
-      const values = insight.requests.sort((a, b) =>
-        b.request.args.data.decodedBodyLength - a.request.args.data.decodedBodyLength);
+      // TODO: this should be the sorting in the model (instead it sorts by transfer size...)
+      const values = insight.requests.sort((a, b) => b.wastedBytes - a.wastedBytes);
       /** @type {LH.Audit.Details.Table['items']} */
       const items = values.map(value => ({
         url: value.request.args.data.url,
         cacheLifetimeMs: value.ttl * 1000,
-        totalBytes: value.request.args.data.encodedDataLength,
+        wastedBytes: value.wastedBytes,
       }));
       return Audit.makeTableDetails(headings, items, {
-        sortedBy: ['totalBytes'],
+        sortedBy: ['wastedBytes'],
         skipSumming: ['cacheLifetimeMs'],
       });
     });

package/core/audits/insights/cls-culprits-insight.js

@@ -58,9 +58,9 @@ class CLSCulpritsInsight extends Audit {
 
     /** @type {SubItem[]} */
     const subItems = [];
-    for (const backendNodeId of culprits.unsizedImages) {
+    for (const unsizedImage of culprits.unsizedImages) {
       subItems.push({
-        extra: makeNodeItemForNodeId(TraceElements, backendNodeId),
+        extra: makeNodeItemForNodeId(TraceElements, unsizedImage.backendNodeId),
         cause: insightStr_(InsightUIStrings.unsizedImages),
       });
     }

package/core/audits/insights/duplicated-javascript-insight.d.ts

@@ -1,4 +1,17 @@
 export default DuplicatedJavaScriptInsight;
+export type Item = LH.Audit.Details.TableItem & {
+    source: string;
+    subItems: {
+        type: "subitems";
+        items: SubItem[];
+    };
+};
+export type SubItem = {
+    url: string;
+    sourceTransferBytes: number | LH.Audit.Details.TextValue;
+};
+/** @typedef {LH.Audit.Details.TableItem & {source: string, subItems: {type: 'subitems', items: SubItem[]}}} Item */
+/** @typedef {{url: string, sourceTransferBytes: number|LH.Audit.Details.TextValue}} SubItem */
 declare class DuplicatedJavaScriptInsight extends Audit {
     /**
      * @param {LH.Artifacts} artifacts

package/core/audits/insights/duplicated-javascript-insight.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
-
 /**
  * @license
  * Copyright 2025 Google LLC
@@ -10,11 +8,14 @@ import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/Duplicate
 
 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/DuplicatedJavaScript.js', UIStrings);
 
+/** @typedef {LH.Audit.Details.TableItem & {source: string, subItems: {type: 'subitems', items: SubItem[]}}} Item */
+/** @typedef {{url: string, sourceTransferBytes: number|LH.Audit.Details.TextValue}} SubItem */
+
 class DuplicatedJavaScriptInsight extends Audit {
   /**
    * @return {LH.Audit.Meta}
@@ -26,9 +27,8 @@ class DuplicatedJavaScriptInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 2,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
-      // TODO: enable when implemented.
-      // replacesAudits: ['duplicated-javascript'],
+      requiredArtifacts: ['Trace', 'SourceMaps'],
+      replacesAudits: ['duplicated-javascript'],
     };
   }
 
@@ -38,16 +38,41 @@ class DuplicatedJavaScriptInsight extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    // TODO: implement.
     return adaptInsightToAuditProduct(artifacts, context, 'DuplicatedJavaScript', (insight) => {
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
         /* eslint-disable max-len */
+        {key: 'source', valueType: 'code', subItemsHeading: {key: 'url', valueType: 'url'}, label: str_(i18n.UIStrings.columnSource)},
+        {key: 'wastedBytes', valueType: 'bytes', subItemsHeading: {key: 'sourceTransferBytes'}, granularity: 10, label: str_(UIStrings.columnDuplicatedBytes)},
         /* eslint-enable max-len */
       ];
-      /** @type {LH.Audit.Details.Table['items']} */
-      const items = [
-      ];
+
+      const entries = [...insight.duplicationGroupedByNodeModules.entries()].slice(0, 10);
+
+      /** @type {Item[]} */
+      const items = entries.map(([source, data]) => {
+        /** @type {Item} */
+        const item = {
+          source,
+          wastedBytes: data.estimatedDuplicateBytes,
+          subItems: {
+            type: 'subitems',
+            items: [],
+          },
+        };
+
+        for (const [index, {script, attributedSize}] of data.duplicates.entries()) {
+          /** @type {SubItem} */
+          const subItem = {
+            url: script.url ?? '',
+            sourceTransferBytes: index === 0 ? {type: 'text', value: '--'} : attributedSize,
+          };
+          item.subItems.items.push(subItem);
+        }
+
+        return item;
+      });
+
       return Audit.makeTableDetails(headings, items);
     });
   }

package/core/audits/insights/insight-audit.d.ts

@@ -1,12 +1,21 @@
+export type CreateDetailsExtras = {
+    insights: import("@paulirish/trace_engine/models/trace/insights/types.js").InsightSet;
+    parsedTrace: LH.Artifacts.TraceEngineResult["data"];
+};
+/**
+ * @typedef CreateDetailsExtras
+ * @property {import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet} insights
+ * @property {LH.Artifacts.TraceEngineResult['data']} parsedTrace
+ */
 /**
  * @param {LH.Artifacts} artifacts
  * @param {LH.Audit.Context} context
  * @param {T} insightName
- * @param {(insight: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModels[T]) => LH.Audit.Details|undefined} createDetails
+ * @param {(insight: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModels[T], extras: CreateDetailsExtras) => LH.Audit.Details|undefined} createDetails
  * @template {keyof import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModelsType} T
  * @return {Promise<LH.Audit.Product>}
  */
-export function adaptInsightToAuditProduct<T extends keyof import("@paulirish/trace_engine/models/trace/insights/types.js").InsightModelsType>(artifacts: LH.Artifacts, context: LH.Audit.Context, insightName: T, createDetails: (insight: import("@paulirish/trace_engine/models/trace/insights/types.js").InsightModels[T]) => LH.Audit.Details | undefined): Promise<LH.Audit.Product>;
+export function adaptInsightToAuditProduct<T extends keyof import("@paulirish/trace_engine/models/trace/insights/types.js").InsightModelsType>(artifacts: LH.Artifacts, context: LH.Audit.Context, insightName: T, createDetails: (insight: import("@paulirish/trace_engine/models/trace/insights/types.js").InsightModels[T], extras: CreateDetailsExtras) => LH.Audit.Details | undefined): Promise<LH.Audit.Product>;
 /**
  * @param {LH.Artifacts.TraceElement[]} traceElements
  * @param {number|null|undefined} nodeId

package/core/audits/insights/insight-audit.js

@@ -9,11 +9,14 @@ import {NO_NAVIGATION} from '@paulirish/trace_engine/models/trace/types/TraceEve
 import {ProcessedTrace} from '../../computed/processed-trace.js';
 import {TraceEngineResult} from '../../computed/trace-engine-result.js';
 import {Audit} from '../audit.js';
+import * as i18n from '../../lib/i18n/i18n.js';
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, {});
 
 /**
  * @param {LH.Artifacts} artifacts
  * @param {LH.Audit.Context} context
- * @return {Promise<import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet|undefined>}
+ * @return {Promise<{insights: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet|undefined, parsedTrace: LH.Artifacts.TraceEngineResult['data']}>}
  */
 async function getInsightSet(artifacts, context) {
   const settings = context.settings;
@@ -24,20 +27,27 @@ async function getInsightSet(artifacts, context) {
 
   const navigationId = processedTrace.timeOriginEvt.args.data?.navigationId;
   const key = navigationId ?? NO_NAVIGATION;
+  const insights = traceEngineResult.insights.get(key);
 
-  return traceEngineResult.insights.get(key);
+  return {insights, parsedTrace: traceEngineResult.data};
 }
 
+/**
+ * @typedef CreateDetailsExtras
+ * @property {import('@paulirish/trace_engine/models/trace/insights/types.js').InsightSet} insights
+ * @property {LH.Artifacts.TraceEngineResult['data']} parsedTrace
+ */
+
 /**
  * @param {LH.Artifacts} artifacts
  * @param {LH.Audit.Context} context
  * @param {T} insightName
- * @param {(insight: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModels[T]) => LH.Audit.Details|undefined} createDetails
+ * @param {(insight: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModels[T], extras: CreateDetailsExtras) => LH.Audit.Details|undefined} createDetails
  * @template {keyof import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModelsType} T
  * @return {Promise<LH.Audit.Product>}
  */
 async function adaptInsightToAuditProduct(artifacts, context, insightName, createDetails) {
-  const insights = await getInsightSet(artifacts, context);
+  const {insights, parsedTrace} = await getInsightSet(artifacts, context);
   if (!insights) {
     return {
       scoreDisplayMode: Audit.SCORING_MODES.NOT_APPLICABLE,
@@ -54,7 +64,10 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
     };
   }
 
-  const details = createDetails(insight);
+  const details = createDetails(insight, {
+    parsedTrace,
+    insights,
+  });
   if (!details || (details.type === 'table' && details.headings.length === 0)) {
     return {
       scoreDisplayMode: Audit.SCORING_MODES.NOT_APPLICABLE,
@@ -73,6 +86,13 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
     metricSavings = {...metricSavings, LCP: /** @type {any} */ (0)};
   }
 
+  // TODO: consider adding a `estimatedSavingsText` to InsightModel, which can capture
+  // the exact i18n string used by RPP; and include the same est. timing savings.
+  let displayValue;
+  if (insight.wastedBytes) {
+    displayValue = str_(i18n.UIStrings.displayValueByteSavings, {wastedBytes: insight.wastedBytes});
+  }
+
   let score;
   let scoreDisplayMode;
   if (insight.state === 'fail' || insight.state === 'pass') {
@@ -89,6 +109,7 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
     score,
     metricSavings,
     warnings: insight.warnings,
+    displayValue,
     details,
   };
 }

package/core/audits/insights/slow-css-selector-insight.js

@@ -1,5 +1,7 @@
 /* eslint-disable no-unused-vars */ // TODO: remove once implemented.
 
+// TODO: currently disabled via core/scripts/generate-insight-audits.js. Ignore for now.
+
 /**
  * @license
  * Copyright 2025 Google LLC

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

@@ -13,9 +13,10 @@ export type URLSummary = {
 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>}
+     * @param {import('@paulirish/trace_engine/models/trace/extras/ThirdParties.js').URLSummary[]} urlSummaries
+     * @return {URLSummary[]}
      */
+    static makeSubItems(entity: LH.Artifacts.Entity, urlSummaries: import("@paulirish/trace_engine/models/trace/extras/ThirdParties.js").URLSummary[]): URLSummary[];
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context

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

@@ -5,6 +5,7 @@
  */
 
 import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/ThirdParties.js';
+import {summarizeByURL} from '@paulirish/trace_engine/models/trace/extras/ThirdParties.js';
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
@@ -38,21 +39,20 @@ class ThirdPartiesInsight extends Audit {
 
   /**
    * @param {LH.Artifacts.Entity} entity
-   * @param {import('@paulirish/trace_engine/models/trace/insights/ThirdParties.js').ThirdPartiesInsightModel} insight
-   * @return {Array<URLSummary>}
+   * @param {import('@paulirish/trace_engine/models/trace/extras/ThirdParties.js').URLSummary[]} urlSummaries
+   * @return {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));
-  // }
+  static makeSubItems(entity, urlSummaries) {
+    urlSummaries = urlSummaries.filter(s => s.entity === entity);
+    return urlSummaries.filter(s => s.entity === entity)
+      .map(s => ({
+        url: s.url,
+        mainThreadTime: s.mainThreadTime,
+        transferSize: s.transferSize,
+      }))
+      // 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
@@ -60,8 +60,10 @@ class ThirdPartiesInsight extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    return adaptInsightToAuditProduct(artifacts, context, 'ThirdParties', (insight) => {
-      const thirdPartySummaries = insight.summaries
+    return adaptInsightToAuditProduct(artifacts, context, 'ThirdParties', (insight, extras) => {
+      const urlSummaries = summarizeByURL(extras.parsedTrace, extras.insights.bounds);
+
+      const thirdPartySummaries = insight.entitySummaries
         .filter(summary => summary.entity !== insight.firstPartyEntity || null)
         .sort((a, b) => b.mainThreadTime - a.mainThreadTime);
 
@@ -77,13 +79,12 @@ class ThirdPartiesInsight extends Audit {
       const items = thirdPartySummaries.map((summary) => {
         return {
           entity: summary.entity.name,
-          transferSize: summary.transferSize,
           mainThreadTime: summary.mainThreadTime,
-          // TODO: fix this! we lost all the data ... https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6341914
-          // subItems: {
-          //   type: /** @type {const} */ ('subitems'),
-          //   items: ThirdPartiesInsight.makeSubItems(summary.entity, insight),
-          // },
+          transferSize: summary.transferSize,
+          subItems: {
+            type: /** @type {const} */ ('subitems'),
+            items: ThirdPartiesInsight.makeSubItems(summary.entity, urlSummaries),
+          },
         };
       });
       return Audit.makeTableDetails(headings, items, {isEntityGrouped: true});

package/core/audits/layout-shifts.js

@@ -97,9 +97,9 @@ class LayoutShifts extends Audit {
       /** @type {SubItem[]} */
       const subItems = [];
       if (rootCauses) {
-        for (const backendNodeId of rootCauses.unsizedImages) {
+        for (const unsizedImage of rootCauses.unsizedImages) {
           const element = artifacts.TraceElements.find(
-            t => t.traceEventType === 'trace-engine' && t.nodeId === backendNodeId);
+            t => t.traceEventType === 'trace-engine' && t.nodeId === unsizedImage.backendNodeId);
           subItems.push({
             extra: element ? Audit.makeNodeItem(element.node) : undefined,
             cause: str_(UIStrings.rootCauseUnsizedMedia),

package/core/audits/third-party-cookies.js

@@ -18,7 +18,7 @@ const UIStrings = {
   /** Title of a Lighthouse audit that provides detail on the use of third party cookies. This descriptive title is shown to users when the page uses third party cookies. */
   failureTitle: 'Uses third-party cookies',
   /** Description of a Lighthouse audit that tells the user why they should not use third party cookies on their page. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
-  description: 'Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies. [Learn more about third-party cookies](https://developers.google.com/privacy-sandbox/cookies).',
+  description: 'Third-party cookies may be blocked in some contexts. [Learn more about preparing for third-party cookie restrictions](https://privacysandbox.google.com/cookies/prepare/overview).',
   /** [ICU Syntax] Label for the audit identifying the number of third-party cookies. */
   displayValue: `{itemCount, plural,
     =1 {1 cookie found}

package/core/config/default-config.js

@@ -326,7 +326,6 @@ const defaultConfig = {
     'insights/modern-http-insight',
     'insights/network-dependency-tree-insight',
     'insights/render-blocking-insight',
-    'insights/slow-css-selector-insight',
     'insights/third-parties-insight',
     'insights/viewport-insight',
   ],
@@ -429,7 +428,6 @@ const defaultConfig = {
         {id: 'modern-http-insight', weight: 0, group: 'hidden'},
         {id: 'network-dependency-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'},
 

package/core/config/experimental-config.js

@@ -42,7 +42,6 @@ const config = {
         {id: 'modern-http-insight', weight: 0, group: 'insights'},
         {id: 'network-dependency-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'},
       ],

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

@@ -132,15 +132,15 @@ class TraceElements extends BaseGatherer {
     /** @type {number[]} */
     const nodeIds = [];
     recursiveObjectEnumerate(insightSet.model, (val, key) => {
-      const keys = ['nodeId', 'node_id'];
+      const keys = ['nodeId', 'node_id', 'backendNodeId'];
       if (typeof val === 'number' && keys.includes(key)) {
         nodeIds.push(val);
       }
     }, new Set());
 
-    // TODO: would be better if unsizedImages was `Array<{nodeId}>`.
+    // TODO: handle digging into Map in recursiveObjectEnumerate.
     for (const shift of insightSet.model.CLSCulprits.shifts.values()) {
-      nodeIds.push(...shift.unsizedImages);
+      nodeIds.push(...shift.unsizedImages.map(s => s.backendNodeId));
     }
 
     return [...new Set(nodeIds)].map(id => ({nodeId: id}));