What Are Core Web Vitals?

Core Web Vitals are a set of specific metrics defined by Google to measure real-world user experience on the web. They directly influence your site's ranking in Google Search, making them a critical concern for anyone building professional websites. Understanding these metrics — and knowing how to improve them — is now a fundamental web design skill.

The Three Core Metrics

1. Largest Contentful Paint (LCP)

LCP measures loading performance — specifically, how long it takes for the largest visible element on the page (usually a hero image or heading) to load. A good LCP score is under 2.5 seconds.

How to improve LCP:

  • Optimize and compress hero images
  • Use a Content Delivery Network (CDN)
  • Preload critical resources using <link rel="preload">
  • Eliminate render-blocking CSS and JavaScript

2. Cumulative Layout Shift (CLS)

CLS measures visual stability — how much the page layout jumps around while loading. If a button shifts position just as a user tries to click it, that's a CLS issue. A good CLS score is under 0.1.

How to improve CLS:

  • Always include width and height attributes on images and videos
  • Reserve space for ad slots and embeds
  • Avoid injecting content above existing content after page load
  • Use CSS aspect-ratio for media elements

3. Interaction to Next Paint (INP)

INP (which replaced First Input Delay in 2024) measures interactivity — how quickly the page responds to user interactions like clicks, taps, and keyboard input. A good INP score is under 200 milliseconds.

How to improve INP:

  • Minimize heavy JavaScript execution on the main thread
  • Break up long tasks using setTimeout or the Scheduler API
  • Lazy-load non-critical scripts
  • Avoid excessive DOM size

How to Measure Your Core Web Vitals

Tool Type Best For
Google PageSpeed Insights Free, online Quick audits with actionable tips
Google Search Console Free, ongoing Real-user data over time
Chrome DevTools Free, in-browser Detailed performance profiling
WebPageTest Free, online Advanced multi-location testing

The Designer's Role in Core Web Vitals

Many developers assume Core Web Vitals are purely a technical concern, but designers have enormous influence over these scores. Choosing heavy fonts, designing large hero images, or specifying animations that trigger layout shifts can all tank a site's performance before a single line of JavaScript is written.

Build performance into your design process from day one:

  1. Specify image dimensions in every design handoff
  2. Choose system fonts or lightweight web fonts
  3. Avoid design patterns that require late-loading content above the fold
  4. Test performance prototypes early using Lighthouse