What Are Core Web Vitals?

Core Web Vitals are a set of three metrics that Google uses to measure the real-world user experience of a web page. Introduced as a ranking signal in 2021, they evaluate three aspects of page quality: loading speed, interactivity, and visual stability.

Strong Core Web Vitals scores correlate with lower bounce rates and higher conversion rates. More importantly, they reflect genuine improvements in how users experience your site. Google continues to emphasize these metrics in Search Console and PageSpeed Insights, making them a non-negotiable part of any SEO strategy.

The Three Metrics and Their Thresholds

LCP (Largest Contentful Paint) — Loading Speed

LCP measures how long it takes for the largest visible content element (typically a hero image, heading, or text block) to render on screen.

Rating	Threshold
Good	2.5 seconds or less
Needs improvement	2.5 – 4.0 seconds
Poor	Over 4.0 seconds

INP (Interaction to Next Paint) — Responsiveness

INP measures the latency of all user interactions (clicks, taps, key presses) throughout the page lifecycle and reports the worst interaction. It replaced FID (First Input Delay) as an official Core Web Vital in March 2024.

Rating	Threshold
Good	200ms or less
Needs improvement	200 – 500ms
Poor	Over 500ms

CLS (Cumulative Layout Shift) — Visual Stability

CLS quantifies how much the page layout shifts unexpectedly during loading. A high CLS means elements jump around as images, ads, or fonts load in, which frustrates users.

Rating	Threshold
Good	0.1 or less
Needs improvement	0.1 – 0.25
Poor	Over 0.25

How to Improve LCP

Poor LCP is usually caused by large unoptimized images, render-blocking resources, or slow server response times.

Optimize Your Images

Images are the LCP element on most pages. Optimizing them often produces the biggest improvement.

<img
  src="hero.webp"
  alt="Product showcase on a clean white background"
  width="1200"
  height="630"
  fetchpriority="high"
  decoding="async"
/>

Key techniques:

Use WebP or AVIF formats (30–50% smaller than JPEG)
Set fetchpriority="high" on the LCP image so the browser loads it first
Always specify width and height attributes (this also prevents CLS)
Serve appropriately sized images using srcset and sizes attributes
Avoid lazy-loading the LCP image (only lazy-load images below the fold)

Eliminate Render-Blocking Resources

CSS and synchronous JavaScript can delay the first paint significantly.

<!-- Inline critical CSS for above-the-fold content -->
<style>
  .hero { display: flex; align-items: center; min-height: 60vh; }
  .hero img { max-width: 100%; height: auto; }
</style>

<!-- Load the rest asynchronously -->
<link rel="preload" href="/styles/main.css" as="style" onload="this.rel='stylesheet'" />

Add defer or async to non-critical script tags
Remove unused CSS (check with Chrome DevTools Coverage tab)
Use font-display: swap so text renders immediately with a fallback font

Speed Up Server Response

If your Time to First Byte (TTFB) is slow, frontend optimizations can only do so much.

Deploy a CDN (Cloudflare, CloudFront, Fastly) to serve content from edge locations
Enable server-side caching for static and semi-static pages
Use HTTP/2 or HTTP/3 for multiplexed connections
Consider static generation or ISR if you are using a framework like Next.js

How to Improve INP

INP problems stem from long tasks that block the browser's main thread, preventing it from responding to user input.

Break Up Long Tasks

Any JavaScript task that runs for more than 50ms is considered a "long task" and can degrade responsiveness.

// Bad: blocks the main thread for the entire loop
function processItems(items) {
  items.forEach(item => heavyComputation(item));
}

// Good: yield back to the browser between iterations
async function processItems(items) {
  for (const item of items) {
    heavyComputation(item);
    await scheduler.yield();
  }
}

Keep Event Handlers Lightweight

button.addEventListener('click', () => {
  // Show immediate visual feedback
  showSpinner();

  // Defer expensive work
  requestIdleCallback(() => {
    runExpensiveOperation();
    hideSpinner();
  });
});

Additional strategies:

Audit third-party scripts (analytics, ads, chat widgets) — they are often the biggest offenders
Use code splitting to load JavaScript on demand rather than upfront
Debounce frequent events like scroll and resize
Move heavy computation to a Web Worker when possible

How to Improve CLS

CLS issues have well-defined causes, and fixes are usually straightforward.

Always Set Dimensions on Media

<img src="photo.webp" alt="Team photo" width="800" height="533" />

<video width="1280" height="720" poster="thumb.jpg">
  <source src="video.mp4" type="video/mp4" />
</video>

For responsive layouts, use the CSS aspect-ratio property:

.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Reserve Space for Dynamic Content

Ads, banners, and cookie notices that load late are a common source of layout shift. Reserve their space in advance.

.ad-slot {
  min-height: 250px;
  width: 300px;
  background: #f0f0f0; /* placeholder background */
}

Handle Web Fonts Carefully

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brand.woff2') format('woff2');
  font-display: swap;
}

Using font-display: optional eliminates layout shift entirely by keeping the fallback font if the custom font does not load in time. The trade-off is that your brand font may not appear on slow connections.

Measuring Core Web Vitals

Field Data (Real Users)

Chrome UX Report (CrUX): Aggregated performance data from real Chrome users, available through PageSpeed Insights and BigQuery
Google Search Console: The Core Web Vitals report shows which pages pass or fail, grouped by status

Lab Data (Simulated)

PageSpeed Insights: Combines field data (when available) with Lighthouse lab data in one view
Chrome DevTools (Lighthouse): Run audits locally during development
WebPageTest: Provides detailed waterfall charts and filmstrip views

Checking with IndexReady

IndexReady uses the PageSpeed Insights API to automatically evaluate your site's performance. Within the SEO category, PageSpeed score (10 points) and Core Web Vitals (10 points) are assessed as separate items, giving you a quick snapshot of where you stand on LCP, INP, and CLS. Enter your URL and get a baseline score before diving into optimizations.

Prioritizing Your Improvements

If all three metrics need work, tackle them in this order:

LCP first. Image optimization alone can dramatically improve scores, and the fixes are relatively simple.
CLS second. The causes are easy to identify and the fixes are usually CSS-only changes.
INP last. Responsiveness issues often require structural changes to JavaScript, which takes more time and testing.

Run PageSpeed Insights on your most important pages, identify the weakest metric, and start there.

FAQ

How much do Core Web Vitals affect search rankings?

Core Web Vitals are a confirmed Google ranking factor, but they carry less weight than content relevance and backlinks. Where they make the most difference is in tie-breaking scenarios: when two pages have similar content quality and authority, the one with better performance metrics tends to rank higher. Beyond rankings, improving CWV reduces bounce rates and increases engagement, which benefits SEO indirectly.

Is FID still relevant?

No. FID was officially replaced by INP in March 2024. While FID only measured the delay of the first interaction, INP tracks the responsiveness of all interactions throughout the entire page lifecycle. This makes INP a more comprehensive and accurate reflection of real user experience. Focus your efforts entirely on INP.

Why is my mobile score so much lower than desktop?

PageSpeed Insights simulates mobile performance using a throttled CPU (roughly 4x slowdown) and a slower network connection. It is common to see a desktop score of 90 or above while mobile sits in the 50s or 60s. Since Google uses mobile-first indexing, prioritize improving your mobile scores. The most impactful actions are reducing JavaScript execution time and optimizing images for smaller viewports.

How long before improvements show up in Search Console?

Google collects Core Web Vitals field data over a rolling 28-day window. After deploying fixes, it typically takes four to eight weeks for the improvements to appear in Search Console's Core Web Vitals report. You can verify your changes immediately using the lab data in PageSpeed Insights or Lighthouse, but field data confirmation requires patience.