performance-and-web-vitals

# Performance and Web Vitals ## Run a Lighthouse Audit ```bash # CLI audit — outputs JSON and HTML report npx lighthouse https://example.com --output html --output-path ./lighthouse-report.html # Headless, useful in CI npx lighthouse https://example.com --chrome-flags="--headless" --output json --output-path ./report.json # Audit specific categories only npx lighthouse https://example.com --only-categories=performance,accessibility,seo ``` Or open Chrome DevTools → Lighthouse tab → Analyse page load. **Target scores:** | Category | Target | |---|---| | Performance | ≥ 90 | | Accessibility | 100 | | Best Practices | ≥ 95 | | SEO | ≥ 95 | --- ## Core Web Vitals ### LCP — Largest Contentful Paint *How fast does the main content appear?* **Target: ≤ 2.5s** LCP measures when the largest visible element (hero image, heading, video poster) renders. It is the user's perception of "did the page load?" **Common causes and fixes:** | Cause | Fix | |---|---| | Unoptimised hero image | Use WebP/AVIF, correct size, `fetchpriority="high"` | | Image not preloaded | `<link rel="preload" as="image" href="hero.webp">` | | Render-blocking CSS/JS | Defer non-critical JS, inline critical CSS | | Slow server response | CDN, caching headers, edge delivery | | Web font blocking render | `font-display: swap` or `optional` | ```html <!-- Preload LCP image --> <link rel="preload" as="image" href="hero.webp" fetchpriority="high"> <!-- LCP image: no lazy loading --> <img src="hero.webp" alt...