Core Web Vitals Explained

What are LCP, INP, and CLS? How do Core Web Vitals affect your Google ranking and how can you improve them? Everything important explained clearly.

What Are Core Web Vitals?

Core Web Vitals are a set of three metrics that Google considers essential for a website's user experience. Since 2021, they directly influence Google rankings. They measure how quickly a page loads, how responsive it is to user interactions, and how visually stable it is during loading.

Google uses two data sources for evaluation: Lab Data (synthetic tests like Lighthouse) and Field Data (real user data from the Chrome User Experience Report). Ranking decisions are based on field data.

LCP — Largest Contentful Paint

LCP measures how long it takes until the largest visible element in the viewport is rendered. This is typically a hero image, a large text block, or a video poster.

Target Values

• Good: ≤ 2.5 seconds
• Needs improvement: 2.5 – 4.0 seconds
• Poor: > 4.0 seconds

How to Improve LCP

• Optimize server response: Keep TTFB (Time to First Byte) under 200ms. Use a CDN, server caching, and fast hosting.
• Eliminate render-blocking resources: Inline critical CSS, load JavaScript with defer.
• Optimize images: Use the right format (WebP/AVIF), correct dimensions, and <link rel="preload"> for the LCP image.
• Set priorities: Use the fetchpriority="high" attribute for the LCP element.

<!-- Preload LCP image with high priority -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" fetchpriority="high" alt="Hero" width="1200" height="600">

INP — Interaction to Next Paint

INP measures how quickly a page responds to user interactions like clicks, taps, and keyboard input. It captures the delay from the input to the next visual update. INP replaced the older FID (First Input Delay) as a Core Web Vital in March 2024.

Target Values

• Good: ≤ 200 milliseconds
• Needs improvement: 200 – 500 milliseconds
• Poor: > 500 milliseconds

How to Improve INP

• Break up long tasks: JavaScript tasks that take longer than 50ms block the main thread. Break them up with requestAnimationFrame, setTimeout, or the Scheduler API.
• Ship less JavaScript: Remove unused code, use code splitting and dynamic imports.
• Optimize input handlers: Event handlers should be fast. Offload expensive computations to Web Workers.
• Avoid layout thrashing: Do not mix read operations (e.g., offsetHeight) with write operations (e.g., style.height).

CLS — Cumulative Layout Shift

CLS measures how much page elements unexpectedly shift during loading. Everyone has experienced this: you are about to click a button, but suddenly the content jumps down because an image or ad finished loading.

Target Values

• Good: ≤ 0.1
• Needs improvement: 0.1 – 0.25
• Poor: > 0.25

How to Improve CLS

• Size attributes for media: Always set width and height on images and videos. Or use aspect-ratio in CSS.
• Placeholders for dynamic content: Reserve space for ads, embeds, and dynamically loaded content.
• Load fonts correctly: Use font-display: swap together with size-adjust for the fallback font to minimize layout shift during loading.
• Do not insert content above the viewport: Do not load banners or cookie notices that push existing content down. Use overlays instead.

/* Fallback font with size-adjust */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.woff2') format('woff2');
  font-display: swap;
}

/* Aspect ratio for images */
img, video {
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

Core Web Vitals and SEO

Core Web Vitals are part of the "Page Experience Signals" that Google considers for ranking. They are not the sole factor — relevant content carries more weight. But for comparable content, a better page experience can make the decisive difference.

Google uses the 75th percentile of field data. This means: 75% of your real users must reach the "Good" thresholds for a metric to be considered passing.

Measurement Tools

• PageScore: Checks your website performance and shows you the key metrics at a glance.
• Google Search Console: Shows Core Web Vitals for your entire website based on real user data.
• Chrome DevTools (Lighthouse): Lab data for individual pages.
• web.dev/measure: Google's official measurement tool with detailed recommendations.
• Chrome UX Report (CrUX): The raw data that Google uses for ranking.

Tip: Lab data is great for debugging, but only field data matters for ranking. Keep an eye on both.