Core Web Vitals

LCP, INP, CLS measurement, optimization techniques, real user monitoring.
performancefrontendwebseo
# Core Web Vitals

## Three metrics
| Metric | What                     | Good    | Poor    |
|--------|--------------------------|---------|--------:|
| LCP    | Largest Contentful Paint | < 2.5s  | > 4.0s  |
| INP    | Interaction to Next Paint| < 200ms | > 500ms |
| CLS    | Cumulative Layout Shift  | < 0.1   | > 0.25  |

## Measure
```js
import { onLCP, onINP, onCLS } from 'web-vitals'
onLCP(console.log)
onINP(console.log)
onCLS(console.log)
```
Tools: Chrome DevTools → Performance, Lighthouse, PageSpeed Insights, CrUX.

## Optimize LCP
1. **Preload LCP image**: `<link rel="preload" as="image" href="hero.webp">`
2. **Priority hints**: `<img fetchpriority="high" ...>`
3. **SSR/SSG** the critical HTML — don't require JS to render LCP element.
4. **Font optimization**: `font-display: swap` + preload font files.
5. **Minimize TTFB**: CDN, edge rendering, server caching.
```html
<head>
  <link rel="preload" as="image" href="/hero.webp" />
  <link rel="preload" as="font" href="/font.woff2" type="font/woff2" crossorigin />
</head>
```

## Optimize INP
1. **Break long tasks**: `requestIdleCallback`, `scheduler.yield()`.
2. **Debounce input handlers**: don't process every keystroke.
3. **useTransition** for non-urgent React updates.
4. **Web Workers** for heavy computation.
```tsx
const [isPending, startTransition] = useTransition()
function handleSearch(q: string) {
  startTransition(() => setResults(filterBigList(q)))
}
```

## Optimize CLS
1. **Always set width/height** on images and videos.
2. **Reserve space** for dynamic content (ads, embeds).
3. **Avoid injecting content above existing content**.
4. **Use `transform` animations** instead of layout-triggering properties.
```css
/* BAD: triggers layout */
.box { top: 10px; left: 10px; }
/* GOOD: only composite */
.box { transform: translate(10px, 10px); }
```

## Next.js built-in
- `next/image`: auto width/height, lazy load, priority.
- `next/font`: zero CLS font loading.
- `@next/third-parties`: optimized Google Tag Manager / Analytics.
API: /api/skills/core-web-vitals