What Are Core Web Vitals?

Core Web Vitals are Google's standardized metrics for measuring real-world user experience on the web. They focus on three dimensions: loading speed, interactivity, and visual stability. Since 2021, they've been a ranking factor in Google Search, but more importantly, they correlate strongly with user satisfaction and conversion rates.

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element to render — typically a hero image, heading, or video thumbnail. It answers the user's implicit question: "Has the page loaded?"

Target: Under 2.5 seconds.

Common causes of poor LCP:

• Slow server response time. If your TTFB (Time to First Byte) is over 600ms, everything downstream is delayed. Consider a CDN, edge rendering, or server-side caching.
• Render-blocking resources. Large CSS or JavaScript files that must download and parse before the browser can paint anything. Use code splitting and critical CSS extraction.
• Unoptimized images. An uncompressed 3MB hero image will always be slow. Use modern formats (WebP/AVIF), proper sizing, and fetchpriority="high".

Interaction to Next Paint (INP)

INP replaced FID (First Input Delay) in March 2024 as the responsiveness metric. While FID only measured the delay of the first interaction, INP tracks all interactions throughout the page lifecycle and reports the worst one (with some outlier adjustment).

Target: Under 200 milliseconds.

Common causes of poor INP:

• Long JavaScript tasks. Any task that blocks the main thread for more than 50ms can delay user interactions. Break up heavy computations with requestIdleCallback or web workers.
• Excessive re-renders. In React apps, unnecessary re-renders from poorly memoized components or state changes that cascade through the tree are a common INP killer.
• Heavy event handlers. Click handlers that trigger synchronous layout calculations, large state updates, or complex DOM mutations.

Cumulative Layout Shift (CLS)

CLS measures how much the page's visual content shifts unexpectedly during loading. You've experienced this when you try to click a link and the page jumps, causing you to click something else instead.

Target: Under 0.1.

Common causes of poor CLS:

• Images without dimensions. Always set width and height attributes or use CSS aspect-ratio.
• Dynamically injected content. Ads, cookie banners, and notification bars that push content down after initial render.
• Web fonts causing FOUT/FOIT. Use font-display: swap and ensure your fallback font has similar metrics to minimize the shift when the custom font loads.

Measuring in the Real World

Lab tools like Lighthouse give you a controlled snapshot, but real user metrics (RUM) tell you what your actual users experience. Use the web-vitals JavaScript library to collect field data, and check Google Search Console's Core Web Vitals report for your site's real-world performance across all pages.