Google Lighthouse
Open-source automated tool for improving the quality of web pages. Audits performance, accessibility, best practices, SEO, and PWA compliance.
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.
# 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
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();
Navigation
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
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
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
# .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
Open DevTools
Press F12 or right-click and select "Inspect"
Lighthouse Tab
Click the "Lighthouse" tab in DevTools panel
Configure
Select categories, device type, and throttling mode
Analyze
Click "Analyze page load" and wait for results
Review Report
Explore scores, diagnostics, and recommendations
| Feature | Lighthouse | PageSpeed Insights |
|---|---|---|
| Data Source | Lab data only | Lab + real-world CrUX data |
| Access | CLI, Node API, DevTools | Web browser (any device) |
| Categories | 5 (incl. PWA) | 4 (no PWA) |
| Custom Config | Yes | No |
| Custom Audits | Yes (plugins) | No |
| Field Data | No | Yes (28-day P75) |
| CI/CD Integration | Lighthouse CI | API only |
| Connection | Simulated throttling | Fast + simulated |
| Offline Use | Yes | No |
The Lighthouse Treemap visualizes JavaScript composition. Box sizes represent relative script sizes. Red-striped areas indicate unused code — potential candidates for code splitting.
{
"resourceBudgets": [
{ "resourceType": "script",
"budget": 150 },
{ "resourceType": "image",
"budget": 200 }
],
"timingBudgets": [
{ "metric": "interactive",
"budget": 3000 },
{ "metric": "first-contentful-paint",
"budget": 1000 }
]
}
Lighthouse auto-detects your technology stack and provides framework-specific optimization advice instead of generic recommendations.
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.