Core Web Vitals: What They Are, How to Measure Them, and How to Fix Them

What Are Core Web Vitals?

Core Web Vitals are a set of specific page experience metrics that Google uses as a ranking signal. Introduced in 2021, they measure real-world user experience β€” specifically loading performance, interactivity and visual stability.

The Three Core Web Vitals

LCP β€” Largest Contentful Paint

LCP measures how long it takes for the largest visible element (usually a hero image or headline) to load. It’s a proxy for perceived load speed β€” how quickly does the page feel ready?

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

How to improve LCP:

  • Optimise and compress images (use WebP format)
  • Preload your LCP element using <link rel=”preload”>
  • Use a CDN to reduce server response time
  • Remove render-blocking resources
  • Use lazy loading for off-screen images only

INP β€” Interaction to Next Paint

INP (which replaced FID in 2024) measures overall responsiveness β€” how quickly does the page respond to all user interactions, not just the first one?

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

How to improve INP:

  • Reduce JavaScript execution time
  • Break up long tasks (over 50ms)
  • Use web workers for heavy computations
  • Minimise third-party scripts

CLS β€” Cumulative Layout Shift

CLS measures visual stability β€” how much does the page layout shift unexpectedly during loading? Ads or images loading without reserved space cause high CLS.

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

How to improve CLS:

  • Always specify width and height attributes on images and videos
  • Reserve space for ads with CSS
  • Avoid inserting content above existing content
  • Use transform animations instead of layout-triggering ones

How to Measure Core Web Vitals

  • Google Search Console β†’ Core Web Vitals report (real user data)
  • PageSpeed Insights β€” lab + field data per URL
  • Chrome DevTools Lighthouse β€” lab data for any page
  • CrUX Dashboard β€” historical trends