lighthouse 11.7.0 → 12.0.0-dev.20240422

package/flow-report/src/help-dialog.tsx

@@ -84,7 +84,6 @@ export const HelpDialog: FunctionComponent<{onClose: () => void}> = ({
             strings.categoryAccessibility,
             strings.categoryBestPractices,
             strings.categorySeo,
-            strings.categoryProgressiveWebApp,
           ]}
         />
         <HelpDialogColumn

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

@@ -25,7 +25,6 @@ declare function useI18n(): {
         categoryAccessibility: string;
         categoryBestPractices: string;
         categorySeo: string;
-        categoryProgressiveWebApp: string;
         desktop: string;
         mobile: string;
         ratingPass: string;
@@ -110,7 +109,6 @@ declare function useI18n(): {
         firstPartyChipLabel: string;
         openInANewTabTooltip: string;
         unattributable: string;
-        pwaRemovalMessage: string;
     };
 };
 declare function useLocalizedStrings(): {
@@ -131,7 +129,6 @@ declare function useLocalizedStrings(): {
     categoryAccessibility: string;
     categoryBestPractices: string;
     categorySeo: string;
-    categoryProgressiveWebApp: string;
     desktop: string;
     mobile: string;
     ratingPass: string;
@@ -216,7 +213,6 @@ declare function useLocalizedStrings(): {
     firstPartyChipLabel: string;
     openInANewTabTooltip: string;
     unattributable: string;
-    pwaRemovalMessage: string;
 };
 declare function useStringFormatter(): (str: string, values?: Record<string, string | number>) => string;
 declare const I18nProvider: FunctionComponent;

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

@@ -16,7 +16,6 @@ export namespace UIStrings {
     const categoryAccessibility: string;
     const categoryBestPractices: string;
     const categorySeo: string;
-    const categoryProgressiveWebApp: string;
     const desktop: string;
     const mobile: string;
     const ratingPass: string;

package/flow-report/src/i18n/ui-strings.js

@@ -43,8 +43,6 @@ export const UIStrings = {
   categoryBestPractices: 'Best Practices',
   /** Title of the Search Engine Optimization (SEO) category of audits. This is displayed at the top of a list of audits focused on topics related to optimizing a website for indexing by search engines. Also used as a label of a score gauge; try to limit to 20 characters. */
   categorySeo: 'SEO',
-  /** Title of the Progressive Web Application (PWA) category of audits. This is displayed at the top of a list of audits focused on topics related to whether or not a site is a progressive web app, e.g. responds offline, uses a service worker, is on https, etc. Also used as a label of a score gauge. */
-  categoryProgressiveWebApp: 'Progressive Web App',
   /** Label for a report evaluating a web page. Label indicates that the report refers to the desktop version of the site. */
   desktop: 'Desktop',
   /** Label for a report evaluating a web page. Label indicates that the report refers to the mobile version of the site. */

package/flow-report/src/summary/category.tsx

@@ -39,13 +39,6 @@ function getScoreToBeGained(audit: ScoredAuditRef): number {
   return audit.weight * (1 - audit.result.score);
 }
 
-function getOverallSavings(audit: LH.ReportResult.AuditRef): number {
-  return (
-    audit.result.details &&
-    audit.result.details.overallSavingsMs
-  ) || 0;
-}
-
 const SummaryTooltipAudit: FunctionComponent<{audit: LH.ReportResult.AuditRef}> = ({audit}) => {
   const rating = ReportUtils.calculateRating(audit.result.score, audit.result.scoreDisplayMode);
   return (
@@ -63,10 +56,10 @@ const SummaryTooltipAudits: FunctionComponent<{category: LH.ReportResult.Categor
     return audit.result.score !== null &&
       // Metrics should not be displayed in this group.
       audit.group !== 'metrics' &&
-      // Audits in performance group "hidden" should not be counted.
-      (audit.group !== 'hidden' || category.id !== 'performance') &&
-      // We don't want unweighted audits except for opportunities with potential savings.
-      (audit.weight > 0 || getOverallSavings(audit) > 0) &&
+      // Audits in group "hidden" should not be counted.
+      audit.group !== 'hidden' &&
+      // We don't want unweighted audits except for performance diagnostics.
+      (audit.weight > 0 || audit.group === 'diagnostics') &&
       // Passing audits should never be high impact.
       !ReportUtils.showAsPassed(audit.result);
   }
@@ -79,7 +72,12 @@ const SummaryTooltipAudits: FunctionComponent<{category: LH.ReportResult.Categor
       const remainingScoreA = getScoreToBeGained(a);
       const remainingScoreB = getScoreToBeGained(b);
       if (remainingScoreA !== remainingScoreB) return remainingScoreB - remainingScoreA;
-      return getOverallSavings(b) - getOverallSavings(a);
+      if (a.result.score !== b.result.score) return a.result.score - b.result.score;
+
+      // TODO: Sort using overall impact from metric savings, not just LCP
+      const aLcpSavings = a.result.metricSavings?.LCP || 0;
+      const bLcpSavings = b.result.metricSavings?.LCP || 0;
+      return bLcpSavings - aLcpSavings;
     })
     .splice(0, MAX_TOOLTIP_AUDITS);
   if (!audits.length) return null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "11.7.0",
+  "version": "12.0.0-dev.20240422",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -165,7 +165,7 @@
     "pako": "^2.0.3",
     "preact": "^10.7.2",
     "pretty-json-stringify": "^0.0.2",
-    "puppeteer": "^22.5.0",
+    "puppeteer": "^22.6.5",
     "resolve": "^1.22.1",
     "rollup": "^2.52.7",
     "rollup-plugin-polyfill-node": "^0.12.0",
@@ -179,9 +179,9 @@
     "webtreemap-cdt": "^3.2.1"
   },
   "dependencies": {
-    "@paulirish/trace_engine": "^0.0.12",
+    "@paulirish/trace_engine": "^0.0.19",
     "@sentry/node": "^6.17.4",
-    "axe-core": "^4.8.4",
+    "axe-core": "^4.9.0",
     "chrome-launcher": "^1.1.1",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.1",
@@ -199,12 +199,12 @@
     "open": "^8.4.0",
     "parse-cache-control": "1.0.1",
     "ps-list": "^8.0.0",
-    "puppeteer-core": "^22.5.0",
+    "puppeteer-core": "^22.6.5",
     "robots-parser": "^3.0.1",
     "semver": "^5.3.0",
     "speedline-core": "^1.4.3",
-    "third-party-web": "^0.24.1",
-    "tldts-icann": "^6.1.0",
+    "third-party-web": "^0.24.2",
+    "tldts-icann": "^6.1.16",
     "ws": "^7.0.0",
     "yargs": "^17.3.1",
     "yargs-parser": "^21.0.0"

package/readme.md

@@ -103,9 +103,8 @@ Configuration:
   --gather-mode, -G              Collect artifacts from a connected browser and save to disk. (Artifacts folder path may optionally be provided). If audit-mode is not also enabled, the run will quit early.
   --audit-mode, -A               Process saved artifacts from disk. (Artifacts folder path may be provided, otherwise defaults to ./latest-run/)
   --only-audits                  Only run the specified audits  [array]
-  --only-categories              Only run the specified categories. Available categories: accessibility, best-practices, performance, pwa, seo  [array]
+  --only-categories              Only run the specified categories. Available categories: accessibility, best-practices, performance, seo  [array]
   --skip-audits                  Run everything except these audits  [array]
-  --budget-path                  The path to the budget.json file for LightWallet.  [string]
   --disable-full-page-screenshot Disables collection of the full page screenshot, which can be quite large  [boolean]
 
 Output:
@@ -148,7 +147,7 @@ Examples:
   lighthouse <url> --quiet --chrome-flags="--headless"                                             Launch Headless Chrome, turn off logging
   lighthouse <url> --extra-headers "{\"Cookie\":\"monster=blue\", \"x-men\":\"wolverine\"}"        Stringify'd JSON HTTP Header key/value pairs to send in requests
   lighthouse <url> --extra-headers=./path/to/file.json                                             Path to JSON file of HTTP Header key/value pairs to send in requests
-  lighthouse <url> --only-categories=performance,pwa                                               Only run the specified categories. Available categories: accessibility, best-practices, performance, pwa, seo
+  lighthouse <url> --only-categories=performance,seo                                               Only run the specified categories. Available categories: accessibility, best-practices, performance, seo
 
 For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/.
 ```
@@ -242,7 +241,6 @@ Useful documentation, examples, and recipes to get you started.
 - [Developing Plugins](./docs/plugins.md)
 - [Making a New Audit](./docs/new-audits.md)
 - [Testing on a mobile device](./docs/readme.md#testing-on-a-mobile-device)
-- [Setting a performance budget](./docs/performance-budgets.md)
 - [Lighthouse Architecture](./docs/architecture.md)
 
 **Recipes**
@@ -364,6 +362,8 @@ This section details services that have integrated Lighthouse data. If you're wo
 
 * **[Lighthouse Metrics China](http://lighthousemetricschina.com)** - The first Lighthouse metrics tool specifically designed for China. Experience unparalleled website monitoring capabilities with Lighthouse. Gain insights into the fluctuations of your scores and metrics within the realm of the [Great Firewall of China](https://www.chinafirewalltest.co), enabling a comprehensive understanding of the factors influencing each change. Lighthouse Metrics China offers both free and paid plans.
 
+* **[DeploymentHawk](https://deploymenthawk.com)** - DeploymentHawk is an automated site auditing tool powered by Lighthouse. Effortlessly catch performance, accessibility, and SEO issues before they impact your users. DeploymentHawk is a paid product with a free 7-day trial.
+
 ## 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.

package/report/assets/styles.css

@@ -103,8 +103,6 @@
   --plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);
   --plugin-badge-size: calc(var(--gauge-circle-size) / 2.7);
   --plugin-icon-size: 65%;
-  --pwa-icon-margin: 0 var(--default-padding);
-  --pwa-icon-size: var(--topbar-logo-size);
   --report-background-color: #fff;
   --report-border-color-secondary: #ebebeb;
   --report-font-family-monospace: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
@@ -157,15 +155,6 @@
   --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>');
 
-  --pwa-installable-gray-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="nonzero"><circle fill="%23DAE0E3" cx="12" cy="12" r="12"/><path d="M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z" fill="%23FFF"/></g></svg>');
-  --pwa-optimized-gray-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="%23DAE0E3" width="24" height="24" rx="12"/><path fill="%23FFF" d="M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z"/><path d="M5 5h14v14H5z"/></g></svg>');
-
-  --pwa-installable-gray-url-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="nonzero"><circle fill="%23424242" cx="12" cy="12" r="12"/><path d="M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z" fill="%23FFF"/></g></svg>');
-  --pwa-optimized-gray-url-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="%23424242" width="24" height="24" rx="12"/><path fill="%23FFF" d="M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z"/><path d="M5 5h14v14H5z"/></g></svg>');
-
-  --pwa-installable-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><circle fill="%230CCE6B" cx="12" cy="12" r="12"/><path d="M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z" fill="%23FFF"/></g></svg>');
-  --pwa-optimized-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="%230CCE6B" width="24" height="24" rx="12"/><path d="M5 5h14v14H5z"/><path fill="%23FFF" d="M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z"/></g></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>');
 }
 
@@ -207,8 +196,6 @@
 
     /* SVGs */
     --plugin-icon-url: var(--plugin-icon-url-dark);
-    --pwa-installable-gray-url: var(--pwa-installable-gray-url-dark);
-    --pwa-optimized-gray-url: var(--pwa-optimized-gray-url-dark);
   }
 }
 
@@ -229,7 +216,6 @@
     --header-padding: 16px 0 16px 0;
     --image-preview-size: 24px;
     --plugin-icon-size: 75%;
-    --pwa-icon-margin: 0 7px 0 -3px;
     --report-font-size: 14px;
     --report-line-height: 20px;
     --score-icon-margin-left: 2px;
@@ -261,7 +247,6 @@
   --header-padding: 16px 0 16px 0;
   --screenshot-overlay-background: transparent;
   --plugin-icon-size: 75%;
-  --pwa-icon-margin: 0 7px 0 -3px;
   --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;
@@ -931,48 +916,6 @@
   margin-bottom: calc(var(--audit-group-margin-bottom) / 2);
 }
 
-.lh-audit-group__header::before {
-  /* By default, groups don't get an icon */
-  content: none;
-  width: var(--pwa-icon-size);
-  height: var(--pwa-icon-size);
-  margin: var(--pwa-icon-margin);
-  display: inline-block;
-  vertical-align: middle;
-}
-
-/* Style the "over budget" columns red. */
-.lh-audit-group--budgets #performance-budget tbody tr td:nth-child(4),
-.lh-audit-group--budgets #performance-budget tbody tr td:nth-child(5),
-.lh-audit-group--budgets #timing-budget tbody tr td:nth-child(3) {
-  color: var(--color-red-700);
-}
-
-/* Align the "over budget request count" text to be close to the "over budget bytes" column. */
-.lh-audit-group--budgets .lh-table tbody tr td:nth-child(4){
-  text-align: right;
-}
-
-.lh-audit-group--budgets .lh-details--budget {
-  width: 100%;
-  margin: 0 0 var(--default-padding);
-}
-
-.lh-audit-group--pwa-installable .lh-audit-group__header::before {
-  content: '';
-  background-image: var(--pwa-installable-gray-url);
-}
-.lh-audit-group--pwa-optimized .lh-audit-group__header::before {
-  content: '';
-  background-image: var(--pwa-optimized-gray-url);
-}
-.lh-audit-group--pwa-installable.lh-badged .lh-audit-group__header::before {
-  background-image: var(--pwa-installable-color-url);
-}
-.lh-audit-group--pwa-optimized.lh-badged .lh-audit-group__header::before {
-  background-image: var(--pwa-optimized-color-url);
-}
-
 .lh-audit-group--metrics .lh-audit-group__summary {
   margin-top: 0;
   margin-bottom: 0;
@@ -1323,10 +1266,8 @@
 
 .lh-scores-header .lh-gauge__wrapper,
 .lh-scores-header .lh-fraction__wrapper,
-.lh-scores-header .lh-gauge--pwa__wrapper,
 .lh-sticky-header .lh-gauge__wrapper,
-.lh-sticky-header .lh-fraction__wrapper,
-.lh-sticky-header .lh-gauge--pwa__wrapper {
+.lh-sticky-header .lh-fraction__wrapper {
   width: var(--gauge-wrapper-width);
 }
 

package/report/assets/templates.html

@@ -514,101 +514,6 @@ SPDX-License-Identifier: Apache-2.0
   </a>
 </template>
 
-
-<!-- Lighthouse PWA badge gauge -->
-<template id="gaugePwa">
-  <style>
-    .lh-gauge--pwa .lh-gauge--pwa__component {
-      display: none;
-    }
-    .lh-gauge--pwa__wrapper:not(.lh-badged--all) .lh-gauge--pwa__logo > path {
-      /* Gray logo unless everything is passing. */
-      fill: #B0B0B0;
-    }
-
-    .lh-gauge--pwa__disc {
-      fill: var(--color-gray-200);
-    }
-
-    .lh-gauge--pwa__logo--primary-color {
-      fill: #304FFE;
-    }
-
-    .lh-gauge--pwa__logo--secondary-color {
-      fill: #3D3D3D;
-    }
-    .lh-dark .lh-gauge--pwa__logo--secondary-color {
-      fill: #D8B6B6;
-    }
-
-    /* No passing groups. */
-    .lh-gauge--pwa__wrapper:not([class*='lh-badged--']) .lh-gauge--pwa__na-line {
-      display: inline;
-    }
-    /* Just optimized. Same n/a line as no passing groups. */
-    .lh-gauge--pwa__wrapper.lh-badged--pwa-optimized:not(.lh-badged--pwa-installable) .lh-gauge--pwa__na-line {
-      display: inline;
-    }
-
-    /* Just installable. */
-    .lh-gauge--pwa__wrapper.lh-badged--pwa-installable .lh-gauge--pwa__installable-badge {
-      display: inline;
-    }
-
-    /* All passing groups. */
-    .lh-gauge--pwa__wrapper.lh-badged--all .lh-gauge--pwa__check-circle {
-      display: inline;
-    }
-  </style>
-
-  <a class="lh-gauge__wrapper lh-gauge--pwa__wrapper">
-    <svg viewBox="0 0 60 60" class="lh-gauge lh-gauge--pwa">
-      <defs>
-        <linearGradient id="lh-gauge--pwa__check-circle__gradient" x1="50%" y1="0%" x2="50%" y2="100%">
-          <stop stop-color="#00C852" offset="0%"></stop>
-          <stop stop-color="#009688" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient id="lh-gauge--pwa__installable__shadow-gradient" x1="76.056%" x2="24.111%" y1="82.995%" y2="24.735%">
-          <stop stop-color="#A5D6A7" offset="0%"></stop>
-          <stop stop-color="#80CBC4" offset="100%"></stop>
-        </linearGradient>
-
-        <g id="lh-gauge--pwa__installable-badge">
-          <circle fill="#FFFFFF" cx="10" cy="10" r="10"></circle>
-          <path fill="#009688" d="M10 4.167A5.835 5.835 0 0 0 4.167 10 5.835 5.835 0 0 0 10 15.833 5.835 5.835 0 0 0 15.833 10 5.835 5.835 0 0 0 10 4.167zm2.917 6.416h-2.334v2.334H9.417v-2.334H7.083V9.417h2.334V7.083h1.166v2.334h2.334v1.166z"/>
-        </g>
-      </defs>
-
-      <g stroke="none" fill-rule="nonzero">
-        <!-- Background and PWA logo (color by default) -->
-        <circle class="lh-gauge--pwa__disc" cx="30" cy="30" r="30"></circle>
-        <g class="lh-gauge--pwa__logo">
-          <path class="lh-gauge--pwa__logo--secondary-color" d="M35.66 19.39l.7-1.75h2L37.4 15 38.6 12l3.4 9h-2.51l-.58-1.61z"/>
-          <path class="lh-gauge--pwa__logo--primary-color" d="M33.52 21l3.65-9h-2.42l-2.5 5.82L30.5 12h-1.86l-1.9 5.82-1.35-2.65-1.21 3.72L25.4 21h2.38l1.72-5.2 1.64 5.2z"/>
-          <path class="lh-gauge--pwa__logo--secondary-color" fill-rule="nonzero" d="M20.3 17.91h1.48c.45 0 .85-.05 1.2-.15l.39-1.18 1.07-3.3a2.64 2.64 0 0 0-.28-.37c-.55-.6-1.36-.91-2.42-.91H18v9h2.3V17.9zm1.96-3.84c.22.22.33.5.33.87 0 .36-.1.65-.29.87-.2.23-.59.35-1.15.35h-.86v-2.41h.87c.52 0 .89.1 1.1.32z"/>
-        </g>
-
-        <!-- No badges. -->
-        <rect class="lh-gauge--pwa__component lh-gauge--pwa__na-line" fill="#FFFFFF" x="20" y="32" width="20" height="4" rx="2"></rect>
-
-        <!-- Just installable. -->
-        <g class="lh-gauge--pwa__component lh-gauge--pwa__installable-badge" transform="translate(20, 29)">
-          <path fill="url(#lh-gauge--pwa__installable__shadow-gradient)" d="M33.629 19.487c-4.272 5.453-10.391 9.39-17.415 10.869L3 17.142 17.142 3 33.63 19.487z"/>
-          <use href="#lh-gauge--pwa__installable-badge" />
-        </g>
-
-        <!-- Full PWA. -->
-        <g class="lh-gauge--pwa__component lh-gauge--pwa__check-circle" transform="translate(18, 28)">
-          <circle fill="#FFFFFF" cx="12" cy="12" r="12"></circle>
-          <path fill="url(#lh-gauge--pwa__check-circle__gradient)" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
-        </g>
-      </g>
-    </svg>
-
-    <div class="lh-gauge__label"></div>
-  </a>
-</template>
-
 <!-- Lighthouse crtiical request chains component -->
 <template id="crc">
   <div class="lh-crc-container">

package/report/renderer/category-renderer.js

@@ -239,7 +239,6 @@ export class CategoryRenderer {
 
     for (const auditRef of auditRefs) {
       const groupId = auditRef.group || notAGroup;
-      if (groupId === 'hidden') continue;
       const groupAuditRefs = grouped.get(groupId) || [];
       groupAuditRefs.push(auditRef);
       grouped.set(groupId, groupAuditRefs);
@@ -531,6 +530,7 @@ export class CategoryRenderer {
 
     // Sort audits into clumps.
     for (const auditRef of category.auditRefs) {
+      if (auditRef.group === 'hidden') continue;
       const clumpId = this._getClumpIdForAuditRef(auditRef);
       const clump = /** @type {Array<LH.ReportResult.AuditRef>} */ (clumps.get(clumpId)); // already defined
       clump.push(auditRef);

package/report/renderer/components.d.ts

@@ -1,4 +1,4 @@
-/** @typedef {'3pFilter'|'audit'|'categoryHeader'|'chevron'|'clump'|'crc'|'crcChain'|'elementScreenshot'|'explodeyGauge'|'footer'|'fraction'|'gauge'|'gaugePwa'|'heading'|'metric'|'scorescale'|'scoresWrapper'|'snippet'|'snippetContent'|'snippetHeader'|'snippetLine'|'styles'|'topbar'|'warningsToplevel'} ComponentName */
+/** @typedef {'3pFilter'|'audit'|'categoryHeader'|'chevron'|'clump'|'crc'|'crcChain'|'elementScreenshot'|'explodeyGauge'|'footer'|'fraction'|'gauge'|'heading'|'metric'|'scorescale'|'scoresWrapper'|'snippet'|'snippetContent'|'snippetHeader'|'snippetLine'|'styles'|'topbar'|'warningsToplevel'} ComponentName */
 /**
  * @param {DOM} dom
  * @param {ComponentName} componentName
@@ -6,5 +6,5 @@
  */
 export function createComponent(dom: DOM, componentName: ComponentName): DocumentFragment;
 export type DOM = import('./dom.js').DOM;
-export type ComponentName = '3pFilter' | 'audit' | 'categoryHeader' | 'chevron' | 'clump' | 'crc' | 'crcChain' | 'elementScreenshot' | 'explodeyGauge' | 'footer' | 'fraction' | 'gauge' | 'gaugePwa' | 'heading' | 'metric' | 'scorescale' | 'scoresWrapper' | 'snippet' | 'snippetContent' | 'snippetHeader' | 'snippetLine' | 'styles' | 'topbar' | 'warningsToplevel';
+export type ComponentName = '3pFilter' | 'audit' | 'categoryHeader' | 'chevron' | 'clump' | 'crc' | 'crcChain' | 'elementScreenshot' | 'explodeyGauge' | 'footer' | 'fraction' | 'gauge' | 'heading' | 'metric' | 'scorescale' | 'scoresWrapper' | 'snippet' | 'snippetContent' | 'snippetHeader' | 'snippetLine' | 'styles' | 'topbar' | 'warningsToplevel';
 //# sourceMappingURL=components.d.ts.map