Lighthouse Performance Audit Guide

Lighthouse is Google's open-source tool for auditing web performance, accessibility, SEO, and best practices. Run it from Chrome DevTools, the CLI, or CI/CD pipelines to catch regressions before they ship.

CLI Installation & Basic Usage

# Install globally
npm install -g lighthouse

# Basic audit — opens HTML report in browser
lighthouse https://example.com

# Headless (no browser window) + HTML report
lighthouse https://example.com \
  --chrome-flags="--headless" \
  --output html \
  --output-path ./lighthouse-report.html

# JSON output for programmatic processing
lighthouse https://example.com \
  --output json \
  --output-path ./report.json \
  --quiet

# Audit with custom throttling (disable throttling for unthrottled score)
lighthouse https://example.com \
  --throttling-method=provided \
  --output html

DevTools Lighthouse Panel

• Open Chrome DevTools → Lighthouse tab
• Select categories: Performance, Accessibility, Best Practices, SEO
• Choose device: Mobile (default) or Desktop
• Click Analyze page load — DevTools reloads the page with throttling
• Expand each audit to see specifics and fix suggestions
• Use Throttling: Simulated Slow 4G to match Lighthouse CLI behavior

Score Categories

Core Web Vitals in Lighthouse

Top Performance Opportunities

• Eliminate render-blocking resources — Add defer/async to scripts, inline critical CSS
• Reduce unused JavaScript — Code-split with dynamic imports, tree-shake dependencies
• Properly size images — Serve responsive images with srcset, use WebP/AVIF
• Reduce server response time (TTFB) — Enable CDN, Brotli compression, HTTP/2
• Remove unused CSS — PurgeCSS, CSS Modules, or Tailwind's JIT purge
• Avoid enormous network payloads — Set JavaScript bundle size budget < 200KB gzip

Programmatic Usage (Node.js)

import lighthouse from 'lighthouse';
import * as chromeLauncher from 'chrome-launcher';

async function runAudit(url) {
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
  const result = await lighthouse(url, {
    logLevel: 'error',
    output: 'json',
    port: chrome.port,
    onlyCategories: ['performance'],
  });

  const { lhr } = result;
  console.log(`Performance: ${lhr.categories.performance.score * 100}`);
  console.log(`LCP: ${lhr.audits['largest-contentful-paint'].displayValue}`);
  console.log(`TBT: ${lhr.audits['total-blocking-time'].displayValue}`);
  console.log(`CLS: ${lhr.audits['cumulative-layout-shift'].displayValue}`);

  await chrome.kill();
  return lhr;
}

runAudit('https://example.com');