What are Core Web Vitals?

Core Web Vitals (CWV) are a set of three specific metrics defined by Google that evaluate real user experience (real user monitoring) on web pages. They became an official ranking factor in June 2021 as part of the Page Experience Update.

The three current metrics (2025) are:

• LCP (Largest Contentful Paint): Measures perceived loading speed. Good: < 2.5s
• INP (Interaction to Next Paint): Measures responsiveness to interactions. Good: < 200ms (replaced FID in March 2024)
• CLS (Cumulative Layout Shift): Measures visual stability. Good: < 0.1

Google publishes real CWV data in Google Search Console and the Chrome User Experience Report (CrUX), based on actual user visits.

CWVs are automatically measured in Chrome browsers when users visit a page. Google collects this data anonymously and uses it as a ranking signal.

A page is evaluated as "passing" or "failing" based on whether the 75th percentile of visits meets the "good" thresholds:

• LCP: Triggers when the largest visible element (hero image, main text block) finishes rendering. Affected by: server speed, CDN, incorrect lazy-loading, render-blocking fonts.
• INP: Measures the worst delay between interaction (click, tap, keyboard) and visual response, considering ALL interactions on the page. Affected by: heavy JavaScript, long tasks, blocked main thread.
• CLS: Calculates how much elements unexpectedly shift during loading. Affected by: images without dimensions, dynamically injected ads, web fonts without preload.

Specific optimisations to improve each metric:

• LCP < 2.5s: Preload LCP resource, WebP/AVIF images, CDN, server response < 600ms, eliminate render-blocking resources.
• INP < 200ms: Split JavaScript into small chunks, use Web Workers, avoid heavy third-party scripts, debounce/throttle event handlers.
• CLS < 0.1: Define width/height for images and videos, reserve space for ads, use font-display: swap with preload, avoid dynamically injecting content above the fold.
• Continuous monitoring: Implement real user monitoring (web-vitals JS library) to get your own data.
• Prioritise above the fold: Critical resources (fonts, critical CSS, hero image) should load first.
• HTTP/3 and Brotli: Use modern protocols and effective compression.
• Selective lazy-load: Only lazy-load images below the fold, never the LCP image.

An e-commerce site with CWVs below the threshold: LCP 4.8s, INP 280ms, CLS 0.28. Optimisation plan:

1. LCP: Preload hero image + migrate to WebP + CDN → LCP drops to 1.9s
2. INP: JavaScript refactoring, chunking, removal of unnecessary libraries → INP drops to 150ms
3. CLS: Define dimensions for all images, reserve space for banners → CLS drops to 0.05

Result after 2 months: All 3 CWVs in "good" status, 15% improvement in organic ranking and 22% reduction in bounce rate. Organic traffic increases by 35%.