Lighthouse for the Full-Stack Developer

Introduction

There is an amazing tool for measuring your website’s performance that many developers have never used and might not even know is already installed on their machine. Lighthouse is a tool that is shipped with Google Chrome that measures performance, SEO, and accessibility. Not only does it offer some great insights and suggestions for boosting performance and improving your site, but Google also uses the lighthouse score to rank your page in search results.

Getting Started

Navigate to your site in an incognito window to avoid cached resources. Inside the dev tools of Google Chrome (Option+⌘+J (on macOS), or Shift+CTRL+J (on Windows/Linux)) there is a tab on the far right for Lighthouse. You can generate a report with the selected sections on either a desktop or mobile version of the site from there.

After the report is generated there will be an overall score for performance, accessibility, best practices, SEO, and Progressive Web App. Each of these sections will offer suggestions and the possible impact of implementing these suggestions.

Making Progress

Before you run headlong into solving the myriad problems that might be holding back your site from a perfect 100 you’ll want to set up some monitoring of the score so you can see if your changes helped or hurt. Having a consistent testing and monitoring machine can help you be a lot more methodical in your approach. In order to do that you can either tie in lighthouse to your CI or set up a scheduled job using the command line interface for Lighthouse.

Another thing to keep in mind is that I’ve found that you get different recommendations if you generate the report from the browser or from the command-line tool. You can use a mixture of both to get more suggestions for improving your scores.

Knowing your score

Now that you have a good monitor of your lighthouse scores you can start tackling what is affecting it the most by looking at the Lighthouse scorecalc. This resource will let you know which metric is the most important to focus on first for the best ROI. The suggestions under each section give good ideas on what might improve the score.

Other Gotchas

There are a few things that might cause some headaches though. First off just because you implement a suggestion doesn’t mean you will see the score improve. The estimates of speed improvement next to the suggestions are just that: estimates. Oftentimes the suggestions are worthwhile for their own sake, but experimentation will be necessary to find the thing that will make your site fly. For example, if there are loads of suggestions about images you might check to see if it’s worth doing all the work by just removing all images and checking the score as a baseline of how much you could possibly improve it.

Another thing that our team found is that a perfect score for accessibility doesn’t necessarily mean your site is accessible. It means on load your HTML is laid out in a way that might make it accessible. It doesn’t measure how well your site handles keyboard navigation or interactive events like menus and popups for screen readers. More care will still have to go into making your site accessible even after you have your 100.

Finally adding a PWA might not be important if you have a corporate site, but if you’re trying to do repeat business for eCommerce or you want your site to be a regular destination on mobile that can be great. Thankfully oftentimes if you are using a JS framework it is super simple to add a library that will plugin and instantly improve your score and make your site easier to use.

Other Resources:

https://developers.google.com/web/tools/lighthouse

https://blog.checklyhq.com/how-we-got-a-100-lighthouse-performance-score-for-our-vue-js-app/

https://www.liquidlight.co.uk/blog/why-you-should-improve-your-google-lighthouse-score/

https://web.dev/progressive-web-apps/