Google Lighthouse

Open-source automated tool for improving the quality of web pages. Audits performance, accessibility, best practices, SEO, and PWA compliance.

Chrome DevTools
CLI
Node.js API
PageSpeed Insights
Lighthouse CI
01 — The 5 Audit Categories

Performance

Loading speed, responsiveness, and visual stability. Measures how quickly content renders and becomes interactive for users.

Accessibility

Screen reader support, keyboard navigation, ARIA roles, color contrast, and semantic HTML validation.

Best Practices

HTTPS, correct image aspect ratios, modern APIs, security headers, and general code quality standards.

🔍

SEO

Meta tags, crawlability, structured data, mobile-friendly design, descriptive link text, and status codes.

📱

Progressive Web App

Service worker registration, web app manifest, offline support, installability, and splash screen configuration.

02 — Core Web Vitals & Key Metrics
Loading
LCP — Largest Contentful Paint
< 2.5s
2.5 – 4s
> 4s
Core Web Vital
Stability
CLS — Cumulative Layout Shift
< 0.1
0.1 – 0.25
> 0.25
Core Web Vital
Responsiveness
INP — Interaction to Next Paint
< 200ms
200 – 500ms
> 500ms
Core Web Vital
First Paint
FCP — First Contentful Paint
< 1.8s
1.8 – 3s
> 3s
Blocking
TBT — Total Blocking Time
< 200ms
200 – 600ms
> 600ms
Visual
SI — Speed Index
< 3.4s
3.4 – 5.8s
> 5.8s
100
Perf Score
Performance Score Weighting
Total Blocking Time (TBT)30%
Largest Contentful Paint (LCP)25%
Cumulative Layout Shift (CLS)25%
First Contentful Paint (FCP)10%
Speed Index (SI)10%
03 — Scoring System
95
Good
90 – 100
68
Needs Improvement
50 – 89
30
Poor
0 – 49
A score of 90 means your page performs better than 90% of all web pages. Scores are based on the p10 (90th percentile) and median values from HTTP Archive data. A perfect 100 is extremely difficult and not expected for most sites.
04 — CLI Usage
# Basic audit (generates HTML report)
lighthouse https://example.com

# Desktop preset (default is mobile)
lighthouse https://example.com --preset=desktop

# Generate JSON report to a file
lighthouse https://example.com --output=json --output-path=./report

# Run only specific categories
lighthouse https://example.com --only-categories=performance,accessibility

# Enforce a performance budget
lighthouse https://example.com --budget-path=./budget.json
# Multiple output formats at once
lighthouse https://example.com --output=html --output=json --view

# Chrome flags for headless testing
lighthouse https://example.com --chrome-flags='--headless --disable-gpu'

# Verbose logging for debugging
lighthouse https://example.com --verbose

# Save trace and DevTools logs
lighthouse https://example.com --save-assets

# Custom config file
lighthouse https://example.com --config-path=./custom-config.js
--output=json|html|csv       Output format
--output-path=./path        Output file destination
--view                      Open report in browser
--preset=desktop|mobile     Device emulation preset
--only-categories=...      Audit specific categories
--chrome-flags='...'       Chrome launch flags
--verbose / --quiet          Logging level
--save-assets               Save trace & devtools logs
--budget-path=./budget.json Performance budget file
--config-path=./config.js   Custom Lighthouse config
05 — Node.js API
import lighthouse from 'lighthouse';
import * as chromeLauncher from 'chrome-launcher';

// Launch a headless Chrome instance
const chrome = await chromeLauncher.launch({
  chromeFlags: ['--headless']
});

// Run Lighthouse audit
const result = await lighthouse('https://example.com', {
  logLevel: 'info',
  output: 'json',
  onlyCategories: ['performance'],
  port: chrome.port,
});

// Access results
const perfScore = result.lhr.categories.performance.score * 100;
console.log(`Performance: ${perfScore}/100`);

// Save report
const reportHtml = result.report;
fs.writeFileSync('report.html', reportHtml);

// Clean up
await chrome.kill();
06 — Three Execution Modes

Navigation

Default Mode

Audits a full cold page load from start to finish. The classic Lighthouse experience.

  • Measures FCP, LCP, CLS, TBT
  • Tests initial load performance
  • Clears cache before each run
  • Best for landing pages

Timespan

Interaction Mode

Records performance during an arbitrary time period, including user interactions.

  • Captures post-load CLS & INP
  • Measures multi-step user flows
  • Great for SPAs and forms
  • Scripted via Puppeteer
📷

Snapshot

Point-in-Time Mode

Audits the current page state without triggering a reload or navigation.

  • Tests dynamically loaded content
  • Audits modals, dropdowns, tabs
  • No navigation overhead
  • A11y checks on current DOM
07 — CI/CD Integration
# .github/workflows/lighthouse-ci.yml
name: Lighthouse CI
on: [push, pull_request]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Build application
        run: npm ci && npm run build

      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v12
        with:
          runs: 3                    # Average 3 runs
          configPath: './lighthouserc.json'
          uploadArtifacts: true

      - name: Assert thresholds
        run: npx @lhci/cli assert    # Fail if below budget
08 — Chrome DevTools Integration
STEP 1

Open DevTools

Press F12 or right-click and select "Inspect"

STEP 2

Lighthouse Tab

Click the "Lighthouse" tab in DevTools panel

STEP 3

Configure

Select categories, device type, and throttling mode

STEP 4

Analyze

Click "Analyze page load" and wait for results

STEP 5

Review Report

Explore scores, diagnostics, and recommendations

Tip: Run audits in Incognito Mode to avoid browser extension interference. Clear storage before each run for consistent results.
09 — PageSpeed Insights vs Lighthouse
Feature Lighthouse PageSpeed Insights
Data SourceLab data onlyLab + real-world CrUX data
AccessCLI, Node API, DevToolsWeb browser (any device)
Categories5 (incl. PWA)4 (no PWA)
Custom ConfigYesNo
Custom AuditsYes (plugins)No
Field DataNoYes (28-day P75)
CI/CD IntegrationLighthouse CIAPI only
ConnectionSimulated throttlingFast + simulated
Offline UseYesNo
10 — Treemap Feature
JavaScript Bundle Visualization

The Lighthouse Treemap visualizes JavaScript composition. Box sizes represent relative script sizes. Red-striped areas indicate unused code — potential candidates for code splitting.

vendor.js312 KB
app.js186 KB
charts.js98 KB
utils.js45 KB
lodash.js72 KB
router.js34 KB
auth.js28 KB
Used code Unused code
11 — Performance Budgets
budget.json
{
  "resourceBudgets": [
    { "resourceType": "script",
      "budget": 150 },
    { "resourceType": "image",
      "budget": 200 }
  ],
  "timingBudgets": [
    { "metric": "interactive",
      "budget": 3000 },
    { "metric": "first-contentful-paint",
      "budget": 1000 }
  ]
}
Budget vs Actual
Scripts
128 KB
Images
220 KB
TTI
2.2s
FCP
950ms
= budget limit
12 — Stack Packs

Lighthouse auto-detects your technology stack and provides framework-specific optimization advice instead of generic recommendations.

WordPress
React
Angular
Vue.js
Next.js
Nuxt
AMP
Magento
13 — Severity Classification

Critical

Impact of 300ms+ on load time, or 150KB+ wasted bytes, or any audit score below 50. These demand immediate attention.

Warning

Impact of 100ms+ on load time, or 50KB+ wasted bytes, or any audit score below 90. Worth fixing for meaningful gains.

Informational

Minor optimizations with smaller impact. Low-priority improvements that contribute to overall polish.

Quick Reference

Good90 – 100
Needs Work50 – 89
Poor0 – 49
LCP< 2.5s
CLS< 0.1
INP< 200ms
FCP< 1.8s
TBT< 200ms