diff --git a/changelog.md b/changelog.md index 4fe5c8c828e3..5a4b97a76936 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,116 @@ + +# 7.5.0 (2021-05-18) +[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v7.4.0...v7.5.0) + +We expect this release to ship in the DevTools of [Chrome 92](https://chromiumdash.appspot.com/schedule), and to PageSpeed Insights within 2 weeks. + +## New contributors + +Thanks to our new contributor 👽🐷🐰🐯🐻! + +- Johannes Weber @johannes-weber + +## Notable Changes + +We are releasing the Lighthouse Treemap! + +![image](https://user-images.githubusercontent.com/4071474/118602146-2d08d480-b767-11eb-9273-9a8de7000e67.png) + +You may already be familiar with treemaps thanks to [webtreemap](https://github.com/evmar/webtreemap) (which we use!) or [source-map-explorer](https://github.com/danvk/source-map-explorer). With Lighthouse Treemap, you'll be able to view all the JavaScript bundles on your page easily from a Lighthouse report, in addition to some insights that may help reduce the amount of JavaScript on a page. The only requirement is that source maps are accessible (either publicly, or securely from the same computer that is running the Lighthouse audit). + +We even collect code coverage data from Chrome, and extrapolate the coverage of individual modules in a bundle: + +![image](https://user-images.githubusercontent.com/4071474/118602240-4742b280-b767-11eb-9f6a-433788029a30.png) + +Note: this only takes into account a cold-load: code only used after user interaction will be marked as unused. Stay tuned for a future release, which will enable you to configure user flows and capture even more accurate performance insights. + +If we detect a large module included by multiple bundles, we'll alert you of that too. + +You can access Lighthouse Treemap from the report: + +![image](https://user-images.githubusercontent.com/4071474/118600879-6e4cb480-b766-11eb-85f7-e8281006711b.png) + +Currently, only reports generated with the Lighthouse Node CLI will connect to the Lighthouse Treemap App. We are working on adding this functionality to Lighthouse in DevTools and PageSpeed Insights. + +## Core + +* add new CLS (all frames) to hidden metrics audit ([#12476](https://github.com/GoogleChrome/lighthouse/pull/12476)) +* script-treemap-data: default config ([#12494](https://github.com/GoogleChrome/lighthouse/pull/12494)) +* script-treemap-data: include unmapped bytes ([#12452](https://github.com/GoogleChrome/lighthouse/pull/12452)) +* driver: extract gotoURL to navigation module ([#12421](https://github.com/GoogleChrome/lighthouse/pull/12421)) +* responsive-images: ignore images larger than viewport ([#12414](https://github.com/GoogleChrome/lighthouse/pull/12414)) +* robots: use new fetcher to get robots.txt ([#12423](https://github.com/GoogleChrome/lighthouse/pull/12423)) + +## Fraggle Rock + +Support for auditing user flows ([#11313](https://github.com/GoogleChrome/lighthouse/issues/11313)) + +* computed-artifact: remove settings and options from context ([#12435](https://github.com/GoogleChrome/lighthouse/pull/12435)) +* convert optimized-images gatherer ([#12491](https://github.com/GoogleChrome/lighthouse/pull/12491)) +* convert image-elements gatherer ([#12474](https://github.com/GoogleChrome/lighthouse/pull/12474)) +* convert source-maps gatherer ([#12467](https://github.com/GoogleChrome/lighthouse/pull/12467)) +* convert js-usage gatherer ([#12450](https://github.com/GoogleChrome/lighthouse/pull/12450)) +* convert main-document-content gatherer ([#12470](https://github.com/GoogleChrome/lighthouse/pull/12470)) +* convert css-usage gatherer ([#12460](https://github.com/GoogleChrome/lighthouse/pull/12460)) +* convert trace-elements gatherer ([#12442](https://github.com/GoogleChrome/lighthouse/pull/12442)) +* extract warnings from gather-runner ([#12469](https://github.com/GoogleChrome/lighthouse/pull/12469)) +* extract driver preparation methods ([#12445](https://github.com/GoogleChrome/lighthouse/pull/12445)) +* extract navigation errors from gather-runner ([#12461](https://github.com/GoogleChrome/lighthouse/pull/12461)) +* split out DOM utilities from legacy driver ([#12431](https://github.com/GoogleChrome/lighthouse/pull/12431)) +* separate phase from gatherMode ([#12370](https://github.com/GoogleChrome/lighthouse/pull/12370)) +* add fetcher to transitional driver ([#12419](https://github.com/GoogleChrome/lighthouse/pull/12419)) +* add computed cache to pass context ([#12427](https://github.com/GoogleChrome/lighthouse/pull/12427)) + +## Report + +* map metrics to audits, add metric filter ([#11732](https://github.com/GoogleChrome/lighthouse/pull/11732), [#12477](https://github.com/GoogleChrome/lighthouse/pull/12477)) +* add treemap button, refactor icon styles ([#12392](https://github.com/GoogleChrome/lighthouse/pull/12392)) + +## Deps + +* snyk: update snyk snapshot ([#12443](https://github.com/GoogleChrome/lighthouse/pull/12443), [#12468](https://github.com/GoogleChrome/lighthouse/pull/12468)) +* update transitive dependencies ([#12466](https://github.com/GoogleChrome/lighthouse/pull/12466)) +* update marky to latest ([#12440](https://github.com/GoogleChrome/lighthouse/pull/12440)) + +## I18n + +* import new strings ([#12492](https://github.com/GoogleChrome/lighthouse/pull/12492)) + +## Docs + +* remove AMP Plugin example ([#12390](https://github.com/GoogleChrome/lighthouse/pull/12390)) +* add python requests install to webtests ([#12436](https://github.com/GoogleChrome/lighthouse/pull/12436)) + +## Tests + +* update chromium installable source path ([#12364](https://github.com/GoogleChrome/lighthouse/pull/12364)) +* i18n: only accept IcuMessages in toBeDisplayString ([#12487](https://github.com/GoogleChrome/lighthouse/pull/12487)) +* add smokehouse to bin for downstream use ([#12446](https://github.com/GoogleChrome/lighthouse/pull/12446)) +* split CI into unit and smoke workflows ([#12422](https://github.com/GoogleChrome/lighthouse/pull/12422)) +* smoke: verify CSP violations caused by lighthouse ([#12391](https://github.com/GoogleChrome/lighthouse/pull/12391)) +* add organic TTI savings case to byte efficieny audit ([#12418](https://github.com/GoogleChrome/lighthouse/pull/12418)) + +## Misc + +* treemap: esc to zoom out ([#12498](https://github.com/GoogleChrome/lighthouse/pull/12498)) +* treemap: remove too similar color hues ([#12497](https://github.com/GoogleChrome/lighthouse/pull/12497)) +* treemap: shade background for unused bytes ([#12486](https://github.com/GoogleChrome/lighthouse/pull/12486)) +* treemap: update colors on enter keypress ([#12496](https://github.com/GoogleChrome/lighthouse/pull/12496)) +* treemap: set focus-visible styles for view mode buttons ([#12495](https://github.com/GoogleChrome/lighthouse/pull/12495)) +* treemap: tweak styles for mobile ([#12493](https://github.com/GoogleChrome/lighthouse/pull/12493)) +* treemap: highlight treemap node on mouse hover table row ([#12483](https://github.com/GoogleChrome/lighthouse/pull/12483)) +* treemap: upgrade to 3.2.0 for keyboard navigation ([#12488](https://github.com/GoogleChrome/lighthouse/pull/12488)) +* treemap: use 0.1 for default granularity ([#12485](https://github.com/GoogleChrome/lighthouse/pull/12485)) +* treemap: remove byte size from title ([#12484](https://github.com/GoogleChrome/lighthouse/pull/12484)) +* treemap: add GA snippet for new property ([#12481](https://github.com/GoogleChrome/lighthouse/pull/12481)) +* treemap: i18n ([#12441](https://github.com/GoogleChrome/lighthouse/pull/12441)) +* treemap: fix colors ([#12462](https://github.com/GoogleChrome/lighthouse/pull/12462)) +* treemap: duplicate-modules view mode ([#12424](https://github.com/GoogleChrome/lighthouse/pull/12424)) +* treemap: add data table ([#12363](https://github.com/GoogleChrome/lighthouse/pull/12363)) +* cli: destructure args in import ([#12398](https://github.com/GoogleChrome/lighthouse/pull/12398)) +* move predictive-perf off renderer i18n ([#12482](https://github.com/GoogleChrome/lighthouse/pull/12482)) +* do not publish lighthouse-cli/test except smokehouse ([#12415](https://github.com/GoogleChrome/lighthouse/pull/12415)) + # 7.4.0 (2021-04-27) [Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v7.3.0...v7.4.0) diff --git a/docs/plugins.md b/docs/plugins.md index c6f4634af364..5e0df985cd71 100644 --- a/docs/plugins.md +++ b/docs/plugins.md @@ -60,10 +60,10 @@ A Lighthouse plugin is just a node module with a name that starts with `lighthou "name": "lighthouse-plugin-cats", "main": "plugin.js", "peerDependencies": { - "lighthouse": "^7.4.0" + "lighthouse": "^7.5.0" }, "devDependencies": { - "lighthouse": "^7.4.0" + "lighthouse": "^7.5.0" } } ``` diff --git a/docs/recipes/custom-audit/package.json b/docs/recipes/custom-audit/package.json index b5aefecd213a..ec666077ef7d 100644 --- a/docs/recipes/custom-audit/package.json +++ b/docs/recipes/custom-audit/package.json @@ -3,6 +3,6 @@ "private": true, "scripts": {}, "devDependencies": { - "lighthouse": "^7.4.0" + "lighthouse": "^7.5.0" } } diff --git a/docs/recipes/gulp/package.json b/docs/recipes/gulp/package.json index 0300b22daec9..744a52081744 100644 --- a/docs/recipes/gulp/package.json +++ b/docs/recipes/gulp/package.json @@ -7,6 +7,6 @@ "devDependencies": { "gulp": "^3.9.1", "gulp-connect": "^5.0.0", - "lighthouse": "^7.4.0" + "lighthouse": "^7.5.0" } } diff --git a/docs/recipes/lighthouse-plugin-example/package.json b/docs/recipes/lighthouse-plugin-example/package.json index f3ad73cb267b..fdd17044c859 100644 --- a/docs/recipes/lighthouse-plugin-example/package.json +++ b/docs/recipes/lighthouse-plugin-example/package.json @@ -3,9 +3,9 @@ "private": true, "main": "./plugin.js", "peerDependencies": { - "lighthouse": "^7.4.0" + "lighthouse": "^7.5.0" }, "devDependencies": { - "lighthouse": "^7.4.0" + "lighthouse": "^7.5.0" } } diff --git a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap index 7847f74e50fb..5bb76889322a 100644 --- a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap +++ b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap @@ -1161,6 +1161,10 @@ Object { "id": "final-screenshot", "weight": 0, }, + Object { + "id": "script-treemap-data", + "weight": 0, + }, ], "title": "Performance", }, diff --git a/lighthouse-core/config/default-config.js b/lighthouse-core/config/default-config.js index 271b67855487..48f6dfea0ab5 100644 --- a/lighthouse-core/config/default-config.js +++ b/lighthouse-core/config/default-config.js @@ -483,6 +483,7 @@ const defaultConfig = { {id: 'metrics', weight: 0}, {id: 'screenshot-thumbnails', weight: 0}, {id: 'final-screenshot', weight: 0}, + {id: 'script-treemap-data', weight: 0}, ], }, 'accessibility': { diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 3f59431148ea..e7423b85a1ef 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -153,7 +153,8 @@ class ReportUIFeatures { const showTreemapApp = this.json.audits['script-treemap-data'] && this.json.audits['script-treemap-data'].details; - if (showTreemapApp) { + // TODO: need window.opener to work in DevTools. + if (showTreemapApp && !this._dom.isDevTools()) { this.addButton({ text: Util.i18n.strings.viewTreemapLabel, icon: 'treemap', diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index b2003db5e94a..b282e27887eb 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -8,7 +8,7 @@ "axe-core": "4.1.3" } }, - "lighthouseVersion": "7.4.0", + "lighthouseVersion": "7.5.0", "fetchTime": "2018-03-13T00:55:45.840Z", "requestedUrl": "http://localhost:10200/dobetterweb/dbw_tester.html", "finalUrl": "http://localhost:10200/dobetterweb/dbw_tester.html", @@ -5236,6 +5236,10 @@ { "id": "final-screenshot", "weight": 0 + }, + { + "id": "script-treemap-data", + "weight": 0 } ], "id": "performance", diff --git a/package.json b/package.json index 261b2146fe45..496e738dbdee 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lighthouse", - "version": "7.4.0", + "version": "7.5.0", "description": "Automated auditing, performance metrics, and best practices for the web.", "main": "./lighthouse-core/index.js", "bin": { diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run-expected.txt b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run-expected.txt index e84fbe78d217..d6df06a4d926 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run-expected.txt +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run-expected.txt @@ -14,7 +14,7 @@ Generate report: enabled visible =============== Lighthouse Results =============== URL: http://127.0.0.1:8000/devtools/lighthouse/resources/lighthouse-emulate-pass.html -Version: 7.4.0 +Version: 7.5.0 formFactor: mobile screenEmulation: { "mobile": true, diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-export-run-expected.txt b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-export-run-expected.txt index f5c201d8c7e4..479953621aab 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-export-run-expected.txt +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-export-run-expected.txt @@ -8,5 +8,5 @@ Tests that exporting works. ++++++++ testExportJson -# of audits (json): 154 +# of audits (json): 155 diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-successful-run-expected.txt b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-successful-run-expected.txt index 3386d1ed4bf2..f454b72360bf 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-successful-run-expected.txt +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-successful-run-expected.txt @@ -245,6 +245,9 @@ Auditing: Preload Largest Contentful Paint image Computing artifact: LanternLargestContentfulPaint Computing artifact: LanternFirstContentfulPaint Auditing: Full-page screenshot +Auditing: Script Treemap Data +Computing artifact: JSBundles +Computing artifact: ModuleDuplication Auditing: Site works cross-browser Auditing: Page transitions don't feel like they block on the network Auditing: Each page has a URL @@ -382,7 +385,7 @@ Generating results... =============== Lighthouse Results =============== URL: http://127.0.0.1:8000/devtools/lighthouse/resources/lighthouse-basic.html -Version: 7.4.0 +Version: 7.5.0 ViewportDimensions: { "innerWidth": 980, "innerHeight": 1743, @@ -527,6 +530,7 @@ resource-summary: informative robots-txt: notApplicable screenshot-thumbnails: flaky script-injected-tags: notApplicable +script-treemap-data: informative serial-header-bidding: notApplicable server-response-time: pass service-worker: fail diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-view-trace-run-expected.txt b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-view-trace-run-expected.txt index 24ac286cbb3b..bda1da10b8a9 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-view-trace-run-expected.txt +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-view-trace-run-expected.txt @@ -49,6 +49,7 @@ redirects render-blocking-resources resource-summary screenshot-thumbnails +script-treemap-data server-response-time speed-index third-party-facades