What Are Core Web Vitals?

Core Web Vitals are a set of real-world performance metrics defined by Google to measure user experience on the web. They're not just developer benchmarks — they are official Google Search ranking signals. Poor scores can hurt your organic visibility; strong scores are a competitive advantage.

As of 2024, the three Core Web Vitals are:

  • LCP — Largest Contentful Paint (loading performance)
  • CLS — Cumulative Layout Shift (visual stability)
  • INP — Interaction to Next Paint (interactivity, replaced FID in 2024)

LCP — Largest Contentful Paint

LCP measures how long it takes for the largest visible element (usually a hero image or large heading) to render on screen. A good LCP score is under 2.5 seconds.

How to Improve LCP

  • Preload your LCP image using <link rel="preload"> so the browser fetches it immediately.
  • Use modern image formats like WebP or AVIF for significantly smaller file sizes.
  • Eliminate render-blocking resources — defer non-critical JS and CSS.
  • Use a CDN to serve assets from servers geographically close to the user.
  • Set explicit width and height on images so the browser can allocate space without waiting for the file.

CLS — Cumulative Layout Shift

CLS measures how much page content unexpectedly moves during loading. The jarring experience of content jumping when an ad loads above it is a classic CLS problem. A good CLS score is under 0.1.

How to Improve CLS

  • Always set dimensions on images and videos. Without explicit sizes, the browser can't reserve space, causing a shift when the element loads.
  • Reserve space for ads and embeds using a fixed-height container even before content loads.
  • Avoid inserting content above existing content unless responding to a user interaction.
  • Use font-display: swap carefully — swapping fonts can cause shifts. Consider font-display: optional for critical text.
  • Prefer CSS transform animations over layout-affecting properties like top and left.

INP — Interaction to Next Paint

INP replaced First Input Delay (FID) in March 2024. It measures the latency of all interactions (clicks, taps, keyboard input) throughout the page lifecycle, not just the first one. A good INP score is under 200ms.

How to Improve INP

  • Break up long tasks. Any JavaScript task that takes more than 50ms blocks the main thread. Use setTimeout, requestIdleCallback, or the Scheduler API to yield between tasks.
  • Minimize JavaScript execution on interactions — avoid heavy computations in event handlers.
  • Use web workers for expensive, non-UI work to keep the main thread responsive.
  • Audit third-party scripts — analytics, chat widgets, and ad scripts are frequent culprits for INP degradation.
  • Implement virtualization for large lists to avoid re-rendering thousands of DOM nodes.

How to Measure Core Web Vitals

Use these free tools to get accurate data:

  1. PageSpeed Insights — provides both lab data (Lighthouse) and real-world field data (CrUX).
  2. Google Search Console — shows your site's Core Web Vitals aggregated across real users.
  3. Chrome DevTools Performance panel — diagnose specific layout shifts and long tasks.
  4. web-vitals JavaScript library — instrument real user measurement (RUM) directly in your codebase.

The Key Takeaway

Core Web Vitals are not a one-time fix — they require ongoing monitoring. Build performance into your development workflow: measure before and after every deployment, set performance budgets, and treat regressions as bugs. Your users and your search rankings will reflect the investment.