Core Web Vitals measure real experience: how fast the page becomes useful (LCP), how stable it stays while loading (CLS), and how quickly it responds to clicks and taps (INP). Lab scores help you debug; field data decides rankings and bounce rate. Treat both seriously, but fix causes — not symptoms.
LCP — make the hero paint first
If LCP is slow, find the LCP element in a trace. It’s usually a hero image, H1 block, or large card. Then ask: is it discoverable early, sized correctly, and unblocked by CSS/JS?
- Preload the exact LCP image (same URL the page uses) and serve AVIF/WebP with a fallback.
- Don’t lazy-load above-the-fold media. Lazy-loading the LCP image is a common self-own.
- Inline critical CSS for the first viewport; defer the rest.
- Prefer server-rendered or statically generated HTML for the first paint — client-only heroes lose every time.
INP — keep the main thread free
INP is bad when interactions wait on long tasks. Chat widgets, tag managers, and oversized bundles are usual suspects. Measure with the Performance panel and Interaction to Next Paint tooling, not vibes.
- Break work into chunks under ~50ms; yield to the browser between chunks.
- Load third-party scripts after hydration or on interaction — not in <head> by default.
- Code-split routes and heavy modals; delete dead dependencies from the client bundle.
- Move CPU-heavy work (parsing, transforms) off the main thread when it must run client-side.
CLS — reserve space before paint
- Always set width/height or aspect-ratio on images, videos, and embeds.
- Reserve space for cookie banners, alerts, and late-loading ads.
- Use font-display strategies that don’t shove text around after swap.
- Never inject content above existing content after first paint unless the layout was reserved.
A practical triage order
Fix LCP first if users land on marketing pages. Fix INP first if the product UI feels sticky. Fix CLS when support reports “the button jumped.” Re-measure after each change — stacking five “optimizations” without a baseline wastes a sprint.
Health Mesh stores LCP, INP, CLS, FCP, and TBT on every performance scan so you can see regressions over time instead of only when someone remembers to open DevTools.