A complete guide to Google Lighthouse

A millisecond might seem too short to matter. But for every 100 milliseconds a website takes to load, the conversion rate can drop by 7%. If your clients' websites are slow, their visitors — and their revenue — leak away.

Google Lighthouse is your one-stop shop for performing comprehensive audits on your clients' web pages. It probes deep into a website, revealing the factors affecting page load speed and overall performance score, and it's an essential part of your developer tools arsenal.

Lighthouse was initially developed to assess progressive web apps (PWAs), including essential features like service worker registration and offline functionality. While PWAs remain a key audit category, other optimization areas such as performance, accessibility, best practices, and SEO have been integrated as well.

One thing to remember as you use it: a Lighthouse report isn't a school report card with a pass or fail stamp. It's a detailed roadmap to optimization, guiding you to the areas of a site that need your attention most. It's not about passing the test — it's about understanding what each aspect of the test means for a website's performance.

In this guide, you'll learn how to run a Lighthouse audit, what each score and metric means, what counts as a good result, and how to turn the findings into better-performing client websites. Each website — like each client — is unique, so success lies in understanding and applying the insights Lighthouse provides.

Key takeaways

• Google Lighthouse audits five categories — performance, accessibility, best practices, SEO, and progressive web apps — each scored from 0 to 100.

• The performance score is a weighted average of metrics including First Contentful Paint, Speed Index, Largest Contentful Paint, Time to Interactive, Total Blocking Time, and Cumulative Layout Shift.

• Page speed is commercial: every 100 milliseconds of load time can drop the conversion rate by 7%.

• Lighthouse scores naturally fluctuate between runs, and mobile scores typically come back lower than desktop — run several audits and look at the median.

• The AgencyAnalytics integration pulls every client's Google Lighthouse data into one clear, automated report.

What is Google Lighthouse?

Google Lighthouse is an open-source, automated auditing tool that scans a web page with an eagle eye. It targets several aspects of the page: performance, accessibility, best practices, SEO, and more. A Lighthouse audit matters because on the modern web, speed and accessibility are baseline expectations, not extras.

At its core, Google Lighthouse is your page's report card, and it doesn't hold back any punches.

How Lighthouse helps website performance optimization

The value of Google Lighthouse lies in its systematic approach to website auditing. It examines how quickly the web page becomes interactive (speed index), watches for sudden page shifts (cumulative layout shift), and much more.

Once you run Google Lighthouse, it provides detailed feedback on the areas that require improvement, setting a roadmap for optimizing web performance.

Why performance and page load speed matter

In a world that moves at the speed of a scrolling thumb, a delay of even a second in page load time can spell doom for the best of websites. Slow-loading pages push visitors away, affect search engine rankings, and impact the bottom line. Using a tool like Google Lighthouse to ensure optimal performance is more than good practice — it's a survival strategy.

It's not just about improving numbers on an audit; it's about turning insights into action, one web page at a time.

Impress clients and save hours with custom, automated reporting.

Join 7,000+ agencies that create reports in under 30 minutes per client using AgencyAnalytics. Get started for free. No credit card required.

Sign up with Google

or

First name

Last name

Email address

Start Your Free Trial

Already have an account?

Log in

How to conduct Google Lighthouse audits

Let's take a closer look at the types of audits, how they work, and how you can conduct one yourself.

Types of Lighthouse audits

Google Lighthouse divides its audits into five primary categories:

• Performance: This focuses on core web vitals, such as the speed index (how quickly content is visually displayed), cumulative layout shift (how much elements on the page move around during load), and more. If you've ever tried to click a button on a website, only to have it shift out of the way so you clicked something else, you'll understand how important this is.

• Accessibility: These audits scrutinize whether the website is easily accessible to all users, including those with disabilities. It checks elements like color contrast, correct use of headings, and appropriate labeling.

• Best practices: Here, Google Lighthouse identifies opportunities to apply web development best practices, helping to prevent potential issues that could harm the site's security or performance.

• SEO: The SEO audits ensure the site is optimized for search engine visibility, focusing on elements like meta descriptions, crawlability, and appropriate use of HTML tags.

• Progressive web apps: Lighthouse also evaluates progressive web apps. The PWA audit tests whether a web page is using modern web capabilities to deliver a good user experience — for example, the page should be mobile-friendly and use best practices such as redirecting HTTP traffic to HTTPS.

For most agencies, the top four are the most critical.

Easily track your client's Google Lighthouse data with the Google Lighthouse reporting integration. Try AgencyAnalytics free for 14 days!

Step-by-step: how to run a Lighthouse audit

Google Lighthouse audits are straightforward to conduct, and you can do them right in your Chrome browser. Here's how:

1. Install the Google Lighthouse plugin. You can use it once you have a Google Chrome browser installed (via the Developer Tools), or install it as a Node module.

2. Open Developer Tools in your Google Chrome browser. Do this by right-clicking on the webpage and selecting 'Inspect,' or by pressing 'Ctrl+Shift+I' (Windows) or 'Cmd+Option+I' (Mac).

1. Go to the Chrome DevTools Lighthouse option.

2. Configure your audit by choosing the categories you wish to test (Performance, Accessibility, Best Practices, SEO).

3. Click on 'Generate report.' Lighthouse will now run the audit on the currently active tab.

1. Review your report. The Lighthouse score, a weighted average of all the performance metrics, gives you a snapshot of the web page's health.

You'll also have the option to test the functionality of a progressive web app (PWA), which is designed to work on any device with a screen and a web browser. Well-functioning web apps deliver an optimal user experience and increase engagement, so it's worth evaluating.

Remember, running a Lighthouse audit doesn't impact the website. It's an automated tool that visits the site just like any other user would, albeit with a far more analytical eye.

There are also tips on how to install and run the Node command line tool, but we'll leave that for another time.

Using Lighthouse with the Chrome extension

If you decide to use the browser extension for Google Lighthouse instead, here's how to do it (you'll need the Chrome browser installed):

1. Install the Lighthouse Chrome Extension from the Chrome web store.

2. Open the Chrome browser and go to the URL you want to audit.

3. Click the small red lighthouse icon next to the address bar (this can also be found in the Chrome extension menu).

4. Click Generate Report.

The results will open in a new tab.

Decoding the performance score

Google Lighthouse performance scores are more than just numbers. Think of them as the pulse of a website — a reflection of its health. This section covers what the Lighthouse performance score is, how it's calculated, and why it matters.

Overview of the Lighthouse performance score

The Lighthouse performance score is a fast, visual summary of a web page's performance.

On a scale of 0 to 100, it's a composite score, meaning it combines several different metrics to give you an overall view of the site's speed and usability. A score of 100 indicates the page is performing perfectly; anything less means there's room for improvement.

There is a law of diminishing returns, though. You could spend weeks tweaking every line of code to move a page from a score of 92 to 94, or hours shifting a score from 40 to 90. Prioritize your efforts to provide the most bang for your client's buck.

How the score is calculated

It's all about metrics. The performance score is based on a weighted average of various metrics, such as First Contentful Paint (FCP), Speed Index (SI), Largest Contentful Paint (LCP), Time to Interactive (TTI), Total Blocking Time (TBT), and Cumulative Layout Shift (CLS).

Each metric reflects a different aspect of page load speed and responsiveness. For example, First Contentful Paint measures how long it takes for the first bit of content to appear on screen after a user navigates to the page. Cumulative Layout Shift, on the other hand, quantifies how much elements on the page shift around during load.

Each metric is assigned a weight, reflecting its relative importance in the overall score. These weights can change as Lighthouse's algorithm evolves, so it's a good idea to stay updated on the latest version of Lighthouse.

Why Lighthouse scores fluctuate

You might notice that a client's Lighthouse report score changes over time. Google might give you a different number each time you test the site. This is normal — don't worry! Several factors can affect the score on any given day, including:

• Server response times

• Network conditions

• Browser extensions

• Web page ads

• Page customizations like AB tests

• Network data routes

• The length, time, and location of the test

• How powerful the CPU is

• Different Lighthouse versions or settings

It's natural to see some variability in a Lighthouse score.

Google Lighthouse desktop vs. mobile

You might also notice that you receive a different performance rating if you run the test on the desktop vs. the mobile version of your client's website. Again, don't panic! It's common for mobile scores to come back lower. This might be because the mobile device has a slower processor or weaker connection than a desktop computer.

Why the performance score matters

A high performance score signifies a fast, responsive, and user-friendly website, which makes visitors want to stick around. Search engines also favor speedy, efficient websites, meaning a high score gives your clients a boost in search rankings.

Chasing a perfect 100 is a great goal, but understanding the Lighthouse performance score is really about getting a clear, quantified snapshot of a website's health. The score is one part of the whole story about the website's performance, alongside Google's Core Web Vitals metrics and other data points.

Important Google Lighthouse metrics to track

Google Lighthouse provides a plethora of metrics to understand website performance. Here are the essential ones — what they are, what a good score looks like, and why each matters to your clients.

First Contentful Paint (FCP)

First Contentful Paint measures the time from when the page starts loading to when any part of the page's content is rendered on the screen — the time until a user can see anything. A good FCP is anything under two seconds.

Why it matters to clients: Imagine your agency launched a successful PPC campaign that's driving major traffic to your client's ecommerce website. But when consumers reach the site, they have to sit for 20 seconds before the main hero image appears. That's critical time that could drive customers away — and that's why FCP matters.

Speed Index (SI)

The Speed Index measures how quickly the contents of a page are visibly populated. The lower the score, the better — you want the speed index time to be under 4.3 seconds.

Why it matters to clients: If a client's website is slow to load, consumers won't sit around and wait for long. The website needs to populate its visual elements as quickly as possible to grab and retain visitor attention.

Largest Contentful Paint (LCP)

Largest Contentful Paint reflects the time it takes to render the largest content element visible in the viewport. Ideally, you want this to be 2.5 seconds or less.

Why it matters to clients: LCP affects user experience. People visit a website because they want to interact with it — if it doesn't load quickly, they aren't going to stay.

Time to Interactive (TTI)

Time to Interactive quantifies how long it takes a page to become fully interactive — how soon a web page becomes fully responsive after a visitor arrives.

Why it matters to clients: Ideally, a webpage should respond to user input within 50 milliseconds. This keeps users engaged with your client's website rather than a competitor's.

Total Blocking Time (TBT)

Total Blocking Time measures the total amount of time the main thread was blocked long enough to prevent input responsiveness. Look for a TBT that's less than 300 milliseconds.

Why it matters to clients: TBT indicates whether a webpage is usable. If a consumer can't quickly complete an action on your client's website, conversions will suffer.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift quantifies how much unexpected layout shift of visible page content occurs during page load — it scores the visual stability of the page. The CLS score should be 0.1 or less.

Why it matters to clients: Have you ever been scrolling an ecommerce page, about to click "buy" on an item, when the whole page shifts and you lose your place? If customers have to re-orient themselves several times on your client's site before clicking "add to cart", they're likely to leave without a purchase.

Each metric shines a light on a different aspect of the website's performance, and together they provide a comprehensive overview of the site's health.

The other Lighthouse scores to track

Beyond the performance metrics, your Lighthouse report includes several category scores worth tracking for every client.

Lighthouse SEO score

SEO, or search engine optimization, is the art of making a site more attractive to search engines.

The SEO score reveals how well a site adheres to SEO best practices. A high SEO score means you're making it easy for search engines to crawl and index the site, improving its visibility in search results. Factors that play into the Lighthouse SEO score include whether:

• Web pages are mobile-friendly

• There are title and meta description tags, plus image alt text

• The page has valid structured data and a valid hreflang attribute

• The page is indexable

• Internal links are crawlable

• The page has a valid "rel=canonical" tag set

• The page is returning an HTTP 200 (OK) status response code

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

Lighthouse accessibility score

The accessibility score reflects how easy it is for people of all abilities to use your client's site.

It looks at things like color contrast, font size, and the presence of alt text for images. A perfect 100 is the goal — it may be lofty, but accessibility is crucial. Scores above 90 mean the site is very accessible; anything below 90 requires some investigation and fixes.

We do our best to start with accessibility considerations from the beginning of a project. We intentionally use elements that are more accessibility-friendly and avoid elements that can be problematic for people using assistive technology. We believe that it is easier to build a site with accessibility, speed, and SEO in mind than try to retrofit a site for accessibility later on.

Josiah Bussing, CEO, Mountaintop Web Design

A few examples of ways to improve website accessibility include:

• Add alt text to images

• Use headings and subheadings correctly

• Add labels to form fields

• Use large size fonts

• Make sure pages have enough color contrast

• Caption videos and provide a transcript

• Use accessible JavaScript widgets

Lighthouse best practices score

This score assesses adherence to modern web development best practices, to improve the user experience.

It covers everything from HTTPS usage to correctly sized images. Ideally, you want a 100 in this category, but at a minimum this score should be above 80. Keeping it high is a sign the site is keeping up as web development standards move on.

Tests passed, failed, warnings

Google Lighthouse tests the website against a list of preset checks. The results highlight the tests the site passed, the tests it failed, and any potential issues that might need your attention.

It's a quick snapshot that highlights where the site excels and where there's room for improvement.

Load time (seconds)

Load time is a big part of website performance.

It measures the time it takes for a web page to fully load. In the world of web performance, speed is king, and every second counts.

Reading the audit report: decoding the feedback

A Google Lighthouse audit generates a detailed report divided into several sections, each offering insights into a different aspect of the website.

The top of the report displays the performance score, a number from 0 to 100 that encapsulates the site's overall performance. Following that, the report dives into specific metrics. Each metric comes with a score, a value, and a description to help you understand what it measures and how the site is doing.

The 'Opportunities' and 'Diagnostics' sections offer advice on how to improve the website. They list potential issues impacting the site's performance, along with estimated savings if these issues were fixed. Finally, the 'Passed Audits' section lists everything that's going well with the site.

Each audit presents a specific test, pinpointing the areas of the webpage that need attention, in a clear, easy-to-understand format. The test results are broken down into sections:

• Passed audits: These are areas of the webpage that met the Google Lighthouse standard, typically scoring 90 or above. Don't just gloss over them — they provide valuable insights into what you're doing right.

• Audits to improve: Here's where the work starts. This section lists the areas in the 50–89 range where the webpage could do better. Each item here is an opportunity for improvement, not a failure.

• Failed audits: These are areas where the webpage didn't quite hit the mark, scoring below 50. It's not all doom and gloom — think of these as the roadmap to a better website.

Some of the tests that Google Lighthouse runs automatically include:

• All text remains visible during webfont loads

• Document has a meta description

• Largest Contentful Paint image was not lazily loaded

• Preload Largest Contentful Paint image

• Avoid an excessive DOM size

• Document has a valid hreflang

• Links are not crawlable

• Properly defines charset

• Avoid enormous network payloads

• Document has a valid rel=canonical

• Links do not have descriptive text

• Properly size images

• Avoid multiple page redirects

• Does not use HTTPS

• Links have a discernible name

• Reduce JavaScript execution time

• Avoid serving legacy JavaScript to modern browsers

• Efficiently encode images

• Max Potential First Input Delay

• Reduce unused CSS

• Avoids deprecated APIs

• Eliminate render-blocking resources

• Minify CSS

• Reduce unused JavaScript

• Background and foreground colors have a sufficient contrast ratio

• Enable text compression

• Minify JavaScript

• robots.txt is valid

• Buttons do not have an accessible name

• First Contentful Paint

• Minimize third-party usage

• Serve images in next-gen formats

• Cumulative Layout Shift

• First Meaningful Paint

• No issues in the Issues panel in Chrome Devtools

• Serve static assets with an efficient cache policy

• Defer offscreen images

• Image elements have [alt] attributes

• Page has successful HTTP status code

• Serves images with appropriate resolution

• Displays images with correct aspect ratio

• Image elements have explicit width and height

• Page has the HTML doctype

• Speed Index

• Document avoids plugins

• Initial server response time was short

• Page has valid source maps

• Time to Interactive

• Document has a <title> element

• Largest Contentful Paint

• Page isn't blocked from indexing

• Total Blocking Time

Common Lighthouse issues and what to try

The following provides a quick overview of common Lighthouse issues, as well as recommendations on what to look into to address them.

Using Chrome DevTools with Google Lighthouse

Google Lighthouse and Chrome DevTools work hand in hand to decode site performance. Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. These tools enable you to view, edit, debug, and optimize a site directly from your browser, making them an indispensable asset in your digital toolkit.

Key features of DevTools relevant to Google Lighthouse include:

• Network panel: Analyze network requests that can potentially slow down the site. You can also see how much data is being transferred and how long it takes, giving you insight into what's delaying page load times.

• Performance panel: This provides a timeline of network requests, JavaScript parsing, layout rendering, and other critical events that impact page load times.

• Coverage tab: This panel helps identify unused CSS and JavaScript on the page, highlighting areas for potential optimization.

• Audits panel: This is where Google Lighthouse lives within DevTools, ready to run comprehensive audits on the site.

Run Lighthouse audits directly from the Audits Panel in DevTools for immediate insight into performance, accessibility, and SEO right in your browser. After running an audit, dive deeper with other DevTools to address the issues Lighthouse identified:

• Eliminating render-blocking resources: DevTools helps pinpoint scripts or stylesheets that block rendering, thereby slowing down the site. By eliminating these roadblocks, a site is free to deliver content faster.

• Optimizing web fonts: DevTools enables you to identify web fonts that slow down the site and find more efficient ways to load them.

• Reducing unused CSS: The Coverage tab lets you find and remove unused CSS, streamlining the code and enhancing load speeds.

• Identifying and addressing browser errors: The DevTools Console helps you detect browser errors that could interfere with the end-user experience.

In short: Lighthouse identifies the issues that impact a site's performance, and DevTools gives you the tools to address those issues head-on.

Other tools that use Lighthouse

PageSpeed Insights

PageSpeed Insights is another automated tool that utilizes Lighthouse in its core processes.

This online tool not only offers a simple way to run a speed test on any webpage but also integrates real-world user experience data from the Chrome User Experience Report.

GTmetrix

GTmetrix is another free, popular performance tool that uses the Google Lighthouse performance score to help analyze a website's performance. You can also use it to test a site from different locations — helping you figure out, for example, how quickly a website loads for a user in Vancouver, Canada vs. Paris, France.

Here's how:

1. In GTmetrix, type or paste the URL you want to test and click "Test Your Site."

2. GTmetrix will give you a performance grade that includes Core Web Vitals.

3. Click through different tabs to see details like the full Lighthouse metrics in a Lighthouse report, or how well a site has performed over time.

Tips and tricks for using Google Lighthouse

Like any multifaceted tool, there are ways to wield Google Lighthouse more effectively. Here are some tips to help you get the most out of it:

• Install Lighthouse for flexibility: You can install Lighthouse as a Chrome extension for quick, easy access. For more flexibility, try installing it as a Node command line tool. This enables you to automate your audits and integrate them into your development process.

• Understand the difference between field and lab data: Lighthouse reports contain both lab and field data. Lab data is collected in a controlled environment and is useful for debugging performance issues. Field data, on the other hand, reflects real-world user experiences. Both are valuable in their own right.

• Embrace browser extensions: The Lighthouse panel in Chrome's developer tools is your best friend, but don't forget about other browser extensions, like the Chrome Extension Workflow, which can enhance your auditing process.

Overcoming common obstacles in performance optimization

Even the most seasoned site owner can encounter obstacles on the path to optimization. Here are some pointers to help you overcome common hurdles:

• Testing local sites: If you want to run an audit on a local site or a page behind a firewall, consider using the command line version of Lighthouse. It's perfect for testing before pushing changes live.

• Dealing with variability: If you're getting different results each time you run an audit, don't panic. Performance can vary due to network conditions, CPU throttling, and cache state. It's best to run several audits and look at the median result.

• Interpreting single page load: Lighthouse's performance score is primarily about how fast a single page loads when a user visits it for the first time. If the site relies heavily on subsequent page loads, take this into account when interpreting the performance score.

Google Lighthouse isn't a magic wand that solves all of a site's performance issues. But with these tips up your sleeve, you'll be better equipped to read the reports and spot the areas worth fixing.

Streamline Google Lighthouse reporting with AgencyAnalytics

Managing Google Lighthouse reports across various clients can feel like spinning plates. The AgencyAnalytics integration with Google Lighthouse keeps all those plates in the air.

The AgencyAnalytics integration fetches data from Google Lighthouse, giving your agency an overview of all your clients' website performance at a glance. It offers both broad and detailed views, allowing you to easily assess overall performance or deep-dive into individual tests.

You get the detailed insights from Google Lighthouse audits, while AgencyAnalytics serves up those insights in a clear, client-friendly format. It saves you time, reduces complexity, and presents data in a way clients can understand and appreciate.

Lighting the way to better websites

Google Lighthouse helps steer a website towards optimum performance. It shines a light on the site's strengths, points out areas for improvement, and provides invaluable metrics that help you chart your agency's progress.

Mastering Google Lighthouse doesn't just make you a better digital marketer — it makes the web a better place. With faster, more accessible, and user-friendly websites, the internet becomes a more inclusive and enjoyable space for all.