Core Web Vitals are Google's way of measuring real-user experience, and they directly influence search rankings. With Interaction to Next Paint (INP) now the official responsiveness metric and LCP thresholds scrutinised more closely by site owners, it's worth understanding exactly what each metric measures and what moves the needle.
Largest Contentful Paint (LCP): Get It Under 2.5 Seconds
LCP measures when the largest visible element in the viewport renders. It's almost always a hero image, a large heading, or a video poster. The most impactful fixes: serve images in WebP or AVIF with correct dimensions, preload the LCP image using <link rel="preload">, eliminate render-blocking resources above the fold, and use a CDN with edge caching. If your LCP element is an image loaded via CSS background-image, switch to an <img> tag — browsers can't discover and prioritise background images as early.
Cumulative Layout Shift (CLS): Reserve Space for Everything
CLS measures unexpected layout movement. The fix is almost always the same: reserve space for content before it loads. Set explicit width and height attributes on all images and iframes. Use CSS aspect-ratio for responsive media. Avoid inserting content above existing content after page load — banner ads and cookie notices are frequent offenders. Font swap is also a common CLS source: use font-display: optional or preload your web fonts.
Interaction to Next Paint (INP): Keep the Main Thread Free
INP replaced FID and is significantly harder to optimise. It measures the latency of all user interactions throughout the page lifecycle, not just the first. The primary causes of poor INP are long tasks blocking the main thread. Audit with Chrome DevTools Performance panel and look for tasks over 50ms. Common culprits: heavy JavaScript execution during scroll, synchronous third-party scripts, and event handlers that do too much work without yielding. The fix is to break long tasks with scheduler.yield() or setTimeout, defer non-critical scripts, and push expensive computation to Web Workers.
Measure Field Data, Not Just Lab Data
Lighthouse and PageSpeed Insights show lab data — a single simulated load on a fast connection. Real users have slower devices, poor connections, and cached states. Use the Chrome User Experience Report (CrUX) or tools like SpeedCurve and Datadog RUM to understand your field data. You can pass lab metrics and still fail in the field if you're not measuring both.
