Web Vitals — what actually matters (LCP, INP, CLS) and how to optimize each

Three Core Web Vitals as of 2024+:

LCP — Largest Contentful Paint (≤ 2.5s for "good"). Time to paint the largest above-the-fold element (often the hero image or H1). Levers:

• Compress + size the LCP image (AVIF/WebP, srcset, fetchpriority="high").
• Eliminate render-blocking CSS/JS; inline critical CSS for above-the-fold.
• Use a CDN; static-render the page if possible.
• Preconnect to the origin serving the LCP element.

INP — Interaction to Next Paint (≤ 200ms). Replaced FID in March 2024. Worst-case latency between any user input and the next paint. Levers:

• Break long tasks (>50ms) with yieldToMain / scheduler.postTask.
• Move CPU work off the main thread with Web Workers.
• Defer non-critical work (analytics, ads) until after interaction.
• Avoid layout thrash inside event handlers (read-then-write batched).

CLS — Cumulative Layout Shift (≤ 0.1). Sum of unexpected layout shifts during the page lifetime. Levers:

• Always set width/height on images and <video> (lets the browser reserve space).
• Reserve space for ads/embeds.
• Avoid inserting content above existing content (especially banners).
• Use font-display: optional or size-adjust to avoid text reflow on font load.

Measure with the web-vitals library (real users) and Lighthouse / PageSpeed Insights (lab). Real-user numbers from CrUX are what Google ranks on.