What is Google Lighthouse and how to use it?

Summary: Lighthouse is a popular tool for determining a website's load time and other relevant web metrics. It's possible that this is due to the fact that Google is the most popular search engine in the world. But what exactly is Lighthouse? What's the secret to making it work for you? Here, we'll explain how it works and what you can do with the information it provides you.

What is Google Lighthouse and how to use it?

Table of Contents

What is Google Lighthouse?

Lighthouse is a free web testing tool that evaluates the performance and quality of a website, and it then offers recommendations for how the website's quality might be improved.

You can use the tool in a few different ways:

Once you give the automated tool a URL, it will run multiple page audits and make a report with information about how well the page works. You can then use the results to find ways to make your website better.

Not only developers can use Lighthouse. Anyone who owns a website and wants to learn more about how well it works and what they can do to improve it can use this tool.

What does Google Lighthouse measure?

Lighthouse audits a webpage and reports on five categories:

  1. Performance
  2. Accessibility
  3. SEO
  4. Best practices
  5. Progressive Web App (PWA)

It gives sites a 1 to 100 score and simulates 3G connections. Google frequently adjusts its ranking criteria, so scores may change. A good reason to keep up to date with Lighthouse updates.

How to use Google Lighthouse?

As mentioned before there are multiple ways to use Google’s Lighthouse. We’ll talk about the 2 easiest ways.

Chrome DevTools

  1. As the name might suggest you will need Google Chrome.
  2. Navigate to the page you want to audit.
  3. Right-click on the page and select inspect.
  4. Search for Lighthouse in the toolbar (you might have to click on the two arrows at the end of the toolbar)
  5. Select which modus, device, and categories you want to audit.

Chrome Extension

  1. Add this Chrome extension to your browser.
  2. Restart your browser.
  3. Navigate to the page you want to audit.
  4. Click on the lighthouse symbol or the drop-down of your extensions
  5. Generate report

Let's break down the Google Lighthouse report

As mentioned before a Lighthouse report provides you with five different categories. The most important one for us is performance, however, we will talk about the other four as well.

1. Performance

Lighthouse checks how quickly a page or web app loads and how long it takes for a user to be able to see and use its content.
Lighthouse can figure out how well a website is doing by using six web metrics:

First Contentful Paint (FCP)

As soon as the first piece of content from the DOM is rendered by the browser, the user receives their first indication that the page is truly loading.

Time to Interactive (TTI)

Time to Interactive measures how long a website takes to become interactive and respond to user input.

Speed Index (SI)

Speed index measures how quickly webpage content loads and is visible. It evaluates how quickly user content is shown during page load.

Total Blocking Time (TBT)

Total Blocking Time counts the time between First Contentful Paint (FCP) and Time to Interactive (TTI) when the main thread was blocked long enough to prevent input responsiveness.

Largest Contentful Paint (LCP)

The Largest Contentful Paint metric measures how fast a website's main content loads. LCP measures the time from when the user loads the page until the largest picture or text block is rendered within the viewport.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift measures how often web elements shift around unexpectedly while a page is being rendered. This measurement is then turned into a score that adds up all of the layout shifts on your page.

Opportunities

This section offers tips on how to increase your website's performance by improving the 6 metrics.

Lighthouse helps you find improvements your website might need and gives suggestions on how you could achieve this.

Every website is different, and for that reason comes with different opportunities. We listed some of them below:

  • Reduce unused JavaScript
  • Eliminate render-blocking resources
  • Remove unused CSS
  • Properly size images
  • Defer offscreen images
  • Reduce initial server response time
  • Avoid serving legacy JavaScript to modern browsers
  • Use HTTP/2
  • Minify CSS / Minify JavaScript

Diagnostics

This section explains how a page responds to web development best practices.

This section identifies recommended practices you haven't adopted on your website and suggests changes.

Like the opportunities, diagnostics also provides you with a list that is useful for the audited page:

  • Avoid enormous network payloads
  • Avoid an excessive DOM size
  • Minimize main thread work
  • Reduce JavaScript execution time
  • Serve static assets with an efficient cache policy

Passed audits

The more you’ve passed, the better. The passed audits show you what audits the web page has passed. For example, serve images in next-gen format.

2. Accessibility

This category measures how easy it is for users to get to a page's content and move around it. Accessibility is a very important factor of a website since we want the web to be accessible to every single person. People with disabilities that use assistive technology to order something online can only do this on a website that passes (most of this) audit.

The accessibility audit is the most extensive one and there is no in-between. It either passes or fails 1 of the almost 50 points it audits. Like the performance audit it also gives you a list of passed ones.

Google provides you with a list of criteria you want to check for passing the accessibility audit.

These checks highlight opportunities to improve the accessibility of your web app. Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.

- Google Web Dev

3. Best Practices

This Lighthouse report category tells Google if web developers are following Google's standards. This element ensures web developers to use secure web development best practices.

These checks show you where your web app's code could be healthier in general.

  • Page lacks the HTML doctype, thus triggering quirks mode
  • Browser errors were logged to the console
  • Displays images with incorrect aspect ratio
  • Does not use HTTPS

The best practices audit also provides you with some pagespeed tips, just what we like.

4. Search Engine Optimization (SEO)

The Lighthouse SEO audit basically checks if search engines can understand the content on your webpage and what you could do to optimize it.

Lighthouse checks to see if the page can be crawled and indexed by search engines. It also checks to see if the page is mobile-friendly since a lot of Google searches are done on mobile devices. A list of some points in audits:

5. Progressive Web App

This category checks if a web app can be used with different browsers. This means that your web app should work on all browsers. Like the other 4 audits Google provides you with a checklist, which gives you a view of how your web app is performing.

RUMvision vs. Lighthouse

If you start measuring your website, you'll soon end up at Google's Lighthouse. The lab data that Lighthouse uses are made up (fixed environment). But you'll need a bit more than that to find out how people really use your site. Here is where the RUM data comes in.

In our opinion, Google Lighthouse is a very powerful tool if you want a quick check on how your website is performing, and get some quick easy wins. But if you want to improve your website from a user experience point of view you will need some real user data, as they're the ones that convert.

Read our RUMvision vs. Lighthouse article

Share blog post