Core Web Vitals are Google's user experience metrics consisting of three measures: LCP (loading speed), INP (interactivity), and CLS (visual stability). Since 2024, INP has officially replaced FID as the interactivity metric.
What Are Core Web Vitals?
Core Web Vitals are three key metrics announced by Google in 2020 to measure user experience on web pages. Since June 2021, they have been officially used as a Google Search ranking factor.
The three metrics measure loading speed (LCP), interactivity (INP), and visual stability (CLS). Keeping all three at 'Good' levels is important for both SEO and user experience.
Note that in March 2024, FID (First Input Delay) was retired and replaced by INP (Interaction to Next Paint) as the official metric. INP more accurately measures overall page interactivity.
Three Metrics & Benchmark Values
Largest content render time
Good
≤ 2.5s
Needs Work
2.5s – 4.0s
Poor
> 4.0s
Interaction response time
Good
≤ 200ms
Needs Work
200ms – 500ms
Poor
> 500ms
Cumulative layout shift score
Good
≤ 0.1
Needs Work
0.1 – 0.25
Poor
> 0.25
Why Do Core Web Vitals Matter?
Improving Core Web Vitals impacts search rankings, user experience, and business outcomes. Here are three key facts from Google's official data and industry research.
SEO Factor
Core Web Vitals have been a Google ranking signal since 2021
+24%
Pages with good CWV have 24% fewer user abandonments (Google)
CVR Boost
A 1-second speed improvement can increase conversions by up to 7%
How to Improve Each Metric
Improving LCP (Loading Speed)
Convert images to WebP/AVIF and serve at appropriate sizes
Preload hero images instead of lazy loading them
Reduce server response time (TTFB) with CDN and caching
Eliminate or defer render-blocking CSS and JavaScript
Improving INP (Interactivity)
Split JavaScript bundles and lazy-load non-critical code
Break long main-thread tasks into chunks under 50ms
Move heavy event handler logic to requestIdleCallback or Web Workers
Improving CLS (Visual Stability)
Set width/height or aspect-ratio on all images and videos
Reserve space for ads and embeds with CSS
Use font-display: swap on web fonts to prevent FOIT/FOUT
Insert dynamic content (banners, notifications) outside viewport or with CSS transforms
Common Mistakes to Avoid
Lazy loading hero images
Setting loading="lazy" on above-the-fold images (LCP candidates) delays their loading and worsens LCP. Use preload or eager loading for first-viewport images.
Unrestricted third-party script loading
Synchronously loading GA4, ad tags, and chat widgets blocks the main thread, degrading both INP and LCP. Always use async or defer attributes.
Responsive images without size attributes
Using only CSS width: 100% without width/height attributes means the browser cannot determine image height until loaded, causing CLS. Always specify width/height or aspect-ratio.
Text invisible during web font loading
Using font-display: block hides text until the font loads, causing CLS when it appears. Switch to font-display: swap or optional.
Core Web Vitals Measurement Tools
PageSpeed Insights
Google's free tool that shows Core Web Vitals scores and improvement suggestions for any URL. Provides both field data (real user data) and lab data.
Chrome DevTools (Lighthouse)
Run performance audits in Chrome DevTools' Lighthouse panel. Works for local environments too, with detailed improvement recommendations.
Google Search Console
The 'Core Web Vitals' report shows site-wide performance at the page level, based on field data from actual search users.
