Google's Core Web Vitals have been a ranking signal since 2021, but most teams still treat them as abstract compliance requirements rather than real user experience metrics. That's a mistake — because the behaviors they measure are the same behaviors that cause users to abandon your site, your product, and your funnel.
Each metric captures something specific about how a page feels to use. Understanding what they actually measure — not just what score to aim for — is the difference between fixing the metric and fixing the problem.
LCP: Largest Contentful Paint
LCP measures when the largest visible element in the viewport finishes loading. On most pages that's either a hero image, a large block of text, or a video thumbnail. It's the closest proxy to 'how long before the page felt like it was ready' — which is what users actually experience.
- Good: under 2.5 seconds. Needs improvement: 2.5–4.0s. Poor: over 4.0s
- The most common LCP killers: unoptimized hero images, render-blocking resources, slow server response time
- The fastest LCP fix is almost always the image — compress it, serve WebP, add fetchpriority='high' to the LCP image element
- Server response time (TTFB) sets the floor — if TTFB is over 600ms, no amount of image optimization will get you to Good
CLS: Cumulative Layout Shift
CLS measures unexpected movement of page elements after the initial render. It's the experience of reading a paragraph and having it jump down because an ad loaded above it. Or tapping a button and missing because the page shifted in the 200ms before your finger made contact.
CLS doesn't just annoy users — it costs conversions. A button that shifts at the moment of click is a CTA that doesn't register.
The most common CLS causes: images without explicit width and height attributes, late-loading fonts that cause text to reflow, dynamically injected content above existing content (banners, cookie notices, chat widgets), and web fonts loaded without a font-display strategy.
INP: Interaction to Next Paint
INP replaced First Input Delay in 2024. Where FID measured only the delay before the browser began processing an interaction, INP measures the entire duration — from input event to the next paint that reflects the result of that input. It's the lag you feel when you click a button and the page takes 300ms to respond.
INP failures are almost always JavaScript problems. Long tasks on the main thread — tasks that take more than 50ms to execute — block the browser from responding to user input. Common culprits: hydration cost from large client-side components, heavy analytics and tag manager payloads, and unoptimized event handlers that do expensive DOM operations.
Which one to fix first
If your site has all three failing, fix LCP first. It has the largest direct impact on bounce rate and the most straightforward fixes. CLS second — layout shift is the metric that breaks CTAs directly. INP third — it matters most for interactive products and less for primarily content-based sites.
Measure before you fix. The PageSpeed Insights API, the CrUX dashboard, and Search Console's Core Web Vitals report all show field data from real users. Lab data from Lighthouse is useful for debugging but not the same as what users actually experience on your URLs.