What is Google Lighthouse and How Can it Improve Website UX?

If you’ve ever built, managed, or tried to SEO-optimize a website, you’ll know that the way your users can load and interact with your site is crucial to overall performance. Fast, well-structured, and accessible websites drive more traffic and convert more visitors. But how can you know how well your site stacks up across these factors? That’s where Google Lighthouse comes in.

I’ve worked on all different kinds of websites over my years as an SEO consultant. One tool that remains permanently attached to my SEO belt is Google Lighthouse.

Whether you’re a beginner when it comes to websites or an experienced developer, Lighthouse provides the insight and guidance you need to make sure your pages are loading and behaving as they should.

Table of Contents

What is Google Lighthouse?

Google Lighthouse, or simply Lighthouse, is a free tool that assesses the overall quality and user experience of web pages.

Lighthouse can be used on any publicly available page on any website or web application. The tool provides quality scores across five categories:

• Performance
• Accessibility
• Best Practices
• SEO
• Qualification as a Progressive Web Application

These categories cover the core web vitals that Google tracks to measure usability on web pages. Since usability can impact your organic search rankings, conversion rates, and overall user experience, optimizing these metrics is essential. Lighthouse provides recommendations under each scoring category to help you make improvements.

My favorite thing about Lighthouse is how easy it is to use. Google also provides a ton of documentation on how to understand the report that Lighthouse generates for your page. So, even if it’s your first time, you’ll have plenty of guidance.

The most straightforward way to use Lighthouse is through the Google Chrome extension, although there are other ways you can use it (more on this later). The extension is my go-to, and it provides all the information you’ll need. I use Google Lighthouse primarily to assess client websites to understand how accessible, indexable, and well-built it is for both search engines and visitors.

There are a lot of other website assessment tools out there—and I use them frequently—but none provide as in-depth and simple a report on site performance as Lighthouse for the average user. That being said, the open-source tool can easily be utilized by other web apps, including HubSpot’s very own Website Grader.

How to Use Google Lighthouse

Before we get into the details of interpreting Google Lighthouse results, let’s take a look at how to access it. Out of both the available options, I prefer the Chrome extension as I use it frequently.

If you’d prefer not to add the extension to your Chrome browser, you can use the Chrome DevTools option. You’ll still need to use Google Chrome browser, but it means generating a report without downloading extensions.

How to Use the Google Lighthouse Extension in Chrome

1. Install Google Lighthouse from the Chrome Web Store.
2. Navigate to whichever web page you would like to assess on Google Chrome.
3. Open the extensions menu in the top right corner of your browser (indicated by the puzzle piece icon). In this menu, choose Lighthouse, then click Generate Report.
4. Click the cog icon to open the settings menu. It’s here where you can toggle your report output as needed.
5. The extension will open a new browser tab and, after several seconds, display a report of your Lighthouse assessment.

How to Use Google Lighthouse in Chrome DevTools

The fastest way to check a page with Lighthouse is to use DevTools, Chrome’s built-in developer panel. To use Lighthouse through DevTools, follow these steps:

1. Open the web page you want to assess.
2. Next, open the DevTools panel by right-clicking the page and choosing Inspect. You can also open DevTools by selecting View > Developer > Developer Tools, or by pressing Command+Option+C on Mac or Control+Shift+C on Windows.
3. In the DevTools panel, select Lighthouse from the top tab menu. Then, click Generate Report.

By default, Lighthouse will assess all five categories simulated on a mobile device. You can toggle these settings in the Lighthouse tab before generating your report.

What metrics does Google Lighthouse provide?

After generating a report, you’ll see a set of metrics that look something like this:

Lighthouse uses a traffic light system to indicate how concerned you should be about a particular score. The scores for each category sit from 1 to 100 and are flagged as follows:

• 0-49 = Red Triangle
• 50-89= Orange Square
• 90-100 = Green Circle

Beyond the initial overview, you can scroll down through each category for more information. Each category is broken down into more specific metrics.

In my experience, getting a high orange score is often just as good as getting a low green score. Many beginners panic over a mixture of green and orange in their reports—but they shouldn’t! It typically takes a highly streamlined site to achieve a high green score, and this often means super simple, low-content web pages.

That’s not to say that you shouldn’t try to improve your scores. However, achieving complete perfection is often impossible. If you’re in the green at all, you’re already doing better than the vast majority of websites. An in-depth look at public data by Astro found that the median Performance score on Lighthouse is just 34 out of 100.

I’ve come across some seriously low scores in my time and some pretty good ones. Regardless of what I’m starting with, I’m always aiming for 80+ across all scores.

However, a lot of the recommendations for improvement that you’ll see in Lighthouse are pretty technical. As an experienced SEO, I may be able to interpret all of them, but I’ll frequently need the skilled hand of a web developer to take a look at the recommendation and implement the changes required.

Performance

You might be familiar with PageSpeed Insights. If so, you’ll recognize a lot of the metrics in the Performance section of Google Lighthouse. But with Lighthouse, you get an enhanced speed test with more detail.

Measuring how quickly a web page loads might seem simple at first, but there are two key considerations when evaluating website performance that many don’t consider.

First, you can’t assume that all visitors have the same internet connection or are using the same device as you. Around half of global internet traffic comes from mobile devices that are connecting over a relatively slow connection, which majorly affects loading times.

Second, it’s not really possible to sum up a page’s load time in one value. Several metrics can affect how fast or slow a page “feels” to a viewer, from how long it takes for them to see any content at all to how long until they can interact with the page.

The latest version of Google Lighthouse accounts for both of these issues by (1) simulating the page load on a mobile device and (2) forming your Performance score based on six metrics.

The six metrics used for the Performance score on Google Lighthouse are:

• First contentful paint. The time it takes for the first image or piece of text to appear on screen fully rendered.
• Time to interactive. The time until a page is fully interactive. In other words, it responds to most user interactions and input in under 50 milliseconds.
• Total blocking time. The time between First Contentful Paint and Time to Interactive, during which users can view content but not interact with it.
• Speed index. The time required for the visual elements of your page to load completely.
• Largest contentful paint. The time it takes for the largest text or image element to fully render.
• Cumulative layout shift. The total number of unexpected layout shifts that occur on the page. A layout shift occurs when an element unexpectedly moves from one location on the page to another, which can cause interaction issues if a user clicks in the wrong location at the wrong time:

These metrics are measured in seconds. When you click the “Expand View” under your overall performance, you’ll see links to learn more about each score. Here, you can find out how Google indicates a Green, Orange, or Red score and what you should aim for.

Image Source

Interestingly, Google does not weigh these metrics equally to make up your overall Performance score. Some metrics are more important than others. Here’s how Google weights the metrics:

• First Contentful Paint: 10%
• Speed Index: 10%
• Largest Contentful Paint: 25%
• Total Blocking Time: 30%
• Cumulative Layout Shift: 25%

I used to focus heavily on the recommendations under First Contentful Paint, for example, because it’s usually one of the more straightforward issues to correct (e.g., making video and image files smaller). In reality, the items that are really going to move the needle on your site speed are largest contentful paint, total blocking time, and cumulative layout shift. The more you know!

In the Diagnostics dropdown, you’ll find detailed suggestions on how to increase overall performance. These suggestions include removing render-blocking or unused code, minifying code, resizing images, and better caching your content.

Accessibility

Accessibility means ensuring your website is accessible to people of all physical and cognitive abilities and limitations. For example, people who use screen readers need web pages to be built with specific mark-ups (essentially well-structured code) to understand and use your website fully.

The Lighthouse score here gives your page a rating that summarizes how accessible your page is. Some of the audits the tool runs to assess this include checking for semantically-rich HTML tags, the use of alternative text and ARIA landmarks, and a specified page language.

As you can see, in this website test, I got an accessibility score of 100. If I received anything less than that, I would likely need the assistance of a developer to implement any recommendations.

Image Source

If you’re using a website builder and have a grasp of SEO and accessibility fundamentals, it’s not difficult to achieve this score. However, I always pay attention to the “Additional Items to Manually Check” section.

Lighthouse isn’t an exhaustive accessibility audit, and if I want to tell clients that their website is fully accessible, I’ll take the time to go through the manual checks. Luckily, Google provides links to detailed information on each check so you can know where to look.

If your accessibility score ends up being lower than ideal, see our full guide to accessibility on the web and our web accessibility checklist to improve usability for everyone.

Best Practices

Lighthouse also conducts a brief audit of widely accepted best practices in web development. Most of these are security-related — using HTTPS, safe outbound links, and up-to-date JavaScript libraries and APIS — but it also checks for some other practices like specifying the HTML doctype and displaying images with appropriate resolution.

As you can see in my example below, I got a score of 95. If you click through the passed audits and the issues that have been flagged, you’ll get a pretty good sense of what Google is scanning for in the Best Practices test.

Image Source

The error I received was “Browser errors were logged to the console.” Here’s what further information Lighthouse provides about this error:

“Errors logged to the console indicate unresolved problems. They can come from network request failures and other browser concerns.”

Not super helpful to me as an SEO expert, but, luckily, I also get a link to an article about browser errors with more information. Again, I typically need the assistance of a web developer to resolve issues in Best Practices as they typically relate to code execution.

SEO

As the last graded category, the SEO score assesses how closely your page adheres to SEO best practices. Most tests in this category check whether your page is crawlable thanks to valid use of HTML tags and attributes.

Lighthouse’s SEO report is pretty basic, but it can help you get some quick wins for your search ranking — see our Ultimate Guide to On-Page SEO for addressing any failed tests in this category.

As an SEO expert, I usually do a quick scan of this section and resolve any errors that come up pretty quickly. However, the tests are so fundamental that I rarely see low scores here. A more in-depth crawling tool to assess the quality of your on-page SEO will provide lots more information.

Progressive Web App

The final check that Lighthouse conducts is a test of whether your site meets the standards for what Google considers a Progressive Web Application, one that can be easily accessed and used from any location and any device. This assessment was the original purpose of the Lighthouse software and remains a useful benefit of the tool.

The Progressive Web App test doesn’t give a score, but it does indicate whether you pass or fail. It assesses your web application’s performance, responsiveness, and several other measures to improve the user experience of your app.

What is the difference between Google Lighthouse and PageSpeed Insights?

You might have heard of another Google tool to assess website performance, PageSpeed Insights. PageSpeed Insights is among the most popular speed tests available — paste in a page’s URL, and it generates a report with suggestions to optimize performance for both desktop and mobile viewing.

The primary difference between PageSpeed Insights and Lighthouse is that the former evaluates page performance alone, while the latter gives a more comprehensive view of your page quality.

The PageSpeed Insights report and the performance report within Lighthouse are actually quite similar, the only significant difference being that PageSpeed Insights combines both the results from simulated tests (i.e., “lab data”) and performance data from real visitors, whereas Lighthouse incorporates only lab data.

You don’t need to choose one over the other. I typically use both to get a full picture. Lighthouse reports give me a more thorough picture of the overall quality of a site, but PageSpeed Insights is great when I want to hone in specifically on performance.

What score should I aim for in Lighthouse?

In my experience, getting into the green zone of Lighthouse scores can be an achievement in itself, especially if you’re dealing with a large and complex website.

When it comes to accessibility, best practices, and SEO, it’s very achievable to get up to a score of 100. But the Performance audits are another beast altogether.

Even when working closely with experienced web developers, I’ve struggled to move the scores of some websites beyond the mid-eighties. And that’s okay — those websites still worked like a dream and did very well in organic search rankings.

The goal with Lighthouse is to increase your scores as best you can. As long as you’re high up in the orange zone in performance, you’re doing exceptionally well!

Take an honest look at your web pages.

So much of web analytics today is based on traffic-related KPIs like the number of visitors, number of page views, and bounce rate. These are important to measure, but they can only tell you about the result of a good or poor user experience, not what shapes your UX.

That’s where Lighthouse comes in — with this resource, anyone can plug in a webpage and immediately receive feedback, plus learn ways to better their website, delight more visitors, and ultimately see greater conversions and growth.