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