Web Fundamentals

Core Web Vitals: LCP, INP & CLS

mediumWeb Fundamentals

Core Web Vitals: LCP, INP & CLS

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRLCP < 2.5s • INP < 200ms • CLS < 0.1. Optimize loading, interactivity, and visual stability.
Very High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

Core Web Vitals are real-user metrics that measure loading performance (LCP), interactivity (INP), and visual stability (CLS). They directly impact SEO rankings and user experience. Understanding thresholds and optimization techniques is essential for modern frontend performance work.

LCP = How fast does the main content appear? INP = How responsive does the page feel when I interact? CLS = Does the page jump around annoyingly while I'm reading? Good scores mean happy users and better search rankings.

Page Load
LCP: Largest content visible
INP: Smooth interactions
CLS: Stable layout throughout

1Largest Contentful Paint (LCP)

Measures when the largest visible element (usually hero image or main text) finishes rendering. Target: < 2.5s.

lcp-optimization.htmlhtml
<link rel="preload" as="image" href="hero.webp">
<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="600" alt="Hero">
</picture>

2Interaction to Next Paint (INP)

Measures the latency of user interactions (click, tap, keypress). Target: < 200ms. Replaces FID. Focus on breaking long tasks and minimizing main-thread work.

3Cumulative Layout Shift (CLS)

Measures unexpected layout shifts. Target: < 0.1. Prevent by reserving space for images, ads, and dynamic content.

Key Takeaways
  • ✓LCP < 2.5s, INP < 200ms, CLS < 0.1 are the targets
  • ✓Optimize images, use CDN, and preload critical resources for LCP
  • ✓Break long tasks, defer JS, and use Web Workers for INP
  • ✓Reserve space with dimensions and placeholders for CLS
  • ✓Measure real users with web-vitals library + RUM
  • ✓Core Web Vitals directly influence SEO rankings and user satisfaction