We all understand that faster websites and more responsive web applications are better for users and for conversions, but it’s not clear exactly what we mean by fast. High-performance server hosting provides the foundation of a fast site, but there’s a lot more to building a great user experience.
A site may load its main content quickly, but force the user to wait 30 seconds to scroll. A web application may load quickly, but offer painfully slow interactions. Or it may load content quickly and react snappily to user interactions, but spend a minute or more rearranging content on the page as advertising loads.
Are these sites fast? By some measures, yes, but perhaps these are not the measures we should be optimizing for. Nor should we be satisfied with sites and apps that load quickly on a developer’s iMac Pro with gigabit Ethernet but poorly when users access the site on mobile devices over unreliable 3G networks.
Lighthouse is a tool developed by Google to provide a more meaningful measure of performance than other popular tools, including Google’s PageSpeed Insights, which encourages developers to chase “performance points” that don’t reliably reflect the experience of the end-user, as has been extensively covered elsewhere.
Lighthouse provides a different set of metrics that are designed to capture the experience of a real user. Among the most prominent metrics Lighthouse provides are first meaningful paint, first interactive, consistently interactive, and a perceptual speed index.
First meaningful paint doesn’t mean the same as first paint, a measure that is next to useless for real world performance measurement. First meaningful paint measures how long it takes for the first content that is meaningful to the user to appear on the screen.
First interactive measures the time taken for the site or app’s user interface to be responsive to user input. Consistently interactive is a measure of how long it takes for the page to be fully interactive.
Also useful is Lighthouse’s ability to simulate an unreliable 3G connection while testing. As I alluded to earlier, the users who visit our sites on mobile devices may not have access to the latest and greatest technology or a stable network connection. Lighthouse gives developers and designers an insight into what a feels like to its users.
Additionally, as you might expect from a tool by Google, Lighthouse carries out a basic SEO audit of the site, focused on factors that might hinder Google’s crawler from properly indexing the page. The SEO tests include checks for meta descriptions, legible font sizes, canonical links, descriptive link text, and more.
Lighthouse is available as part of Chrome’s Developer Tools and as an NPM module. The command line tool available though NPM is particularly useful for developers who would like to integrate Lighthouse into their build and test processes.