Core Web Vitals Explained: How to Improve LCP, INP and CLS

Whether a site feels fast decides whether visitors stay. Google measures that feeling with three metrics called Core Web Vitals. Here's what each one means and how to improve it.

#The three metrics

A page passes when at least 75% of real visits meet these thresholds. INP replaced First Input Delay (FID) in March 2024.

#Measuring

• Field data comes from real users — see the Core Web Vitals report in Google Search Console or the top of PageSpeed Insights. This is what matters for ranking.
• Lab data comes from tools like Lighthouse. It's great for diagnosing issues but doesn't fully reflect real-world conditions.

#Improving LCP

1. Speed up the server response with a CDN or edge runtime and lean server work.
2. Make the LCP image discoverable early: use an <img> element with fetchpriority="high", never lazy-load it.
3. Shrink it: modern formats (WebP/AVIF) and responsive srcset.
4. Remove render-blocking resources: defer non-critical JS, trim unused CSS, use font-display: swap.

#Improving INP

• Break up long tasks (anything over 50 ms) so the main thread can respond.
• Ship less JavaScript: audit libraries and third-party scripts.
• Lean on server components so non-interactive UI doesn't hydrate.
• Give instant feedback before doing heavy work.

#Improving CLS

• Reserve space for images and embeds with width/height or aspect-ratio.
• Avoid inserting content above existing content — banners should overlay, not push.
• Match fallback font metrics to your web font; next/font does this automatically.

#Quick checklist

• LCP image uses <img> with high fetch priority
• All media has explicit dimensions
• Images served as WebP/AVIF
• Unused JS/CSS removed, third-party scripts reviewed
• Site served from a CDN/edge
• Search Console's Core Web Vitals report reviewed regularly

Need a performance audit? Let's talk.