Web Performance

# Web Performance

## Core Web Vitals (2024)
- **LCP** (Largest Contentful Paint) < 2.5s
- **INP** (Interaction to Next Paint) < 200ms (replaced FID)
- **CLS** (Cumulative Layout Shift) < 0.1

## LCP improvements
- Preload hero image: `<link rel="preload" as="image" href="hero.avif">`
- Use AVIF/WebP + `<picture>` fallback
- Serve from CDN with `Cache-Control: max-age=31536000, immutable`
- `fetchpriority="high"` on hero image
- Inline critical CSS; defer non-critical

## INP improvements
- Break long tasks (>50ms): `scheduler.yield()` or `setTimeout(fn, 0)`
- Debounce expensive event handlers
- Avoid forced reflow: don't interleave DOM reads and writes
- `will-change: transform` for GPU-composited animations (use sparingly)

## CLS improvements
- Always set `width` + `height` on images and video
- Reserve space for ads with `min-height`
- Avoid injecting content above existing content

## Resource loading
- `<link rel="preconnect">` for 3rd-party origins
- `<img loading="lazy">` for below-fold images
- Code split: dynamic `import()` for routes and heavy components

## Caching
- Hashed assets: `Cache-Control: immutable`
- HTML: `Cache-Control: no-cache`
- APIs: ETags + `Last-Modified`

## Analysis
- `webpack-bundle-analyzer` / `vite-bundle-visualizer`
- Lighthouse CI in GitHub Actions
- `npm ls <package>` to find duplicates