Google Lighthouse: How to Use It to Audit Your Website

Google Lighthouse is a free tool we can—and should—use to audit our website and check its performance (that is, its speed). It also lets us look under the hood and inspect its accessibility, SEO performance, and whether it follows so-called “best” practices (website security, proper use of resources, etc.).

In this guide, we’ll look at how to make Google Lighthouse work for us, explaining what it does and how to understand the scores in its report. Let’s get started.

What is Google Lighthouse?

In a way, it’s like putting on Google’s glasses—without Google charging us a cent. When we generate a Lighthouse report, we can evaluate our website’s page experience and get access to very valuable advice if we want to improve its performance.

Over the past few years, Google has placed increasing emphasis on the experience of every web page, including the addition of a new set of Core Web Vitals signals called INP. Lighthouse data dissects how a user experiences browsing our site, giving us a clear overview of its speed, bottlenecks, and everything that can be improved.

How do I use Google Lighthouse?

→ NOTE: Later, we’ll explain how to install it in Firefox and how to use it with Google Insights.

Google Lighthouse is built into the Chrome browser. The most direct way to use it is through the *DevTools* (developer tools) included in the browser. To use it, we’ll click anywhere on a website and select INSPECT from the pop-up menu.

The screen will split in two to show the *DevTools* mentioned earlier. We’ll look for the LIGHTHOUSE option at the end of the tools list (if it isn’t visible, click the double-arrow icon at the end of the list to display tools hidden due to limited space).

Once selected, a message will immediately appear saying that Lighthouse results are expected, followed by a view similar to the screenshot below:

Understanding the Google Lighthouse report

As we can see at the very beginning of the report, it shows us 4 score circles: Performance, Accessibility, Best Practices, and SEO.

Let’s start at the beginning: performance.

Performance

Performance is simply how fast our site loads. In other words, it’s how long our content takes to load so visitors can see and interact with it.

These metrics are demanding (as demanding as Google itself, in fact). Don’t be surprised if orange or red circles appear. Actually, it would be surprising if everything were green (unless the site has been optimized for SEO or we have highly efficient Themes and Components and a hosting server to match).

Now, let’s look at what the data in the highlighted rectangle in the screenshot above means:

*First Contentful Paint* (FCP): Measures when the first text or image becomes visible to users.
*Largest Contentful Paint* (LCP): Calculates how long a page takes to load its largest element (such as a photo or carousel).
*Total Blocking Time* (TBT): Measures how long a page does not allow any user interaction (for example, a mouse click).
*Cumulative Layout Shift* (CLS): Measures layout changes as content loads (this causes blocks to rearrange, which is common when pages load but prevents users from starting to read or interact properly, so this interval should be kept to a minimum).
*Speed Index* (SI): Shows how quickly the content on our page loads.

The final score is a weighted average of the metric scores, ranging from 0 to 100. If it is 90 or higher, the circle will be green, indicating a very good loading experience. Below 90, Google Lighthouse warns us that there are many things to improve—that is, bottlenecks and slowdowns.

The good news is that it doesn’t just give us a score: it provides all the specific suggestions we need to improve our site’s loading speed.

It’s true that many factors depend on how our site is programmed. If we have a WordPress site, the Theme we use and the plugins we install have a significant impact. The caching plugin we use is also key. If improving our score is beyond our expertise, but we’re committed to increasing traffic and optimizing content navigation for everyone, we should find a company with the expertise to take care of it (yes, like Duplika).

Accessibility

Accessibility refers to how easily people with disabilities can access and use our content. It evaluates critical aspects such as the clarity of buttons and links (for example, their contrast), ensuring that they are easy to recognize and use, without distracting elements.

It also analyzes images to see whether a description is specified in the “alternative text” (the ALT attribute in the image’s HTML). This helps users with limited vision or blindness understand what an image is about when they use screen readers.

We also get a score from 0 to 100, with 90 to 100 being optimal.

Once again, Lighthouse will tell us everything that can be improved.

Best Practices

The “best practices” audit compares how our content is programmed with a modern ideal for web development.

As we mentioned, ideally, the following principles should apply:

• Resources are loaded from secure servers with SSL certificates, that is, over HTTPS.

• All images have the correct aspect ratio and resolution (in other words, they aren’t stretched horizontally or vertically, and they aren’t larger in pixels than they appear on screen).

• All JavaScript libraries are secure, up to date, and free of known vulnerabilities.

• The page has an HTML doctype.

• The content security policy (CSP) is effective against cross-site scripting attacks (known as XSS).

• The page has no navigation errors.

• The page contains no outdated frameworks or APIs.

• The page has valid map sources (the proper implementation and use of icon fonts and other vector graphics).

• The page has no visible issues in Chrome DevTools (such as failed network requests, insufficient security measures, and other browser issues).

• The page’s character encoding is set using the meta charset tag.

• The page allows users to paste a password into password fields.

• The page provides a good user experience by blocking location and notification permission requests when it loads.

SEO

The SEO evaluation in Lighthouse refers to an audit focused on the practices we use to improve our website’s visibility and ranking in search results. This assessment breaks down aspects such as:

• Whether our website displays well on mobile phones and tablets—which is essential nowadays.

• The page has valid structured data.

• Internal links can be crawled.

• The page has a valid hreflang attribute.

• The title and meta-description tags are filled in.

• The page can be indexed (it isn’t blocked by WordPress or Robots.txt).

• The Robots.txt file is valid.

• The page returns an HTTP 200 status code (meaning it’s OK).

• The page has a valid rel=canonical tag.

• The page content is independent of plugins.

• Links on a page contain descriptive text.

• Images on a page have specified alt text.

• The page has a meta-viewport tag with a defined width or initial scale.

Once again, we get a score ranging from 0 to 100, along with everything we should improve if we really want to get better scores (that is, more traffic to our website).

How can I use Google Lighthouse with Firefox?

If we use the Mozilla Firefox browser, we can download Google’s official add-on in seconds from the Add-ons and Themes section:

After going to the add-ons section, we need to search for it in the field for finding new add-ons.

The one shown in the screenshot below is the official add-on, developed by Google. We’ll click it to view its details and install it.

One more click on the blue button to install it.

Once installed, we can access the official Google Lighthouse extension in Firefox through the extensions icon, as shown in the following screenshot:

Next, we’ll generate the report by clicking the blue button.

After a loading screen while the data is sent and received, a new tab will open in our browser, and we’ll be able to view the report as described above.

Generate Lighthouse reports via PageSpeed Insights

To audit our website externally with Lighthouse, we can go to PageSpeed Insights and enter the corresponding URL there:

After a few seconds of auditing, we’ll see the screen with the scores mentioned above.

Conclusion

Running local performance tests with Google Lighthouse is a great way to identify opportunities to improve our site’s load times, interactivity, accessibility, and SEO.

It lets us see how Google sees us, too. And we know this search engine has a strong “fetish” for website speed. To top it off, Lighthouse is free, and if our page isn’t loading within a reasonable time or we notice latency, it’s the tool to turn to. At the very least, it’s the tip of the iceberg of all the improvements its report will suggest (which we’ll need to work on with time and patience).

If you’d like to see how these measurements compare on a real website, the Radio Estación case study on FastWeb shows Lighthouse results before and after the redesign and optimization.

Thank you for reading, and we wish you success with your ventures. Until next time.