Core Web Vitals: The Complete Guide for Developers

Core Web Vitals are Google’s standardized set of metrics for measuring real-world user experience on the web. They’re not just SEO signals — they’re genuine indicators of how fast and stable your site feels to visitors. If your scores are poor, users are having a bad experience, and Google knows it.

Core Web Vitals have been a confirmed ranking factor since Google’s 2021 Page Experience update. The current three metrics — LCP, CLS, and INP — have been in effect since March 2024, when INP replaced FID. Getting them right matters for both organic traffic and conversion rates.

The Three Core Web Vitals

LCP — Largest Contentful Paint

LCP measures how long it takes for the largest visible element on the page to render. This is typically a hero image, a large heading, or a banner. Google’s threshold:

• Good: Under 2.5 seconds
• Needs improvement: 2.5–4 seconds
• Poor: Over 4 seconds

LCP is the most impactful metric for first impressions. A slow LCP means users are staring at a partially loaded page.

CLS — Cumulative Layout Shift

CLS measures visual stability — specifically, how much the page layout shifts unexpectedly while loading. Ever gone to click a button and had an ad load above it, sending your tap somewhere you didn’t intend? That’s a layout shift.

• Good: Under 0.1
• Needs improvement: 0.1–0.25
• Poor: Over 0.25

CLS is scored as a unitless number. Since 2021, CLS reports the largest session window of layout shifts — the biggest burst within a 5-second window, with at least a 1-second gap between bursts. Each individual shift is scored as impact fraction × distance fraction.

INP — Interaction to Next Paint

INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. It measures responsiveness across all interactions (clicks, taps, keyboard input) throughout the page lifecycle, not just the first one.

• Good: Under 200ms
• Needs improvement: 200–500ms
• Poor: Over 500ms

Poor INP usually means too much JavaScript is blocking the main thread.

How Google Measures Core Web Vitals

There are two ways Core Web Vitals get measured:

Lab data — Synthetic measurements from a controlled environment. Tools like Lighthouse and debugutils.dev run a test in a real Chrome browser under specific conditions. Lab tools measure TBT (Total Blocking Time) as a proxy for INP — INP itself is a field-only metric measured from real users.

Field data — Real measurements from actual users collected via the Chrome User Experience Report (CrUX). This data is what Google actually uses for ranking.

The gap between lab and field can be significant. A page might score 85 in a lab test but have poor field data because real users are on slow mobile connections.

Why Your Core Web Vitals Might Be Failing

The most common causes:

For LCP:

• Large, unoptimized hero images loaded from a remote origin
• Render-blocking JavaScript or CSS delaying the browser
• Slow server response times (high TTFB)
• No fetchpriority="high" on the LCP image

For CLS:

• Images and embeds without explicit width/height attributes
• Late-loading ads or banners that push content down
• Web fonts that cause layout reflow (FOIT/FOUT)
• Dynamically injected content above existing content

For INP:

• Heavy JavaScript bundles blocking the main thread
• Long tasks (tasks over 50ms) during interactions
• Third-party scripts running during user interactions
• Unoptimized event handlers

How to Check Your Core Web Vitals

Run a free speed test on debugutils.dev to get a complete report including:

• Your current LCP, CLS, and INP scores from both lab and field data
• CrUX data showing how real users experience your site
• The specific LCP element (so you know exactly what’s slow)
• Prioritized recommendations with estimated time savings

Unlike Google PageSpeed Insights, you’ll also get the request waterfall, filmstrip, and video recording — so you can see exactly where time is being lost.

Improving Your Scores

There’s no single fix for Core Web Vitals — the right intervention depends on your specific bottlenecks. Start by identifying your worst metric, then dig into the root cause.

For most sites, LCP is the priority. Optimizing your hero image — converting to WebP/AVIF, serving from a CDN, adding fetchpriority="high" — tends to have the biggest impact.

Run a test today and see exactly where your site stands.