lighthouse 9.2.0 → 9.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.2.0",
+  "version": "9.3.0",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -14,7 +14,7 @@
   "scripts": {
     "prepack": "yarn build-report --standalone --flow --esm",
     "build-all": "npm-run-posix-or-windows build-all:task",
-    "build-all:task": "yarn build-report && yarn build-cdt-lib && yarn build-devtools && (yarn build-extension & yarn build-lr & yarn build-viewer & yarn build-treemap & yarn build-smokehouse-bundle & wait) && yarn build-pack",
+    "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-cdt-lib": "node ./build/build-cdt-lib.js",
     "build-extension": "yarn build-extension-chrome && yarn build-extension-firefox",
@@ -95,9 +95,6 @@
   },
   "devDependencies": {
     "@build-tracker/cli": "^1.0.0-beta.15",
-    "@firebase/app-types": "0.3.1",
-    "@firebase/auth-types": "0.3.2",
-    "@firebase/util": "0.2.1",
     "@rollup/plugin-alias": "^3.1.2",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-dynamic-import-vars": "^1.1.1",
@@ -115,8 +112,8 @@
     "@types/estree": "^0.0.50",
     "@types/gh-pages": "^2.0.0",
     "@types/google.analytics": "0.0.39",
-    "@types/jest": "^24.0.9",
-    "@types/jpeg-js": "^0.3.0",
+    "@types/jest": "^27.0.3",
+    "@types/jpeg-js": "^0.3.7",
     "@types/jsdom": "^16.2.13",
     "@types/lodash.clonedeep": "^4.5.6",
     "@types/lodash.get": "^4.4.6",
@@ -128,10 +125,9 @@
     "@types/resize-observer-browser": "^0.1.1",
     "@types/semver": "^5.5.0",
     "@types/tabulator-tables": "^4.9.1",
-    "@types/update-notifier": "^4.1.0",
     "@types/ws": "^7.0.0",
-    "@types/yargs": "^16.0.0",
-    "@types/yargs-parser": "^15.0.0",
+    "@types/yargs": "^17.0.8",
+    "@types/yargs-parser": "^20.2.1",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
     "acorn": "^8.5.0",
@@ -140,11 +136,12 @@
     "c8": "^7.4.0",
     "chalk": "^2.4.1",
     "chrome-devtools-frontend": "1.0.922924",
-    "conventional-changelog-cli": "^1.3.4",
-    "cpy": "^7.0.1",
+    "concurrently": "^6.4.0",
+    "conventional-changelog-cli": "^2.1.1",
+    "cpy": "^8.1.2",
     "cross-env": "^7.0.2",
     "csv-validator": "^0.0.3",
-    "devtools-protocol": "0.0.939404",
+    "devtools-protocol": "0.0.964215",
     "es-main": "^1.0.2",
     "eslint": "^8.4.1",
     "eslint-config-google": "^0.14.0",
@@ -173,7 +170,7 @@
     "resolve": "^1.20.0",
     "rollup": "^2.52.7",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-polyfill-node": "^0.7.0",
+    "rollup-plugin-polyfill-node": "^0.8.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-shim": "^1.0.0",
     "rollup-plugin-terser": "^7.0.2",
@@ -194,31 +191,30 @@
     "enquirer": "^2.3.6",
     "http-link-header": "^0.8.0",
     "intl-messageformat": "^4.4.0",
-    "jpeg-js": "^0.4.1",
+    "jpeg-js": "^0.4.3",
     "js-library-detector": "^6.4.0",
     "lighthouse-logger": "^1.3.0",
-    "lighthouse-stack-packs": "^1.6.0",
+    "lighthouse-stack-packs": "^1.7.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.set": "^4.3.2",
-    "lookup-closest-locale": "6.0.4",
+    "lookup-closest-locale": "6.2.0",
     "metaviewport-parser": "0.2.0",
-    "open": "^6.4.0",
+    "open": "^8.4.0",
     "parse-cache-control": "1.0.1",
-    "ps-list": "^7.2.0",
+    "ps-list": "^8.0.0",
     "raven": "^2.2.1",
-    "robots-parser": "^2.0.1",
+    "robots-parser": "^3.0.0",
     "semver": "^5.3.0",
     "speedline-core": "^1.4.3",
-    "third-party-web": "^0.12.4",
-    "update-notifier": "^4.1.0",
+    "third-party-web": "^0.12.7",
     "ws": "^7.0.0",
-    "yargs": "^16.1.1",
-    "yargs-parser": "^20.2.4"
+    "yargs": "^17.3.1",
+    "yargs-parser": "^21.0.0"
   },
   "resolutions": {
-    "puppeteer/**/devtools-protocol": "0.0.939404"
+    "puppeteer/**/devtools-protocol": "0.0.964215"
   },
   "repository": "GoogleChrome/lighthouse",
   "keywords": [

package/report/assets/templates.html

@@ -417,7 +417,8 @@ limitations under the License.
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--print" data-i18n="dropdownPrintSummary" data-action="print-summary"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--print" data-i18n="dropdownPrintExpanded" data-action="print-expanded"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--copy" data-i18n="dropdownCopyJSON" data-action="copy"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--download" data-i18n="dropdownSaveHTML" data-action="save-html"></a>
+        <!-- Only enabled if Options.getStandaloneReportHTML is set. -->
+        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--download lh-hidden" data-i18n="dropdownSaveHTML" data-action="save-html"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--download" data-i18n="dropdownSaveJSON" data-action="save-json"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open" data-i18n="dropdownViewer" data-action="open-viewer"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open" data-i18n="dropdownSaveGist" data-action="save-gist"></a>

package/report/clients/standalone.js

@@ -21,7 +21,11 @@ function __initLighthouseReport__() {
   // @ts-expect-error
   const lhr = window.__LIGHTHOUSE_JSON__;
 
-  const reportRootEl = renderReport(lhr);
+  const reportRootEl = renderReport(lhr, {
+    getStandaloneReportHTML() {
+      return document.documentElement.outerHTML;
+    },
+  });
   document.body.append(reportRootEl);
 
   document.addEventListener('lh-analytics', /** @param {Event} e */ e => {

package/report/renderer/category-renderer.js

@@ -480,7 +480,7 @@ export class CategoryRenderer {
    * @return {boolean}
    */
   _auditHasWarning(audit) {
-    return Boolean(audit.result.warnings && audit.result.warnings.length);
+    return Boolean(audit.result.warnings?.length);
   }
 
   /**

package/report/renderer/components.js

@@ -706,7 +706,7 @@ function createTopbarComponent(dom) {
   el40.setAttribute('href', '#');
   el40.setAttribute('data-i18n', 'dropdownCopyJSON');
   el40.setAttribute('data-action', 'copy');
-  const el41 = dom.createElement('a', 'lh-report-icon lh-report-icon--download');
+  const el41 = dom.createElement('a', 'lh-report-icon lh-report-icon--download lh-hidden');
   el41.setAttribute('role', 'menuitem');
   el41.setAttribute('tabindex', '-1');
   el41.setAttribute('href', '#');
@@ -736,7 +736,7 @@ function createTopbarComponent(dom) {
   el45.setAttribute('href', '#');
   el45.setAttribute('data-i18n', 'dropdownDarkTheme');
   el45.setAttribute('data-action', 'toggle-dark');
-  el37.append(' ', el38, ' ', el39, ' ', el40, ' ', el41, ' ', el42, ' ', el43, ' ', el44, ' ', el45, ' ');
+  el37.append(' ', el38, ' ', el39, ' ', el40, ' ', ' ', el41, ' ', el42, ' ', el43, ' ', el44, ' ', el45, ' ');
   el26.append(' ', el27, ' ', el33, ' ', el37, ' ');
   el2.append(' ', ' ', el3, ' ', el25, ' ', el26, ' ');
   el0.append(el2);

package/report/renderer/performance-category-renderer.js

@@ -225,8 +225,8 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     // Filmstrip
     const timelineEl = this.dom.createChildOf(element, 'div', 'lh-filmstrip-container');
     const thumbnailAudit = category.auditRefs.find(audit => audit.id === 'screenshot-thumbnails');
-    const thumbnailResult = thumbnailAudit && thumbnailAudit.result;
-    if (thumbnailResult && thumbnailResult.details) {
+    const thumbnailResult = thumbnailAudit?.result;
+    if (thumbnailResult?.details) {
       timelineEl.id = thumbnailResult.id;
       const filmstripEl = this.detailsRenderer.render(thumbnailResult.details);
       filmstripEl && timelineEl.appendChild(filmstripEl);
@@ -301,7 +301,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     const budgetTableEls = [];
     ['performance-budget', 'timing-budget'].forEach((id) => {
       const audit = category.auditRefs.find(audit => audit.id === id);
-      if (audit && audit.result.details) {
+      if (audit?.result.details) {
         const table = this.detailsRenderer.render(audit.result.details);
         if (table) {
           table.id = id;
@@ -347,7 +347,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
 
       const labelEl = this.dom.createChildOf(metricFilterEl, 'label', 'lh-metricfilter__label');
       labelEl.htmlFor = elemId;
-      labelEl.title = metric.result && metric.result.title;
+      labelEl.title = metric.result?.title;
       labelEl.textContent = metric.acronym || metric.id;
 
       if (metric.acronym === 'All') {

package/report/renderer/report-renderer.js

@@ -260,7 +260,7 @@ export class ReportRenderer {
     Util.reportJson = report;
 
     const fullPageScreenshot =
-      report.audits['full-page-screenshot'] && report.audits['full-page-screenshot'].details &&
+      report.audits['full-page-screenshot']?.details &&
       report.audits['full-page-screenshot'].details.type === 'full-page-screenshot' ?
       report.audits['full-page-screenshot'].details : undefined;
     const detailsRenderer = new DetailsRenderer(this._dom, {

package/report/renderer/report-ui-features.js

@@ -112,6 +112,10 @@ export class ReportUIFeatures {
       });
     }
 
+    if (this._opts.getStandaloneReportHTML) {
+      this._dom.find('a[data-action="save-html"]', this._dom.rootEl).classList.remove('lh-hidden');
+    }
+
     // Fill in all i18n data.
     for (const node of this._dom.findAll('[data-i18n]', this._dom.rootEl)) {
       // These strings are guaranteed to (at least) have a default English string in Util.UIStrings,
@@ -146,15 +150,23 @@ export class ReportUIFeatures {
     return buttonEl;
   }
 
+  resetUIState() {
+    if (this._topbar) {
+      this._topbar.resetUIState();
+    }
+  }
+
   /**
    * Returns the html that recreates this report.
    * @return {string}
    */
   getReportHtml() {
-    if (this._topbar) {
-      this._topbar.resetUIState();
+    if (!this._opts.getStandaloneReportHTML) {
+      throw new Error('`getStandaloneReportHTML` is not set');
     }
-    return `<!doctype html><body style="margin: 0">${this._dom.rootEl.outerHTML}`;
+
+    this.resetUIState();
+    return this._opts.getStandaloneReportHTML();
   }
 
   /**

package/report/test/generator/report-generator-test.js

@@ -97,7 +97,7 @@ describe('ReportGenerator', () => {
       expect(lines.slice(0, 3).join('\n')).toMatchInlineSnapshot(`
 "requestedUrl,finalUrl,category,name,title,type,score
 \\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"Performance\\",\\"performance-score\\",\\"Overall Performance Category Score\\",\\"numeric\\",\\"0.26\\"
-\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"Performance\\",\\"first-contentful-paint\\",\\"First Contentful Paint\\",\\"numeric\\",\\"0.02\\"
+\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"Performance\\",\\"first-contentful-paint\\",\\"First Contentful Paint\\",\\"numeric\\",\\"0.01\\"
 "
 `);
 

package/report/test/renderer/report-ui-features-test.js

@@ -27,15 +27,16 @@ describe('ReportUIFeatures', () => {
 
   /**
    * @param {LH.JSON} lhr
+   * @param {LH.Renderer.Options=} opts
    * @return {HTMLElement}
    */
-  function render(lhr) {
+  function render(lhr, opts) {
     const detailsRenderer = new DetailsRenderer(dom);
     const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
     const renderer = new ReportRenderer(dom, categoryRenderer);
-    const reportUIFeatures = new ReportUIFeatures(dom);
+    const reportUIFeatures = new ReportUIFeatures(dom, opts);
     const container = dom.find('body', dom.document());
-    renderer.renderReport(lhr, container);
+    renderer.renderReport(lhr, container, opts);
     reportUIFeatures.initFeatures(lhr);
     return container;
   }
@@ -60,6 +61,7 @@ describe('ReportUIFeatures', () => {
 
     global.HTMLElement = document.window.HTMLElement;
     global.HTMLInputElement = document.window.HTMLInputElement;
+    global.CustomEvent = document.window.CustomEvent;
 
     global.window = document.window;
     global.window.requestAnimationFrame = fn => fn();
@@ -83,6 +85,7 @@ describe('ReportUIFeatures', () => {
     global.window = undefined;
     global.HTMLElement = undefined;
     global.HTMLInputElement = undefined;
+    global.CustomEvent = undefined;
   });
 
   describe('initFeatures', () => {
@@ -275,6 +278,22 @@ describe('ReportUIFeatures', () => {
         expect(filterControl.hidden).toEqual(true);
       });
     });
+
+    it('save-html option enabled if callback present', () => {
+      let container = render(sampleResults);
+      const getSaveEl = () => dom.find('a[data-action="save-html"]', container);
+      expect(getSaveEl().classList.contains('lh-hidden')).toBeTruthy();
+
+      const getHtmlMock = jest.fn();
+      container = render(sampleResults, {
+        getStandaloneReportHTML: getHtmlMock,
+      });
+      expect(getSaveEl().classList.contains('lh-hidden')).toBeFalsy();
+
+      expect(getHtmlMock).not.toBeCalled();
+      getSaveEl().click();
+      expect(getHtmlMock).toBeCalled();
+    });
   });
 
   describe('fireworks', () => {
@@ -351,7 +370,6 @@ describe('ReportUIFeatures', () => {
       assert.ok(!dropDown._toggleEl.classList.contains('lh-active'));
     });
 
-
     it('Escape key removes active class', () => {
       dropDown._toggleEl.click();
       assert.ok(dropDown._toggleEl.classList.contains('lh-active'));

package/report/test-assets/faux-psi.js

@@ -92,13 +92,12 @@ async function distinguishLHR(lhr, tabId) {
     lhr.categories.performance.score = 0.81;
   }
 
-  const finalSSDetails = lhr.audits['final-screenshot'] && lhr.audits['final-screenshot'].details;
+  const finalSSDetails = lhr.audits['final-screenshot']?.details;
   if (finalSSDetails && finalSSDetails.type === 'screenshot') {
     finalSSDetails.data = await decorateScreenshot(finalSSDetails.data, tabId);
   }
 
-  const fpSSDetails = lhr.audits['full-page-screenshot'] &&
-      lhr.audits['full-page-screenshot'].details;
+  const fpSSDetails = lhr.audits['full-page-screenshot']?.details;
   if (fpSSDetails && fpSSDetails.type === 'full-page-screenshot') {
     fpSSDetails.screenshot.data = await decorateScreenshot(fpSSDetails.screenshot.data, tabId);
   }

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

@@ -24,6 +24,8 @@ declare module Renderer {
      * Flow report uses this to convert `#seo` to `#index=0&anchor=seo`.
      */
     onPageAnchorRendered?: (link: HTMLAnchorElement) => void;
+    /** If defined, `Save as HTML` option is shown in dropdown menu. */
+    getStandaloneReportHTML?: () => string;
   }
 }
 

package/shared/localization/locales/ar-XB.json

@@ -477,13 +477,13 @@
     "message": "`[user-scalable=\"no\"]` ‏‮is‬‏ ‏‮not‬‏ ‏‮used‬‏ ‏‮in‬‏ ‏‮the‬‏ `<meta name=\"viewport\">` ‏‮element‬‏ ‏‮and‬‏ ‏‮the‬‏ `[maximum-scale]` ‏‮attribute‬‏ ‏‮is‬‏ ‏‮not‬‏ ‏‮less‬‏ ‏‮than‬‏ 5."
   },
   "lighthouse-core/audits/accessibility/object-alt.js | description": {
-    "message": "‏‮Screen‬‏ ‏‮readers‬‏ ‏‮cannot‬‏ ‏‮translate‬‏ ‏‮non‬‏-‏‮text‬‏ ‏‮content‬‏. ‏‮Adding‬‏ ‏‮alt‬‏ ‏‮text‬‏ ‏‮to‬‏ `<object>` ‏‮elements‬‏ ‏‮helps‬‏ ‏‮screen‬‏ ‏‮readers‬‏ ‏‮convey‬‏ ‏‮meaning‬‏ ‏‮to‬‏ ‏‮users‬‏. [‏‮Learn‬‏ ‏‮more‬‏](https://web.dev/object-alt/)."
+    "message": "‏‮Screen‬‏ ‏‮readers‬‏ ‏‮cannot‬‏ ‏‮translate‬‏ ‏‮non‬‏-‏‮text‬‏ ‏‮content‬‏. ‏‮Adding‬‏ ‏‮alternate‬‏ ‏‮text‬‏ ‏‮to‬‏ `<object>` ‏‮elements‬‏ ‏‮helps‬‏ ‏‮screen‬‏ ‏‮readers‬‏ ‏‮convey‬‏ ‏‮meaning‬‏ ‏‮to‬‏ ‏‮users‬‏. [‏‮Learn‬‏ ‏‮more‬‏](https://web.dev/object-alt/)."
   },
   "lighthouse-core/audits/accessibility/object-alt.js | failureTitle": {
-    "message": "`<object>` ‏‮elements‬‏ ‏‮do‬‏ ‏‮not‬‏ ‏‮have‬‏ `[alt]` ‏‮text‬‏"
+    "message": "`<object>` ‏‮elements‬‏ ‏‮do‬‏ ‏‮not‬‏ ‏‮have‬‏ ‏‮alternate‬‏ ‏‮text‬‏"
   },
   "lighthouse-core/audits/accessibility/object-alt.js | title": {
-    "message": "`<object>` ‏‮elements‬‏ ‏‮have‬‏ `[alt]` ‏‮text‬‏"
+    "message": "`<object>` ‏‮elements‬‏ ‏‮have‬‏ ‏‮alternate‬‏ ‏‮text‬‏"
   },
   "lighthouse-core/audits/accessibility/tabindex.js | description": {
     "message": "‏‮A‬‏ ‏‮value‬‏ ‏‮greater‬‏ ‏‮than‬‏ 0 ‏‮implies‬‏ ‏‮an‬‏ ‏‮explicit‬‏ ‏‮navigation‬‏ ‏‮ordering‬‏. ‏‮Although‬‏ ‏‮technically‬‏ ‏‮valid‬‏, ‏‮this‬‏ ‏‮often‬‏ ‏‮creates‬‏ ‏‮frustrating‬‏ ‏‮experiences‬‏ ‏‮for‬‏ ‏‮users‬‏ ‏‮who‬‏ ‏‮rely‬‏ ‏‮on‬‏ ‏‮assistive‬‏ ‏‮technologies‬‏. [‏‮Learn‬‏ ‏‮more‬‏](https://web.dev/tabindex/)."
@@ -1052,6 +1052,9 @@
   "lighthouse-core/audits/installable-manifest.js | not-offline-capable": {
     "message": "‏‮Page‬‏ ‏‮does‬‏ ‏‮not‬‏ ‏‮work‬‏ ‏‮offline‬‏"
   },
+  "lighthouse-core/audits/installable-manifest.js | pipeline-restarted": {
+    "message": "‏‮PWA‬‏ ‏‮has‬‏ ‏‮been‬‏ ‏‮uninstalled‬‏ ‏‮and‬‏ ‏‮installability‬‏ ‏‮checks‬‏ ‏‮resetting‬‏."
+  },
   "lighthouse-core/audits/installable-manifest.js | platform-not-supported-on-android": {
     "message": "‏‮The‬‏ ‏‮specified‬‏ ‏‮application‬‏ ‏‮platform‬‏ ‏‮is‬‏ ‏‮not‬‏ ‏‮supported‬‏ ‏‮on‬‏ ‏‮Android‬‏"
   },
@@ -1061,6 +1064,9 @@
   "lighthouse-core/audits/installable-manifest.js | prefer-related-applications-only-beta-stable": {
     "message": "‏‮prefer‬‏_‏‮related‬‏_‏‮applications‬‏ ‏‮is‬‏ ‏‮only‬‏ ‏‮supported‬‏ ‏‮on‬‏ ‏‮Chrome‬‏ ‏‮Beta‬‏ ‏‮and‬‏ ‏‮Stable‬‏ ‏‮channels‬‏ ‏‮on‬‏ ‏‮Android‬‏."
   },
+  "lighthouse-core/audits/installable-manifest.js | protocol-timeout": {
+    "message": "‏‮Lighthouse‬‏ ‏‮could‬‏ ‏‮not‬‏ ‏‮determine‬‏ ‏‮if‬‏ ‏‮there‬‏ ‏‮was‬‏ ‏‮a‬‏ ‏‮service‬‏ ‏‮worker‬‏. ‏‮Please‬‏ ‏‮try‬‏ ‏‮with‬‏ ‏‮a‬‏ ‏‮newer‬‏ ‏‮version‬‏ ‏‮of‬‏ ‏‮Chrome‬‏."
+  },
   "lighthouse-core/audits/installable-manifest.js | start-url-not-valid": {
     "message": "‏‮Manifest‬‏ ‏‮start‬‏ ‏‮URL‬‏ ‏‮is‬‏ ‏‮not‬‏ ‏‮valid‬‏"
   },
@@ -1212,7 +1218,7 @@
     "message": "‏‮Server‬‏ ‏‮Backend‬‏ ‏‮Latencies‬‏"
   },
   "lighthouse-core/audits/no-unload-listeners.js | description": {
-    "message": "‏‮The‬‏ `unload` ‏‮event‬‏ ‏‮does‬‏ ‏‮not‬‏ ‏‮fire‬‏ ‏‮reliably‬‏ ‏‮and‬‏ ‏‮listening‬‏ ‏‮for‬‏ ‏‮it‬‏ ‏‮can‬‏ ‏‮prevent‬‏ ‏‮browser‬‏ ‏‮optimizations‬‏ ‏‮like‬‏ ‏‮the‬‏ ‏‮Back‬‏-‏‮Forward‬‏ ‏‮Cache‬‏. ‏‮Consider‬‏ ‏‮using‬‏ ‏‮the‬‏ `pagehide` ‏‮or‬‏ `visibilitychange` ‏‮events‬‏ ‏‮instead‬‏. [‏‮Learn‬‏ ‏‮more‬‏](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#the-unload-event)"
+    "message": "‏‮The‬‏ `unload` ‏‮event‬‏ ‏‮does‬‏ ‏‮not‬‏ ‏‮fire‬‏ ‏‮reliably‬‏ ‏‮and‬‏ ‏‮listening‬‏ ‏‮for‬‏ ‏‮it‬‏ ‏‮can‬‏ ‏‮prevent‬‏ ‏‮browser‬‏ ‏‮optimizations‬‏ ‏‮like‬‏ ‏‮the‬‏ ‏‮Back‬‏-‏‮Forward‬‏ ‏‮Cache‬‏. ‏‮Use‬‏ `pagehide` ‏‮or‬‏ `visibilitychange` ‏‮events‬‏ ‏‮instead‬‏. [‏‮Learn‬‏ ‏‮more‬‏](https://web.dev/bfcache/#never-use-the-unload-event)"
   },
   "lighthouse-core/audits/no-unload-listeners.js | failureTitle": {
     "message": "‏‮Registers‬‏ ‏‮an‬‏ `unload` ‏‮listener‬‏"
@@ -2219,6 +2225,36 @@
   "node_modules/lighthouse-stack-packs/packs/magento.js | uses-rel-preload": {
     "message": "`<link rel=preload>` ‏‮tags‬‏ ‏‮can‬‏ ‏‮be‬‏ ‏‮added‬‏ ‏‮by‬‏ [‏‮modifying‬‏ ‏‮a‬‏ ‏‮themes‬‏'‏‮s‬‏ ‏‮layout‬‏](https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html)."
   },
+  "node_modules/lighthouse-stack-packs/packs/next.js | modern-image-formats": {
+    "message": "‏‮Use‬‏ ‏‮the‬‏ `Next.js` ‏‮Image‬‏ ‏‮Optimization‬‏ ‏‮API‬‏ ‏‮to‬‏ ‏‮serve‬‏ ‏‮modern‬‏ ‏‮formats‬‏ ‏‮like‬‏ `WebP` ‏‮and‬‏ `AVIF`. [‏‮Learn‬‏ ‏‮more‬‏](https://nextjs.org/docs/api-reference/next/image#acceptable-formats)."
+  },
+  "node_modules/lighthouse-stack-packs/packs/next.js | offscreen-images": {
+    "message": "‏‮Use‬‏ ‏‮the‬‏ `next/image` ‏‮component‬‏, ‏‮which‬‏ ‏‮defaults‬‏ ‏‮to‬‏ `loading=\"lazy\"`. [‏‮Learn‬‏ ‏‮more‬‏](https://nextjs.org/docs/api-reference/next/image#loading)."
+  },
+  "node_modules/lighthouse-stack-packs/packs/next.js | render-blocking-resources": {
+    "message": "‏‮Use‬‏ ‏‮the‬‏ `next/script` ‏‮component‬‏ ‏‮to‬‏ ‏‮defer‬‏ ‏‮loading‬‏ ‏‮of‬‏ ‏‮non‬‏-‏‮critical‬‏ ‏‮third‬‏-‏‮party‬‏ ‏‮scripts‬‏. [‏‮Learn‬‏ ‏‮more‬‏](https://nextjs.org/docs/basic-features/script)."
+  },
+  "node_modules/lighthouse-stack-packs/packs/next.js | unused-css-rules": {
+    "message": "‏‮Consider‬‏ ‏‮setting‬‏ ‏‮up‬‏ `PurgeCSS` ‏‮in‬‏ `Next.js` ‏‮configuration‬‏ ‏‮to‬‏ ‏‮remove‬‏ ‏‮unused‬‏ ‏‮rules‬‏ ‏‮from‬‏ ‏‮stylesheets‬‏. [‏‮Learn‬‏ ‏‮more‬‏](https://purgecss.com/guides/next.html)."
+  },
+  "node_modules/lighthouse-stack-packs/packs/next.js | unused-javascript": {
+    "message": "‏‮Use‬‏ `Webpack Bundle Analyzer` ‏‮to‬‏ ‏‮detect‬‏ ‏‮unused‬‏ ‏‮JavaScript‬‏ ‏‮code‬‏. [‏‮Learn‬‏ ‏‮mode‬‏](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer)"
+  },
+  "node_modules/lighthouse-stack-packs/packs/next.js | user-timings": {
+    "message": "‏‮Consider‬‏ ‏‮using‬‏ `Next.js Analytics` ‏‮to‬‏ ‏‮measure‬‏ ‏‮your‬‏ ‏‮app‬‏'‏‮s‬‏ ‏‮real‬‏-‏‮world‬‏ ‏‮performance‬‏. [‏‮Learn‬‏ ‏‮more‬‏](https://nextjs.org/docs/advanced-features/measuring-performance)."
+  },
+  "node_modules/lighthouse-stack-packs/packs/next.js | uses-long-cache-ttl": {
+    "message": "‏‮Configure‬‏ ‏‮caching‬‏ ‏‮for‬‏ ‏‮immutable‬‏ ‏‮assets‬‏ ‏‮and‬‏ `Server-side Rendered` (‏‮SSR‬‏) ‏‮pages‬‏. [‏‮Learn‬‏ ‏‮more‬‏](https://nextjs.org/docs/going-to-production#caching)."
+  },
+  "node_modules/lighthouse-stack-packs/packs/next.js | uses-optimized-images": {
+    "message": "‏‮Use‬‏ ‏‮the‬‏ `next/image` ‏‮component‬‏ ‏‮instead‬‏ ‏‮of‬‏ `<img>` ‏‮to‬‏ ‏‮optimize‬‏ ‏‮images‬‏. [‏‮Learn‬‏ ‏‮more‬‏](https://nextjs.org/docs/basic-features/image-optimization)."
+  },
+  "node_modules/lighthouse-stack-packs/packs/next.js | uses-responsive-images": {
+    "message": "‏‮Use‬‏ ‏‮the‬‏ `next/image` ‏‮component‬‏ ‏‮to‬‏ ‏‮set‬‏ ‏‮the‬‏ ‏‮appropriate‬‏ `sizes`. [‏‮Learn‬‏ ‏‮more‬‏](https://nextjs.org/docs/api-reference/next/image#sizes)."
+  },
+  "node_modules/lighthouse-stack-packs/packs/next.js | uses-text-compression": {
+    "message": "‏‮Enable‬‏ ‏‮compression‬‏ ‏‮on‬‏ ‏‮your‬‏ ‏‮Next‬‏.‏‮js‬‏ ‏‮server‬‏. [‏‮Learn‬‏ ‏‮more‬‏](https://nextjs.org/docs/api-reference/next.config.js/compression)."
+  },
   "node_modules/lighthouse-stack-packs/packs/octobercms.js | efficient-animated-content": {
     "message": "[‏‮Replace‬‏ ‏‮animated‬‏ ‏‮GIFs‬‏ ‏‮with‬‏ ‏‮video‬‏](https://web.dev/replace-gifs-with-videos/) ‏‮for‬‏ ‏‮faster‬‏ ‏‮web‬‏ ‏‮page‬‏ ‏‮loads‬‏ ‏‮and‬‏ ‏‮consider‬‏ ‏‮using‬‏ ‏‮modern‬‏ ‏‮file‬‏ ‏‮formats‬‏ ‏‮such‬‏ ‏‮as‬‏ [‏‮WebM‬‏](https://web.dev/replace-gifs-with-videos/#create-webm-videos) ‏‮or‬‏ [‏‮AV‬‏1](https://developers.google.com/web/updates/2018/09/chrome-70-media-updates#av1-decoder) ‏‮to‬‏ ‏‮improve‬‏ ‏‮compression‬‏ ‏‮efficiency‬‏ ‏‮by‬‏ ‏‮greater‬‏ ‏‮than‬‏ 30% ‏‮over‬‏ ‏‮the‬‏ ‏‮current‬‏ ‏‮state‬‏-‏‮of‬‏-‏‮the‬‏-‏‮art‬‏ ‏‮video‬‏ ‏‮codec‬‏, ‏‮VP‬‏9."
   },