📊 Web Vitals (LCP, FID, CLS)
performanceadvanced

📊Web Vitals (LCP, FID, CLS)

Core Web Vitals measure real user experience: LCP (loading), FID/INP (interactivity), CLS (visual stability). Google uses them for search ranking.

Log in to track your mastery & progress

1️⃣ Core Web Vitals

MetricMeasuresGood
LCP (Largest Contentful Paint)Loading speed< 2.5s
INP (Interaction to Next Paint)Interactivity< 200ms
CLS (Cumulative Layout Shift)Visual stability< 0.1

FID (First Input Delay) was replaced by INP in 2024. Know both for interviews.

2️⃣ How to Improve Each

LCP (loading)

  • Optimize hero images (WebP, preload)
  • Reduce server response time (TTFB)
  • Eliminate render-blocking resources
  • Use CDN for static assets

INP (interactivity)

  • Break up long tasks (< 50ms)
  • Use scheduler.postTask or requestIdleCallback
  • Avoid synchronous blocking in event handlers
  • Lazy-load heavy components

CLS (visual stability)

  • Always set width/height on images
  • Avoid inserting content above existing content
  • Use CSS aspect-ratio for media
  • Reserve space for ads and iframes

Was this helpful?

Found an issue? Report here

Test your Knowledge

2 questions to cement what you just learned.