Lighthouse 9 Refreshed Reports, User Flows and Accessibility Updates
Lighthouse 9 was launched a couple weeks ago and introduced some interesting features. Foo has upgraded its Lighthouse implementation to version 9. Below we recap the release of Lighthouse 9.
Refreshed Reports
In Lighthouse 9 reports have been refreshed with a cleaner design to emphasize the final screenshot, fonts and more. Summary info at the bottom of the report have been redesigned to better communicate how Lighthouse was run and the report collected.
Although an existing feature of the report, it's important to note Lighthouse highlights important metrics at the top of the report. These metrics reflect "lab data", however some of them are shared by the Web Vitals library which differs in use as its implemented to gather "field data".
- First Contentful Paint (FCP in Web Vitals)
- Largest Contentful Paint (LCP in Web Vitals)
- Cumulative Layout Shift (CLS in Web Vitals)
- Time to Interactive
- Speed Index
- Total Blocking Time
User Flows
Lighthouse has a new user flow API that allows lab testing at any point within a page's lifespan. Puppeteer is used to script page loads and trigger synthetic user interactions, and Lighthouse can be invoked in multiple ways to capture key insights during those interactions. This means that performance can be measured during page load and during interactions with the page. Accessibility checks can be run in CI, not just on the initial view but deep within your checkout flow to make sure nothing regresses.
Other Changes
Some other notable changes in Lighthouse, specifically the programmatic implementation are as follows:
- Enforces a minimum of Node 14.
- Grabs the
relatedNodesfrom axe's CheckResults, and displays them as subitems for every axe audit (details).
Conclusion
Major releases of Lighthouse continue to offer interesting features to enhance page experience testing. Below are resources used to write this post.