Googles Lighthouse tool
and how to use it

Tutorial by Stuart B

10th November 2021

What is Lighthouse?

google page speed logo

Google offers many free tools for the web designer / developer, but one of the best free tools it offers is Lighthouse. You can run lighthouse as a Chrome extension and you would call it up by pressing Ctrl + Shift + I. Lighthouse then scans a web page of your choosing and gives feedback on it in the form of 4 sections.

Performance, Best Practices, Accessibility and SEO.

The scoring looks like this:

  • 0-49 (RED) Poor.
  • 50-89 (ORANGE) Needs improvement.
  • 90-100 )GREEN) Good.

The tool also gives you the choice to run a test in one of two ways, as Desktop or as Mobile. The Desktop test checks your page on how it will appear on desktop computers / laptops, while the mobile test checks how the page performs on mobile and tablet devices.

This report should give you feedback on any issues it finds with said page, which gives you the opportunity to correct any mistakes or recommendations. This can improve your Google search ranking, or so it says on the tin.

Is Lighthouse and Google page speed the same?

There is a difference between the two. If you have ever used the Goggle page speed tool, you will see that it scans the page you have entered but only gives you the result on its performance. Lighthouse will cover performance as well as the other checks listed earlier on. Page speed relies on both real world and lab analysis to produce its score, while Lighthouse uses only Lab analysis.

Lighthouse will give you a detailed report of what is wrong, or what is slowing down your page, giving you the opportunity to go off and fix it.

Don't get caught up in the scoring.

Many people end up spending way too much time trying to get a perfect 100 score. In actuality, it is very difficult to achieve this as the page test could throw up a different score each time you run it. For example, your performance could fluctuate between 90 and 92. This could be that the server hosting your page, for whatever reason, was slower on one of the test results and had nothing to do with your page at all.

The most common problems that it finds are:

  • Large CSS files
  • Large Javascript files
  • Large images
  • No alt tags
  • Headings
  • Accessibility issues like aria and title tags.

So, yes, use Lighthouse to fix problems with your web pages but use it as a suggestive tool rather than a be all and end all tool.

Resources

Google Lighthouse documentation