What are Core Web Vitals? SEO Guide for Beginners

Learn what Core Web Vitals mean in SEO, why they matter, and how to use them to improve your search rankings.

Core Web Vitals are a set of three specific metrics Google uses to measure the real-world user experience on your website. They focus on loading performance, responsiveness, and visual stability. The three current metrics are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Google states plainly that "Core Web Vitals are used by our ranking systems," which makes them one of the few performance signals that feed directly into Search ranking (Google Search Central, Understanding page experience).

Why Core Web Vitals Matter for SEO

Google uses Core Web Vitals as part of its page experience signals. Google is careful about how strong this signal is. Its own guidance says "Google Search always seeks to show the most relevant content, even if the page experience is sub-par," and warns that good scores "doesn't guarantee that your pages will rank at the top." The practical reading is that when several pages have similarly helpful content, "having a great page experience can contribute to success in Search." It is the tiebreaker, not the headline (Google Search Central, Understanding page experience).

Beyond rankings, these metrics describe the experience your visitors actually feel. The scores reflect real loading delays, real input lag, and real layout jumps measured on real visits, so improving them tends to improve engagement and reduce frustration even where the ranking effect is small.

You can check your Core Web Vitals in Google Search Console under the "Core Web Vitals" report. It shows you exactly which URLs pass or fail, grouped by mobile and desktop. PageSpeed Insights gives you per-page diagnostics with specific recommendations for fixing issues.

How Core Web Vitals Work

There are three metrics, each measuring a different aspect of user experience.

Largest Contentful Paint (LCP) measures loading performance. It tracks how long it takes for the largest visible content element to render, where that element is usually an <img>, an image inside an <svg>, a <video> poster frame, a block with a CSS url() background image, or a block-level text element. Per web.dev the thresholds are good at 2.5 seconds or less, needs improvement between 2.5 and 4.0 seconds, and poor above 4.0 seconds.

Interaction to Next Paint (INP) replaced First Input Delay (FID) as a stable Core Web Vital on March 12, 2024, when FID was deprecated and removed from the program. INP measures responsiveness across all click, tap, and keyboard interactions during a visit, from input delay through event-handler execution to the next paint. Per web.dev the thresholds are good at 200 milliseconds or less, needs improvement between 200 and 500 milliseconds, and poor above 500 milliseconds.

Cumulative Layout Shift (CLS) measures visual stability. It tracks how much visible content shifts position between rendered frames, scored as impact fraction times distance fraction and aggregated into the worst burst of shifts in a session window. Those annoying jumps when an ad loads and pushes the paragraph you were reading? That is CLS. Per web.dev the thresholds are good at 0.1 or less, needs improvement between 0.1 and 0.25, and poor above 0.25. CLS is unitless, not measured in seconds.

Google collects this data from real users through the Chrome User Experience Report (CrUX). A URL passes when each metric is at or below its good threshold at the 75th percentile of page loads, segmented across mobile and desktop. This means you need real traffic before field metrics appear, and lab tools like Lighthouse can only estimate them.

How to Improve Core Web Vitals on Your Site

Optimize your LCP element - Identify what your largest contentful paint element is (usually the hero image). Compress images, serve them in WebP or AVIF format, and add preload hints for critical resources. Use a CDN to serve assets from servers closer to your users. Lazy load images that are below the fold.
Reduce JavaScript execution time for INP - Heavy JavaScript blocks the main thread and delays interactions. Break up long tasks, defer non-critical scripts, and use code splitting. If you are using a heavy framework like React, consider server-side rendering or switching to something lighter like Astro for content pages.

Set explicit dimensions on all images and embeds for CLS - Always include width and height attributes on images, videos, and iframes. This reserves space in the layout before the asset loads. Use CSS aspect-ratio properties as a backup. Avoid inserting content above existing content after page load.

Implement efficient font loading - Web fonts cause layout shifts when they swap in. Use font-display: swap or font-display: optional. Preload your critical fonts. Consider using system fonts for body text to eliminate the issue entirely.

Minimize render-blocking resources - Inline critical CSS, defer non-critical CSS, and add async or defer attributes to JavaScript files that are not needed for initial render. The faster your HTML skeleton renders, the better your LCP will be.

Common Mistakes to Avoid

Only testing in lab tools like Lighthouse: Lab scores and field scores can differ significantly. Lighthouse might show a perfect 100, but real users on slower connections might have a very different experience. Always check your CrUX data in Search Console for the real picture.
Ignoring mobile performance: Google uses mobile Core Web Vitals for ranking. Your site might score great on desktop but fail on mobile devices with slower processors and connections. Test on actual devices, not just responsive browser windows.
Adding third-party scripts without testing impact: Every analytics tool, chat widget, ad script, and social embed adds weight. A single poorly optimized third-party script can tank your INP score. Audit every external script and remove what you do not absolutely need.

Key Takeaways

Core Web Vitals (LCP, INP, CLS) feed Google's ranking systems and measure real user experience, but content relevance still comes first
Good thresholds are LCP at or under 2.5s, INP at or under 200ms, and CLS at or under 0.1, all measured at the 75th percentile
INP replaced FID as a stable Core Web Vital on March 12, 2024
Check your scores in Google Search Console and PageSpeed Insights using real field data
The biggest wins usually come from image optimization, reducing JavaScript, and setting explicit dimensions on media elements

In Practice

The single most common LCP and CLS killer is an image with no reserved space. The browser does not know how tall the image will be until it downloads, so it paints the page, then reflows everything below once the bytes arrive. That reflow is a layout shift, and the late paint hurts LCP.

Before, the markup leaves the browser guessing:

<img src="/hero.jpg" alt="Product hero">

After, you give the browser the intrinsic dimensions up front, hint that this is the LCP element so it loads early, and let modern CSS keep the box responsive:

<img
  src="/hero.avif"
  alt="Product hero"
  width="1200"
  height="630"
  fetchpriority="high"
  decoding="async"
>

img {
  height: auto;        /* honor the aspect ratio from width/height */
  max-width: 100%;
}

The width and height attributes let the browser compute the aspect ratio and reserve the exact box before download, which removes the shift and improves CLS. The fetchpriority="high" hint tells the browser to fetch the hero image early instead of treating it like any other resource, which pulls the LCP timing forward. Serving AVIF or WebP instead of a large JPEG shrinks the payload, which also helps LCP on slower connections.

Sources

web.dev, Web Vitals (current Core Web Vitals and good thresholds): https://web.dev/articles/vitals (checked 2026-05-30)
web.dev, Largest Contentful Paint (LCP) thresholds and LCP element types: https://web.dev/articles/lcp (checked 2026-05-30)
web.dev, Interaction to Next Paint (INP) thresholds and definition: https://web.dev/articles/inp (checked 2026-05-30)
web.dev, Cumulative Layout Shift (CLS) thresholds and scoring: https://web.dev/articles/cls (checked 2026-05-30)
web.dev Blog, Interaction to Next Paint becomes a Core Web Vital on March 12: https://web.dev/blog/inp-cwv-march-12 (checked 2026-05-30)
Google Search Central, Understanding page experience in Google Search results: https://developers.google.com/search/docs/appearance/page-experience (checked 2026-05-30)