Core Web Vitals are Google's field metrics for loading, interactivity, and visual stability. They became a ranking signal in 2021, but the reason to fix them is simpler: slow first paint, delayed clicks, and jumping layouts lose users before your product gets a chance.
This guide covers what LCP, FID/INP, and CLS measure, how to diagnose them with Chrome tools, and the concrete frontend changes that usually move the numbers.
What the three metrics measure
Largest Contentful Paint (LCP)
LCP is how long until the largest visible element in the viewport finishes rendering. Common LCP nodes are a hero image, a big heading block, or a poster frame. Aim for 2.5 seconds or less on real devices and networks, on your office Wi-Fi alone.
If LCP is late, the page feels empty. Users bounce. Fix the critical request path for that largest element before you tune micro-animations.
Interaction delay (FID and INP)
First Input Delay (FID) measured the gap between the first tap or click and when the main thread could start handling it. Interaction to Next Paint (INP) is the broader metric Chrome now emphasizes: how long interactions take across the page lifetime. Target under 100 ms for FID-era goals, and treat long INP as main-thread congestion (heavy JS, long tasks, hydration storms).
Cumulative Layout Shift (CLS)
CLS scores unexpected movement of visible content. A good score is under 0.1. Ads, web fonts, images without dimensions, and late-injected banners are the usual offenders. If users miss buttons because the layout jumped, that is CLS.
Measure with field data, beyond lab hopes
Use both:
- Chrome DevTools → Performance / Lighthouse for a reproducible lab trace.
- CrUX / Search Console Core Web Vitals report for what real users saw.
- web-vitals library in production when you need attribution on your own traffic.
Lab scores can look fine while mobile field LCP fails. Optimize for the field.
Fix LCP first
Typical wins, in order:
- Preload the LCP image or font that actually paints in the viewport. Do not preload everything.
- Compress and size images for the display width. Prefer modern formats (AVIF/WebP) with a fallback.
- Remove render-blocking work above the fold: unused CSS, synchronous third-party scripts, giant icon packs.
- Server-render or stream the hero in Next.js App Router so the LCP node is in the first HTML, not waiting on client waterfalls.
- Cache aggressively at CDN and HTTP layers for static heroes.
If your LCP node is a client-only carousel, reconsider. A static first frame that hydrates later almost always wins.
Fix interaction delay
- Break up long tasks (scheduler.yield, requestIdleCallback, or smaller bundles).
- Cut unused JavaScript. Bundle analysis beats guessing.
- Defer non-critical scripts (analytics, chat widgets) until after hydration or interaction.
- Prefer progressive enhancement for secondary widgets so the first click on primary UI is not blocked.
On React/Next.js apps, watch hydration cost. Shipping less client JS to the first route is often the largest INP win.
Fix CLS
- Set width and height (or aspect-ratio boxes) on images and embeds.
- Reserve space for ads and banners. Do not inject them on top of content without a placeholder.
- Load fonts with font-display: swap or optional, and match fallback metrics to reduce reflow.
- Avoid inserting DOM above existing content after paint.
A practical weekly loop
- Pull the worst URLs from Search Console.
- Reproduce on a mid-tier mobile throttle in DevTools.
- Identify the LCP node and the long tasks around first input.
- Ship one change (image, script deferral, or dimension fix).
- Re-check field data over the next crawl window.
Do not chase a perfect Lighthouse screenshot while field LCP on mobile still sits above 4 seconds. The metric that matters is what users experienced on the URLs that get traffic.
What to skip
- Micro-optimizing unused routes.
- Premature edge complexity when the hero is a 3 MB PNG.
- Blaming "Google changed the algorithm" when the page still shifts under the tap target.
Core Web Vitals are a diagnostic shorthand. Treat them as production UX bugs with numbers, fix the critical path, and re-measure on real devices.