# Core Web Vitals — Web Performance Optimization

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

> Google's essential performance metrics: LCP, FID, and CLS that 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.

## First Input Delay (FID)

**FID** measures delay between user interaction and browser response. Target: < 100ms. Low FID ensures the page feels responsive and interactive.

## 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 web-vitals library: `import {getCLS, getFID, getLCP} 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?

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