Writing and maintaining performant, accessible web pages that follow best practices is no easy task. The Google Lighthouse tool makes it simpler to stay on track by automating audits in these areas. It can be run via the audit tab in chrome dev tools, a cli tool, and node. There is also a chrome extension. I can see immense potential for keeping sites well tuned, especially as part of a CI pipeline.

The most direct path to usage is via chrome dev tools. The cli & node tools enable automation making it easy to add audits to your CI process. This could, for instance, fail a build if a certain threshold is not reached.

The tool runs tests in areas of Performance, Best Practices, Accessibility, and Progressive Web Apps. Generally it seems geared towards mobile, SPAs, and sites heavy on JavaScript, but all sites can benefit from it.

Performance

First meaningful paint, first interactive, consistently interactive, perceptual speed index, and estimated input latency are measured. These contribute to the responsiveness of a site and how likely a user is to enjoy their experience without hanging about. I found the metrics here vary massively between runs against the same site – from 40% to 80% for no apparent reason. The audits, however, are useful, reminding me to enable compression and inspiring me to slim my site’s payload right down. Also, after it failed with render-blocking scripts and stylesheets, I decided to remove some old social media widgets and font-awesome which greatly sped up pages.

Accessibility

Lighthouse incorporates Deque Labs aXe core accessibility engine into their tests, making it comprehensive in this important area.

Best Practices

Providing a mixture of suggestions such as enabling https, http/2, external anchors using rel=”noopener”, and avoiding application cache, this guides you towards modern best practices.

Progressive Web Apps

There’s a fair amount of buzz around PWAs these days. The audits here are geared towards ensuring that your site is seen as a PWA by Android. When it does, the site can be added to the home screen which then promotes it to looking and feeling like an app, having its own window with no location bar. It can also be uninstalled.

Whether you agree they are the next big thing or not Google is certainly pushing them hard. An evolving set of properties make up PWAs, but generally they are lightweight, discoverable, installable, work offline, use https, and can do something without JavaScript enabled. With Microsoft announcing future Edge and Windows Store support, and Apple recently announcing that Service Workers are in development on Safari, the big players seem to be aligned to make this happen. It remains to be seen whether the Apple Store will be as lenient as the Google Play Store when it comes to admitting PWAs to their store.

There you have it, my take on the Lighthouse tool. Crack open your dev tools and get auditing!