What is Lighthouse?

  • Open-source auditing tool built into Chrome DevTools.
  • Provides reports on:
  • Performance
  • Accessibility
  • Best Practices
  • SEO
  • Progressive Web Apps (PWA)

Running Lighthouse

  1. Open Chrome → DevTools (F12).
  2. Go to Lighthouse tab.
  3. Choose categories (Performance, SEO, etc.).
  4. Select device (Mobile or Desktop).
  5. Run the audit → Get a score (0–100).

Common Performance Bottlenecks

  1. Large JS Bundles
  • Fix: Code splitting, tree shaking.
  1. Unoptimized Images
  • Fix: Use WebP/AVIF, responsive images.
  1. Render-blocking resources
  • Fix: Defer non-critical JS, preload critical CSS.
<link rel="preload" href="/styles.css" as="style">
<script src="/app.js" defer></script>
  1. Too many network requests
  • Fix: Bundle files, use caching/CDN.

CI/CD Integration with Lighthouse

Run Lighthouse in GitHub Actions:

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [push]

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: treosh/lighthouse-ci-action@v9
        with:
          urls: "https://example.com"
          configPath: "./lighthouserc.json"

Best Practices

  • Aim for 90+ scores in performance & accessibility.
  • Use Lighthouse CI in pipelines.
  • Test both desktop & mobile views.