How to Use Google Lighthouse to Optimize Your Website UX

The best websites are all built around the same primary goal, and it’s not to drive the most conversions or even to sell the most product. While those are certainly important, they come second to providing an excellent user experience.

User experience (UX) can be gauged through your website performance. If your web pages are slow, your UX will be poor. In fact, your users will barely have an experience at all — it’s widely agreed that a website starts to lose people after around two seconds of loading.

The good news is that you don’t need to hire a consultant or reinvent the wheel to evaluate your site’s UX. Google Lighthouse is an online tool that audits your website for what it believes makes the best experience. And, given it’s Google, it’s probably a good idea to listen.

In this intro guide, you’ll learn what Google Lighthouse is, how it works, how to use it to test your website, and what to expect from a Google Lighthouse report.

What is Google Lighthouse?

Google Lighthouse, or simply Lighthouse, is a free tool that assesses the quality of web pages. Lighthouse can be used on any publicly available page on any website or web application, and scores quality in five categories: performance, accessibility, best practices, SEO, and qualification as a Progressive Web Application. These categories are part of core web vitals that Google tracks to help site owners measure usability on webpages. For each of these categories, Lighthouse recommends steps to improve the overall user experience on the page.

While website optimization can be a dense topic for beginner website owners, Lighthouse is simple to use and gives valuable insights for both new and experienced webmasters. You just need to provide a webpage, and Lighthouse will generate an automated report for you in less than a minute, complete with suggestions and links to articles explaining each issue in greater detail.

Google Lighthouse distinguishes itself from other popular website assessments by providing a more comprehensive and realistic view of a page’s overall quality. It considers not just how fast the page is but also how accessible, indexable, and well-built it is for the average internet user. It’s also open-source, meaning it can be utilized by other web apps, including HubSpot’s very own Website Grader.

How to Use Google Lighthouse

To generate a report with Google Lighthouse for free, you’ll need to use the Google Chrome browser. There are two ways to use Lighthouse in Chrome: inside Chrome DevTools or with the Google Lighthouse Chrome extension.

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.

After a few seconds, Lighthouse will output a full report of your website. See below for an explanation of this report.

How to Use the Google Lighthouse Extension in Chrome

There’s a Lighthouse extension for Chrome that works the same way as its DevTools counterpart. To use this extension, follow these simple steps:

1. Install Google Lighthouse from the Chrome Web Store.
2. 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.
   
3. Click the cog icon to open the settings menu. It's here where you can toggle your report output as needed.
   

The extension will open a new browser tab and, after several seconds, display a report of your Lighthouse assessment.

Google Lighthouse Metrics

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

These are the five aspects of your web page that Lighthouse evaluates:

• Performance
• Accessibility
• Best Practices
• SEO
• Progressive Web Application (PWA)

Lighthouse grades the overall quality of the first four categories on a 0-to-100 scale. A score of 0 to 49 (triangle) indicates a poor result, 50 to 89 (square) indicates an average result, and 90 to 100 (circle) is the best result.

A note on Google’s scoring: For both Lighthouse and PageSpeed Insights, a 100/100 grade is very difficult to achieve and impossible for many websites. So, don’t strive for a perfect score in every category — if you get green, you’re good.

Alone, these scores wouldn’t be much help to us, which is why a Lighthouse report breaks each score down into insights and suggestions for improvements that you can make on your pages. Let's now unpack each of these scores.

Performance

The most powerful feature of Lighthouse is its performance assessment, an enhanced speed test for your page.

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:

• First Contentful Paint is the time it takes for the first image or piece of text to appear on screen fully rendered.
• Time to Interactive is 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 is the time between First Contentful Paint and Time to Interactive, during which users can view content but not interact with it.
• Speed Index is the time required for the visual elements of your page to load completely.
• Largest Contentful Paint is the time it takes for the largest text or image element to fully render.
• Cumulative Layout Shift is 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:

Image Source

Underneath Metrics, Lighthouse lists Opportunities and Diagnostics, both of which offer suggestions to increase overall performance on your specific page. These suggestions include removing render-blocking or unused code, minifying code, resizing images, and better caching your content.

Google also provides a more detailed breakdown of how Lighthouse calculates your performance score.

Accessibility

Next, Lighthouse gives your page a rating that summarizes how accessible your page is to people with physical and cognitive disabilities and limitations. Web accessibility is essential, since all visitors deserve the same access to public information on your website.

Lighthouse runs several accessibility audits, including checking for well-structured code and semantically-rich HTML tags, the use of alternative text and ARIA landmarks, and a specified page language.

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.

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.

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 which 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.

However, there’s no reason these tools can’t be used together. Run a Lighthouse report for a full picture of your website’s quality, and try PageSpeed Insights when you want to hone in on performance — both are valuable, free resources.

Take an Honest Look at Your Web Pages

So much of web analytics today is based around traffic-related KPIs like 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.