lighthouse 12.6.1-dev.20250624 → 12.6.1-dev.20250626

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

@@ -41,7 +41,7 @@ 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: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize), displayUnit: 'kb', granularity: 1},
+        {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize), displayUnit: 'kb', granularity: 1},
         /* eslint-enable max-len */
       ];
       // TODO: this should be the sorting in the model (instead it sorts by transfer size...)
@@ -50,6 +50,7 @@ class CacheInsight extends Audit {
       const items = values.map(value => ({
         url: value.request.args.data.url,
         cacheLifetimeMs: value.ttl * 1000,
+        totalBytes: value.request.args.data.encodedDataLength || 0,
         wastedBytes: value.wastedBytes,
       }));
       return Audit.makeTableDetails(headings, items, {

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

@@ -62,11 +62,11 @@ class CLSCulpritsInsight extends Audit {
         cause: insightStr_(InsightUIStrings.unsizedImage),
       });
     }
-    for (const request of culprits.fontRequests) {
+    for (const request of culprits.webFonts) {
       const url = request.args.data.url;
       subItems.push({
         extra: {type: 'url', value: url},
-        cause: insightStr_(InsightUIStrings.fontRequest),
+        cause: insightStr_(InsightUIStrings.webFont),
       });
     }
     for (const iframe of culprits.iframes) {

package/core/audits/insights/{interaction-to-next-paint-insight.d.ts → inp-breakdown-insight.d.ts}

@@ -1,5 +1,5 @@
-export default InteractionToNextPaintInsight;
-declare class InteractionToNextPaintInsight extends Audit {
+export default INPBreakdownInsight;
+declare class INPBreakdownInsight extends Audit {
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context
@@ -8,4 +8,4 @@ declare class InteractionToNextPaintInsight extends Audit {
     static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
 }
 import { Audit } from '../audit.js';
-//# sourceMappingURL=interaction-to-next-paint-insight.d.ts.map
+//# sourceMappingURL=inp-breakdown-insight.d.ts.map

package/core/audits/insights/{interaction-to-next-paint-insight.js → inp-breakdown-insight.js}

@@ -4,22 +4,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/InteractionToNextPaint.js';
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/INPBreakdown.js';
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {adaptInsightToAuditProduct, makeNodeItemForNodeId} from './insight-audit.js';
 
 // eslint-disable-next-line max-len
-const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/InteractionToNextPaint.js', UIStrings);
+const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/INPBreakdown.js', UIStrings);
 
-class InteractionToNextPaintInsight extends Audit {
+class INPBreakdownInsight extends Audit {
   /**
    * @return {LH.Audit.Meta}
    */
   static get meta() {
     return {
-      id: 'interaction-to-next-paint-insight',
+      id: 'inp-breakdown-insight',
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
@@ -35,7 +35,7 @@ class InteractionToNextPaintInsight extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    return adaptInsightToAuditProduct(artifacts, context, 'InteractionToNextPaint', (insight) => {
+    return adaptInsightToAuditProduct(artifacts, context, 'INPBreakdown', (insight) => {
       const event = insight.longestInteractionEvent;
       if (!event) {
         // TODO: show UIStrings.noInteractions?
@@ -44,16 +44,16 @@ class InteractionToNextPaintInsight extends Audit {
 
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
-        {key: 'label', valueType: 'text', label: str_(UIStrings.phase)},
+        {key: 'label', valueType: 'text', label: str_(UIStrings.subpart)},
         {key: 'duration', valueType: 'ms', label: str_(i18n.UIStrings.columnDuration)},
       ];
 
       /** @type {LH.Audit.Details.Table['items']} */
       const items = [
         /* eslint-disable max-len */
-        {phase: 'inputDelay', label: str_(UIStrings.inputDelay), duration: event.inputDelay / 1000},
-        {phase: 'processingDuration', label: str_(UIStrings.processingDuration), duration: event.mainThreadHandling / 1000},
-        {phase: 'presentationDelay', label: str_(UIStrings.presentationDelay), duration: event.presentationDelay / 1000},
+        {subpart: 'inputDelay', label: str_(UIStrings.inputDelay), duration: event.inputDelay / 1000},
+        {subpart: 'processingDuration', label: str_(UIStrings.processingDuration), duration: event.mainThreadHandling / 1000},
+        {subpart: 'presentationDelay', label: str_(UIStrings.presentationDelay), duration: event.presentationDelay / 1000},
         /* eslint-enable max-len */
       ];
 
@@ -65,4 +65,4 @@ class InteractionToNextPaintInsight extends Audit {
   }
 }
 
-export default InteractionToNextPaintInsight;
+export default INPBreakdownInsight;

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

@@ -108,8 +108,37 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
   // 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});
+  } else {
+    let wastedMs;
+
+    switch (insight.insightKey) {
+      case 'DocumentLatency':
+      case 'DuplicatedJavaScript':
+      case 'FontDisplay':
+      case 'LegacyJavaScript':
+      case 'RenderBlocking': {
+        wastedMs = metricSavings?.FCP;
+        break;
+      }
+
+      case 'LCPDiscovery':
+      case 'ModernHTTP': {
+        wastedMs = metricSavings?.LCP;
+        break;
+      }
+
+      case 'Viewport': {
+        wastedMs = metricSavings?.INP;
+        break;
+      }
+    }
+
+    if (wastedMs) {
+      displayValue = str_(i18n.UIStrings.displayValueMsSavings, {wastedMs});
+    }
   }
 
   let score;

package/core/audits/insights/lcp-breakdown-insight.d.ts

@@ -0,0 +1,16 @@
+export default LCPBreakdownInsight;
+declare class LCPBreakdownInsight extends Audit {
+    /**
+     * @param {Required<import('@paulirish/trace_engine/models/trace/insights/LCPBreakdown.js').LCPBreakdownInsightModel>['subparts']} subparts
+     * @return {LH.Audit.Details.Table}
+     */
+    static makeSubpartsTable(subparts: Required<import("@paulirish/trace_engine/models/trace/insights/LCPBreakdown.js").LCPBreakdownInsightModel>["subparts"]): LH.Audit.Details.Table;
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+}
+import { Audit } from '../audit.js';
+//# sourceMappingURL=lcp-breakdown-insight.d.ts.map

package/core/audits/insights/{lcp-phases-insight.js → lcp-breakdown-insight.js}

@@ -4,22 +4,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/LCPPhases.js';
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/LCPBreakdown.js';
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {adaptInsightToAuditProduct, makeNodeItemForNodeId} from './insight-audit.js';
 
 // eslint-disable-next-line max-len
-const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/LCPPhases.js', UIStrings);
+const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/LCPBreakdown.js', UIStrings);
 
-class LCPPhasesInsight extends Audit {
+class LCPBreakdownInsight extends Audit {
   /**
    * @return {LH.Audit.Meta}
    */
   static get meta() {
     return {
-      id: 'lcp-phases-insight',
+      id: 'lcp-breakdown-insight',
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
@@ -30,33 +30,33 @@ class LCPPhasesInsight extends Audit {
   }
 
   /**
-   * @param {Required<import('@paulirish/trace_engine/models/trace/insights/LCPPhases.js').LCPPhasesInsightModel>['phases']} phases
+   * @param {Required<import('@paulirish/trace_engine/models/trace/insights/LCPBreakdown.js').LCPBreakdownInsightModel>['subparts']} subparts
    * @return {LH.Audit.Details.Table}
    */
-  static makePhaseTable(phases) {
-    const {ttfb, loadDelay, loadTime, renderDelay} = phases;
+  static makeSubpartsTable(subparts) {
+    const {ttfb, loadDelay, loadDuration, renderDelay} = subparts;
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'label', valueType: 'text', label: str_(UIStrings.phase)},
+      {key: 'label', valueType: 'text', label: str_(UIStrings.subpart)},
       {key: 'duration', valueType: 'ms', label: str_(i18n.UIStrings.columnDuration)},
     ];
 
     /** @type {LH.Audit.Details.Table['items']} */
     let items = [
       /* eslint-disable max-len */
-      {phase: 'timeToFirstByte', label: str_(UIStrings.timeToFirstByte), duration: ttfb},
-      {phase: 'resourceLoadDelay', label: str_(UIStrings.resourceLoadDelay), duration: loadDelay},
-      {phase: 'resourceLoadDuration', label: str_(UIStrings.resourceLoadDuration), duration: loadTime},
-      {phase: 'elementRenderDelay', label: str_(UIStrings.elementRenderDelay), duration: renderDelay},
+      {subpart: 'timeToFirstByte', label: str_(UIStrings.timeToFirstByte), duration: ttfb.range / 1000},
+      {subpart: 'resourceLoadDelay', label: str_(UIStrings.resourceLoadDelay), duration: (loadDelay?.range ?? 0) / 1000},
+      {subpart: 'resourceLoadDuration', label: str_(UIStrings.resourceLoadDuration), duration: (loadDuration?.range ?? 0) / 1000},
+      {subpart: 'elementRenderDelay', label: str_(UIStrings.elementRenderDelay), duration: renderDelay.range / 1000},
       /* eslint-enable max-len */
     ];
 
     if (loadDelay === undefined) {
-      items = items.filter(item => item.phase !== 'resourceLoadDelay');
+      items = items.filter(item => item.subpart !== 'resourceLoadDelay');
     }
-    if (loadTime === undefined) {
-      items = items.filter(item => item.phase !== 'resourceLoadDuration');
+    if (loadDuration === undefined) {
+      items = items.filter(item => item.subpart !== 'resourceLoadDuration');
     }
 
     return Audit.makeTableDetails(headings, items);
@@ -68,17 +68,17 @@ class LCPPhasesInsight extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    return adaptInsightToAuditProduct(artifacts, context, 'LCPPhases', (insight) => {
-      if (!insight.phases) {
+    return adaptInsightToAuditProduct(artifacts, context, 'LCPBreakdown', (insight) => {
+      if (!insight.subparts) {
         return;
       }
 
       return Audit.makeListDetails([
-        LCPPhasesInsight.makePhaseTable(insight.phases),
+        LCPBreakdownInsight.makeSubpartsTable(insight.subparts),
         makeNodeItemForNodeId(artifacts.TraceElements, insight.lcpEvent?.args.data?.nodeId),
       ].filter(table => table !== undefined));
     });
   }
 }
 
-export default LCPPhasesInsight;
+export default LCPBreakdownInsight;

package/core/audits/layout-shifts.js

@@ -105,7 +105,7 @@ class LayoutShifts extends Audit {
             cause: str_(UIStrings.rootCauseUnsizedMedia),
           });
         }
-        for (const request of rootCauses.fontRequests) {
+        for (const request of rootCauses.webFonts) {
           const url = request.args.data.url;
           subItems.push({
             extra: {type: 'url', value: url},

package/core/config/default-config.js

@@ -319,9 +319,9 @@ const defaultConfig = {
     'insights/font-display-insight',
     'insights/forced-reflow-insight',
     'insights/image-delivery-insight',
-    'insights/interaction-to-next-paint-insight',
+    'insights/inp-breakdown-insight',
+    'insights/lcp-breakdown-insight',
     'insights/lcp-discovery-insight',
-    'insights/lcp-phases-insight',
     'insights/legacy-javascript-insight',
     'insights/modern-http-insight',
     'insights/network-dependency-tree-insight',
@@ -421,9 +421,9 @@ const defaultConfig = {
         {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: 'inp-breakdown-insight', weight: 0, group: 'hidden'},
+        {id: 'lcp-breakdown-insight', weight: 0, group: 'hidden'},
         {id: 'lcp-discovery-insight', weight: 0, group: 'hidden'},
-        {id: 'lcp-phases-insight', weight: 0, group: 'hidden'},
         {id: 'legacy-javascript-insight', weight: 0, group: 'hidden'},
         {id: 'modern-http-insight', weight: 0, group: 'hidden'},
         {id: 'network-dependency-tree-insight', weight: 0, group: 'hidden'},

package/core/config/experimental-config.js

@@ -35,9 +35,9 @@ const config = {
         {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: 'inp-breakdown-insight', weight: 0, group: 'insights'},
+        {id: 'lcp-breakdown-insight', weight: 0, group: 'insights'},
         {id: 'lcp-discovery-insight', weight: 0, group: 'insights'},
-        {id: 'lcp-phases-insight', weight: 0, group: 'insights'},
         {id: 'legacy-javascript-insight', weight: 0, group: 'insights'},
         {id: 'modern-http-insight', weight: 0, group: 'insights'},
         {id: 'network-dependency-tree-insight', weight: 0, group: 'insights'},

package/core/config/validation.js

@@ -36,6 +36,10 @@ function isValidArtifactDependency(dependent, dependency) {
  * @param {string} pluginName
  */
 function assertValidPluginName(config, pluginName) {
+  const parts = pluginName.split('/');
+  if (parts.length === 2) {
+    pluginName = parts[1];
+  }
   if (!pluginName.startsWith('lighthouse-plugin-')) {
     throw new Error(`plugin name '${pluginName}' does not start with 'lighthouse-plugin-'`);
   }

package/core/gather/gatherers/inspector-issues.js

@@ -81,7 +81,7 @@ class InspectorIssues extends BaseGatherer {
       propertyRuleIssue: [],
       quirksModeIssue: [],
       cookieIssue: [],
-      selectElementAccessibilityIssue: [],
+      elementAccessibilityIssue: [],
       sharedArrayBufferIssue: [],
       sharedDictionaryIssue: [],
       stylesheetLoadingIssue: [],

package/core/scoring.d.ts

@@ -187,6 +187,7 @@ export class ReportScoring {
                                 line: number;
                                 column: number;
                             } | undefined;
+                            functionName?: string | import("./index.js").IcuMessage | undefined;
                         } | {
                             type: "link";
                             text: string | import("./index.js").IcuMessage;
@@ -330,6 +331,7 @@ export class ReportScoring {
                                     line: number;
                                     column: number;
                                 } | undefined;
+                                functionName?: string | import("./index.js").IcuMessage | undefined;
                             } | {
                                 type: "link";
                                 text: string | import("./index.js").IcuMessage;
@@ -464,6 +466,7 @@ export class ReportScoring {
                                     line: number;
                                     column: number;
                                 } | undefined;
+                                functionName?: string | import("./index.js").IcuMessage | undefined;
                             } | {
                                 type: "link";
                                 text: string | import("./index.js").IcuMessage;
@@ -496,6 +499,7 @@ export class ReportScoring {
                             line: number;
                             column: number;
                         } | undefined;
+                        functionName?: string | import("./index.js").IcuMessage | undefined;
                     } | {
                         type: "link";
                         text: string | import("./index.js").IcuMessage;
@@ -555,6 +559,7 @@ export class ReportScoring {
                                     line: number;
                                     column: number;
                                 } | undefined;
+                                functionName?: string | import("./index.js").IcuMessage | undefined;
                             } | {
                                 type: "link";
                                 text: string | import("./index.js").IcuMessage;
@@ -660,6 +665,7 @@ export class ReportScoring {
                             line: number;
                             column: number;
                         } | undefined;
+                        functionName?: string | import("./index.js").IcuMessage | undefined;
                     } | {
                         type: "link";
                         text: string | import("./index.js").IcuMessage;