lighthouse 12.3.0 → 12.4.0

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

@@ -81,6 +81,7 @@ declare function useI18n(): {
         dropdownViewer: string;
         dropdownSaveGist: string;
         dropdownDarkTheme: string;
+        dropdownInsightsToggle: string;
         dropdownViewUnthrottledTrace: string;
         runtimeSettingsDevice: string;
         runtimeSettingsNetworkThrottling: string;
@@ -185,6 +186,7 @@ declare function useLocalizedStrings(): {
     dropdownViewer: string;
     dropdownSaveGist: string;
     dropdownDarkTheme: string;
+    dropdownInsightsToggle: string;
     dropdownViewUnthrottledTrace: string;
     runtimeSettingsDevice: string;
     runtimeSettingsNetworkThrottling: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "12.3.0",
+  "version": "12.4.0",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -16,9 +16,10 @@
     "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-lib && 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-lib && 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-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-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",
@@ -96,7 +97,8 @@
     "serve-gh-pages": "cd dist/gh-pages && python3 -m http.server 7333",
     "serve-treemap": "yarn serve-gh-pages",
     "serve-viewer": "yarn serve-gh-pages",
-    "flow-report": "yarn build-report --flow && node ./core/scripts/build-test-flow-report.js"
+    "flow-report": "yarn build-report --flow && node ./core/scripts/build-test-flow-report.js",
+    "generate-insight-audits": "node core/scripts/generate-insight-audits.js"
   },
   "devDependencies": {
     "@build-tracker/cli": "^1.0.0-beta.15",
@@ -136,7 +138,7 @@
     "builtin-modules": "^3.3.0",
     "c8": "^7.11.3",
     "chalk": "^2.4.1",
-    "chrome-devtools-frontend": "1.0.1153166",
+    "chrome-devtools-frontend": "1.0.1418433",
     "concurrently": "^6.4.0",
     "conventional-changelog-cli": "^2.1.1",
     "cpy": "^8.1.2",
@@ -167,7 +169,7 @@
     "pako": "^2.0.3",
     "preact": "^10.7.2",
     "pretty-json-stringify": "^0.0.2",
-    "puppeteer": "^23.10.4",
+    "puppeteer": "^24.3.0",
     "resolve": "^1.22.1",
     "rollup": "^2.52.7",
     "rollup-plugin-polyfill-node": "^0.12.0",
@@ -181,13 +183,13 @@
     "webtreemap-cdt": "^3.2.1"
   },
   "dependencies": {
-    "@paulirish/trace_engine": "0.0.39",
+    "@paulirish/trace_engine": "0.0.44",
     "@sentry/node": "^7.0.0",
     "axe-core": "^4.10.2",
     "chrome-launcher": "^1.1.2",
     "configstore": "^5.0.1",
-    "csp_evaluator": "1.1.1",
-    "devtools-protocol": "0.0.1312386",
+    "csp_evaluator": "1.1.5",
+    "devtools-protocol": "0.0.1423531",
     "enquirer": "^2.3.6",
     "http-link-header": "^1.1.1",
     "intl-messageformat": "^10.5.3",
@@ -200,19 +202,19 @@
     "metaviewport-parser": "0.3.0",
     "open": "^8.4.0",
     "parse-cache-control": "1.0.1",
-    "puppeteer-core": "^23.10.4",
+    "puppeteer-core": "^24.3.0",
     "robots-parser": "^3.0.1",
     "semver": "^5.3.0",
     "speedline-core": "^1.4.3",
-    "third-party-web": "^0.26.1",
+    "third-party-web": "^0.26.5",
     "tldts-icann": "^6.1.16",
     "ws": "^7.0.0",
     "yargs": "^17.3.1",
     "yargs-parser": "^21.0.0"
   },
   "resolutions": {
-    "puppeteer/**/devtools-protocol": "0.0.1312386",
-    "puppeteer-core/**/devtools-protocol": "0.0.1312386"
+    "puppeteer/**/devtools-protocol": "0.0.1423531",
+    "puppeteer-core/**/devtools-protocol": "0.0.1423531"
   },
   "repository": "GoogleChrome/lighthouse",
   "keywords": [

package/readme.md

@@ -364,6 +364,8 @@ This section details services that have integrated Lighthouse data. If you're wo
 
 * **[Guardius](https://guardius.io)** - Guardius is a DevOps and DevSecOps SaaS platform that integrates Lighthouse to deliver automated web performance analysis. It not only provides metrics evaluation and automatic scanning but also enables performance comparisons across different periods and ongoing observation over time. Additionally, Guardius offers predefined and customized alerts tailored to your specific requirements. A free version of Guardius is available for users to explore its features.
 
+* **[Sonā](https://getsona.io)** - Powered by Lighthouse amongst others, Sonā delivers in-depth insights into your website’s health. Track changes over time, share reports, and receive actionable recommendations to improve performance, accessibility, SEO, best practices, and security. Sonā is free during its beta period.
+
 ## Lighthouse Integrations in non-Web Perf services
 
 * **[PageWatch](https://pagewatch.dev/)** — PageWatch is a tool to find problem pages on your website.  It provides insights into spelling errors, layout issues, slow pages (powered by Lighthouse) and more.  PageWatch is offered via free and paid plans.
@@ -412,6 +414,7 @@ Other awesome open source projects that use Lighthouse.
 * **[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.
+* **[Neodymium](https://github.com/Xceptance/neodymium/wiki/Accessibility)** - The Neodymium test automation framework integrates Lighthouse for accessibility and Web Vitals verification, allowing programmatic validation and assertion of all audit values.
 
 ## FAQ
 

package/report/assets/styles.css

@@ -199,6 +199,11 @@
   }
 }
 
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media only screen and (max-width: 480px) {
   .lh-vars {
     --audit-group-margin-bottom: 20px;
@@ -225,6 +230,32 @@
   }
 }
 
+@container lh-container (max-width: 480px) {
+  .lh-vars {
+    --audit-group-margin-bottom: 20px;
+    --edge-gap-padding: var(--default-padding);
+    --env-name-min-width: 120px;
+    --gauge-circle-size-big: 96px;
+    --gauge-circle-size: 72px;
+    --gauge-label-font-size-big: 22px;
+    --gauge-label-font-size: 14px;
+    --gauge-label-line-height-big: 26px;
+    --gauge-label-line-height: 20px;
+    --gauge-percentage-font-size-big: 34px;
+    --gauge-percentage-font-size: 26px;
+    --gauge-wrapper-width: 112px;
+    --header-padding: 16px 0 16px 0;
+    --image-preview-size: 24px;
+    --plugin-icon-size: 75%;
+    --report-font-size: 14px;
+    --report-line-height: 20px;
+    --score-icon-margin-left: 2px;
+    --score-icon-size: 10px;
+    --topbar-height: 28px;
+    --topbar-logo-size: 20px;
+  }
+}
+
 .lh-vars.lh-devtools {
   --audit-explanation-line-height: 14px;
   --audit-group-margin-bottom: 20px;
@@ -369,6 +400,9 @@
       but they do not get any overflow:ellipsis treatment.
   */
   word-break: break-word;
+
+  container-name: lh-container;
+  container-type: inline-size;
 }
 
 .lh-audit-group a,
@@ -480,6 +514,35 @@
 .lh-report-icon--external::before {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path d="M3.15 11.9a1.01 1.01 0 0 1-.743-.307 1.01 1.01 0 0 1-.306-.743v-7.7c0-.292.102-.54.306-.744a1.01 1.01 0 0 1 .744-.306H7v1.05H3.15v7.7h7.7V7h1.05v3.85c0 .291-.103.54-.307.743a1.01 1.01 0 0 1-.743.307h-7.7Zm2.494-2.8-.743-.744 5.206-5.206H8.401V2.1h3.5v3.5h-1.05V3.893L5.644 9.1Z"/></svg>');
 }
+.lh-report-icon--experiment::before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="M4.50002 17C3.86136 17 3.40302 16.7187 3.12502 16.156C2.84702 15.5933 2.90936 15.069 3.31202 14.583L7.50002 9.5V4.5H6.75002C6.54202 4.5 6.36502 4.427 6.21902 4.281C6.07302 4.135 6.00002 3.958 6.00002 3.75C6.00002 3.542 6.07302 3.365 6.21902 3.219C6.36502 3.073 6.54202 3 6.75002 3H13.25C13.458 3 13.635 3.073 13.781 3.219C13.927 3.365 14 3.542 14 3.75C14 3.958 13.927 4.135 13.781 4.281C13.635 4.427 13.458 4.5 13.25 4.5H12.5V9.5L16.688 14.583C17.0767 15.069 17.132 15.5933 16.854 16.156C16.5767 16.7187 16.1254 17 15.5 17H4.50002ZM4.50002 15.5H15.5L11 10V4.5H9.00002V10L4.50002 15.5Z" fill="black"/></svg>');
+}
+
+/** These are still icons, but w/o the auto-color invert / opacity / etc. that come with .lh-report-icon */
+
+.lh-report-plain-icon {
+  display: flex;
+  align-items: center;
+}
+.lh-report-plain-icon::before {
+  content: "";
+  background-repeat: no-repeat;
+  width: var(--report-icon-size);
+  height: var(--report-icon-size);
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.lh-report-plain-icon--checklist-pass::before {
+  --icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M8.938 13L13.896 8.062L12.833 7L8.938 10.875L7.167 9.125L6.104 10.188L8.938 13ZM10 18C8.90267 18 7.868 17.7917 6.896 17.375C5.924 16.9583 5.07333 16.3853 4.344 15.656C3.61467 14.9267 3.04167 14.076 2.625 13.104C2.20833 12.132 2 11.0973 2 10C2 8.88867 2.20833 7.85033 2.625 6.885C3.04167 5.92033 3.61467 5.07333 4.344 4.344C5.07333 3.61467 5.924 3.04167 6.896 2.625C7.868 2.20833 8.90267 2 10 2C11.1113 2 12.1497 2.20833 13.115 2.625C14.0797 3.04167 14.9267 3.61467 15.656 4.344C16.3853 5.07333 16.9583 5.92033 17.375 6.885C17.7917 7.85033 18 8.88867 18 10C18 11.0973 17.7917 12.132 17.375 13.104C16.9583 14.076 16.3853 14.9267 15.656 15.656C14.9267 16.3853 14.0797 16.9583 13.115 17.375C12.1497 17.7917 11.1113 18 10 18ZM10 16.5C11.8053 16.5 13.34 15.868 14.604 14.604C15.868 13.34 16.5 11.8053 16.5 10C16.5 8.19467 15.868 6.66 14.604 5.396C13.34 4.132 11.8053 3.5 10 3.5C8.19467 3.5 6.66 4.132 5.396 5.396C4.132 6.66 3.5 8.19467 3.5 10C3.5 11.8053 4.132 13.34 5.396 14.604C6.66 15.868 8.19467 16.5 10 16.5Z" fill="black"/></svg>');
+  background-color: var(--color-pass);
+  mask: var(--icon-url) center / contain no-repeat;
+}
+.lh-report-plain-icon--checklist-fail::before {
+  --icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM16 10C16 13.3137 13.3137 16 10 16C8.6135 16 7.33683 15.5297 6.32083 14.7399L14.7399 6.32083C15.5297 7.33683 16 8.6135 16 10ZM5.26016 13.6793L13.6793 5.26016C12.6633 4.47033 11.3866 4 10 4C6.68629 4 4 6.68629 4 10C4 11.3866 4.47033 12.6633 5.26016 13.6793Z" fill="black"/></svg>');
+  background-color: var(--color-fail);
+  mask: var(--icon-url) center / contain no-repeat;
+}
 
 .lh-buttons {
   display: flex;
@@ -507,6 +570,15 @@
   line-height: 20px;
 }
 
+.lh-checklist {
+  list-style: none;
+  padding: 0;
+}
+
+.lh-checklist-item {
+  margin: 10px 0 10px 0;
+}
+
 /* Score */
 
 .lh-audit__score-icon {
@@ -757,7 +829,11 @@
   grid-column-start: 2;
 }
 
-
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media screen and (max-width: 535px) {
   .lh-metrics-container {
     display: block;
@@ -783,6 +859,31 @@
   }
 }
 
+@container lh-container (max-width: 535px) {
+  .lh-metrics-container {
+    display: block;
+  }
+
+  .lh-metric {
+    border-bottom: none !important;
+  }
+  .lh-category:not(.lh--hoisted-meta) .lh-metric:nth-last-child(1) {
+    border-bottom: 1px solid var(--report-border-color-secondary) !important;
+  }
+
+  /* Change the grid to 3 columns for narrow viewport. */
+  .lh-metric__innerwrap {
+  /**
+   * Icon -- Metric Name -- Metric Value
+   */
+    grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 2fr 1fr;
+  }
+  .lh-metric__value {
+    justify-self: end;
+    grid-column-start: unset;
+  }
+}
+
 /* No-JS toggle switch */
 /* Keep this selector sync'd w/ `magicSelector` in report-ui-features-test.js */
  .lh-metrics-toggle__input:checked ~ .lh-metrics-container .lh-metric__description {
@@ -1364,6 +1465,11 @@
   height: var(--gauge-circle-size-big);
 }
 
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media screen and (max-width: 780px) {
   .lh-category-header__finalscreenshot {
     grid-template: 1fr 1fr / none
@@ -1373,8 +1479,20 @@
   }
 }
 
+@container lh-container (max-width: 780px) {
+  .lh-category-header__finalscreenshot {
+    grid-template: 1fr 1fr / none
+  }
+  .lh-category-headercol--separator {
+    display: none;
+  }
+}
 
-/* 964 fits the min-width of the filmstrip */
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media screen and (max-width: 964px) {
   .lh-report {
     margin-left: 0;
@@ -1382,6 +1500,14 @@
   }
 }
 
+/* 964 fits the min-width of the filmstrip */
+@container lh-container (max-width: 964px) {
+  .lh-report {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
 @media print {
   body {
     -webkit-print-color-adjust: exact; /* print background colors */
@@ -1656,6 +1782,11 @@
   }
 }
 
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media screen and (max-width: 780px) {
   /* no black outline if we're not confident the entire table can be displayed within bounds */
   .lh-expandable-details[open] {
@@ -1663,6 +1794,13 @@
   }
 }
 
+@container lh-container (max-width: 780px) {
+  /* no black outline if we're not confident the entire table can be displayed within bounds */
+  .lh-expandable-details[open] {
+    animation: none;
+  }
+}
+
 .lh-expandable-details[open] summary, details.lh-clump > summary {
   border-bottom: 1px solid var(--report-border-color-secondary);
 }
@@ -1695,8 +1833,11 @@ details[open] .lh-clump-toggletext--hide { display: block;}
   text-align: initial;
   line-height: 1.4;
 }
-/* shrink tooltips to not be cutoff on left edge of narrow viewports
-   45vw is chosen to be ~= width of the left column of metrics
+
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
 */
 @media screen and (max-width: 535px) {
   .lh-tooltip {
@@ -1705,6 +1846,16 @@ details[open] .lh-clump-toggletext--hide { display: block;}
   }
 }
 
+/* shrink tooltips to not be cutoff on left edge of narrow container
+   45vw is chosen to be ~= width of the left column of metrics
+*/
+@container lh-container (max-width: 535px) {
+  .lh-tooltip {
+    min-width: 45vw;
+    padding: 3vw;
+  }
+}
+
 .lh-tooltip-boundary:hover .lh-tooltip {
   display: block;
   animation: fadeInTooltip 250ms;
@@ -1837,18 +1988,41 @@ details[open] .lh-clump-toggletext--hide { display: block;}
   left: 6px;
 }
 
-/* Change the grid for narrow viewport. */
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media screen and (max-width: 640px) {
   .lh-meta__items {
     grid-template-columns: 1fr 1fr;
   }
 }
+
+/* Change the grid for narrow container */
+@container lh-container (max-width: 640px) {
+  .lh-meta__items {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media screen and (max-width: 535px) {
   .lh-meta__items {
     display: block;
   }
 }
 
+@container lh-container (max-width: 535px) {
+  .lh-meta__items {
+    display: block;
+  }
+}
+
 /* Explodey gauge */
 
 .lh-exp-gauge-component {

package/report/assets/templates.html

@@ -298,12 +298,25 @@ SPDX-License-Identifier: Apache-2.0
       margin: 0 4px;
     }
 
+    /**
+    * This media query is a temporary fallback for browsers that do not support `@container query`.
+    * TODO: remove this media query when `@container query` is fully supported by browsers
+    * See https://github.com/GoogleChrome/lighthouse/pull/16332
+    */
     @media screen and (max-width: 964px) {
       .lh-tools__dropdown {
         right: 0;
         left: initial;
       }
     }
+
+    @container lh-container (max-width: 964px) {
+      .lh-tools__dropdown {
+        right: 0;
+        left: initial;
+      }
+    }
+
     @media print {
       .lh-topbar {
         position: static;
@@ -354,6 +367,7 @@ 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>