Google's Core Web Vitals are real performance metrics that map to user experience. They are also surrounded by enough SEO marketing language that it can be hard to understand what they actually measure. Let me cut through that.
LCP — Largest Contentful Paint
LCP measures how long it takes for the largest visible element (usually a hero image or main heading) to render on screen. Target: under 2.5 seconds.
The most common causes of poor LCP:
- Unoptimized images — serve next-gen formats (WebP, AVIF). Compress aggressively. Add explicit width and height attributes so the browser can reserve space.
- Render-blocking resources — scripts and stylesheets that block the browser from painting anything until they load.
- Slow server response — if your TTFB (Time To First Byte) is over 600ms, LCP will almost certainly fail. Use a CDN.
<!-- Always add explicit dimensions to prevent layout shift -->
<img src="/hero.webp" width="1200" height="630" loading="eager" fetchpriority="high" />INP — Interaction to Next Paint
INP replaced FID in 2024. It measures the time from a user interaction (click, tap, key press) to when the browser visually responds. Target: under 200 milliseconds.
Poor INP is almost always caused by long JavaScript tasks blocking the main thread. Debug it with Chrome DevTools Performance panel — look for tasks over 50ms.
Common fixes:
- Break long synchronous loops into smaller chunks with
setTimeoutorrequestIdleCallback - Defer non-critical JavaScript
- Move heavy computation to Web Workers
CLS — Cumulative Layout Shift
CLS measures visual instability — elements jumping around as the page loads. Target: under 0.1.
The classic cause is images or ads loading without reserved space, pushing content down. The fix is always the same: reserve space for content before it loads.
/* Reserve space for an ad unit before it loads */
.ad-container {
min-height: 90px; /* Never let this be 0 */
width: 100%;
}The Fastest Way to Debug All Three
Run Lighthouse in Chrome DevTools (incognito mode, to avoid extensions interfering). It will flag specific elements causing each metric to fail, not just tell you the score.
Then check PageSpeed Insights with your actual production URL for field data — real measurements from actual users visiting your site.