From f7ed5e127f2717bfe47f1692b8e5d603e9b3c047 Mon Sep 17 00:00:00 2001 From: ChristopherPHolder Date: Mon, 26 Aug 2024 15:35:29 +0200 Subject: [PATCH 01/12] fix(workspace): update puppeteer and lighthouse --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index af5afab4..c6bcf7bb 100644 --- a/package.json +++ b/package.json @@ -18,19 +18,19 @@ "prepare": "husky install" }, "dependencies": { - "@puppeteer/replay": "^1.3.1", + "@puppeteer/replay": "^3.1.1", "@types/concurrently": "^7.0.0", - "@types/puppeteer": "^5.4.7", + "@types/puppeteer": "^7.0.4", "@types/yargs": "^17.0.32", "@typescript-eslint/eslint-plugin": "^7.18.0", "@typescript-eslint/parser": "^7.18.0", "concurrently": "^7.1.0", "enquirer": "^2.3.6", - "lighthouse": "^11.7.1", + "lighthouse": "^12.2.0", "node-fetch": "^3.3.2", "npm-run-all": "^4.1.5", "prettier": "3.2.5", - "puppeteer": "^19.0.0", + "puppeteer": "^23.1.1", "rxjs": "^7.8.1", "ts-node": "10.9.1", "tslib": "^2.3.1", From c13469ff600adfbdb7fe728c22e859387c5afe70 Mon Sep 17 00:00:00 2001 From: ChristopherPHolder Date: Mon, 26 Aug 2024 17:04:51 +0200 Subject: [PATCH 02/12] fix(workspace): remove budgets --- budget.json | 46 - .../tests/__snapshots__/help.e2e.test.ts.snap | 47 - .../src/lib/commands/assert/command-impl.ts | 7 - packages/cli/src/lib/commands/assert/index.ts | 18 - .../cli/src/lib/commands/assert/options.ts | 27 - .../commands/assert/utils/budgets/index.ts | 11 - .../lib/commands/assert/utils/md-report.ts | 160 +- .../assert/utils/md-report.unit.test.ts | 14 +- .../assert/utils/mocks/lhr-9-budgets.json | 9291 ----------------- .../src/lib/commands/collect/options/index.ts | 2 - .../src/lib/commands/collect/options/types.ts | 4 +- .../collect/processes/collect-reports.ts | 4 +- .../commands/collect/utils/config/index.ts | 46 +- .../src/lib/commands/collect/utils/params.ts | 10 +- .../commands/collect/utils/report/lh-utils.ts | 10 +- .../commands/collect/utils/report/types.ts | 13 +- .../collect/utils/user-flow/collect-flow.ts | 8 +- .../commands/collect/utils/user-flow/types.ts | 23 +- .../collect/utils/user-flow/user-flow.mock.ts | 9 - packages/cli/src/lib/commands/commands.ts | 2 - .../cli/src/lib/commands/init/command-impl.ts | 4 +- packages/cli/src/lib/commands/init/options.ts | 7 - packages/cli/src/lib/commands/init/utils.ts | 14 +- packages/cli/src/lib/global/rc-json/index.ts | 6 +- packages/cli/src/lib/types.ts | 7 +- .../src/executors/user-flow/executor.spec.ts | 1 - 26 files changed, 35 insertions(+), 9756 deletions(-) delete mode 100644 budget.json delete mode 100644 e2e/cli-e2e/tests/__snapshots__/help.e2e.test.ts.snap delete mode 100644 packages/cli/src/lib/commands/assert/command-impl.ts delete mode 100644 packages/cli/src/lib/commands/assert/index.ts delete mode 100644 packages/cli/src/lib/commands/assert/options.ts delete mode 100644 packages/cli/src/lib/commands/assert/utils/budgets/index.ts delete mode 100644 packages/cli/src/lib/commands/assert/utils/mocks/lhr-9-budgets.json diff --git a/budget.json b/budget.json deleted file mode 100644 index a8ffce51..00000000 --- a/budget.json +++ /dev/null @@ -1,46 +0,0 @@ -[ - { - "path": "/*", - "resourceSizes": [ - { - "resourceType": "total", - "budget": 555 - }, - { - "resourceType": "script", - "budget": 150 - } - ], - "resourceCounts": [ - { - "resourceType": "third-party", - "budget": 100 - } - ], - "timings": [ - { - "metric": "interactive", - "budget": 5000 - }, - { - "metric": "first-meaningful-paint", - "budget": 2000 - } - ] - }, - { - "options": { - "firstPartyHostnames": [ - "*.my-site.com", - "my-site.cdn.com" - ] - }, - "path": "/checkout", - "resourceSizes": [ - { - "resourceType": "script", - "budget": 200 - } - ] - } -] diff --git a/e2e/cli-e2e/tests/__snapshots__/help.e2e.test.ts.snap b/e2e/cli-e2e/tests/__snapshots__/help.e2e.test.ts.snap deleted file mode 100644 index 5c8110b1..00000000 --- a/e2e/cli-e2e/tests/__snapshots__/help.e2e.test.ts.snap +++ /dev/null @@ -1,47 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`user-flow help > should print global help 1`] = ` -"cli.js - -Run a set of user flows and save the result - -Commands: - cli.js init Setup .user-flowrc.json - cli.js collect Run a set of user flows and save the result - cli.js Run a set of user flows and save the result [default] - cli.js assert Setup .user-flowrc.json - -Options: - --version Show version number [boolean] - -v, --verbose Run with verbose logging [boolean] [default: false] - -p, --rcPath Path to user-flow.config.json. e.g. - \`./user-flowrc.json\` - [string] [default: ".user-flowrc.json"] - -i, --interactive When false questions are skipped with the values from - the suggestions. This is useful for CI integrations. - [boolean] [default: true] - -t, --url URL to analyze [string] - -u, --ufPath folder containing user-flow files to run. (\`*.uf.ts\` - or \`*.uf.js\`) [string] - -l, --config Lighthouse configuration (RC file only) [string] - -c, --configPath Path to Lighthouse configuration e.g config.json - [string] - -s, --serveCommand The npm command to serve your application. e.g. "npm - run serve:prod" [string] - -w, --awaitServeStdout A string in stdout resulting from serving the app, to - be awaited before start running the tests. e.g. - "server running..." [string] - -d, --dryRun Execute commands without effects [boolean] - -o, --outPath output folder for the user-flow reports [string] - -f, --format Report output formats e.g. JSON - [array] [choices: "html", "json", "md", "stdout"] - -e, --openReport Opens browser automatically after the user-flow is - collected. (true by default) [boolean] [default: true] - -k, --budgetPath Path to budgets.json [string] - -j, --budgets Performance budgets (RC file only) [array] - -h, --help Show help [boolean] - -Examples: - init Setup user-flows over prompts -" -`; diff --git a/packages/cli/src/lib/commands/assert/command-impl.ts b/packages/cli/src/lib/commands/assert/command-impl.ts deleted file mode 100644 index a464819a..00000000 --- a/packages/cli/src/lib/commands/assert/command-impl.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { logVerbose } from '../../core/loggin/index.js'; -import { readBudgets } from './utils/budgets/index.js'; - -export async function runAssertCommand(): Promise { - logVerbose(readBudgets()); - return Promise.resolve(); -} diff --git a/packages/cli/src/lib/commands/assert/index.ts b/packages/cli/src/lib/commands/assert/index.ts deleted file mode 100644 index d620aebe..00000000 --- a/packages/cli/src/lib/commands/assert/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { YargsCommandObject } from '../../core/yargs/types.js'; -import { logVerbose } from '../../core/loggin/index.js'; -import { readFile } from '../../core/file/index.js'; -import { generateMdReport } from './utils/md-report.js'; - -export const assertCommand: YargsCommandObject = { - command: 'assert', - description: 'Setup .user-flowrc.json', - module: { - handler: async () => { - logVerbose(`run "assert" as a yargs command`); - const json = JSON.parse(readFile('./packages/cli/docs/raw/order-coffee.uf.json').toString()); - const mdReport = await generateMdReport(json); - console.log('md report', mdReport); - } - } -}; - diff --git a/packages/cli/src/lib/commands/assert/options.ts b/packages/cli/src/lib/commands/assert/options.ts deleted file mode 100644 index 5e40c5fb..00000000 --- a/packages/cli/src/lib/commands/assert/options.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { SharedFlagsSettings } from 'lighthouse'; -import { Options } from 'yargs'; - -const budgets = { - alias: 'j', - type: 'array', - string: true, - description: 'Performance budgets (RC file only)' -} satisfies Options; - -const budgetPath = { - alias: 'k', - type: 'string', - description: 'Path to budgets.json' -} satisfies Options; - -export const assertOptions = { - budgetPath, - budgets -} satisfies Record; - -// @TODO this type has overlap with the one in rc-json.ts we should fix that and only have one -export type AssertRcOptions = { - budgetPath?: string, - budgets?: SharedFlagsSettings['budgets'] -} -export type AssertArgvOptions = AssertRcOptions; diff --git a/packages/cli/src/lib/commands/assert/utils/budgets/index.ts b/packages/cli/src/lib/commands/assert/utils/budgets/index.ts deleted file mode 100644 index 8f64ef0b..00000000 --- a/packages/cli/src/lib/commands/assert/utils/budgets/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Budget } from 'lighthouse'; -import { readFile } from '../../../../core/file/index.js'; - -const DEFAULT_ASSERT_BUDGET_PATH = './budget.json'; - -export function readBudgets(budgetPath: string = DEFAULT_ASSERT_BUDGET_PATH): Budget[] { - return JSON.parse(readFile(budgetPath, { fail: true }) || '{}'); -} - - - diff --git a/packages/cli/src/lib/commands/assert/utils/md-report.ts b/packages/cli/src/lib/commands/assert/utils/md-report.ts index 01e49fab..4ea0e404 100644 --- a/packages/cli/src/lib/commands/assert/utils/md-report.ts +++ b/packages/cli/src/lib/commands/assert/utils/md-report.ts @@ -1,152 +1,21 @@ -import {FractionResults, GatherMode, ReducedFlowStep, ReducedReport} from '../../collect/utils/report/types.js'; -import {enrichReducedReportWithBaseline} from '../../collect/utils/report/utils.js'; -import {Alignment, table} from '../../../core/md/table.js'; -import {style} from '../../../core/md/font-style.js'; -import {headline, Hierarchy} from '../../../core/md/headline.js'; -import {NEW_LINE} from '../../../core/md/constants.js'; -import {details} from '../../../core/md/details.js'; -// @ts-ignore -import Details from "lighthouse/types/lhr/audit-details.d.ts"; -import Table = Details.Table; - -const budgetsSymbol = '🔒' +import { FractionResults, ReducedFlowStep, ReducedReport } from '../../collect/utils/report/types.js'; +import { enrichReducedReportWithBaseline } from '../../collect/utils/report/utils.js'; +import { Alignment, table } from '../../../core/md/table.js'; +import { style } from '../../../core/md/font-style.js'; +import { headline } from '../../../core/md/headline.js'; +import { NEW_LINE } from '../../../core/md/constants.js'; export async function generateMdReport(flowResult: ReducedReport): Promise { const name = flowResult.name; const dateTime = `Date/Time: ${style(new Date().toISOString().replace('T', ' ').split('.')[0].slice(0, -3))} `; const stepsTable = await getStepsTable(flowResult); - let md = `${headline(name)}${NEW_LINE} + return `${headline(name)}${NEW_LINE} ${dateTime}${NEW_LINE} ${stepsTable}${NEW_LINE} `; - - const budgetsTable = await getBudgetTable(flowResult); - if (budgetsTable !== '') { - md += details(`${budgetsSymbol} Budgets`, budgetsTable) + NEW_LINE; - } - - - return md; -} - -/** - * ## Navigation report (127.0.0.1/) - * - * | Resource Type | Requests | Transfer Size | Over Budget | - * | :-----------: | :------: | :-----------: | :---------: | - * | Total | 205774 | total | 204750 | - * | Script | 101958 | script | - | - * | Third-party | 97308 | third-party | - | - * - * | Metric | Measurement | Over Budget | - * | :--------------------: | :---------: | :---------: | - * | First Meaningful Paint | 2043 | 43 | - * | Time to Interactive | 4745 | - | - * - */ - -export async function getBudgetTable(reducedReport: ReducedReport, options: { - heading: Hierarchy -} = { heading: 3 }): Promise { - const performanceBudgets = reducedReport.steps - .filter(({ - resourceCountsBudget, - resourceSizesBudget, - timingsBudget - }) => resourceCountsBudget || resourceSizesBudget || timingsBudget) - .map(({ name, resourceCountsBudget, resourceSizesBudget, timingsBudget }) => ({ - name, - resultsSizeBudget: getResourceSizes(resourceSizesBudget), - resultsCountBudget: getResourceCounts(resourceCountsBudget), - resultsTimingBudget: getTimings(timingsBudget) - }) - ); - return performanceBudgets.length ? (await Promise.all(performanceBudgets.map(async b => { - let md = headline(b.name, options.heading) + NEW_LINE + NEW_LINE; - if (b.resultsSizeBudget !== undefined) { - md += style('Resource Size Budget') + NEW_LINE + NEW_LINE; - md += await table(b.resultsSizeBudget) + NEW_LINE + NEW_LINE - } - if (b.resultsCountBudget !== undefined) { - md += style('Resource Count Budget') + NEW_LINE + NEW_LINE; - md += await table(b.resultsCountBudget) + NEW_LINE + NEW_LINE - } - if (b.resultsTimingBudget !== undefined) { - md += style('Timing Budget') + NEW_LINE + NEW_LINE; - md += await table(b.resultsTimingBudget) + NEW_LINE + NEW_LINE - } - return md; - }))).join(NEW_LINE) : ''; -} - - -function getTimings(resultsTimingBudget: Table | undefined): undefined | string[][] { - if (resultsTimingBudget === undefined) { - return undefined - } else { - return [ - // [ {text: string, ...props } ] - resultsTimingBudget.headings.map((h: any) => h.text as string), - ...resultsTimingBudget.items.map(({label, measurement, overBudget}: any) => { - const row = []; - if(label === 'Cumulative Layout Shift') { - return [label + '', - measurement === undefined ? '-' : parseFloat(measurement.value).toFixed(2), - overBudget === undefined ? '-' : parseFloat(overBudget).toFixed(2), - ] - } else { - return [label + '', - measurement === undefined ? '-' : measurement + ' ms', - overBudget === undefined ? '-' : overBudget + ' ms' - ] - } - }) - ] - } -}; - -function getResourceSizes(resourceSizesBudget: Table | undefined): undefined | string[][] { - if (resourceSizesBudget === undefined) { - return undefined - } else { - return [ - resourceSizesBudget.headings - .filter((i: any) => ['label', 'transferSize', 'sizeOverBudget'].includes(i.key)) - .map((h: any) => h.text as string), - ...resourceSizesBudget.items - .map( - ({label, transferSize, sizeOverBudget}: any) => - [ - label+'', - formatBytes(transferSize), - sizeOverBudget ? formatBytes(sizeOverBudget) : '-' - ]) - ] - } } -function getResourceCounts(resourceCountsBudget: Table | undefined): undefined | string[][] { - if (resourceCountsBudget === undefined) { - return undefined - } else { - return [ - resourceCountsBudget.headings - .filter((i: any) => ['label', 'requestCount', 'countOverBudget'].includes(i.key)) - .map((h: any) => h.key === 'countOverBudget' ? 'Over Budget' : h.text as string), - ...resourceCountsBudget.items - .map( - ({label, requestCount, countOverBudget}: any) => - [ - label+'', - requestCount+'', - countOverBudget ? countOverBudget : '-' - ]) - ] - } -} - - /** * | Step Name | Gather Mode |Performance | Accessibility | BestPractices | Seo | PWA | @@ -173,24 +42,10 @@ function formatStepsForMdTable(reportCategories: string[], reducedReport: Reduce } return reducedReport.steps.map((step) => { const results = reportCategories.map(category => extractResultsValue(step.results[category])); - // add `budgetsSymbol` to gatherMode to indicate budgets - step.resourceCountsBudget && (step.gatherMode = step.gatherMode + ` ${budgetsSymbol}` as GatherMode); return [step.name, step.gatherMode].concat(results); }); } -function formatBytes(bytes: number, decimals = 2) { - if (!+bytes) return '0 Bytes' - - const k = 1024 - const dm = decimals < 0 ? 0 : decimals - const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] - - const i = Math.floor(Math.log(bytes) / Math.log(k)) - - return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}` -} - function extractTableArr(reportCategories: string[], steps: any[]): string[][] { const tableHead = extractTableHead(reportCategories); @@ -235,4 +90,3 @@ function headerAlignment(reportCategories: string[]): Alignment[] { const reportFormats = reportCategories.map(_ => 'c'); return ['l', 'c'].concat(reportFormats) as Alignment[]; } - diff --git a/packages/cli/src/lib/commands/assert/utils/md-report.unit.test.ts b/packages/cli/src/lib/commands/assert/utils/md-report.unit.test.ts index 2cd0ecda..31f1dce4 100644 --- a/packages/cli/src/lib/commands/assert/utils/md-report.unit.test.ts +++ b/packages/cli/src/lib/commands/assert/utils/md-report.unit.test.ts @@ -1,10 +1,9 @@ import { describe, expect, it } from 'vitest'; -import { } from 'node:fs'; -import { getBudgetTable, getStepsTable } from './md-report.js'; +import { getStepsTable } from './md-report.js'; import { FlowResult } from 'lighthouse'; import { ReducedReport } from '../../collect/utils/report/types.js'; import { createReducedReport, enrichReducedReportWithBaseline } from '../../collect/utils/report/utils.js'; -import { readFileSync } from 'fs'; +import { readFileSync } from 'node:fs'; import { join } from 'node:path'; const MOCKS_PATH = 'packages/cli/src/lib/commands/assert/utils/mocks/'; @@ -14,7 +13,6 @@ function getMock(mock: string): T { } const lhr8 = getMock('lhr-8.json'); const lhr9 = getMock('lhr-9.json'); -const lhr9budgets = getMock('lhr-9-budgets.json'); const lhr9Ex2 = getMock('lhr-9-ex-2.json'); const lhr9reduced = getMock('lhr-9_reduced.json'); const lhr9ReducedBaseline = getMock('lhr-9_reduced-baseline.json'); @@ -52,12 +50,4 @@ describe('md-table', () => { const mdTable = await getStepsTable(reducedLhr9, lhr9Ex2); expect(mdTable).toMatchSnapshot(); }); - - it('should return a Md table if getBudgetTable is passed a baseline report', async () => { - const reducedLhr9 = createReducedReport(lhr9budgets); - const mdTable = await getBudgetTable(reducedLhr9); - expect(mdTable).toContain('| Resource Type | Transfer Size | Over Budget |'); - expect(mdTable).toContain('| Resource Type | Requests | Over Budget |'); - expect(mdTable).toContain('| Metric | Measurement | Over Budget |'); - }); }); diff --git a/packages/cli/src/lib/commands/assert/utils/mocks/lhr-9-budgets.json b/packages/cli/src/lib/commands/assert/utils/mocks/lhr-9-budgets.json deleted file mode 100644 index 49fb8fd2..00000000 --- a/packages/cli/src/lib/commands/assert/utils/mocks/lhr-9-budgets.json +++ /dev/null @@ -1,9291 +0,0 @@ -{ - "steps": [ - { - "lhr": { - "lighthouseVersion": "9.5.0", - "requestedUrl": "http://127.0.0.1:5032/", - "finalUrl": "http://127.0.0.1:5032/", - "fetchTime": "2022-04-21T21:47:59.033Z", - "gatherMode": "navigation", - "runtimeError": { - "code": "PROTOCOL_TIMEOUT", - "message": "Waiting for DevTools protocol response has exceeded the allotted time. (Method: Page.captureScreenshot)" - }, - "runWarnings": [], - "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4889.0 Safari/537.36", - "environment": { - "networkUserAgent": "", - "hostUserAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4889.0 Safari/537.36", - "benchmarkIndex": 601.5, - "credits": { "axe-core": "4.3.5" } - }, - "audits": { - "is-on-https": { - "id": "is-on-https", - "title": "Uses HTTPS", - "description": "All sites should be protected with HTTPS, even ones that don't handle sensitive data. This includes avoiding [mixed content](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content), where some resources are loaded over HTTP despite the initial request being served over HTTPS. HTTPS prevents intruders from tampering with or passively listening in on the communications between your app and your users, and is a prerequisite for HTTP/2 and many new web platform APIs. [Learn more](https://web.dev/is-on-https/).", - "score": 1, - "scoreDisplayMode": "binary", - "details": { "type": "table", "headings": [], "items": [] } - }, - "service-worker": { - "id": "service-worker", - "title": "Does not register a service worker that controls page and `start_url`", - "description": "The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. [Learn more](https://web.dev/service-worker/).", - "score": 0, - "scoreDisplayMode": "binary" - }, - "viewport": { - "id": "viewport", - "title": "Has a `` tag with `width` or `initial-scale`", - "description": "A `` not only optimizes your app for mobile screen sizes, but also prevents [a 300 millisecond delay to user input](https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away). [Learn more](https://web.dev/viewport/).", - "score": 1, - "scoreDisplayMode": "binary", - "warnings": [] - }, - "first-contentful-paint": { - "id": "first-contentful-paint", - "title": "First Contentful Paint", - "description": "First Contentful Paint marks the time at which the first text or image is painted. [Learn more](https://web.dev/first-contentful-paint/).", - "score": 1, - "scoreDisplayMode": "numeric", - "numericValue": 724.2656, - "numericUnit": "millisecond", - "displayValue": "0.7 s" - }, - "largest-contentful-paint": { - "id": "largest-contentful-paint", - "title": "Largest Contentful Paint", - "description": "Largest Contentful Paint marks the time at which the largest text or image is painted. [Learn more](https://web.dev/lighthouse-largest-contentful-paint/)", - "score": 1, - "scoreDisplayMode": "numeric", - "numericValue": 724.2656, - "numericUnit": "millisecond", - "displayValue": "0.7 s" - }, - "first-meaningful-paint": { - "id": "first-meaningful-paint", - "title": "First Meaningful Paint", - "description": "First Meaningful Paint measures when the primary content of a page is visible. [Learn more](https://web.dev/first-meaningful-paint/).", - "score": 1, - "scoreDisplayMode": "numeric", - "numericValue": 724.2656, - "numericUnit": "millisecond", - "displayValue": "0.7 s" - }, - "speed-index": { - "id": "speed-index", - "title": "Speed Index", - "description": "Speed Index shows how quickly the contents of a page are visibly populated. [Learn more](https://web.dev/speed-index/).", - "score": null, - "scoreDisplayMode": "error", - "errorMessage": "Chrome didn't collect any screenshots during the page load. Please make sure there is content visible on the page, and then try re-running Lighthouse. (NO_SCREENSHOTS)" - }, - "screenshot-thumbnails": { - "id": "screenshot-thumbnails", - "title": "Screenshot Thumbnails", - "description": "This is what the load of your site looked like.", - "score": null, - "scoreDisplayMode": "error", - "errorMessage": "Chrome didn't collect any screenshots during the page load. Please make sure there is content visible on the page, and then try re-running Lighthouse. (NO_SCREENSHOTS)" - }, - "final-screenshot": { - "id": "final-screenshot", - "title": "Final Screenshot", - "description": "The last screenshot captured of the pageload.", - "score": null, - "scoreDisplayMode": "error", - "errorMessage": "Chrome didn't collect any screenshots during the page load. Please make sure there is content visible on the page, and then try re-running Lighthouse. (NO_SCREENSHOTS)" - }, - "total-blocking-time": { - "id": "total-blocking-time", - "title": "Total Blocking Time", - "description": "Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. [Learn more](https://web.dev/lighthouse-total-blocking-time/).", - "score": 1, - "scoreDisplayMode": "numeric", - "numericValue": 29.5, - "numericUnit": "millisecond", - "displayValue": "30 ms" - }, - "max-potential-fid": { - "id": "max-potential-fid", - "title": "Max Potential First Input Delay", - "description": "The maximum potential First Input Delay that your users could experience is the duration of the longest task. [Learn more](https://web.dev/lighthouse-max-potential-fid/).", - "score": 0.95, - "scoreDisplayMode": "numeric", - "numericValue": 106, - "numericUnit": "millisecond", - "displayValue": "110 ms" - }, - "cumulative-layout-shift": { - "id": "cumulative-layout-shift", - "title": "Cumulative Layout Shift", - "description": "Cumulative Layout Shift measures the movement of visible elements within the viewport. [Learn more](https://web.dev/cls/).", - "score": 1, - "scoreDisplayMode": "numeric", - "numericValue": 0, - "numericUnit": "unitless", - "displayValue": "0", - "details": { - "type": "debugdata", - "items": [ - { - "cumulativeLayoutShiftMainFrame": 0, - "totalCumulativeLayoutShift": 0 - } - ] - } - }, - "errors-in-console": { - "id": "errors-in-console", - "title": "Browser errors were logged to the console", - "description": "Errors logged to the console indicate unresolved problems. They can come from network request failures and other browser concerns. [Learn more](https://web.dev/errors-in-console/)", - "score": 0, - "scoreDisplayMode": "binary", - "details": { - "type": "table", - "headings": [ - { - "key": "sourceLocation", - "itemType": "source-location", - "text": "Source" - }, - { - "key": "description", - "itemType": "code", - "text": "Description" - } - ], - "items": [ - { - "source": "network", - "description": "Failed to load resource: the server responded with a status of 404 (Not Found)", - "sourceLocation": { - "type": "source-location", - "url": "http://127.0.0.1:5032/favicon.ico", - "urlProvider": "network", - "line": 0, - "column": 0 - } - } - ] - } - }, - "server-response-time": { - "id": "server-response-time", - "title": "Initial server response time was short", - "description": "Keep the server response time for the main document short because all other requests depend on it. [Learn more](https://web.dev/time-to-first-byte/).", - "score": 1, - "scoreDisplayMode": "binary", - "numericValue": 27.557, - "numericUnit": "millisecond", - "displayValue": "Root document took 30 ms", - "details": { - "type": "opportunity", - "headings": [ - { "key": "url", "valueType": "url", "label": "URL" }, - { - "key": "responseTime", - "valueType": "timespanMs", - "label": "Time Spent" - } - ], - "items": [ - { "url": "http://127.0.0.1:5032/", "responseTime": 27.557 } - ], - "overallSavingsMs": -72.443 - } - }, - "interactive": { - "id": "interactive", - "title": "Time to Interactive", - "description": "Time to interactive is the amount of time it takes for the page to become fully interactive. [Learn more](https://web.dev/interactive/).", - "score": 1, - "scoreDisplayMode": "numeric", - "numericValue": 803.7656, - "numericUnit": "millisecond", - "displayValue": "0.8 s" - }, - "user-timings": { - "id": "user-timings", - "title": "User Timing marks and measures", - "description": "Consider instrumenting your app with the User Timing API to measure your app's real-world performance during key user experiences. [Learn more](https://web.dev/user-timings/).", - "score": null, - "scoreDisplayMode": "notApplicable", - "details": { "type": "table", "headings": [], "items": [] } - }, - "critical-request-chains": { - "id": "critical-request-chains", - "title": "Avoid chaining critical requests", - "description": "The Critical Request Chains below show you what resources are loaded with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load. [Learn more](https://web.dev/critical-request-chains/).", - "score": null, - "scoreDisplayMode": "notApplicable", - "displayValue": "", - "details": { - "type": "criticalrequestchain", - "chains": { - "C167789985919D58A4D9FC53FFE06948": { - "request": { - "url": "http://127.0.0.1:5032/", - "startTime": 343919.711946, - "endTime": 343919.742034, - "responseReceivedTime": 343919.74134, - "transferSize": 941 - } - } - }, - "longestChain": { - "duration": 30.087999999523163, - "length": 1, - "transferSize": 941 - } - } - }, - "redirects": { - "id": "redirects", - "title": "Avoid multiple page redirects", - "description": "Redirects introduce additional delays before the page can be loaded. [Learn more](https://web.dev/redirects/).", - "score": 1, - "scoreDisplayMode": "numeric", - "numericValue": 0, - "numericUnit": "millisecond", - "displayValue": "", - "details": { - "type": "opportunity", - "headings": [], - "items": [], - "overallSavingsMs": 0 - } - }, - "installable-manifest": { - "id": "installable-manifest", - "title": "Web app manifest or service worker do not meet the installability requirements", - "description": "Service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. With proper service worker and manifest implementations, browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. [Learn more](https://web.dev/installable-manifest/).", - "score": 0, - "scoreDisplayMode": "binary", - "numericValue": 2, - "numericUnit": "element", - "displayValue": "2 reasons", - "warnings": [], - "details": { - "type": "table", - "headings": [ - { - "key": "reason", - "itemType": "text", - "text": "Failure reason" - } - ], - "items": [ - { "reason": "Page has no manifest URL" }, - { "reason": "No manifest was fetched" } - ], - "debugData": { "type": "debugdata", "manifestUrl": null } - } - }, - "apple-touch-icon": { - "id": "apple-touch-icon", - "title": "Does not provide a valid `apple-touch-icon`", - "description": "For ideal appearance on iOS when users add a progressive web app to the home screen, define an `apple-touch-icon`. It must point to a non-transparent 192px (or 180px) square PNG. [Learn More](https://web.dev/apple-touch-icon/).", - "score": 0, - "scoreDisplayMode": "binary", - "warnings": [] - }, - "splash-screen": { - "id": "splash-screen", - "title": "Is not configured for a custom splash screen", - "description": "A themed splash screen ensures a high-quality experience when users launch your app from their homescreens. [Learn more](https://web.dev/splash-screen/).", - "score": 0, - "scoreDisplayMode": "binary", - "explanation": "Failures: No manifest was fetched.", - "details": { - "type": "debugdata", - "items": [ - { - "failures": ["No manifest was fetched"], - "isParseFailure": true, - "parseFailureReason": "No manifest was fetched" - } - ] - } - }, - "themed-omnibox": { - "id": "themed-omnibox", - "title": "Does not set a theme color for the address bar.", - "description": "The browser address bar can be themed to match your site. [Learn more](https://web.dev/themed-omnibox/).", - "score": 0, - "scoreDisplayMode": "binary", - "explanation": "Failures: No manifest was fetched,\nNo `` tag found.", - "details": { - "type": "debugdata", - "items": [ - { - "failures": [ - "No manifest was fetched", - "No `` tag found" - ], - "themeColor": null, - "isParseFailure": true, - "parseFailureReason": "No manifest was fetched" - } - ] - } - }, - "maskable-icon": { - "id": "maskable-icon", - "title": "Manifest doesn't have a maskable icon", - "description": "A maskable icon ensures that the image fills the entire shape without being letterboxed when installing the app on a device. [Learn more](https://web.dev/maskable-icon-audit/).", - "score": 0, - "scoreDisplayMode": "binary", - "explanation": "No manifest was fetched" - }, - "content-width": { - "id": "content-width", - "title": "Content is sized correctly for the viewport", - "description": "If the width of your app's content doesn't match the width of the viewport, your app might not be optimized for mobile screens. [Learn more](https://web.dev/content-width/).", - "score": 1, - "scoreDisplayMode": "binary" - }, - "image-aspect-ratio": { - "id": "image-aspect-ratio", - "title": "Displays images with correct aspect ratio", - "description": "Image display dimensions should match natural aspect ratio. [Learn more](https://web.dev/image-aspect-ratio/).", - "score": 1, - "scoreDisplayMode": "binary", - "details": { "type": "table", "headings": [], "items": [] } - }, - "image-size-responsive": { - "id": "image-size-responsive", - "title": "Serves images with appropriate resolution", - "description": "Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity. [Learn more](https://web.dev/serve-responsive-images/).", - "score": 1, - "scoreDisplayMode": "binary", - "details": { "type": "table", "headings": [], "items": [] } - }, - "preload-fonts": { - "id": "preload-fonts", - "title": "Fonts with `font-display: optional` are preloaded", - "description": "Preload `optional` fonts so first-time visitors may use them. [Learn more](https://web.dev/preload-optional-fonts/)", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "deprecations": { - "id": "deprecations", - "title": "Avoids deprecated APIs", - "description": "Deprecated APIs will eventually be removed from the browser. [Learn more](https://web.dev/deprecations/).", - "score": 1, - "scoreDisplayMode": "binary", - "details": { "type": "table", "headings": [], "items": [] } - }, - "mainthread-work-breakdown": { - "id": "mainthread-work-breakdown", - "title": "Minimizes main-thread work", - "description": "Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. [Learn more](https://web.dev/mainthread-work-breakdown/)", - "score": 1, - "scoreDisplayMode": "numeric", - "numericValue": 404.34000000000003, - "numericUnit": "millisecond", - "displayValue": "0.4 s", - "details": { - "type": "table", - "headings": [ - { "key": "groupLabel", "itemType": "text", "text": "Category" }, - { - "key": "duration", - "itemType": "ms", - "granularity": 1, - "text": "Time Spent" - } - ], - "items": [ - { - "group": "styleLayout", - "groupLabel": "Style & Layout", - "duration": 199.672 - }, - { - "group": "other", - "groupLabel": "Other", - "duration": 160.46800000000002 - }, - { - "group": "scriptEvaluation", - "groupLabel": "Script Evaluation", - "duration": 29.903999999999993 - }, - { - "group": "scriptParseCompile", - "groupLabel": "Script Parsing & Compilation", - "duration": 5.207999999999999 - }, - { - "group": "paintCompositeRender", - "groupLabel": "Rendering", - "duration": 4.683999999999999 - }, - { - "group": "parseHTML", - "groupLabel": "Parse HTML & CSS", - "duration": 4.403999999999999 - } - ] - } - }, - "bootup-time": { - "id": "bootup-time", - "title": "JavaScript execution time", - "description": "Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. [Learn more](https://web.dev/bootup-time/).", - "score": 1, - "scoreDisplayMode": "numeric", - "numericValue": 35.111999999999995, - "numericUnit": "millisecond", - "displayValue": "0.0 s", - "details": { - "type": "table", - "headings": [ - { "key": "url", "itemType": "url", "text": "URL" }, - { - "key": "total", - "granularity": 1, - "itemType": "ms", - "text": "Total CPU Time" - }, - { - "key": "scripting", - "granularity": 1, - "itemType": "ms", - "text": "Script Evaluation" - }, - { - "key": "scriptParseCompile", - "granularity": 1, - "itemType": "ms", - "text": "Script Parse" - } - ], - "items": [ - { - "url": "http://127.0.0.1:5032/", - "total": 320.592, - "scripting": 11.919999999999998, - "scriptParseCompile": 4.212 - }, - { - "url": "Unattributable", - "total": 83.748, - "scripting": 17.983999999999995, - "scriptParseCompile": 0.996 - } - ], - "summary": { "wastedMs": 35.111999999999995 } - } - }, - "uses-rel-preload": { - "id": "uses-rel-preload", - "title": "Preload key requests", - "description": "Consider using `` to prioritize fetching resources that are currently requested later in page load. [Learn more](https://web.dev/uses-rel-preload/).", - "score": null, - "scoreDisplayMode": "notApplicable", - "details": { - "type": "opportunity", - "headings": [], - "items": [], - "overallSavingsMs": 0 - } - }, - "uses-rel-preconnect": { - "id": "uses-rel-preconnect", - "title": "Preconnect to required origins", - "description": "Consider adding `preconnect` or `dns-prefetch` resource hints to establish early connections to important third-party origins. [Learn more](https://web.dev/uses-rel-preconnect/).", - "score": 1, - "scoreDisplayMode": "numeric", - "numericValue": 0, - "numericUnit": "millisecond", - "displayValue": "", - "warnings": [], - "details": { - "type": "opportunity", - "headings": [], - "items": [], - "overallSavingsMs": 0 - } - }, - "font-display": { - "id": "font-display", - "title": "All text remains visible during webfont loads", - "description": "Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. [Learn more](https://web.dev/font-display/).", - "score": 1, - "scoreDisplayMode": "binary", - "warnings": [], - "details": { "type": "table", "headings": [], "items": [] } - }, - "diagnostics": { - "id": "diagnostics", - "title": "Diagnostics", - "description": "Collection of useful page vitals.", - "score": null, - "scoreDisplayMode": "informative", - "details": { - "type": "debugdata", - "items": [ - { - "numRequests": 3, - "numScripts": 0, - "numStylesheets": 0, - "numFonts": 0, - "numTasks": 123, - "numTasksOver10ms": 2, - "numTasksOver25ms": 1, - "numTasksOver50ms": 1, - "numTasksOver100ms": 0, - "numTasksOver500ms": 0, - "rtt": 0.25139999999999996, - "throughput": 95383312.49313669, - "maxRtt": 0.25139999999999996, - "maxServerLatency": 5.2656, - "totalByteWeight": 28301, - "totalTaskTime": 101.08500000000001, - "mainDocumentTransferSize": 941 - } - ] - } - }, - "network-requests": { - "id": "network-requests", - "title": "Network Requests", - "description": "Lists the network requests that were made during page load.", - "score": null, - "scoreDisplayMode": "informative", - "details": { - "type": "table", - "headings": [ - { "key": "url", "itemType": "url", "text": "URL" }, - { "key": "protocol", "itemType": "text", "text": "Protocol" }, - { - "key": "startTime", - "itemType": "ms", - "granularity": 1, - "text": "Start Time" - }, - { - "key": "endTime", - "itemType": "ms", - "granularity": 1, - "text": "End Time" - }, - { - "key": "transferSize", - "itemType": "bytes", - "displayUnit": "kb", - "granularity": 1, - "text": "Transfer Size" - }, - { - "key": "resourceSize", - "itemType": "bytes", - "displayUnit": "kb", - "granularity": 1, - "text": "Resource Size" - }, - { - "key": "statusCode", - "itemType": "text", - "text": "Status Code" - }, - { "key": "mimeType", "itemType": "text", "text": "MIME Type" }, - { - "key": "resourceType", - "itemType": "text", - "text": "Resource Type" - } - ], - "items": [ - { - "url": "http://127.0.0.1:5032/", - "protocol": "http/1.1", - "startTime": 0, - "endTime": 30.087999999523163, - "finished": true, - "transferSize": 941, - "resourceSize": 623, - "statusCode": 200, - "mimeType": "text/html", - "resourceType": "Document" - }, - { - "url": "http://127.0.0.1:5032/user-flow-square.png", - "protocol": "http/1.1", - "startTime": 49.27499999757856, - "endTime": 57.182000018656254, - "finished": true, - "transferSize": 27209, - "resourceSize": 26902, - "statusCode": 200, - "mimeType": "image/png", - "resourceType": "Image" - }, - { - "url": "http://127.0.0.1:5032/favicon.ico", - "protocol": "http/1.1", - "startTime": 121.95499998051673, - "endTime": 128.06499999715015, - "finished": true, - "transferSize": 151, - "resourceSize": 0, - "statusCode": 404, - "mimeType": "text/plain", - "resourceType": "Other" - } - ] - } - }, - "network-rtt": { - "id": "network-rtt", - "title": "Network Round Trip Times", - "description": "Network round trip times (RTT) have a large impact on performance. If the RTT to an origin is high, it's an indication that servers closer to the user could improve performance. [Learn more](https://hpbn.co/primer-on-latency-and-bandwidth/).", - "score": null, - "scoreDisplayMode": "informative", - "numericValue": 0.25139999999999996, - "numericUnit": "millisecond", - "displayValue": "0 ms", - "details": { - "type": "table", - "headings": [ - { "key": "origin", "itemType": "text", "text": "URL" }, - { - "key": "rtt", - "itemType": "ms", - "granularity": 1, - "text": "Time Spent" - } - ], - "items": [ - { - "origin": "http://127.0.0.1:5032", - "rtt": 0.25139999999999996 - } - ] - } - }, - "network-server-latency": { - "id": "network-server-latency", - "title": "Server Backend Latencies", - "description": "Server latencies can impact web performance. If the server latency of an origin is high, it's an indication the server is overloaded or has poor backend performance. [Learn more](https://hpbn.co/primer-on-web-performance/#analyzing-the-resource-waterfall).", - "score": null, - "scoreDisplayMode": "informative", - "numericValue": 5.2656, - "numericUnit": "millisecond", - "displayValue": "10 ms", - "details": { - "type": "table", - "headings": [ - { "key": "origin", "itemType": "text", "text": "URL" }, - { - "key": "serverResponseTime", - "itemType": "ms", - "granularity": 1, - "text": "Time Spent" - } - ], - "items": [ - { - "origin": "http://127.0.0.1:5032", - "serverResponseTime": 5.2656 - } - ] - } - }, - "main-thread-tasks": { - "id": "main-thread-tasks", - "title": "Tasks", - "description": "Lists the toplevel main thread tasks that executed during page load.", - "score": null, - "scoreDisplayMode": "informative", - "details": { - "type": "table", - "headings": [ - { - "key": "startTime", - "itemType": "ms", - "granularity": 1, - "text": "Start Time" - }, - { - "key": "duration", - "itemType": "ms", - "granularity": 1, - "text": "End Time" - } - ], - "items": [ - { "duration": 22.424, "startTime": 67.016 }, - { "duration": 52.825, "startTime": 93.881 } - ] - } - }, - "metrics": { - "id": "metrics", - "title": "Metrics", - "description": "Collects all available metrics.", - "score": null, - "scoreDisplayMode": "error", - "errorMessage": "Chrome didn't collect any screenshots during the page load. Please make sure there is content visible on the page, and then try re-running Lighthouse. (NO_SCREENSHOTS)" - }, - "performance-budget": { - "id": "performance-budget", - "title": "Performance budget", - "description": "Keep the quantity and size of network requests under the targets set by the provided performance budget. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/budgets).", - "score": null, - "scoreDisplayMode": "informative", - "details": { - "type": "table", - "headings": [ - { - "key": "label", - "itemType": "text", - "text": "Resource Type" - }, - { - "key": "requestCount", - "itemType": "numeric", - "text": "Requests" - }, - { - "key": "transferSize", - "itemType": "bytes", - "text": "Transfer Size" - }, - { - "key": "countOverBudget", - "itemType": "text", - "text": "" - }, - { - "key": "sizeOverBudget", - "itemType": "bytes", - "text": "Over Budget" - } - ], - "items": [ - { - "resourceType": "total", - "label": "Total", - "requestCount": 16, - "transferSize": 205774, - "sizeOverBudget": 204750 - }, - { - "resourceType": "script", - "label": "Script", - "requestCount": 2, - "transferSize": 101958 - }, - { - "resourceType": "third-party", - "label": "Third-party", - "requestCount": 6, - "transferSize": 97308 - } - ] - } - }, - "timing-budget": { - "id": "timing-budget", - "title": "Timing budget", - "description": "Set a timing budget to help you keep an eye on the performance of your site. Performant sites load fast and respond to user input events quickly. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/budgets).", - "score": null, - "scoreDisplayMode": "informative", - "details": { - "type": "table", - "headings": [ - { - "key": "label", - "itemType": "text", - "text": "Metric" - }, - { - "key": "measurement", - "itemType": "ms", - "text": "Measurement" - }, - { - "key": "overBudget", - "itemType": "ms", - "text": "Over Budget" - } - ], - "items": [ - { - "metric": "first-meaningful-paint", - "label": "First Meaningful Paint", - "measurement": 2043, - "overBudget": 43 - }, - { - "metric": "interactive", - "label": "Time to Interactive", - "measurement": 4745 - } - ] - } - }, - "resource-summary": { - "id": "resource-summary", - "title": "Keep request counts low and transfer sizes small", - "description": "To set budgets for the quantity and size of page resources, add a budget.json file. [Learn more](https://web.dev/use-lighthouse-for-performance-budgets/).", - "score": null, - "scoreDisplayMode": "informative", - "displayValue": "2 requests • 27 KiB", - "details": { - "type": "table", - "headings": [ - { "key": "label", "itemType": "text", "text": "Resource Type" }, - { - "key": "requestCount", - "itemType": "numeric", - "text": "Requests" - }, - { - "key": "transferSize", - "itemType": "bytes", - "text": "Transfer Size" - } - ], - "items": [ - { - "resourceType": "total", - "label": "Total", - "requestCount": 2, - "transferSize": 28150 - }, - { - "resourceType": "image", - "label": "Image", - "requestCount": 1, - "transferSize": 27209 - }, - { - "resourceType": "document", - "label": "Document", - "requestCount": 1, - "transferSize": 941 - }, - { - "resourceType": "stylesheet", - "label": "Stylesheet", - "requestCount": 0, - "transferSize": 0 - }, - { - "resourceType": "media", - "label": "Media", - "requestCount": 0, - "transferSize": 0 - }, - { - "resourceType": "font", - "label": "Font", - "requestCount": 0, - "transferSize": 0 - }, - { - "resourceType": "script", - "label": "Script", - "requestCount": 0, - "transferSize": 0 - }, - { - "resourceType": "other", - "label": "Other", - "requestCount": 0, - "transferSize": 0 - }, - { - "resourceType": "third-party", - "label": "Third-party", - "requestCount": 0, - "transferSize": 0 - } - ] - } - }, - "third-party-summary": { - "id": "third-party-summary", - "title": "Minimize third-party usage", - "description": "Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading. [Learn more](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "third-party-facades": { - "id": "third-party-facades", - "title": "Lazy load third-party resources with facades", - "description": "Some third-party embeds can be lazy loaded. Consider replacing them with a facade until they are required. [Learn more](https://web.dev/third-party-facades/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "largest-contentful-paint-element": { - "id": "largest-contentful-paint-element", - "title": "Largest Contentful Paint element", - "description": "This is the largest contentful element painted within the viewport. [Learn More](https://web.dev/lighthouse-largest-contentful-paint/)", - "score": null, - "scoreDisplayMode": "informative", - "displayValue": "1 element found", - "details": { - "type": "table", - "headings": [ - { "key": "node", "itemType": "node", "text": "Element" } - ], - "items": [ - { - "node": { - "type": "node", - "lhId": "page-1-P", - "path": "1,HTML,1,BODY,1,P", - "selector": "body > p", - "boundingRect": { - "top": 80, - "bottom": 116, - "left": 8, - "right": 352, - "width": 344, - "height": 36 - }, - "snippet": "

", - "nodeLabel": "A simple web project to test lighthouse user-flow CLI" - } - } - ] - } - }, - "lcp-lazy-loaded": { - "id": "lcp-lazy-loaded", - "title": "Largest Contentful Paint image was not lazily loaded", - "description": "Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint. [Learn more](https://web.dev/lcp-lazy-loading/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "layout-shift-elements": { - "id": "layout-shift-elements", - "title": "Avoid large layout shifts", - "description": "These DOM elements contribute most to the CLS of the page.", - "score": null, - "scoreDisplayMode": "notApplicable", - "details": { "type": "table", "headings": [], "items": [] } - }, - "long-tasks": { - "id": "long-tasks", - "title": "Avoid long main-thread tasks", - "description": "Lists the longest tasks on the main thread, useful for identifying worst contributors to input delay. [Learn more](https://web.dev/long-tasks-devtools/)", - "score": null, - "scoreDisplayMode": "informative", - "displayValue": "2 long tasks found", - "details": { - "type": "table", - "headings": [ - { "key": "url", "itemType": "url", "text": "URL" }, - { - "key": "startTime", - "itemType": "ms", - "granularity": 1, - "text": "Start Time" - }, - { - "key": "duration", - "itemType": "ms", - "granularity": 1, - "text": "Duration" - } - ], - "items": [ - { - "url": "http://127.0.0.1:5032/", - "duration": 106, - "startTime": 700.2656 - }, - { - "url": "http://127.0.0.1:5032/", - "duration": 90, - "startTime": 605.2656 - } - ] - } - }, - "no-unload-listeners": { - "id": "no-unload-listeners", - "title": "Avoids `unload` event listeners", - "description": "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)", - "score": 1, - "scoreDisplayMode": "binary" - }, - "non-composited-animations": { - "id": "non-composited-animations", - "title": "Avoid non-composited animations", - "description": "Animations which are not composited can be janky and increase CLS. [Learn more](https://web.dev/non-composited-animations)", - "score": null, - "scoreDisplayMode": "notApplicable", - "details": { "type": "table", "headings": [], "items": [] } - }, - "unsized-images": { - "id": "unsized-images", - "title": "Image elements have explicit `width` and `height`", - "description": "Set an explicit width and height on image elements to reduce layout shifts and improve CLS. [Learn more](https://web.dev/optimize-cls/#images-without-dimensions)", - "score": 1, - "scoreDisplayMode": "binary", - "details": { "type": "table", "headings": [], "items": [] } - }, - "valid-source-maps": { - "id": "valid-source-maps", - "title": "Page has valid source maps", - "description": "Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits. [Learn more](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps).", - "score": 1, - "scoreDisplayMode": "binary", - "details": { "type": "table", "headings": [], "items": [] } - }, - "preload-lcp-image": { - "id": "preload-lcp-image", - "title": "Preload Largest Contentful Paint image", - "description": "Preload the image used by the LCP element in order to improve your LCP time. [Learn more](https://web.dev/optimize-lcp/#preload-important-resources).", - "score": 1, - "scoreDisplayMode": "numeric", - "numericValue": 0, - "numericUnit": "millisecond", - "displayValue": "", - "details": { - "type": "opportunity", - "headings": [], - "items": [], - "overallSavingsMs": 0 - } - }, - "csp-xss": { - "id": "csp-xss", - "title": "Ensure CSP is effective against XSS attacks", - "description": "A strong Content Security Policy (CSP) significantly reduces the risk of cross-site scripting (XSS) attacks. [Learn more](https://web.dev/csp-xss/)", - "score": null, - "scoreDisplayMode": "informative", - "details": { - "type": "table", - "headings": [ - { - "key": "description", - "itemType": "text", - "subItemsHeading": { "key": "description" }, - "text": "Description" - }, - { - "key": "directive", - "itemType": "code", - "subItemsHeading": { "key": "directive" }, - "text": "Directive" - }, - { - "key": "severity", - "itemType": "text", - "subItemsHeading": { "key": "severity" }, - "text": "Severity" - } - ], - "items": [ - { - "severity": "High", - "description": "No CSP found in enforcement mode" - } - ] - } - }, - "full-page-screenshot": { - "id": "full-page-screenshot", - "title": "Full-page screenshot", - "description": "A full-height screenshot of the final rendered page", - "score": null, - "scoreDisplayMode": "error", - "errorMessage": "Required FullPageScreenshot gatherer encountered an error: PROTOCOL_TIMEOUT" - }, - "script-treemap-data": { - "id": "script-treemap-data", - "title": "Script Treemap Data", - "description": "Used for treemap app", - "score": null, - "scoreDisplayMode": "informative", - "details": { "type": "treemap-data", "nodes": [] } - }, - "pwa-cross-browser": { - "id": "pwa-cross-browser", - "title": "Site works cross-browser", - "description": "To reach the most number of users, sites should work across every major browser. [Learn more](https://web.dev/pwa-cross-browser/).", - "score": null, - "scoreDisplayMode": "manual" - }, - "pwa-page-transitions": { - "id": "pwa-page-transitions", - "title": "Page transitions don't feel like they block on the network", - "description": "Transitions should feel snappy as you tap around, even on a slow network. This experience is key to a user's perception of performance. [Learn more](https://web.dev/pwa-page-transitions/).", - "score": null, - "scoreDisplayMode": "manual" - }, - "pwa-each-page-has-url": { - "id": "pwa-each-page-has-url", - "title": "Each page has a URL", - "description": "Ensure individual pages are deep linkable via URL and that URLs are unique for the purpose of shareability on social media. [Learn more](https://web.dev/pwa-each-page-has-url/).", - "score": null, - "scoreDisplayMode": "manual" - }, - "accesskeys": { - "id": "accesskeys", - "title": "`[accesskey]` values are unique", - "description": "Access keys let users quickly focus a part of the page. For proper navigation, each access key must be unique. [Learn more](https://web.dev/accesskeys/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-allowed-attr": { - "id": "aria-allowed-attr", - "title": "`[aria-*]` attributes match their roles", - "description": "Each ARIA `role` supports a specific subset of `aria-*` attributes. Mismatching these invalidates the `aria-*` attributes. [Learn more](https://web.dev/aria-allowed-attr/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-command-name": { - "id": "aria-command-name", - "title": "`button`, `link`, and `menuitem` elements have accessible names", - "description": "When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more](https://web.dev/aria-name/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-hidden-body": { - "id": "aria-hidden-body", - "title": "`[aria-hidden=\"true\"]` is not present on the document ``", - "description": "Assistive technologies, like screen readers, work inconsistently when `aria-hidden=\"true\"` is set on the document ``. [Learn more](https://web.dev/aria-hidden-body/).", - "score": 1, - "scoreDisplayMode": "binary", - "details": { "type": "table", "headings": [], "items": [] } - }, - "aria-hidden-focus": { - "id": "aria-hidden-focus", - "title": "`[aria-hidden=\"true\"]` elements do not contain focusable descendents", - "description": "Focusable descendents within an `[aria-hidden=\"true\"]` element prevent those interactive elements from being available to users of assistive technologies like screen readers. [Learn more](https://web.dev/aria-hidden-focus/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-input-field-name": { - "id": "aria-input-field-name", - "title": "ARIA input fields have accessible names", - "description": "When an input field doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more](https://web.dev/aria-name/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-meter-name": { - "id": "aria-meter-name", - "title": "ARIA `meter` elements have accessible names", - "description": "When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more](https://web.dev/aria-name/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-progressbar-name": { - "id": "aria-progressbar-name", - "title": "ARIA `progressbar` elements have accessible names", - "description": "When a `progressbar` element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more](https://web.dev/aria-name/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-required-attr": { - "id": "aria-required-attr", - "title": "`[role]`s have all required `[aria-*]` attributes", - "description": "Some ARIA roles have required attributes that describe the state of the element to screen readers. [Learn more](https://web.dev/aria-required-attr/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-required-children": { - "id": "aria-required-children", - "title": "Elements with an ARIA `[role]` that require children to contain a specific `[role]` have all required children.", - "description": "Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions. [Learn more](https://web.dev/aria-required-children/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-required-parent": { - "id": "aria-required-parent", - "title": "`[role]`s are contained by their required parent element", - "description": "Some ARIA child roles must be contained by specific parent roles to properly perform their intended accessibility functions. [Learn more](https://web.dev/aria-required-parent/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-roles": { - "id": "aria-roles", - "title": "`[role]` values are valid", - "description": "ARIA roles must have valid values in order to perform their intended accessibility functions. [Learn more](https://web.dev/aria-roles/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-toggle-field-name": { - "id": "aria-toggle-field-name", - "title": "ARIA toggle fields have accessible names", - "description": "When a toggle field doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more](https://web.dev/aria-name/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-tooltip-name": { - "id": "aria-tooltip-name", - "title": "ARIA `tooltip` elements have accessible names", - "description": "When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more](https://web.dev/aria-name/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-treeitem-name": { - "id": "aria-treeitem-name", - "title": "ARIA `treeitem` elements have accessible names", - "description": "When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more](https://web.dev/aria-name/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-valid-attr-value": { - "id": "aria-valid-attr-value", - "title": "`[aria-*]` attributes have valid values", - "description": "Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid values. [Learn more](https://web.dev/aria-valid-attr-value/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "aria-valid-attr": { - "id": "aria-valid-attr", - "title": "`[aria-*]` attributes are valid and not misspelled", - "description": "Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid names. [Learn more](https://web.dev/aria-valid-attr/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "button-name": { - "id": "button-name", - "title": "Buttons have an accessible name", - "description": "When a button doesn't have an accessible name, screen readers announce it as \"button\", making it unusable for users who rely on screen readers. [Learn more](https://web.dev/button-name/).", - "score": 1, - "scoreDisplayMode": "binary", - "details": { "type": "table", "headings": [], "items": [] } - }, - "bypass": { - "id": "bypass", - "title": "The page contains a heading, skip link, or landmark region", - "description": "Adding ways to bypass repetitive content lets keyboard users navigate the page more efficiently. [Learn more](https://web.dev/bypass/).", - "score": null, - "scoreDisplayMode": "notApplicable" - }, - "color-contrast": { - "id": "color-contrast", - "title": "Background and foreground colors have a sufficient contrast ratio", - "description": "Low-contrast text is difficult or impossible for many users to read. [Learn more](https://web.dev/color-contrast/).", - "score": 1, - "scoreDisplayMode": "binary", - "details": { "type": "table", "headings": [], "items": [] } - }, - "definition-list": { - "id": "definition-list", - "title": "`

`'s contain only properly-ordered `
` and `
` groups, `