What's new in Lighthouse 8.4
Lighthouse is an automated website auditing tool that helps developers with opportunities and diagnostics to improve the user experience of their sites. It's available in Chrome DevTools, npm (as a Node module and a CLI), or as a browser extension (in Chrome and Firefox). It powers many Google services, including web.dev/measure and PageSpeed Insights.
To try the Lighthouse Node CLI, use the following commands:
npm install -g lighthouse
lighthouse https://www.example.com --view
See the full list of changes in the 8.4 changelog.
Don't lazy-load Largest Contentful Paint images
Lazy-loading images can be an effective way to defer offscreen images so they don't interfere with loading the content that is above the fold.
However, if a page's LCP element is an image, lazy-loading it can have a significant negative effect on the LCP. The browser may put the image in the queue and fetch other resources first, instead of prioritizing the image for immediate download. A recent study of lazy-loading in WordPress found that LCP can improve by as much as 15% for some sites if images in the initial viewport are not lazy-loaded.
Lighthouse will now detect if the LCP element was a lazy-loaded image and recommend removing the
loading attribute from it.
Set a mobile viewport for a better First Input Delay
viewport audit has been a part of the Best Practices category for years, but 8.4 welcomes this advice to the Performance category as well.
Many mobile browsers support "double tap to zoom" to allow users to easily magnify content not designed for a mobile screen, that is, content without an explicit mobile
<meta name="viewport">. In practice, this means the browser needs to wait as much as 300 ms after a user tap to see if a second tap will follow, and during that time the page can't respond to the initial tap. This translates to a failing FID of several hundred milliseconds.
In a recent study of data from the HTTP Archive, over half of the sites that received a score of 90 or higher in Lighthouse, but failed at least one Core Web Vital, did not have a mobile viewport set and were failing FID. As a result, the Lighthouse performance section will now recommend adding a viewport like the following if none is found:
<meta name="viewport" content="width=device-width">
Getting in touch with the Lighthouse team
To discuss the new features, changes in the version 8.4, or anything else related to Lighthouse: