| name | performance-audit |
| description | Run Lighthouse audit and verify Core Web Vitals. Use at project end before release. Triggers on "performance", "Lighthouse", "Core Web Vitals", "speed test", "page speed". |
Performance Audit
Verify website performance meets Core Web Vitals standards.
Core Web Vitals Targets
| Metric | Target | What it measures |
|---|---|---|
| LCP | < 2.5s | Largest Contentful Paint (loading) |
| FID | < 100ms | First Input Delay (interactivity) |
| CLS | < 0.1 | Cumulative Layout Shift (stability) |
Audit Process
1. Run Lighthouse
# Using Chrome DevTools
# 1. Open site in Chrome
# 2. DevTools > Lighthouse tab
# 3. Run audit (Mobile + Desktop)
# Or CLI
npx lighthouse https://localhost:3000 --view
2. Check Results
Target Scores:
- Performance: > 90
- Accessibility: > 90
- Best Practices: > 90
- SEO: > 90
3. Common Issues & Fixes
LCP Issues:
- Add
priorityto above-fold images - Preload critical fonts
- Use Next.js Image component
- Enable image optimization
CLS Issues:
- Set explicit width/height on images
- Reserve space for dynamic content
- Avoid layout shifts from fonts
FID Issues:
- Minimize JavaScript bundle
- Use dynamic imports for heavy components
- Defer non-critical scripts
Checklist
Images:
- All images use WebP format
- Above-fold images have
priority - Images have width/height set
- Responsive images use
sizesprop
Fonts:
- Fonts loaded via next/font
- Font display: swap enabled
- No flash of unstyled text
JavaScript:
- No unused dependencies
- Dynamic imports for heavy components
- No render-blocking scripts
General:
- Lighthouse Performance > 90
- No console errors
- Mobile responsive
- HTTPS enabled