What Is Lighthouse? How to Use Google Lighthouse to Optimize Your Website

What is Google Lighthouse?

Google Lighthouse is an open-source auditing tool developed by Google that analyzes and evaluates website quality across five core dimensions: Performance, Accessibility, Best Practices, SEO, and Progressive Web App (PWA).

Unlike basic speed testing tools that only measure page load time, Lighthouse provides a comprehensive health check for your website. It simulates page loading in a controlled environment, then delivers detailed reports with specific recommendations to improve each metric.

Lighthouse can run on multiple platforms: directly within Chrome DevTools, as a Chrome Extension, via CLI (Command Line Interface), or integrated into PageSpeed Insights. To understand the differences between these tools, check out our article on What is Google PageSpeed Insights?

Important Note: Lighthouse generates lab data (simulated environment metrics), not field data (real user data). For the most comprehensive view, combine Lighthouse results with data from Google Search Console and the Chrome User Experience Report (CrUX).

The Evolution of Lighthouse

Google first introduced Lighthouse in 2016 as a built-in tool within Chrome DevTools. Over the years, it has evolved into the de facto standard for web quality auditing:

• 2016: Initial release with basic performance and accessibility audits
• 2018: Added PWA and Best Practices audits
• 2020: Introduced in-depth SEO reporting and Core Web Vitals support
• 2023-2025: Added INP (Interaction to Next Paint) replacing FID, improved network and device simulation accuracy
• 2026: Current version with comprehensive auditing, support for modern frameworks like Next.js and Nuxt, and seamless CI/CD integration

The Five Audit Categories in Lighthouse

Lighthouse organizes its tests into 5 main categories, each with its own scoring weight and evaluation criteria. Understanding each category helps you prioritize the right fixes.

1. Performance — Highest Weight

The Performance category measures page load speed and responsiveness through Core Web Vitals and supplementary metrics. This is the most visible category since it directly impacts user experience and SEO rankings.

Key metrics in the Performance category:

• LCP (Largest Contentful Paint): Time to render the largest visible content element — ideal under 2.5 seconds
• INP (Interaction to Next Paint): Measures interaction latency — replaced FID in 2024, ideal under 200ms
• CLS (Cumulative Layout Shift): Visual stability — ideal under 0.1
• TBT (Total Blocking Time): Total time the main thread is blocked
• SI (Speed Index): How quickly content is visually displayed

For a deep dive into these metrics, read our article on What are Core Web Vitals?

2. Accessibility

The Accessibility category evaluates how well your website serves users with disabilities, covering:

• Color contrast ratios
• alt attributes on images
• Proper heading structure
• Labels on form elements
• Keyboard navigation support

Google recommends websites achieve an Accessibility score of 90 or above to ensure an equitable experience for all users.

3. Best Practices

The Best Practices category checks for security and modern technical standards:

• HTTPS usage
• Avoiding libraries with known security vulnerabilities
• Appropriate image sizes
• No document.write() usage
• Clean browser console (no JavaScript errors)
• Valid DOCTYPE

4. SEO

The SEO category audits factors affecting your search engine indexing and ranking:

• Valid title tags and meta descriptions
• Properly ordered heading tags (h1, h2, etc.)
• Valid robots.txt file
• XML sitemap existence
• No broken links
• Legible font sizes on mobile devices

Learn more about On-page SEO factors in our article What is On-Page SEO?

5. Progressive Web App (PWA)

The PWA category checks if your website can function like a native app on mobile devices:

• Service worker registered
• Offline support
• Valid manifest.json file
• Splash screen on launch
• HTTPS requirement

How to Run Lighthouse on Your Website

Lighthouse can be executed in several ways, depending on your needs and workflow.

1. Running Lighthouse in Chrome DevTools

This is the fastest and most popular method for checking a single page:

1. Open the page you want to test in Google Chrome
2. Press F12 or Ctrl+Shift+I to open DevTools
3. Navigate to the Lighthouse tab
4. Select which audit categories to include (all are selected by default)
5. Choose the device type (Mobile / Desktop)
6. Click Analyze page load

After 30-60 seconds, Lighthouse generates a detailed report with scores and optimization suggestions.

2. Running Lighthouse via CLI

Ideal for developers who want to integrate Lighthouse into their automation pipeline:

# Install Lighthouse globally
npm install -g lighthouse

# Run an audit for a URL
lighthouse https://example.com --view

# Run audit for Performance and SEO only
lighthouse https://example.com --only-categories=performance,seo --output=json --output-path=./report.json

Lighthouse CLI supports advanced options:

• --chrome-flags: Customize Chrome headless flags
• --throttling: Configure network speed simulation
• --preset: Use predefined presets (desktop, perf, experimental)
• --budget-path: Test against a performance budget

3. Running Lighthouse via Chrome Extension

The Lighthouse Chrome Extension is perfect for quick checks without opening DevTools:

• Install the extension from the Chrome Web Store
• Click the Lighthouse icon on your toolbar
• Select Generate report

4. Lighthouse in PageSpeed Insights

When you test a website at pagespeed.web.dev, Google uses the Lighthouse engine server-side to generate reports. However, PageSpeed Insights also adds field data from CrUX, giving you a combined view of lab and real-world performance. See our article What is Google PageSpeed Insights? for more details.

5. Lighthouse CI — Integrating Into Your Development Workflow

Lighthouse CI automates audits every time code changes, ensuring website quality never degrades after deployment:

# Install Lighthouse CI
npm install -g @lhci/cli

# Configure lighthouserc.js
# lhci collect → lhci assert → lhci upload

# Run collect
lhci collect --url=https://example.com --numberOfRuns=3

# Assert against performance budget
lhci assert --preset=lighthouse:recommended

# Upload results to server
lhci upload --target=temporary-public-storage

Lighthouse CI is particularly valuable in CI/CD pipelines with GitHub Actions, GitLab CI, or Jenkins. It catches performance regressions before they reach your users.

How to Read and Understand a Lighthouse Report

A complete Lighthouse report contains several critical sections. Understanding how to read the report helps you prioritize the right issues.

Overall Scores

Each audit category scores from 0 to 100:

Tip: Don't obsess over achieving a perfect 100. Some audits are impossible to max out due to technical limitations or the nature of your site. A realistic target is 90+ for Performance and 95+ for all other categories.

Opportunities

The Opportunities section lists specific actions that can improve performance, with estimated time savings for each. Opportunities are sorted by descending impact:

• Eliminate render-blocking resources: Remove resources that block page rendering
• Properly size images: Resize images to match display dimensions
• Defer offscreen images: Delay loading images outside the viewport
• Preconnect to required origins: Establish early connections to resource origins

Diagnostics

The Diagnostics section provides supplemental information about potential issues without time estimates, but they're still important:

• Large JavaScript library usage
• Long JavaScript execution times
• Unoptimized network requests
• Oversized DOM tree

Passed Audits

A list of audits your website has already passed, helping you confirm what's working well and track your optimization progress.

How to Optimize Your Website Based on Lighthouse Reports

Once you have your Lighthouse report, here are concrete steps to improve each category.

Optimizing Performance

1. Optimize Largest Contentful Paint (LCP)

LCP is the most critical Performance metric. Common causes of slow LCP:

• Unoptimized hero images
• High server response time (TTFB)
• Render-blocking CSS/JavaScript resources

How to fix:

• Use modern image formats like WebP or AVIF — see our guide on Image SEO
• Compress and resize hero images to actual display dimensions
• Use a CDN to reduce geographic latency — learn more in What is CDN?
• Enable server-side caching and Brotli/Gzip compression
• Inline critical CSS and defer non-critical CSS
• Preload the LCP image using <link rel="preload">

2. Optimize Interaction to Next Paint (INP)

INP measures user interaction latency. High INP is typically caused by:

• Heavy JavaScript blocking the main thread
• Complex event handlers
• Third-party scripts

How to fix:

• Break long JavaScript tasks into chunks under 50ms
• Use Web Workers for heavy computations
• Defer non-critical third-party scripts
• Apply code splitting and tree shaking
• Use requestAnimationFrame and requestIdleCallback for non-urgent tasks

3. Optimize Cumulative Layout Shift (CLS)

High CLS occurs when page elements shift unexpectedly after rendering:

How to fix:

• Always set width and height attributes on images and videos
• Reserve fixed space for ads and iframes
• Use font-display: swap for web fonts
• Avoid injecting dynamic content above existing content

4. Optimize JavaScript and CSS

• Minify CSS, JavaScript, and HTML to reduce file sizes
• Use Lazy Loading for images and videos — see What is Lazy Loading?
• Enable browser caching for static resources — read What is Cache?
• Use async and defer for non-critical scripts
• Combine and compress CSS/JavaScript files

Optimizing Accessibility

• Add descriptive alt attributes to all images
• Ensure color contrast meets a minimum of 4.5:1 for normal text
• Use headings in proper order (h1 → h2 → h3, no skipping levels)
• Label form elements with <label> or aria-label
• Ensure all functionality is keyboard-accessible
• Set the correct lang attribute for your page language

Optimizing SEO

• Ensure every page has a unique title tag and meta description
• Use proper heading tag structure — learn more in What Are Heading Tags for SEO?
• Find and fix broken links
• Avoid noindex on important pages
• Create and submit a sitemap.xml to Google Search Console
• Configure a proper robots.txt file
• Ensure content aligns with Search Intent — read What is Search Intent?

Optimizing Best Practices

• Use HTTPS across your entire website
• Update JavaScript libraries to their latest versions
• Avoid document.write() in JavaScript
• Keep the browser console free of JavaScript errors
• Use a valid DOCTYPE (<!DOCTYPE html>)
• Optimize image and video sizes

Lighthouse vs Other Tools

Each website performance tool has its own strengths. Here's a comparison to help you choose the right tool:

For an overview of all speed testing tools, check out our article How to Check Website Speed.

Integrating Lighthouse Into Your Development Workflow

Using Lighthouse CI with GitHub Actions

Here's an example GitHub Actions workflow with Lighthouse CI:

name: Lighthouse CI
on: [push]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli
          lhci autorun

Setting a Performance Budget

A performance budget sets maximum limits for key metrics. Lighthouse CI can automatically fail a build when the budget is exceeded:

// lighthouserc.js
module.exports = {
  ci: {
    collect: {
      url: ['https://example.com'],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:seo': ['error', { minScore: 0.95 }],
        'categories:accessibility': ['error', { minScore: 0.9 }],
        'lighthouse:max-time': ['warn', { maxNumericValue: 10000 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

Benefits of setting a performance budget:

• Prevents new code from degrading performance
• Builds performance awareness across the development team
• Catches regressions early before they hit production

Integrating Lighthouse Into Code Review

Beyond CI/CD, you can integrate Lighthouse into your pre-commit hooks or code review process:

# Run Lighthouse audit for affected pages
npx lighthouse https://staging.example.com --only-categories=performance --output=json

Best Practices for Using Lighthouse

1. Run Multiple Tests for Reliable Results

Lighthouse results can vary due to environmental factors. Always run at least 3 tests and average the scores, especially for Performance.

2. Test Both Mobile and Desktop

Google uses Mobile-First Indexing, so mobile results carry more weight. Always check both modes and prioritize mobile optimization first. Read more in our Mobile-First Indexing Guide.

3. Combine Lab Data with Field Data

Lighthouse only provides lab data (simulated metrics). For an accurate view of real user experience, combine it with:

• Google Search Console: Core Web Vitals report from real user data
• Chrome User Experience Report (CrUX): Aggregated data from millions of Chrome users

Read What is Google Search Console? to learn how to monitor Core Web Vitals from real-world data.

4. Set Realistic Targets

You don't need to chase a perfect 100. Set achievable goals:

• Performance: ≥ 90
• Accessibility: ≥ 95
• Best Practices: ≥ 95
• SEO: ≥ 95

5. Test Regularly, Not Just Once

Website performance changes over time due to:

• Code, plugin, and theme updates
• Increasing traffic
• Content changes
• Added third-party scripts

Set up a weekly or monthly testing schedule, and integrate Lighthouse CI into your pipeline to automate the process.

6. Optimize by Impact, Not by Volume

When reviewing Lighthouse issues, prioritize by estimated impact. Items in the Opportunities section are already sorted by priority — start from the top.

Conclusion

Google Lighthouse is an indispensable tool in the modern website optimization workflow. Beyond measuring performance, Lighthouse provides a comprehensive audit across accessibility, SEO, security, and mobile-app-like capabilities.

Key takeaways:

• Lighthouse is Google's open-source auditing tool covering 5 dimensions: Performance, Accessibility, Best Practices, SEO, PWA
• Run it via DevTools, CLI, Chrome Extension, PageSpeed Insights, or CI/CD pipeline
• Scores matter, but recommendations matter more — Lighthouse gives you actionable steps
• Combine lab data with field data for the most accurate performance picture
• Integrate Lighthouse CI into your development pipeline for sustainable quality

Start auditing your website with Lighthouse today, set a performance budget, and make optimization a natural part of your development process. A fast, accessible, SEO-friendly website delivers not only a great user experience but also a lasting competitive advantage in the digital age.

To explore more comprehensive website optimization strategies, check out our articles on Website Optimization and Optimize Website Speed.