# Core Web Vitals — Web Performance Optimization

Source: https://www.skillbyai.com/en/web-performance/web-perf-02

> Google's essential performance metrics: LCP, INP and CLS, which define user experience quality.

## Largest Contentful Paint (LCP)

**LCP** measures when the largest visible content element loads. Target: < 2.5 seconds. Good LCP indicates that the main content appears quickly, improving perceived performance.

## Interaction to Next Paint (INP)

**INP** measures how quickly the page responds to user interactions (clicks, taps, key presses) across the whole visit. Target: ≤ 200ms. It replaced First Input Delay (FID) as a Core Web Vital in March 2024.

## Cumulative Layout Shift (CLS)

**CLS** measures unexpected layout changes. Target: < 0.1. Prevent elements from suddenly moving, which frustrates users and breaks interactions.

## Monitoring Core Web Vitals

Use the web-vitals library: `import {onCLS, onINP, onLCP} from 'web-vitals'`. Google CrUX (Chrome User Experience Report) provides real-user data. Track these metrics in your analytics.

Quick check

**Quiz:** What does CLS measure?

- [ ] Page load time
- [ ] Input response time
- [x] Unexpected layout changes
- [ ] Server response time

*Answer:* Unexpected layout changes. CLS scores how much visible content shifts unexpectedly while the page loads.