lighthouse 8.0.0-dev.20210709 → 8.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/architecture.md +101 -0
- package/docs/authenticated-pages.md +44 -0
- package/docs/bug-labels.md +35 -0
- package/docs/configuration.md +213 -0
- package/docs/emulation.md +32 -0
- package/docs/error-reporting.md +42 -0
- package/docs/hacking-tips.md +55 -0
- package/docs/headless-chrome.md +119 -0
- package/docs/lantern.md +55 -0
- package/docs/new-audits.md +99 -0
- package/docs/performance-budgets.md +187 -0
- package/docs/plugins.md +374 -0
- package/docs/puppeteer.md +95 -0
- package/docs/readme.md +164 -0
- package/docs/recipes/auth/README.md +129 -0
- package/docs/recipes/auth/example-lh-auth.js +81 -0
- package/docs/recipes/auth/package.json +11 -0
- package/docs/recipes/auth/server/public/dashboard-unauthenticated.html +21 -0
- package/docs/recipes/auth/server/public/dashboard.html +25 -0
- package/docs/recipes/auth/server/public/home-unauthenticated.html +27 -0
- package/docs/recipes/auth/server/public/home.html +17 -0
- package/docs/recipes/auth/server/public/unauthenticated.html +22 -0
- package/docs/recipes/auth/server/server.js +85 -0
- package/docs/recipes/custom-audit/custom-config.js +36 -0
- package/docs/recipes/custom-audit/package.json +8 -0
- package/docs/recipes/custom-audit/readme.md +32 -0
- package/docs/recipes/custom-audit/searchable-audit.js +46 -0
- package/docs/recipes/custom-audit/searchable-gatherer.js +32 -0
- package/docs/recipes/custom-gatherer-puppeteer/custom-audit.js +34 -0
- package/{root.js → docs/recipes/custom-gatherer-puppeteer/custom-config.js} +23 -2
- package/docs/recipes/custom-gatherer-puppeteer/custom-gatherer.js +51 -0
- package/docs/recipes/custom-gatherer-puppeteer/package.json +13 -0
- package/docs/recipes/custom-gatherer-puppeteer/readme.md +7 -0
- package/docs/recipes/custom-gatherer-puppeteer/test.sh +9 -0
- package/docs/recipes/gulp/gulpfile.js +79 -0
- package/docs/recipes/gulp/package.json +12 -0
- package/docs/recipes/gulp/public/index.html +22 -0
- package/docs/recipes/gulp/readme.md +6 -0
- package/docs/recipes/integration-test/README.md +14 -0
- package/docs/recipes/integration-test/example-lh-auth.test.js +160 -0
- package/docs/recipes/integration-test/package.json +9 -0
- package/docs/recipes/lighthouse-plugin-example/audits/preload-as.js +46 -0
- package/docs/recipes/lighthouse-plugin-example/package.json +11 -0
- package/docs/recipes/lighthouse-plugin-example/plugin-recipe-screenshot.png +0 -0
- package/docs/recipes/lighthouse-plugin-example/plugin.js +24 -0
- package/docs/recipes/lighthouse-plugin-example/readme.md +53 -0
- package/docs/releasing.md +164 -0
- package/docs/scoring.md +79 -0
- package/docs/throttling.md +150 -0
- package/docs/understanding-results.md +209 -0
- package/docs/v8-perf-faq.md +244 -0
- package/docs/variability.md +150 -0
- package/jest.config.js +0 -3
- package/lighthouse-cli/bin.js +8 -6
- package/lighthouse-core/audits/accessibility/aria-command-name.js +1 -1
- package/lighthouse-core/audits/accessibility/aria-meter-name.js +1 -1
- package/lighthouse-core/audits/accessibility/aria-progressbar-name.js +1 -1
- package/lighthouse-core/audits/accessibility/aria-tooltip-name.js +1 -1
- package/lighthouse-core/audits/accessibility/aria-treeitem-name.js +1 -1
- package/lighthouse-core/audits/apple-touch-icon.js +0 -1
- package/lighthouse-core/audits/audit.js +3 -3
- package/lighthouse-core/audits/autocomplete.js +2 -2
- package/lighthouse-core/audits/byte-efficiency/byte-efficiency-audit.js +14 -29
- package/lighthouse-core/audits/byte-efficiency/duplicated-javascript.js +2 -3
- package/lighthouse-core/audits/byte-efficiency/efficient-animated-content.js +1 -1
- package/lighthouse-core/audits/byte-efficiency/legacy-javascript.js +2 -3
- package/lighthouse-core/audits/byte-efficiency/modern-image-formats.js +15 -55
- package/lighthouse-core/audits/byte-efficiency/offscreen-images.js +4 -8
- package/lighthouse-core/audits/byte-efficiency/render-blocking-resources.js +8 -15
- package/lighthouse-core/audits/byte-efficiency/total-byte-weight.js +9 -10
- package/lighthouse-core/audits/byte-efficiency/unminified-css.js +1 -1
- package/lighthouse-core/audits/byte-efficiency/unminified-javascript.js +1 -1
- package/lighthouse-core/audits/byte-efficiency/unused-css-rules.js +1 -1
- package/lighthouse-core/audits/byte-efficiency/unused-javascript.js +1 -2
- package/lighthouse-core/audits/byte-efficiency/uses-long-cache-ttl.js +2 -2
- package/lighthouse-core/audits/byte-efficiency/uses-optimized-images.js +1 -2
- package/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js +24 -46
- package/lighthouse-core/audits/byte-efficiency/uses-text-compression.js +1 -1
- package/lighthouse-core/audits/critical-request-chains.js +0 -1
- package/lighthouse-core/audits/csp-xss.js +1 -1
- package/lighthouse-core/audits/diagnostics.js +0 -1
- package/lighthouse-core/audits/dobetterweb/geolocation-on-start.js +0 -1
- package/lighthouse-core/audits/dobetterweb/inspector-issues.js +1 -1
- package/lighthouse-core/audits/dobetterweb/notification-on-start.js +0 -1
- package/lighthouse-core/audits/dobetterweb/uses-http2.js +0 -1
- package/lighthouse-core/audits/final-screenshot.js +4 -8
- package/lighthouse-core/audits/font-display.js +0 -1
- package/lighthouse-core/audits/installable-manifest.js +3 -4
- package/lighthouse-core/audits/largest-contentful-paint-element.js +0 -1
- package/lighthouse-core/audits/long-tasks.js +1 -1
- package/lighthouse-core/audits/maskable-icon.js +0 -1
- package/lighthouse-core/audits/metrics/first-contentful-paint-3g.js +2 -4
- package/lighthouse-core/audits/metrics/first-contentful-paint.js +2 -4
- package/lighthouse-core/audits/metrics/first-meaningful-paint.js +2 -4
- package/lighthouse-core/audits/metrics/interactive.js +2 -4
- package/lighthouse-core/audits/metrics/largest-contentful-paint.js +2 -4
- package/lighthouse-core/audits/metrics/max-potential-fid.js +2 -4
- package/lighthouse-core/audits/metrics/speed-index.js +2 -4
- package/lighthouse-core/audits/metrics/total-blocking-time.js +2 -10
- package/lighthouse-core/audits/metrics.js +2 -4
- package/lighthouse-core/audits/performance-budget.js +0 -1
- package/lighthouse-core/audits/predictive-perf.js +6 -9
- package/lighthouse-core/audits/preload-fonts.js +1 -11
- package/lighthouse-core/audits/preload-lcp-image.js +5 -18
- package/lighthouse-core/audits/redirects.js +8 -10
- package/lighthouse-core/audits/screenshot-thumbnails.js +13 -28
- package/lighthouse-core/audits/seo/canonical.js +1 -2
- package/lighthouse-core/audits/seo/font-size.js +4 -4
- package/lighthouse-core/audits/seo/hreflang.js +2 -3
- package/lighthouse-core/audits/seo/http-status-code.js +16 -21
- package/lighthouse-core/audits/seo/is-crawlable.js +3 -4
- package/lighthouse-core/audits/seo/robots-txt.js +2 -2
- package/lighthouse-core/audits/seo/tap-targets.js +5 -5
- package/lighthouse-core/audits/server-response-time.js +2 -20
- package/lighthouse-core/audits/splash-screen.js +0 -1
- package/lighthouse-core/audits/themed-omnibox.js +0 -1
- package/lighthouse-core/audits/third-party-facades.js +0 -1
- package/lighthouse-core/audits/third-party-summary.js +3 -1
- package/lighthouse-core/audits/timing-budget.js +2 -4
- package/lighthouse-core/audits/uses-rel-preconnect.js +9 -14
- package/lighthouse-core/audits/uses-rel-preload.js +2 -13
- package/lighthouse-core/computed/main-thread-tasks.js +2 -2
- package/lighthouse-core/computed/metrics/cumulative-layout-shift.js +3 -3
- package/lighthouse-core/computed/metrics/first-contentful-paint-all-frames.js +6 -6
- package/lighthouse-core/computed/metrics/first-contentful-paint.js +8 -9
- package/lighthouse-core/computed/metrics/first-meaningful-paint.js +9 -10
- package/lighthouse-core/computed/metrics/interactive.js +24 -25
- package/lighthouse-core/computed/metrics/lantern-first-contentful-paint.js +6 -6
- package/lighthouse-core/computed/metrics/lantern-first-meaningful-paint.js +6 -6
- package/lighthouse-core/computed/metrics/lantern-largest-contentful-paint.js +6 -6
- package/lighthouse-core/computed/metrics/lantern-metric.js +8 -16
- package/lighthouse-core/computed/metrics/largest-contentful-paint-all-frames.js +7 -7
- package/lighthouse-core/computed/metrics/largest-contentful-paint.js +9 -10
- package/lighthouse-core/computed/metrics/max-potential-fid.js +11 -8
- package/lighthouse-core/computed/metrics/metric.js +5 -32
- package/lighthouse-core/computed/metrics/speed-index.js +5 -6
- package/lighthouse-core/computed/metrics/timing-summary.js +45 -55
- package/lighthouse-core/computed/metrics/total-blocking-time.js +29 -36
- package/lighthouse-core/computed/page-dependency-graph.js +14 -14
- package/lighthouse-core/computed/resource-summary.js +7 -3
- package/lighthouse-core/computed/speedline.js +3 -3
- package/lighthouse-core/computed/trace-of-tab.js +86 -15
- package/lighthouse-core/computed/user-timings.js +5 -5
- package/lighthouse-core/config/default-config.js +0 -1
- package/lighthouse-core/fraggle-rock/config/config.js +7 -9
- package/lighthouse-core/fraggle-rock/config/default-config.js +2 -40
- package/lighthouse-core/fraggle-rock/config/filters.js +6 -39
- package/lighthouse-core/fraggle-rock/config/validation.js +4 -4
- package/lighthouse-core/fraggle-rock/gather/base-artifacts.js +19 -54
- package/lighthouse-core/fraggle-rock/gather/navigation-runner.js +10 -21
- package/lighthouse-core/fraggle-rock/gather/runner-helpers.js +2 -2
- package/lighthouse-core/fraggle-rock/gather/snapshot-runner.js +2 -2
- package/lighthouse-core/fraggle-rock/gather/timespan-runner.js +2 -2
- package/lighthouse-core/gather/driver/prepare.js +0 -3
- package/lighthouse-core/gather/fetcher.js +2 -0
- package/lighthouse-core/gather/gather-runner.js +14 -2
- package/lighthouse-core/gather/gatherers/image-elements.js +61 -24
- package/lighthouse-core/gather/gatherers/inspector-issues.js +2 -2
- package/lighthouse-core/gather/gatherers/script-elements.js +12 -45
- package/lighthouse-core/gather/gatherers/seo/font-size.js +5 -5
- package/lighthouse-core/gather/gatherers/seo/tap-targets.js +12 -64
- package/lighthouse-core/gather/gatherers/service-worker.js +3 -20
- package/lighthouse-core/gather/gatherers/trace-compat.js +1 -1
- package/lighthouse-core/gather/gatherers/trace-elements.js +3 -15
- package/lighthouse-core/gather/gatherers/trace.js +4 -13
- package/lighthouse-core/gather/gatherers/viewport-dimensions.js +1 -1
- package/lighthouse-core/lib/dependency-graph/simulator/network-analyzer.js +2 -13
- package/lighthouse-core/lib/emulation.js +2 -0
- package/lighthouse-core/lib/i18n/i18n.js +2 -2
- package/lighthouse-core/lib/i18n/locales/ar-XB.json +141 -141
- package/lighthouse-core/lib/i18n/locales/ar.json +143 -143
- package/lighthouse-core/lib/i18n/locales/bg.json +143 -143
- package/lighthouse-core/lib/i18n/locales/ca.json +141 -141
- package/lighthouse-core/lib/i18n/locales/cs.json +141 -141
- package/lighthouse-core/lib/i18n/locales/da.json +141 -141
- package/lighthouse-core/lib/i18n/locales/de.json +142 -142
- package/lighthouse-core/lib/i18n/locales/el.json +141 -141
- package/lighthouse-core/lib/i18n/locales/en-GB.json +141 -141
- package/lighthouse-core/lib/i18n/locales/en-US.ctc.json +6659 -0
- package/lighthouse-core/lib/i18n/locales/en-US.json +144 -150
- package/lighthouse-core/lib/i18n/locales/en-XA.json +141 -141
- package/lighthouse-core/lib/i18n/locales/en-XL.ctc.json +6628 -0
- package/lighthouse-core/lib/i18n/locales/en-XL.json +144 -150
- package/lighthouse-core/lib/i18n/locales/es-419.json +141 -141
- package/lighthouse-core/lib/i18n/locales/es.json +141 -141
- package/lighthouse-core/lib/i18n/locales/fi.json +143 -143
- package/lighthouse-core/lib/i18n/locales/fil.json +142 -142
- package/lighthouse-core/lib/i18n/locales/fr.json +141 -141
- package/lighthouse-core/lib/i18n/locales/he.json +142 -142
- package/lighthouse-core/lib/i18n/locales/hi.json +143 -143
- package/lighthouse-core/lib/i18n/locales/hr.json +141 -141
- package/lighthouse-core/lib/i18n/locales/hu.json +143 -143
- package/lighthouse-core/lib/i18n/locales/id.json +143 -143
- package/lighthouse-core/lib/i18n/locales/it.json +143 -143
- package/lighthouse-core/lib/i18n/locales/ja.json +143 -143
- package/lighthouse-core/lib/i18n/locales/ko.json +143 -143
- package/lighthouse-core/lib/i18n/locales/lt.json +143 -143
- package/lighthouse-core/lib/i18n/locales/lv.json +143 -143
- package/lighthouse-core/lib/i18n/locales/nl.json +141 -141
- package/lighthouse-core/lib/i18n/locales/no.json +141 -141
- package/lighthouse-core/lib/i18n/locales/pl.json +141 -141
- package/lighthouse-core/lib/i18n/locales/pt-PT.json +141 -141
- package/lighthouse-core/lib/i18n/locales/pt.json +141 -141
- package/lighthouse-core/lib/i18n/locales/ro.json +144 -144
- package/lighthouse-core/lib/i18n/locales/ru.json +143 -143
- package/lighthouse-core/lib/i18n/locales/sk.json +142 -142
- package/lighthouse-core/lib/i18n/locales/sl.json +141 -141
- package/lighthouse-core/lib/i18n/locales/sr-Latn.json +143 -143
- package/lighthouse-core/lib/i18n/locales/sr.json +143 -143
- package/lighthouse-core/lib/i18n/locales/sv.json +142 -142
- package/lighthouse-core/lib/i18n/locales/ta.json +141 -141
- package/lighthouse-core/lib/i18n/locales/te.json +143 -143
- package/lighthouse-core/lib/i18n/locales/th.json +143 -143
- package/lighthouse-core/lib/i18n/locales/tr.json +143 -143
- package/lighthouse-core/lib/i18n/locales/uk.json +141 -141
- package/lighthouse-core/lib/i18n/locales/vi.json +143 -143
- package/lighthouse-core/lib/i18n/locales/zh-HK.json +141 -141
- package/lighthouse-core/lib/i18n/locales/zh-TW.json +143 -143
- package/lighthouse-core/lib/i18n/locales/zh.json +143 -143
- package/lighthouse-core/lib/lh-error.js +2 -2
- package/lighthouse-core/lib/minify-trace.js +1 -1
- package/lighthouse-core/lib/network-request.js +1 -17
- package/lighthouse-core/lib/page-functions.js +5 -6
- package/lighthouse-core/lib/rect-helpers.js +3 -3
- package/lighthouse-core/lib/sd-validation/assets/jsonldcontext.json +7137 -0
- package/lighthouse-core/lib/sd-validation/assets/schema-tree.json +9900 -0
- package/{report/report-assets.js → lighthouse-core/lib/sd-validation/helpers/walk-object.js} +20 -12
- package/lighthouse-core/lib/sd-validation/json-expander.js +56 -0
- package/lighthouse-core/lib/sd-validation/json-linter.js +49 -0
- package/lighthouse-core/lib/sd-validation/jsonld-keyword-validator.js +50 -0
- package/lighthouse-core/lib/sd-validation/line-number-from-jsonld-path.js +60 -0
- package/lighthouse-core/lib/sd-validation/schema-validator.js +146 -0
- package/lighthouse-core/lib/sd-validation/scripts/download-jsonldcontext.js +30 -0
- package/lighthouse-core/lib/sd-validation/scripts/generate-schema-tree.js +97 -0
- package/lighthouse-core/lib/sd-validation/sd-validation.js +77 -0
- package/lighthouse-core/lib/tappable-rects.js +1 -1
- package/lighthouse-core/lib/tracehouse/trace-processor.js +42 -116
- package/lighthouse-core/lib/url-shim.js +2 -29
- package/lighthouse-core/report/html/html-report-assets.js +38 -0
- package/{report/README.md → lighthouse-core/report/html/readme.md} +11 -7
- package/{report → lighthouse-core/report/html}/renderer/category-renderer.js +0 -0
- package/{report → lighthouse-core/report/html}/renderer/crc-details-renderer.js +0 -0
- package/{report → lighthouse-core/report/html}/renderer/details-renderer.js +1 -1
- package/{report → lighthouse-core/report/html}/renderer/dom.js +0 -0
- package/{report → lighthouse-core/report/html}/renderer/element-screenshot-renderer.js +0 -0
- package/{report → lighthouse-core/report/html}/renderer/i18n.js +1 -1
- package/{report → lighthouse-core/report/html}/renderer/logger.js +0 -0
- package/{report → lighthouse-core/report/html}/renderer/performance-category-renderer.js +0 -0
- package/{report → lighthouse-core/report/html}/renderer/psi.js +0 -0
- package/{report → lighthouse-core/report/html}/renderer/pwa-category-renderer.js +0 -0
- package/{report → lighthouse-core/report/html}/renderer/report-renderer.js +0 -0
- package/{report → lighthouse-core/report/html}/renderer/report-ui-features.js +3 -3
- package/{report → lighthouse-core/report/html}/renderer/snippet-renderer.js +0 -0
- package/{report → lighthouse-core/report/html}/renderer/text-encoding.js +0 -0
- package/{report → lighthouse-core/report/html}/renderer/util.js +4 -7
- package/{report/assets/styles.css → lighthouse-core/report/html/report-styles.css} +0 -0
- package/{report/assets/standalone-template.html → lighthouse-core/report/html/report-template.html} +41 -1
- package/{report/assets → lighthouse-core/report/html}/templates.html +0 -0
- package/{report → lighthouse-core/report}/report-generator.js +1 -1
- package/lighthouse-core/runner.js +1 -1
- package/package.json +12 -13
- package/readme.md +2 -2
- package/third-party/chromium-synchronization/inspector-issueAdded-types-test.js +2 -3
- package/third-party/chromium-synchronization/installability-errors-test.js +2 -2
- package/third-party/download-content-shell/download-content-shell.js +1 -2
- package/third-party/snyk/snapshot.json +1 -1
- package/tsconfig.json +1 -0
- package/types/artifacts.d.ts +21 -41
- package/types/audit.d.ts +0 -2
- package/types/config.d.ts +2 -16
- package/types/externs.d.ts +0 -1
- package/types/gatherer.d.ts +13 -13
- package/types/html-renderer.d.ts +14 -14
- package/types/i18n.d.ts +1 -1
- package/lighthouse-core/audits/byte-efficiency/uses-responsive-images-snapshot.js +0 -94
- package/lighthouse-core/computed/image-records.js +0 -62
- package/lighthouse-core/computed/metrics/navigation-metric.js +0 -46
- package/lighthouse-core/computed/processed-navigation.js +0 -21
- package/lighthouse-core/computed/processed-trace.js +0 -21
- package/lighthouse-core/gather/gatherers/gather-context.js +0 -25
- package/lighthouse-core/gather/gatherers/host-form-factor.js +0 -31
- package/lighthouse-core/gather/gatherers/host-user-agent.js +0 -29
- package/lighthouse-core/lib/lh-trace-processor.js +0 -46
- package/report/clients/standalone.js +0 -52
- package/report/test/renderer/category-renderer-test.js +0 -488
- package/report/test/renderer/crc-details-renderer-test.js +0 -115
- package/report/test/renderer/details-renderer-test.js +0 -843
- package/report/test/renderer/dom-test.js +0 -157
- package/report/test/renderer/element-screenshot-renderer-test.js +0 -189
- package/report/test/renderer/i18n-test.js +0 -146
- package/report/test/renderer/performance-category-renderer-test.js +0 -332
- package/report/test/renderer/psi-test.js +0 -152
- package/report/test/renderer/pwa-category-renderer-test.js +0 -303
- package/report/test/renderer/report-renderer-test.js +0 -325
- package/report/test/renderer/report-ui-features-test.js +0 -572
- package/report/test/renderer/snippet-renderer-test.js +0 -291
- package/report/test/renderer/text-encoding-test.js +0 -41
- package/report/test/renderer/util-test.js +0 -388
- package/report/test/report-generator-test.js +0 -145
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
# v8.0 Performance FAQ
|
|
2
|
+
|
|
3
|
+
### Give me a summary of the perf score changes in v8.0. What's new/different?
|
|
4
|
+
|
|
5
|
+
First, it may be useful to refresh on [the math behind Lighthouse's metric
|
|
6
|
+
scores and performance score.](https://web.dev/performance-scoring/)
|
|
7
|
+
|
|
8
|
+
In [Lighthouse v8.0](https://github.com/GoogleChrome/lighthouse/releases/tag/v8.0.0), we updated the score curves for FCP and TBT measurements,
|
|
9
|
+
making both a bit more strict. CLS has been updated to its new, [windowed
|
|
10
|
+
definition](https://web.dev/evolving-cls/). Additionally, the Performance
|
|
11
|
+
Score's weighted average was
|
|
12
|
+
[rebalanced](https://googlechrome.github.io/lighthouse/scorecalc/#FCP=3000&SI=5800&FMP=4000&TTI=7300&FCI=6500&LCP=4000&TBT=600&CLS=0.25&device=mobile&version=8&version=6&version=5),
|
|
13
|
+
giving more weight to CLS and TBT than before, and slightly decreasing the
|
|
14
|
+
weights of FCP, SI, and TTI.
|
|
15
|
+
|
|
16
|
+
From an analysis of HTTP Archive's latest [crawl of the
|
|
17
|
+
web](https://httparchive.org/faq#how-does-the-http-archive-decide-which-urls-to-test),
|
|
18
|
+
we project that the performance score for the majority of sites will stay the
|
|
19
|
+
same or improve in Lighthouse 8.0.
|
|
20
|
+
- ~20% of sites may see a drop of up to 5 points, though likely less
|
|
21
|
+
- ~20% of sites will see little detectable change
|
|
22
|
+
- ~30% of sites should see a moderate improvement of a few points
|
|
23
|
+
- ~30% could see a significant improvement of 5 points or more
|
|
24
|
+
|
|
25
|
+
The biggest drops in scores are due to TBT scoring becoming stricter and the
|
|
26
|
+
metric's slightly higher weight. The biggest improvements in scores are also due
|
|
27
|
+
to TBT changes in the long tail and the windowing of CLS, and both metrics'
|
|
28
|
+
higher weights.
|
|
29
|
+
|
|
30
|
+
### What are the exact score weighting changes?
|
|
31
|
+
|
|
32
|
+
#### Changes by metric
|
|
33
|
+
|
|
34
|
+
| metric | v6 weight | v8 weight | Δ |
|
|
35
|
+
|--------------------------------|-----------|-----------|----------|
|
|
36
|
+
| First Contentful Paint (FCP) | 15 | **10** | -5 |
|
|
37
|
+
| Speed Index (SI) | 15 | **10** | -5 |
|
|
38
|
+
| Largest Contentful Paint (LCP) | 25 | **25** | 0 |
|
|
39
|
+
| Time To Interactive (TTI) | 15 | **10** | -5 |
|
|
40
|
+
| Total Blocking Time (TBT) | 25 | **30** | 5 |
|
|
41
|
+
| Cumulative Layout Shift (CLS) | 5 | **15** | 10 |
|
|
42
|
+
|
|
43
|
+
#### Changes by phase
|
|
44
|
+
|
|
45
|
+
| phase | metric | v6 phase weight | v8 phase weight | Δ |
|
|
46
|
+
|----------------|--------------------------------|-----------------|-----------------|-----|
|
|
47
|
+
| early | First Contentful Paint (FCP) | 15 | 10 | -5 |
|
|
48
|
+
| mid | Speed Index (SI) | 40 | 35 | -5 |
|
|
49
|
+
| | Largest Contentful Paint (LCP) | | | |
|
|
50
|
+
| interactivity | Time To Interactive (TTI) | 40 | 40 | 0 |
|
|
51
|
+
| | Total Blocking Time (TBT) | | | |
|
|
52
|
+
| predictability | Cumulative Layout Shift (CLS) | 5 | 15 | 10 |
|
|
53
|
+
|
|
54
|
+
### Why did the weight of CLS go up?
|
|
55
|
+
|
|
56
|
+
When introduced in Lighthouse v6, it was still early days for the metric.
|
|
57
|
+
There've been [many improvements and
|
|
58
|
+
bugfixes](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/cls.md)
|
|
59
|
+
to the CLS metric since then. Now, given its maturity and established placement in Core
|
|
60
|
+
Web Vitals, the weight increases from 5% to 15%.
|
|
61
|
+
|
|
62
|
+
### Why are the Core Web Vitals metrics weighted differently in the performance score?
|
|
63
|
+
|
|
64
|
+
The Core Web Vitals metrics are [independent signals in the Page Experience
|
|
65
|
+
ranking
|
|
66
|
+
update](https://support.google.com/webmasters/thread/104436075/core-web-vitals-page-experience-faqs-updated-march-2021).
|
|
67
|
+
Lighthouse weighs each lab equivalent metric based on what we believe creates
|
|
68
|
+
the best incentives to improve overall page experience for users.
|
|
69
|
+
|
|
70
|
+
LCP, CLS, and TBT are [very good
|
|
71
|
+
metrics](https://chromium.googlesource.com/chromium/src/+/lkgr/docs/speed/good_toplevel_metrics.md)
|
|
72
|
+
and that's why they are the three highest-weighted metrics in the performance
|
|
73
|
+
score.
|
|
74
|
+
|
|
75
|
+
### How should I think about the Lighthouse performance score in relation to Core Web Vitals?
|
|
76
|
+
|
|
77
|
+
[Core Web Vitals](https://web.dev/vitals/) refer to a specific set of key user
|
|
78
|
+
experience metrics, their passing thresholds, and percentile at which they're measured.
|
|
79
|
+
In general, CWV's primary focus is field data.
|
|
80
|
+
|
|
81
|
+
The Lighthouse score is a means to understand the degree of opportunity
|
|
82
|
+
available to improve critical elements of user experience. The lower the score,
|
|
83
|
+
the more likely the user will struggle with load performance, responsiveness, or
|
|
84
|
+
content stability.
|
|
85
|
+
|
|
86
|
+
Lighthouse's lab-based data overlaps with Core Web Vitals in a few key ways.
|
|
87
|
+
Lighthouse features two of the three core vitals (LCP and CLS) with the exact
|
|
88
|
+
same passing thresholds. There's no user input in a Lighthouse run, so it cannot
|
|
89
|
+
compute FID. Instead, we have TBT, which you can consider a proxy metric for
|
|
90
|
+
FID, and though they measure two different things they are both signals about a
|
|
91
|
+
page's interactivity.
|
|
92
|
+
|
|
93
|
+
_So CWV and Lighthouse have commonalities, but are different. How can you
|
|
94
|
+
rationalize paying attention to both?_
|
|
95
|
+
|
|
96
|
+
Ultimately, a combination approach is most effective. Use field data for the
|
|
97
|
+
long-term overview of your user's experience, and use lab data to iterate your
|
|
98
|
+
way to the best experience possible for your users. CrUX data summarizes [the
|
|
99
|
+
most recent 28
|
|
100
|
+
days](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference#data-pipeline),
|
|
101
|
+
so it'll take some time to confidently determine that any change has definite
|
|
102
|
+
impact.
|
|
103
|
+
|
|
104
|
+
Lighthouse's analysis allows you to debug and optimize in an environment that is
|
|
105
|
+
repeatable with an immediate feedback loop. In addition, lab-based tooling can
|
|
106
|
+
provide significantly more detail than field instrumentation, as it's not
|
|
107
|
+
limited to web-exposed APIs and cross-origin restrictions.
|
|
108
|
+
|
|
109
|
+
The exact numbers of your lab and field metrics aren't expected to match, but
|
|
110
|
+
any substantial improvement to your lab metrics should be observable in the
|
|
111
|
+
field once it's been deployed. The higher the Lighthouse score, the less you're
|
|
112
|
+
leaving up to chance in the field.
|
|
113
|
+
|
|
114
|
+
### What blindspots from the field does lab tooling illuminate?
|
|
115
|
+
|
|
116
|
+
Field data analyzes all successful page loads. Lab tooling analyzes the
|
|
117
|
+
experience of a fixed configuration for a hypothetical user. If every potential
|
|
118
|
+
user in the world successfully loaded an equal number of pages on your site, we
|
|
119
|
+
might not need to focus on the experience of a hypothetical one, but in reality
|
|
120
|
+
we know this isn't the case. Users who have better experiences use your site
|
|
121
|
+
more; that's why we care about performance in the first place! Lab tooling shows
|
|
122
|
+
you the quality of the experience for these hypothetical users that field data
|
|
123
|
+
might be [missing
|
|
124
|
+
entirely](https://blog.chriszacharias.com/page-weight-matters).
|
|
125
|
+
|
|
126
|
+
Lighthouse mobile reports emulate a slow 4G connection on a mid-tier Android
|
|
127
|
+
device. While field data might not indicate these conditions are especially
|
|
128
|
+
common for your site, analyzing how your site performs in these tougher
|
|
129
|
+
conditions helps expand your site's audience. Lighthouse identifies the worst
|
|
130
|
+
experiences, experiences you can't see in the field because they were so bad the
|
|
131
|
+
user never came back (or waited around in the first place).
|
|
132
|
+
|
|
133
|
+
### How should I work to optimize CLS differently given that it has been updated?
|
|
134
|
+
|
|
135
|
+
The [windowing
|
|
136
|
+
adjustment](https://www.google.com/url?q=https://web.dev/evolving-cls/&sa=D&source=editors&ust=1622570731600000&usg=AOvVaw2R7Y5uFrQX7Mpdj__5SdYq)
|
|
137
|
+
will likely not have much effect for the lab measurement, but instead will have
|
|
138
|
+
a large effect on the field CLS for long-lived pages.
|
|
139
|
+
|
|
140
|
+
Lighthouse 8 introduces another adjustment to our CLS definition: including
|
|
141
|
+
layout shift contributions from subframes. This brings our implementation in
|
|
142
|
+
line with how CrUX computes field CLS. This comes with the implication that
|
|
143
|
+
iframes (including ones you may not control) may be adding layout shifts which
|
|
144
|
+
ultimately affect your CLS score. Keep in mind that the subframe contributions
|
|
145
|
+
are [weighted by the in-viewport
|
|
146
|
+
portion](https://github.com/WICG/layout-instability#cumulative-scores) of the
|
|
147
|
+
iframe.
|
|
148
|
+
|
|
149
|
+
### Why don't the numbers for TBT and FID match, if TBT is a proxy metric for FID?
|
|
150
|
+
|
|
151
|
+
The commonality between TBT (collected in a lab environment) and FID (collected
|
|
152
|
+
in a field context) is that they measure the impact on input responsiveness from
|
|
153
|
+
long tasks on the main thread. Beyond that, they're quite different. FID
|
|
154
|
+
captures the delay in handling the first input event of the page, whenever that
|
|
155
|
+
input happened. TBT roughly captures how dangerous the length of all the main
|
|
156
|
+
thread's tasks are.
|
|
157
|
+
|
|
158
|
+
It's very possible to have a page that does well on FID, but poorly on TBT. And
|
|
159
|
+
it's slightly harder, but possible, to do well on TBT but poorly on FID\*. So,
|
|
160
|
+
you shouldn't expect your TBT and FID measurements to correlate strongly. A
|
|
161
|
+
large-scale analysis found their [Spearman's
|
|
162
|
+
ρ](https://en.wikipedia.org/wiki/Spearman%27s_rank_correlation_coefficient) at
|
|
163
|
+
about 0.40, which indicates a connection, but not one as strong as many would
|
|
164
|
+
prefer.
|
|
165
|
+
|
|
166
|
+
From the Lighthouse project's perspective, the current passing threshold for FID
|
|
167
|
+
is quite lenient but more importantly, the percentile-of-record for FID (75th
|
|
168
|
+
percentile) is not sufficient for detecting issues. The 95th percentile is a
|
|
169
|
+
much stronger indicator of problematic interactions for this metric. We
|
|
170
|
+
encourage user-centric teams to focus on the 95th percentile of all input delays
|
|
171
|
+
(not just the first) in their field data in order to identify and address
|
|
172
|
+
problems that surface just 5% of the time.
|
|
173
|
+
|
|
174
|
+
\*Aside: the [Chrome 91 FID change for
|
|
175
|
+
double-tap-to-zoom](https://chromium.googlesource.com/chromium/src.git/+/refs/heads/main/docs/speed/metrics_changelog/2021_05_fid.md)
|
|
176
|
+
fixes a lot of high FID / low TBT cases and may be observable in your field
|
|
177
|
+
metrics, with higher percentiles improving slightly. Most remaining high FID /
|
|
178
|
+
low TBT cases are likely due to incorrect meta viewport tags, which [Lighthouse
|
|
179
|
+
will
|
|
180
|
+
flag](https://www.google.com/url?q=https://web.dev/viewport/&sa=D&source=editors&ust=1622651275263000&usg=AOvVaw1OS_kJ9oNMlPSjIJbFy7c8).
|
|
181
|
+
Delivering a mobile-friendly viewport, reducing main-thread blocking JS, and
|
|
182
|
+
keeping your TBT low is the best defense against bad FID in the field.
|
|
183
|
+
|
|
184
|
+
### Overall, what motivated the changes to the performance score?
|
|
185
|
+
|
|
186
|
+
As with all Lighthouse score updates, changes are made to reflect
|
|
187
|
+
the latest in how to measure user-experience quality holistically and accurately,
|
|
188
|
+
and to focus attention on key priorities.
|
|
189
|
+
|
|
190
|
+
Heavy JS and long tasks are a problem for the web that's
|
|
191
|
+
[worsening](https://httparchive.org/reports/state-of-javascript#bytesJs). Field
|
|
192
|
+
FID is currently too lenient and not sufficiently incentivizing action to
|
|
193
|
+
address the problem. Lighthouse has historically weighed its interactivity
|
|
194
|
+
metrics at 40-55% of the performance score and—as interactivity is key to user
|
|
195
|
+
experience—we maintain a 40% weighting (TBT and TTI together) in Lighthouse
|
|
196
|
+
8.0.
|
|
197
|
+
|
|
198
|
+
[FCP's score curve was
|
|
199
|
+
adjusted](https://github.com/GoogleChrome/lighthouse/pull/12556) to align with
|
|
200
|
+
the current de facto ["good" threshold](https://web.dev/fcp/#what-is-a-good-fcp-score),
|
|
201
|
+
and as a result will score a bit more strictly.
|
|
202
|
+
|
|
203
|
+
The curve for TBT was made stricter to [more closely
|
|
204
|
+
approach](https://github.com/GoogleChrome/lighthouse/pull/12576) the ideal score
|
|
205
|
+
curve. TBT has had (and still has) a more lenient curve than our methodology
|
|
206
|
+
dictates, but the new curve is more linear which means there's a larger range
|
|
207
|
+
where improvements in the metric are rewarded with improvements in the score. If
|
|
208
|
+
your page currently scores poorly with TBT, the new curve will be more
|
|
209
|
+
responsive to changes as page performance incrementally improves.
|
|
210
|
+
|
|
211
|
+
FCP's weight drops slightly from 15% to 10% because it's fairly gameable and is also partly
|
|
212
|
+
captured by Speed Index.
|
|
213
|
+
|
|
214
|
+
### What's the story with TTI?
|
|
215
|
+
|
|
216
|
+
TTI serves a useful role as it's the largest metric value reported (often >10
|
|
217
|
+
seconds) and helps anchor perceptions.
|
|
218
|
+
|
|
219
|
+
We see TBT as a stronger metric for evaluating the health of your main thread
|
|
220
|
+
and its impact on interactivity, plus it [has lower
|
|
221
|
+
variability](https://docs.google.com/document/d/1xCERB_X7PiP5RAZDwyIkODnIXoBk-Oo7Mi9266aEdGg/edit).
|
|
222
|
+
TTI serves as a nice complement that captures the cost of long tasks, often
|
|
223
|
+
from heavy JavaScript. That said, we expect to continue to reduce the weight
|
|
224
|
+
of TTI and will likely remove it in a future major Lighthouse release.
|
|
225
|
+
|
|
226
|
+
### How does the Lighthouse Perf score get calculated? What is it based on?
|
|
227
|
+
|
|
228
|
+
The Lighthouse perf score is calculated from a weighted, blended set of
|
|
229
|
+
performance metrics. You can see the current and previous Lighthouse score
|
|
230
|
+
compositions (which metrics we are blending together, and at what weights) in
|
|
231
|
+
the [score
|
|
232
|
+
calculator](https://googlechrome.github.io/lighthouse/scorecalc/#FCP=3000&SI=5800&FMP=4000&TTI=7300&FCI=6500&LCP=4000&TBT=600&CLS=0.25&device=mobile&version=8&version=6&version=5),
|
|
233
|
+
and learn more about the [calculation specifics
|
|
234
|
+
here](https://web.dev/performance-scoring/).
|
|
235
|
+
|
|
236
|
+
### What is the most exciting update in LH v8?
|
|
237
|
+
|
|
238
|
+
We're really excited about the [interactive
|
|
239
|
+
treemap](https://github.com/GoogleChrome/lighthouse/blob/v8changelog/changelog.md#treemap-release),
|
|
240
|
+
[filtering audits by
|
|
241
|
+
metric](https://github.com/GoogleChrome/lighthouse/blob/v8changelog/changelog.md#:~:text=new%20metric%20filter),
|
|
242
|
+
and the new [Content Security Policy
|
|
243
|
+
audit](https://web.dev/strict-csp/#adopting-a-strict-csp), which was a
|
|
244
|
+
collaboration with the Google Web Security team.
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
# Score Variability
|
|
2
|
+
|
|
3
|
+
## Summary
|
|
4
|
+
|
|
5
|
+
Lighthouse performance scores will change due to inherent variability in web and network technologies, even if there hasn't been a code change. Run Lighthouse multiple times and beware of variability before drawing conclusions about a performance-impacting change.
|
|
6
|
+
|
|
7
|
+
## Sources of Variability
|
|
8
|
+
|
|
9
|
+
Variability in performance measurement is introduced via a number of channels with different levels of impact. Below is a table containing several common sources of metric variability, the typical impact they have on results, and the extent to which they are likely to occur in different environments.
|
|
10
|
+
|
|
11
|
+
| Source | Impact | Typical End User | PageSpeed Insights | Controlled Lab |
|
|
12
|
+
| --------------------------- | ------ | ---------------- | ------------------ | -------------- |
|
|
13
|
+
| Page nondeterminism | High | LIKELY | LIKELY | LIKELY |
|
|
14
|
+
| Local network variability | High | LIKELY | UNLIKELY | UNLIKELY |
|
|
15
|
+
| Tier-1 network variability | Medium | POSSIBLE | POSSIBLE | POSSIBLE |
|
|
16
|
+
| Web server variability | Low | LIKELY | LIKELY | LIKELY |
|
|
17
|
+
| Client hardware variability | High | LIKELY | UNLIKELY | UNLIKELY |
|
|
18
|
+
| Client resource contention | High | LIKELY | POSSIBLE | UNLIKELY |
|
|
19
|
+
| Browser nondeterminism | Medium | CERTAIN | CERTAIN | CERTAIN |
|
|
20
|
+
|
|
21
|
+
Below are more detailed descriptions of the sources of variance and the impact they have on the most likely combinations of Lighthouse runtime + environment. While applied throttling and simulated throttling approaches could be used in any of these three environments, the typical end user uses simulated throttling.
|
|
22
|
+
|
|
23
|
+
### Page Nondeterminism
|
|
24
|
+
|
|
25
|
+
Pages can contain logic that is nondeterministic that changes the way a user experiences a page, i.e. an A/B test that changes the layout and assets loaded or a different ad experience based on campaign progress. This is an intentional and irremovable source of variance. If the page changes in a way that hurts performance, Lighthouse should be able to identify this case. The only mitigation here is on the part of the site owner in ensuring that the exact same version of the page is being tested between different runs.
|
|
26
|
+
|
|
27
|
+
### Local Network Variability
|
|
28
|
+
|
|
29
|
+
Local networks have inherent variability from packet loss, variable traffic prioritization, and last-mile network congestion. Users with cheap routers and many devices sharing limited bandwidth are usually the most susceptible to this. _Applied_ throttling partially mitigates these effects by applying a minimum request latency and maximum throughput that masks underlying retries. _Simulated_ throttling mitigates these effects by replaying network activity on its own.
|
|
30
|
+
|
|
31
|
+
### Tier-1 Network Variability
|
|
32
|
+
|
|
33
|
+
Network interconnects are generally very stable and have minimal impact but cross-geo requests, i.e. measuring performance of a Chinese site from the US, can start to experience a high degree of latency introduced from tier-1 network hops. _Applied_ throttling partially masks these effects with network throttling. _Simulated_ throttling mitigates these effects by replaying network activity on its own.
|
|
34
|
+
|
|
35
|
+
### Web Server Variability
|
|
36
|
+
|
|
37
|
+
Web servers have variable load and do not always respond with the same delay. Lower-traffic sites with shared hosting infrastructure are typically more susceptible to this. _Applied_ throttling partially masks these effects by applying a minimum request latency in its network throttling. _Simulated_ throttling is susceptible to this effect but the overall impact is usually low when compared to other network variability.
|
|
38
|
+
|
|
39
|
+
### Client Hardware Variability
|
|
40
|
+
|
|
41
|
+
The hardware on which the webpage is loading can greatly impact performance. _Applied_ throttling cannot do much to mitigate this issue. _Simulated_ throttling partially mitigates this issue by capping the theoretical execution time of CPU tasks during simulation.
|
|
42
|
+
|
|
43
|
+
### Client Resource Contention
|
|
44
|
+
|
|
45
|
+
Other applications running on the same machine while Lighthouse is running can cause contention for CPU, memory, and network resources. Malware, browser extensions, and anti-virus software have particularly strong impacts on web performance. Multi-tenant server environments (such as Travis, AWS, etc) can also suffer from these issues. Running multiple instances of Lighthouse at once also typically distorts results due to this problem. _Applied_ throttling is susceptible to this issue. _Simulated_ throttling partially mitigates this issue by replaying network activity on its own and capping CPU execution.
|
|
46
|
+
|
|
47
|
+
### Browser Nondeterminism
|
|
48
|
+
|
|
49
|
+
Browsers have inherent variability in their execution of tasks that impacts the way webpages are loaded. This is unavoidable for applied throttling as at the end of the day they are simply reporting whatever was observed by the browser. _Simulated_ throttling is able to partially mitigate this effect by simulating execution on its own, only re-using task execution times from the browser in its estimate.
|
|
50
|
+
|
|
51
|
+
### Effect of Throttling Strategies
|
|
52
|
+
|
|
53
|
+
Below is a table containing several common sources of metric variability, the typical impact they have on results, and the extent to which different Lighthouse throttling strategies are able to mitigate their effect. Learn more about different throttling strategies in our [throttling documentation](./throttling.md).
|
|
54
|
+
|
|
55
|
+
| Source | Impact | Simulated Throttling | Applied Throttling | No Throttling |
|
|
56
|
+
| --------------------------- | ------ | -------------------- | ------------------- | ------------- |
|
|
57
|
+
| Page nondeterminism | High | NO MITIGATION | NO MITIGATION | NO MITIGATION |
|
|
58
|
+
| Local network variability | High | MITIGATED | PARTIALLY MITIGATED | NO MITIGATION |
|
|
59
|
+
| Tier-1 network variability | Medium | MITIGATED | PARTIALLY MITIGATED | NO MITIGATION |
|
|
60
|
+
| Web server variability | Low | NO MITIGATION | PARTIALLY MITIGATED | NO MITIGATION |
|
|
61
|
+
| Client hardware variability | High | PARTIALLY MITIGATED | NO MITIGATION | NO MITIGATION |
|
|
62
|
+
| Client resource contention | High | PARTIALLY MITIGATED | NO MITIGATION | NO MITIGATION |
|
|
63
|
+
| Browser nondeterminism | Medium | PARTIALLY MITIGATED | NO MITIGATION | NO MITIGATION |
|
|
64
|
+
|
|
65
|
+
## Strategies for Dealing With Variance
|
|
66
|
+
|
|
67
|
+
### Run on Adequate Hardware
|
|
68
|
+
|
|
69
|
+
Loading modern webpages on a modern browser is not an easy task. Using appropriately powerful hardware can make a world of difference when it comes to variability.
|
|
70
|
+
|
|
71
|
+
- Minimum 2 dedicated cores (4 recommended)
|
|
72
|
+
- Minimum 2GB RAM (4-8GB recommended)
|
|
73
|
+
- Avoid non-standard Chromium flags (`--single-process` is not supported, `--no-sandbox` and `--headless` should be OK, though educate yourself about [sandbox tradeoffs](https://github.com/GoogleChrome/lighthouse-ci/tree/fbb540507c031100ee13bf7eb1a4b61c79c5e1e6/docs/recipes/docker-client#--no-sandbox-issues-explained))
|
|
74
|
+
- Avoid function-as-a-service infrastructure (Lambda, GCF, etc)
|
|
75
|
+
- Avoid "burstable" or "shared-core" instance types (AWS `t` instances, GCP shared-core N1 and E2 instances, etc)
|
|
76
|
+
|
|
77
|
+
AWS's `m5.large`, GCP's `n2-standard-2`, and Azure's `D2` all should be sufficient to run a single Lighthouse run at a time (~$0.10/hour for these instance types, ~30s/test, ~$0.0008/Lighthouse report). While some environments that don't meet the requirements above will still be able to run Lighthouse and the non-performance results will still be usable, we'd advise against it and won't be able to support those environments should any bugs arise. Remember, running on inconsistent hardware will lead to inconsistent results!
|
|
78
|
+
|
|
79
|
+
**DO NOT** collect multiple Lighthouse reports at the same time on the same machine. Concurrent runs can skew performance results due to resource contention. When it comes to Lighthouse runs, scaling horizontally is better than scaling vertically (i.e. run with 4 `n2-standard-2` instead of 1 `n2-standard-8`).
|
|
80
|
+
|
|
81
|
+
### Isolate External Factors
|
|
82
|
+
|
|
83
|
+
- Isolate your page from third-party influence as much as possible. It’s never fun to be blamed for someone else's variable failures.
|
|
84
|
+
- Isolate your own code’s nondeterminism during testing. If you’ve got an animation that randomly shows up, your performance numbers might be random too!
|
|
85
|
+
- Isolate your test server from as much network volatility as possible. Use localhost or a machine on the same exact network whenever stability is a concern.
|
|
86
|
+
- Isolate your client environment from external influences like anti-virus software and browser extensions. Use a dedicated device for testing when possible.
|
|
87
|
+
|
|
88
|
+
If your machine has really limited resources or creating a clean environment has been difficult, use a hosted lab environment like PageSpeed Insights or WebPageTest to run your tests for you. In continuous integration situations, use dedicated servers when possible. Free CI environments and “burstable” instances are typically quite volatile.
|
|
89
|
+
|
|
90
|
+
### Run Lighthouse Multiple Times
|
|
91
|
+
|
|
92
|
+
When creating your thresholds for failure, either mental or programmatic, use aggregate values like the median, 90th percentile, or even min/max instead of single test results.
|
|
93
|
+
|
|
94
|
+
The median Lighthouse score of 5 runs is twice as stable as 1 run. There are multiple ways to get a Lighthouse report, but the simplest way to run Lighthouse multiple times and also get a median run is to use [lighthouse-ci](https://github.com/GoogleChrome/lighthouse-ci/).
|
|
95
|
+
|
|
96
|
+
```bash
|
|
97
|
+
npx -p @lhci/cli lhci collect --url https://example.com -n 5
|
|
98
|
+
npx -p @lhci/cli lhci upload --target filesystem --outputDir ./path/to/dump/reports
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
> Note: you must have [Node](https://nodejs.org/en/download/package-manager/) installed.
|
|
102
|
+
|
|
103
|
+
You can then process the reports that are output to the filesystem. Read the [Lighthouse CI documentation](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#outputdir) for more.
|
|
104
|
+
|
|
105
|
+
```js
|
|
106
|
+
const fs = require('fs');
|
|
107
|
+
const lhciManifest = require('./path/to/dump/reports/manifest.json');
|
|
108
|
+
const medianEntry = lhciManifest.find(entry => entry.isRepresentativeRun)
|
|
109
|
+
const medianResult = JSON.parse(fs.readFileSync(medianEntry.jsonPath, 'utf-8'));
|
|
110
|
+
console.log('Median performance score was', medianResult.categories.performance.score * 100);
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
You can also direct `lighthouse-ci` to use PageSpeedInsights:
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
npx -p @lhci/cli lhci collect --url https://example.com -n 5 --mode psi --psiApiKey xXxXxXx
|
|
117
|
+
npx -p @lhci/cli lhci upload --target filesystem --outputDir ./path/to/dump/reports
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
If you're running Lighthouse directly via node, you can use the `computeMedianRun` function to determine the median using a blend of the performance metrics.
|
|
121
|
+
|
|
122
|
+
```js
|
|
123
|
+
const spawnSync = require('child_process').spawnSync;
|
|
124
|
+
const lighthouseCli = require.resolve('lighthouse/lighthouse-cli');
|
|
125
|
+
const {computeMedianRun} = require('lighthouse/lighthouse-core/lib/median-run.js');
|
|
126
|
+
|
|
127
|
+
const results = [];
|
|
128
|
+
for (let i = 0; i < 5; i++) {
|
|
129
|
+
console.log(`Running Lighthouse attempt #${i + 1}...`);
|
|
130
|
+
const {status = -1, stdout} = spawnSync('node', [
|
|
131
|
+
lighthouseCli,
|
|
132
|
+
'https://example.com',
|
|
133
|
+
'--output=json'
|
|
134
|
+
]);
|
|
135
|
+
if (status !== 0) {
|
|
136
|
+
console.log('Lighthouse failed, skipping run...');
|
|
137
|
+
continue;
|
|
138
|
+
}
|
|
139
|
+
results.push(JSON.parse(stdout));
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
const median = computeMedianRun(results);
|
|
143
|
+
console.log('Median performance score was', median.categories.performance.score * 100);
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
## Related Documentation
|
|
147
|
+
|
|
148
|
+
- [Lighthouse Variability and Accuracy Analysis](https://docs.google.com/document/d/1BqtL-nG53rxWOI5RO0pItSRPowZVnYJ_gBEQCJ5EeUE/edit?usp=sharing)
|
|
149
|
+
- [Throttling documentation](./throttling.md)
|
|
150
|
+
- [Why is my Lighthouse score different from PageSpeed Insights?](https://www.debugbear.com/blog/why-is-my-lighthouse-score-different-from-pagespeed-insights)
|
package/jest.config.js
CHANGED
|
@@ -11,7 +11,6 @@ module.exports = {
|
|
|
11
11
|
collectCoverageFrom: [
|
|
12
12
|
'**/lighthouse-core/**/*.js',
|
|
13
13
|
'**/lighthouse-cli/**/*.js',
|
|
14
|
-
'**/report/**/*.js',
|
|
15
14
|
'**/lighthouse-viewer/**/*.js',
|
|
16
15
|
],
|
|
17
16
|
coveragePathIgnorePatterns: [
|
|
@@ -23,7 +22,6 @@ module.exports = {
|
|
|
23
22
|
testMatch: [
|
|
24
23
|
'**/lighthouse-core/**/*-test.js',
|
|
25
24
|
'**/lighthouse-cli/**/*-test.js',
|
|
26
|
-
'**/report/**/*-test.js',
|
|
27
25
|
'**/lighthouse-core/test/fraggle-rock/**/*-test-pptr.js',
|
|
28
26
|
'**/lighthouse-treemap/**/*-test.js',
|
|
29
27
|
'**/lighthouse-treemap/**/*-test-pptr.js',
|
|
@@ -34,5 +32,4 @@ module.exports = {
|
|
|
34
32
|
'**/docs/**/*.test.js',
|
|
35
33
|
],
|
|
36
34
|
transform: {},
|
|
37
|
-
prettierPath: null,
|
|
38
35
|
};
|
package/lighthouse-cli/bin.js
CHANGED
|
@@ -5,8 +5,11 @@
|
|
|
5
5
|
*/
|
|
6
6
|
'use strict';
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
const fs = require('fs');
|
|
9
|
+
const path = require('path');
|
|
10
|
+
|
|
11
|
+
/*
|
|
12
|
+
* The relationship between these CLI modules:
|
|
10
13
|
*
|
|
11
14
|
* index.js : only calls bin.js's begin()
|
|
12
15
|
* cli-flags.js : leverages yargs to read argv, outputs LH.CliFlags
|
|
@@ -18,25 +21,24 @@
|
|
|
18
21
|
* cli-flags lh-core/index
|
|
19
22
|
*/
|
|
20
23
|
|
|
21
|
-
const fs = require('fs');
|
|
22
|
-
const path = require('path');
|
|
23
24
|
const commands = require('./commands/commands.js');
|
|
24
25
|
const printer = require('./printer.js');
|
|
25
26
|
const {getFlags} = require('./cli-flags.js');
|
|
26
27
|
const {runLighthouse} = require('./run.js');
|
|
27
28
|
const {generateConfig} = require('../lighthouse-core/index.js');
|
|
29
|
+
|
|
28
30
|
const log = require('lighthouse-logger');
|
|
29
31
|
const pkg = require('../package.json');
|
|
30
32
|
const Sentry = require('../lighthouse-core/lib/sentry.js');
|
|
33
|
+
|
|
31
34
|
const updateNotifier = require('update-notifier');
|
|
32
35
|
const {askPermission} = require('./sentry-prompt.js');
|
|
33
|
-
const {LH_ROOT} = require('../root.js');
|
|
34
36
|
|
|
35
37
|
/**
|
|
36
38
|
* @return {boolean}
|
|
37
39
|
*/
|
|
38
40
|
function isDev() {
|
|
39
|
-
return fs.existsSync(path.join(
|
|
41
|
+
return fs.existsSync(path.join(__dirname, '../.git'));
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
/**
|
|
@@ -18,7 +18,7 @@ const UIStrings = {
|
|
|
18
18
|
title: '`button`, `link`, and `menuitem` elements have accessible names',
|
|
19
19
|
/** Title of an accessibility audit that evaluates if important HTML elements do not have accessible names. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
|
|
20
20
|
failureTitle: '`button`, `link`, and `menuitem` elements do not have accessible names.',
|
|
21
|
-
/** Description of a Lighthouse audit that tells the user *why* they should have accessible names for
|
|
21
|
+
/** Description of a Lighthouse audit that tells the user *why* they should have accessible names for command elements. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
|
|
22
22
|
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/).',
|
|
23
23
|
};
|
|
24
24
|
|
|
@@ -18,7 +18,7 @@ const UIStrings = {
|
|
|
18
18
|
title: 'ARIA `meter` elements have accessible names',
|
|
19
19
|
/** Title of an accessibility audit that evaluates if meter HTML elements do not have accessible names. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
|
|
20
20
|
failureTitle: 'ARIA `meter` elements do not have accessible names.',
|
|
21
|
-
/** Description of a Lighthouse audit that tells the user *why* they should have accessible names for
|
|
21
|
+
/** Description of a Lighthouse audit that tells the user *why* they should have accessible names for meter elements. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
|
|
22
22
|
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/).',
|
|
23
23
|
};
|
|
24
24
|
|
|
@@ -19,7 +19,7 @@ const UIStrings = {
|
|
|
19
19
|
/** Title of an accessibility audit that evaluates if progressbar HTML elements do not have accessible names. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
|
|
20
20
|
failureTitle: 'ARIA `progressbar` elements do not have accessible names.',
|
|
21
21
|
/** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
|
|
22
|
-
description: 'When
|
|
22
|
+
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/).',
|
|
23
23
|
};
|
|
24
24
|
|
|
25
25
|
const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
|
|
@@ -18,7 +18,7 @@ const UIStrings = {
|
|
|
18
18
|
title: 'ARIA `tooltip` elements have accessible names',
|
|
19
19
|
/** Title of an accessibility audit that evaluates if tooltip HTML elements do not have accessible names. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
|
|
20
20
|
failureTitle: 'ARIA `tooltip` elements do not have accessible names.',
|
|
21
|
-
/** Description of a Lighthouse audit that tells the user *why* they should have accessible names for
|
|
21
|
+
/** Description of a Lighthouse audit that tells the user *why* they should have accessible names for tooltips. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
|
|
22
22
|
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/).',
|
|
23
23
|
};
|
|
24
24
|
|
|
@@ -18,7 +18,7 @@ const UIStrings = {
|
|
|
18
18
|
title: 'ARIA `treeitem` elements have accessible names',
|
|
19
19
|
/** Title of an accessibility audit that evaluates if treeitem HTML elements do not have accessible names. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
|
|
20
20
|
failureTitle: 'ARIA `treeitem` elements do not have accessible names.',
|
|
21
|
-
/** Description of a Lighthouse audit that tells the user *why* they should
|
|
21
|
+
/** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
|
|
22
22
|
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/).',
|
|
23
23
|
};
|
|
24
24
|
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
const {isUnderTest} = require('../lib/lh-env.js');
|
|
9
9
|
const statistics = require('../lib/statistics.js');
|
|
10
|
-
const Util = require('
|
|
10
|
+
const Util = require('../report/html/renderer/util.js');
|
|
11
11
|
|
|
12
12
|
const DEFAULT_PASS = 'defaultPass';
|
|
13
13
|
|
|
@@ -133,7 +133,7 @@ class Audit {
|
|
|
133
133
|
|
|
134
134
|
/**
|
|
135
135
|
* @param {LH.Audit.Details.List['items']} items
|
|
136
|
-
* @
|
|
136
|
+
* @returns {LH.Audit.Details.List}
|
|
137
137
|
*/
|
|
138
138
|
static makeListDetails(items) {
|
|
139
139
|
return {
|
|
@@ -180,7 +180,7 @@ class Audit {
|
|
|
180
180
|
/**
|
|
181
181
|
* @param {string} content
|
|
182
182
|
* @param {number} maxLineLength
|
|
183
|
-
* @
|
|
183
|
+
* @returns {LH.Audit.Details.SnippetValue['lines']}
|
|
184
184
|
*/
|
|
185
185
|
static _makeSnippetLinesArray(content, maxLineLength) {
|
|
186
186
|
return content.split('\n').map((line, lineIndex) => {
|
|
@@ -63,11 +63,11 @@ const validAutocompleteTokens = ['name', 'honorific-prefix', 'given-name',
|
|
|
63
63
|
'tel-local', 'tel-local-prefix', 'tel-local-suffix', 'tel-extension', 'email', 'impp', 'off',
|
|
64
64
|
'additional-name-initial', 'home', 'work', 'mobile', 'fax', 'pager', 'shipping', 'billing'];
|
|
65
65
|
|
|
66
|
-
/** @type {string[]} This array contains all autofull suggestions that have no prediction tied to it. Autofill predictions found at https://source.chromium.org/chromium/chromium/src/+/
|
|
66
|
+
/** @type {string[]} This array contains all autofull suggestions that have no prediction tied to it. Autofill predictions found at https://source.chromium.org/chromium/chromium/src/+/master:components/autofill/core/browser/field_types.h;l=26 */
|
|
67
67
|
const noPrediction = ['NO_SERVER_DATA', 'UNKNOWN_TYPE', 'EMPTY_TYPE', 'HTML_TYPE_UNSPECIFIED',
|
|
68
68
|
'HTML_TYPE_UNRECOGNIZED'];
|
|
69
69
|
|
|
70
|
-
/** This mapping contains all autofill predictions to corresponding autocomplete attributes. Autofill predictions are found at https://source.chromium.org/chromium/chromium/src/+/
|
|
70
|
+
/** This mapping contains all autofill predictions to corresponding autocomplete attributes. Autofill predictions are found at https://source.chromium.org/chromium/chromium/src/+/master:components/autofill/core/browser/field_types.h;l=34*/
|
|
71
71
|
const predictionTypesToTokens = {
|
|
72
72
|
'NO_SERVER_DATA': str_(UIStrings.manualReview),
|
|
73
73
|
'UNKNOWN_TYPE': str_(UIStrings.manualReview),
|
|
@@ -105,8 +105,7 @@ class UnusedBytes extends Audit {
|
|
|
105
105
|
* @param {LH.Audit.Context} context
|
|
106
106
|
* @return {Promise<LH.Audit.Product>}
|
|
107
107
|
*/
|
|
108
|
-
static
|
|
109
|
-
const gatherContext = artifacts.GatherContext;
|
|
108
|
+
static audit(artifacts, context) {
|
|
110
109
|
const trace = artifacts.traces[Audit.DEFAULT_PASS];
|
|
111
110
|
const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
|
|
112
111
|
const settings = context && context.settings || {};
|
|
@@ -115,14 +114,15 @@ class UnusedBytes extends Audit {
|
|
|
115
114
|
settings,
|
|
116
115
|
};
|
|
117
116
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
117
|
+
return NetworkRecords.request(devtoolsLog, context)
|
|
118
|
+
.then(networkRecords =>
|
|
119
|
+
Promise.all([
|
|
120
|
+
this.audit_(artifacts, networkRecords, context),
|
|
121
|
+
PageDependencyGraph.request({trace, devtoolsLog}, context),
|
|
122
|
+
LoadSimulator.request(simulatorOptions, context),
|
|
123
|
+
])
|
|
124
|
+
)
|
|
125
|
+
.then(([result, graph, simulator]) => this.createAuditProduct(result, graph, simulator));
|
|
126
126
|
}
|
|
127
127
|
|
|
128
128
|
/**
|
|
@@ -186,34 +186,19 @@ class UnusedBytes extends Audit {
|
|
|
186
186
|
return Math.round(Math.max(savings, 0) / 10) * 10;
|
|
187
187
|
}
|
|
188
188
|
|
|
189
|
-
/**
|
|
190
|
-
* TODO(FR-COMPAT): Rework opportunities to remove emphasis on `wastedMs`
|
|
191
|
-
* @param {number} wastedBytes
|
|
192
|
-
* @param {Simulator} simulator
|
|
193
|
-
*/
|
|
194
|
-
static computeWastedMsWithThroughput(wastedBytes, simulator) {
|
|
195
|
-
const bitsPerSecond = simulator.getOptions().throughput;
|
|
196
|
-
const wastedBits = wastedBytes * 8;
|
|
197
|
-
const wastedMs = wastedBits / bitsPerSecond * 1000;
|
|
198
|
-
return wastedMs;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
189
|
/**
|
|
202
190
|
* @param {ByteEfficiencyProduct} result
|
|
203
191
|
* @param {Node} graph
|
|
204
192
|
* @param {Simulator} simulator
|
|
205
|
-
* @param {LH.Artifacts['GatherContext']} gatherContext
|
|
206
193
|
* @return {LH.Audit.Product}
|
|
207
194
|
*/
|
|
208
|
-
static createAuditProduct(result, graph, simulator
|
|
195
|
+
static createAuditProduct(result, graph, simulator) {
|
|
209
196
|
const results = result.items.sort((itemA, itemB) => itemB.wastedBytes - itemA.wastedBytes);
|
|
210
197
|
|
|
211
198
|
const wastedBytes = results.reduce((sum, item) => sum + item.wastedBytes, 0);
|
|
212
|
-
const wastedMs =
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
}) :
|
|
216
|
-
this.computeWastedMsWithThroughput(wastedBytes, simulator);
|
|
199
|
+
const wastedMs = this.computeWasteWithTTIGraph(results, graph, simulator, {
|
|
200
|
+
providedWastedBytesByUrl: result.wastedBytesByUrl,
|
|
201
|
+
});
|
|
217
202
|
|
|
218
203
|
let displayValue = result.displayValue || '';
|
|
219
204
|
if (typeof result.displayValue === 'undefined' && wastedBytes) {
|