Skip to main content

Performance Optimization

Core Web Vitals Optimization

0:00
LearnStep 1/4

Understanding Core Web Vitals

Core Web Vitals: User-Centric Performance

Core Web Vitals measure real user experience. Google uses them as ranking signals, and they directly correlate with user satisfaction and conversion rates.

The Three (Now Four) Vitals

MetricMeasuresGoodPoor
LCP (Largest Contentful Paint)Loading performance≤2.5s>4.0s
INP (Interaction to Next Paint)Interactivity≤200ms>500ms
CLS (Cumulative Layout Shift)Visual stability≤0.1>0.25
FID (First Input Delay)First interactivity (deprecated)≤100ms>300ms

LCP: Largest Contentful Paint

Time until the largest visible element renders. Usually:

  • <img> elements
  • Video poster images
  • Background images via CSS
  • Block-level text elements

Common LCP Issues

INP: Interaction to Next Paint

Time from user interaction to visual response. Replaces FID in 2024.

tsx

CLS: Cumulative Layout Shift

Unexpected layout shifts during page load. Causes: images without dimensions, injected content, web fonts.

tsx
css