lighthouse 12.5.1 → 12.6.0-dev.20250428

package/flow-report/src/i18n/i18n.d.ts

@@ -81,7 +81,6 @@ declare function useI18n(): {
         dropdownViewer: string;
         dropdownSaveGist: string;
         dropdownDarkTheme: string;
-        dropdownInsightsToggle: string;
         dropdownViewUnthrottledTrace: string;
         runtimeSettingsDevice: string;
         runtimeSettingsNetworkThrottling: string;
@@ -110,6 +109,9 @@ declare function useI18n(): {
         firstPartyChipLabel: string;
         openInANewTabTooltip: string;
         unattributable: string;
+        insightsNotice: string;
+        tryInsights: string;
+        goBackToAudits: string;
     };
 };
 declare function useLocalizedStrings(): {
@@ -186,7 +188,6 @@ declare function useLocalizedStrings(): {
     dropdownViewer: string;
     dropdownSaveGist: string;
     dropdownDarkTheme: string;
-    dropdownInsightsToggle: string;
     dropdownViewUnthrottledTrace: string;
     runtimeSettingsDevice: string;
     runtimeSettingsNetworkThrottling: string;
@@ -215,6 +216,9 @@ declare function useLocalizedStrings(): {
     firstPartyChipLabel: string;
     openInANewTabTooltip: string;
     unattributable: string;
+    insightsNotice: string;
+    tryInsights: string;
+    goBackToAudits: string;
 };
 declare function useStringFormatter(): (str: string, values?: Record<string, string | number>) => string;
 declare const I18nProvider: FunctionComponent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "12.5.1",
+  "version": "12.6.0-dev.20250428",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -10,20 +10,21 @@
     "smokehouse": "./cli/test/smokehouse/frontends/smokehouse-bin.js"
   },
   "engines": {
-    "node": ">=18.16"
+    "node": ">=18.20"
   },
   "scripts": {
     "prepack": "yarn build-report --standalone --flow --esm && yarn build-types",
     "postpack": "yarn clean-types",
     "build-all": "npm-run-posix-or-windows build-all:task",
-    "build-all:task": "yarn build-report && yarn build-cdt-strings && yarn build-devtools && concurrently 'yarn build-extension' 'yarn build-lr' 'yarn build-viewer' 'yarn build-treemap' 'yarn build-smokehouse-bundle' && yarn build-pack",
-    "build-all:task:windows": "yarn build-report && yarn build-cdt-strings && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer && yarn build-treemap && yarn build-smokehouse-bundle",
+    "build-all:task": "yarn build-report && yarn build-cdt-strings && yarn build-devtools && concurrently 'yarn build-extension' 'yarn build-lr' 'yarn build-viewer' 'yarn build-treemap' 'yarn build-smokehouse-bundle' 'yarn build-legacy-javascript' && yarn build-pack",
+    "build-all:task:windows": "yarn build-report && yarn build-cdt-strings && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer && yarn build-treemap && yarn build-smokehouse-bundle && yarn build-legacy-javascript",
     "build-cdt-lib": "node ./build/build-cdt-lib.js",
     "build-cdt-strings": "node ./build/build-cdt-strings.js",
     "build-extension": "yarn build-extension-chrome && yarn build-extension-firefox",
     "build-extension-chrome": "node ./build/build-extension.js chrome",
     "build-extension-firefox": "node ./build/build-extension.js firefox",
     "build-devtools": "yarn reset-link && node ./build/build-bundle.js clients/devtools/devtools-entry.js dist/lighthouse-dt-bundle.js && node ./build/build-dt-report-resources.js",
+    "build-legacy-javascript": "node ./build/build-legacy-javascript.js",
     "build-smokehouse-bundle": "node ./build/build-smokehouse-bundle.js",
     "build-lr": "yarn reset-link && node --max-old-space-size=4096 ./build/build-lightrider-bundles.js",
     "build-pack": "bash build/build-pack.sh",
@@ -116,6 +117,7 @@
     "@types/eslint": "^8.2.1",
     "@types/estree": "^0.0.50",
     "@types/gh-pages": "^2.0.0",
+    "@types/gtag.js": "0.0.20",
     "@types/google.analytics": "0.0.39",
     "@types/jpeg-js": "^0.3.7",
     "@types/jsdom": "^16.2.13",
@@ -126,7 +128,6 @@
     "@types/resize-observer-browser": "^0.1.1",
     "@types/resolve": "^1.20.2",
     "@types/semver": "^5.5.0",
-    "@types/tabulator-tables": "^4.9.1",
     "@types/ws": "^7.0.0",
     "@types/yargs": "^17.0.8",
     "@types/yargs-parser": "^20.2.1",
@@ -138,7 +139,7 @@
     "builtin-modules": "^3.3.0",
     "c8": "^7.11.3",
     "chalk": "^2.4.1",
-    "chrome-devtools-frontend": "1.0.1418433",
+    "chrome-devtools-frontend": "1.0.1445635",
     "colors": "^1.4.0",
     "concurrently": "^6.4.0",
     "conventional-changelog-cli": "^2.1.1",
@@ -171,27 +172,26 @@
     "pako": "^2.0.3",
     "preact": "^10.7.2",
     "pretty-json-stringify": "^0.0.2",
-    "puppeteer": "^24.4.0",
+    "puppeteer": "^24.6.1",
     "resolve": "^1.22.1",
     "rollup": "^2.52.7",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "source-map-support": "^0.5.21",
-    "tabulator-tables": "^4.9.3",
     "terser": "^5.18.2",
     "testdouble": "^3.18.0",
     "typed-query-selector": "^2.11.2",
-    "typescript": "5.5.3",
+    "typescript": "5.8.2",
     "wait-for-expect": "^3.0.2",
     "webtreemap-cdt": "^3.2.1"
   },
   "dependencies": {
-    "@paulirish/trace_engine": "0.0.50",
+    "@paulirish/trace_engine": "0.0.52",
     "@sentry/node": "^7.0.0",
     "axe-core": "^4.10.3",
     "chrome-launcher": "^1.1.2",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.5",
-    "devtools-protocol": "0.0.1436416",
+    "devtools-protocol": "0.0.1445099",
     "enquirer": "^2.3.6",
     "http-link-header": "^1.1.1",
     "intl-messageformat": "^10.5.3",
@@ -204,19 +204,19 @@
     "metaviewport-parser": "0.3.0",
     "open": "^8.4.0",
     "parse-cache-control": "1.0.1",
-    "puppeteer-core": "^24.4.0",
+    "puppeteer-core": "^24.6.1",
     "robots-parser": "^3.0.1",
     "semver": "^5.3.0",
     "speedline-core": "^1.4.3",
-    "third-party-web": "^0.26.5",
+    "third-party-web": "^0.26.6",
     "tldts-icann": "^6.1.16",
     "ws": "^7.0.0",
     "yargs": "^17.3.1",
     "yargs-parser": "^21.0.0"
   },
   "resolutions": {
-    "puppeteer/**/devtools-protocol": "0.0.1436416",
-    "puppeteer-core/**/devtools-protocol": "0.0.1436416"
+    "puppeteer/**/devtools-protocol": "0.0.1445099",
+    "puppeteer-core/**/devtools-protocol": "0.0.1445099"
   },
   "repository": "GoogleChrome/lighthouse",
   "keywords": [
@@ -229,5 +229,6 @@
   "bugs": {
     "url": "https://github.com/GoogleChrome/lighthouse/issues"
   },
-  "homepage": "https://github.com/GoogleChrome/lighthouse#readme"
+  "homepage": "https://github.com/GoogleChrome/lighthouse#readme",
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/readme.md

@@ -53,7 +53,7 @@ The Chrome extension was available prior to Lighthouse being available in Chrome
 The Node CLI provides the most flexibility in how Lighthouse runs can be configured and reported. Users who want more advanced usage, or want to run Lighthouse in an automated fashion should use the Node CLI.
 
 > **Note**
-> Lighthouse requires Node 18 LTS (18.x) or later.
+> Lighthouse requires Node 18.20 or later.
 
 **Installation**:
 

package/report/README.md

@@ -11,7 +11,7 @@ Example standalone HTML report, delivered by the CLI: [`dbwtest-3.0.3.html`](htt
 1. [`report/generator/report-generator.js`](https://github.com/GoogleChrome/lighthouse/blob/main/report/generator/report-generator.js) is the entry point for generating the HTML from Node. It compiles together the HTML string with everything required within it.
    - It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses `inline-fs`, which takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
 1. [`report/renderer`](https://github.com/GoogleChrome/lighthouse/tree/main/report/renderer) are all client-side JS files. They transform an LHR object into a report DOM tree. They are all executed within the browser.
-1. [`report/assets/standalone-template.html`](https://github.com/GoogleChrome/lighthouse/blob/main/lighthouse-core/report/html/report-template.html) is where the client-side build of the DOM report is typically kicked off ([with these four lines](https://github.com/GoogleChrome/lighthouse/blob/eda3a3e2e271249f261655f9504fd542d6acf0f8/lighthouse-core/report/html/report-template.html#L29-L33)) However, see _Current Uses.._ below for more possibilities.
+1. [`report/assets/standalone-template.html`](https://github.com/GoogleChrome/lighthouse/blob/main/report/assets/standalone-template.html) is where the client-side build of the DOM report is typically kicked off ([with these four lines](https://github.com/GoogleChrome/lighthouse/blob/eda3a3e2e271249f261655f9504fd542d6acf0f8/lighthouse-core/report/html/report-template.html#L29-L33)) However, see _Current Uses.._ below for more possibilities.
 
 
 ### Data Hydration

package/report/assets/styles.css

@@ -105,8 +105,8 @@
   --plugin-icon-size: 65%;
   --report-background-color: #fff;
   --report-border-color-secondary: #ebebeb;
-  --report-font-family-monospace: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
-  --report-font-family: Roboto, Helvetica, Arial, sans-serif;
+  --report-font-family-monospace: monospace, 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console';
+  --report-font-family: system-ui, Roboto, Helvetica, Arial, sans-serif;
   --report-font-size: 14px;
   --report-font-size-secondary: 12px;
   --report-icon-size: var(--score-icon-background-size);
@@ -155,7 +155,10 @@
   --fail-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>warn</title><path fill="%23C7221F" d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z"/></svg>');
   --error-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 15"><title>error</title><path d="M0 15H 3V 12H 0V" fill="%23FF4E42"/><path d="M0 9H 3V 0H 0V" fill="%23FF4E42"/></svg>');
 
-  --swap-locale-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>');
+  --swap-locale-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%23000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>');
+
+  --insights-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="%23000000"><path d="M18 13V11H22V13H18ZM19.2 20L16 17.6L17.2 16L20.4 18.4L19.2 20ZM17.2 8L16 6.4L19.2 4L20.4 5.6L17.2 8ZM5 19V15H4C3.45 15 2.975 14.8083 2.575 14.425C2.19167 14.025 2 13.55 2 13V11C2 10.45 2.19167 9.98333 2.575 9.6C2.975 9.2 3.45 9 4 9H8L13 6V18L8 15H7V19H5ZM11 14.45V9.55L8.55 11H4V13H8.55L11 14.45ZM14 15.35V8.65C14.45 9.05 14.8083 9.54167 15.075 10.125C15.3583 10.6917 15.5 11.3167 15.5 12C15.5 12.6833 15.3583 13.3167 15.075 13.9C14.8083 14.4667 14.45 14.95 14 15.35Z"/></svg>');
+  --insights-icon-url-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="%239e9e9e"><path d="M18 13V11H22V13H18ZM19.2 20L16 17.6L17.2 16L20.4 18.4L19.2 20ZM17.2 8L16 6.4L19.2 4L20.4 5.6L17.2 8ZM5 19V15H4C3.45 15 2.975 14.8083 2.575 14.425C2.19167 14.025 2 13.55 2 13V11C2 10.45 2.19167 9.98333 2.575 9.6C2.975 9.2 3.45 9 4 9H8L13 6V18L8 15H7V19H5ZM11 14.45V9.55L8.55 11H4V13H8.55L11 14.45ZM14 15.35V8.65C14.45 9.05 14.8083 9.54167 15.075 10.125C15.3583 10.6917 15.5 11.3167 15.5 12C15.5 12.6833 15.3583 13.3167 15.075 13.9C14.8083 14.4667 14.45 14.95 14 15.35Z"/></svg>');
 }
 
 @media not print {
@@ -278,8 +281,6 @@
   --header-padding: 16px 0 16px 0;
   --screenshot-overlay-background: transparent;
   --plugin-icon-size: 75%;
-  --report-font-family-monospace: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
-  --report-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   --report-font-size: 12px;
   --report-line-height: 20px;
   --score-icon-margin-left: 2px;
@@ -392,8 +393,8 @@
 
   With that sorted, the next challenge is appropriate column sizing and text wrapping inside our
   .lh-details tables. Even more fun.
-    * We don't want table headers ("Potential Savings (ms)") to wrap or their column values, but
-    we'd be happy for the URL column to wrap if the URLs are particularly long.
+    * We don't want table headers ("Est Savings (ms)") to wrap or their column values, but
+      we'd be happy for the URL column to wrap if the URLs are particularly long.
     * We want the narrow columns to remain narrow, providing the most column width for URL
     * We don't want the table to extend past 100% width.
     * Long URLs in the URL column can wrap. Util.getURLDisplayName maxes them out at 64 characters,
@@ -426,8 +427,6 @@
   margin-top: var(--default-padding);
   margin-bottom: var(--default-padding);
   margin-left: var(--audit-description-padding-left);
-  /* whatever the .lh-details side margins are */
-  width: 100%;
 }
 
 .lh-audit__stackpack {
@@ -487,6 +486,7 @@
 .lh-report-icon--treemap::before {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="black"><path d="M3 5v14h19V5H3zm2 2h15v4H5V7zm0 10v-4h4v4H5zm6 0v-4h9v4h-9z"/></svg>');
 }
+
 .lh-report-icon--date::before {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 11h2v2H7v-2zm14-5v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6c0-1.1.9-2 2-2h1V2h2v2h8V2h2v2h1a2 2 0 012 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z"/></svg>');
 }
@@ -563,6 +563,10 @@
 }
 
 /* Node */
+.lh-node {
+  display: flow-root;
+}
+
 .lh-node__snippet {
   font-family: var(--report-font-family-monospace);
   color: var(--snippet-color);
@@ -988,6 +992,50 @@
   max-width: 120px;
 }
 
+/* Toggle Insights banner */
+.lh-perf-insights-toggle {
+  margin: calc(var(--default-padding) * 2) 0 var(--default-padding);
+  display: flex;
+  gap: var(--default-padding);
+  align-items: center;
+  background-color: rgba(30, 164, 70, 0.08);
+
+  padding: var(--toplevel-warning-padding);
+  border-radius: 8px;
+}
+
+.lh-perf-insights-toggle button {
+  cursor: pointer;
+  margin: 0;
+  flex: 1;
+}
+
+.lh-perf-toggle-text {
+  align-items: center;
+  flex: 5;
+}
+.lh-dark .lh-perf-toggle-text {
+  color: rgba(30, 164, 70, 1);
+}
+
+.lh-perf-toggle-text a {
+  color: var(--link-color);
+}
+
+.lh-perf-insights-icon {
+  margin: 4px;
+  background-repeat: no-repeat;
+  background-image: var(--insights-icon-url);
+  width: var(--report-icon-size);
+  height: var(--report-icon-size);
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.lh-dark .lh-perf-insights-icon {
+  background-image: var(--insights-icon-url-dark);
+}
+
 /* Audit */
 
 .lh-audit {
@@ -1077,8 +1125,12 @@
 }
 
 /* Report */
+.lh-list {
+  margin-right: calc(var(--default-padding) * 2);
+}
 .lh-list > :not(:last-child) {
   margin-bottom: calc(var(--default-padding) * 2);
+  border-bottom: 1px solid #A8C7FA;
 }
 
 .lh-header-container {
@@ -1611,7 +1663,10 @@
 }
 
 .lh-row--group ~ [data-entity]:not(.lh-row--group) ~ .lh-sub-item-row td:first-child {
-  padding-left: 40px;
+  margin-left: 20px;
+  padding-left: 10px;
+  border-left: 1px solid #A8C7FA;
+  display: block;
 }
 
 .lh-row--even {
@@ -1681,6 +1736,26 @@
   width: 12%;
 }
 
+/** Tweak styling for tables in insight audits. */
+.lh-audit[id$="-insight"] .lh-table {
+  border: none;
+}
+
+.lh-audit[id$="-insight"] .lh-table thead th {
+  font-weight: bold;
+  color: unset;
+}
+
+.lh-audit[id$="-insight"] .lh-table th,
+.lh-audit[id$="-insight"] .lh-table td {
+  padding: calc(var(--default-padding) / 2);
+}
+
+.lh-audit[id$="-insight"] .lh-table .lh-row--even,
+.lh-audit[id$="-insight"] .lh-table tr:not(.lh-row--group):hover {
+  background-color: unset;
+}
+
 .lh-text__url-host {
   display: inline;
 }

package/report/assets/templates.html

@@ -367,7 +367,6 @@ SPDX-License-Identifier: Apache-2.0
         <!-- Only enabled if Options.onViewTrace is set and we are on simulated throttling. -->
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open lh-hidden" data-i18n="dropdownViewUnthrottledTrace" data-action="view-unthrottled-trace"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--dark" data-i18n="dropdownDarkTheme" data-action="toggle-dark"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--experiment" data-i18n="dropdownInsightsToggle" data-action="toggle-insights"></a>
       </div>
     </div>
   </div>
@@ -564,6 +563,9 @@ SPDX-License-Identifier: Apache-2.0
         line-height: 26px;
         white-space: nowrap;
       }
+      .lh-crc .lh-crc-node__longest {
+        color: var(--color-average-secondary);
+      }
       .lh-crc .lh-crc-node__tree-value {
         margin-left: 10px;
       }

package/report/clients/standalone.js

@@ -10,8 +10,6 @@
  * The renderer code is bundled and injected into the report HTML along with the JSON report.
  */
 
-/* global ga */
-
 import {renderReport} from '../renderer/api.js';
 import {Logger} from '../renderer/logger.js';
 
@@ -29,8 +27,12 @@ function __initLighthouseReport__() {
   document.body.append(reportRootEl);
 
   document.addEventListener('lh-analytics', /** @param {Event} e */ e => {
-    // @ts-expect-error
-    if (window.ga) ga(e.detail.cmd, e.detail.fields);
+    const ce = /** @type {CustomEvent<{name: string, data?: {}}>} */(e);
+
+    if ('gtag' in window) {
+      // @ts-expect-error
+      window.gtag('event', ce.detail.name, ce.detail.data ?? {});
+    }
   });
 
   document.addEventListener('lh-log', /** @param {Event} e */ e => {

package/report/renderer/category-renderer.d.ts

@@ -64,7 +64,7 @@ export class CategoryRenderer {
      * @return {Array<Element>}
      */
     _renderGroupedAudits(auditRefs: Array<LH.ReportResult.AuditRef>, groupDefinitions: {
-        [x: string]: LH.Result.ReportGroup;
+        [x: string]: import("../../types/lhr/lhr.js").default.ReportGroup;
     }): Array<Element>;
     /**
      * Take a set of audits, group them if they have groups, then render in a top-level
@@ -74,7 +74,7 @@ export class CategoryRenderer {
      * @return {Element}
      */
     renderUnexpandableClump(auditRefs: Array<LH.ReportResult.AuditRef>, groupDefinitions: {
-        [x: string]: LH.Result.ReportGroup;
+        [x: string]: import("../../types/lhr/lhr.js").default.ReportGroup;
     }): Element;
     /**
      * Take a set of audits and render in a top-level, expandable clump that starts