lighthouse-audit

lighthouse-audit

Run Lighthouse performance audits on deployed websites. Checks Performance, Accessibility, Best Practices, and SEO scores.

Installation

# Lighthouse CLI (optional, for local audits)
npm install -g lighthouse

# agent-browser for visual testing
npm install -g agent-browser
agent-browser install

Quick Audit (CLI)

# Run Lighthouse audit
npx lighthouse https://example.com --output=json --output-path=/tmp/report.json

# Extract scores
cat /tmp/report.json | jq '{
  performance: (.categories.performance.score * 100 | round),
  accessibility: (.categories.accessibility.score * 100 | round),
  bestPractices: (.categories["best-practices"].score * 100 | round),
  seo: (.categories.seo.score * 100 | round)
}'

Detailed Audit

# Full audit with all categories
npx lighthouse https://example.com \
  --output=json \
  --output-path=/tmp/lighthouse.json \
  --chrome-flags="--headless" \
  --only-categories=performance,accessibility,best-practices,seo

# Extract scores and metrics
cat /tmp/lighthouse.json | jq '{
  scores: {
    performance: (.categories.performance.score * 100 | round),
    accessibility: (.categories.accessibility.score * 100 | round),
    bestPractices: (.categories["best-practices"].score * 100 | round),
    seo: (.categories.seo.score * 100 | round)
  },
  metrics: {
    FCP: .audits["first-contentful-paint"].displayValue,
    LCP: .audits["largest-contentful-paint"].displayValue,
    TBT: .audits["total-blocking-time"].displayValue,
    CLS: .audits["cumulative-layout-shift"].displayValue,
    SpeedIndex: .audits["speed-index"].displayValue
  }
}'

PageSpeed Insights (Visual)

# Open PageSpeed Insights
agent-browser open "https://pagespeed.web.dev/analysis?url=https://example.com" --session lighthouse

# Wait for analysis to complete
sleep 20

# Take screenshot of results
agent-browser screenshot /tmp/lighthouse-results.png --session lighthouse
agent-browser close --session lighthouse