Native to Google Chrome, Lighthouse is a tool that provides feedback on your site’s speed, accessibility and SEO best practices. We’ve talked about Lighthouse before and if you haven’t tried it, check it out. It’s one of the easiest ways to get feedback on how your site performs as well as outline and prioritize opportunities for improvement. However, if you’re using Lighthouse after your site is already built, there’s a good chance you already have issues. Instead of working backward, consider incorporating Lighthouse into your development workflow as you start your build.
Thanks to advancements in headless browsers and automation, you can get Lighthouse feedback as you build your site by adding it to your front-end tooling as an NPM package or even integrating it into your continuous integration processes. This provides an abundance of opportunities to get performance feedback as you build the site instead of afterward, when bigger changes are more difficult to adopt.
The NPM package is very flexible and usually enough for smaller teams and projects. It allows developers to get feedback about changes wherever they need it and can be configured to use specific URLs, network settings, devices and more. The results can be viewed visually or integrated into tests, so you can take action when specific metrics fall below a desired level.
Larger projects with distributed teams might benefit from integrating Lighthouse into their continuous integration processes. It can be integrated into github or bitbucket through actions or pipelines so that every pull request or deployment can be evaluated and checked on Lighthouse metrics. This could be useful as a way to enforce standards when working with a wider pool of teams or developers. A full-blown Lighthouse CI server can also be set up to observe Lighthouse changes over time or between builds.
If that all sounds over the top, or the idea of one more build tool is nauseating, you could always just remember to check your site as you go. But if you’re like me, you’ll forget. Keeping Lighthouse in your front-end toolkit is a great way to remember to test early and often, and a basic setup is fairly easy to reuse between builds.