Performance8 min readUpdated May 2025
What Are Core Web Vitals? LCP, INP & CLS Explained (2025)
Core Web Vitals are Google's three key metrics for measuring real-world page experience. They became a ranking factor in 2021 and INP replaced FID in 2024. Here's everything you need to know to pass all three.
Check My Core Web Vitals Free →< 2.5s
LCP
< 200ms
INP
< 0.1
CLS
Affects
Ranking
Mobile-first
Indexed
3 total
Metrics
LCP
Largest Contentful Paint (LCP)
1
What it measures
LCP measures how long it takes for the largest visible content element (image, video poster, or text block) to appear on screen. It's Google's proxy for 'did the page load its main content?'
2
Good threshold: under 2.5 seconds
LCP under 2.5s is Good. Between 2.5–4s Needs Improvement. Over 4s is Poor. The measurement is from when the page starts loading to when the largest element becomes visible.
3
What causes slow LCP
The three main culprits are: large unoptimised hero images, render-blocking JavaScript or CSS in the <head> that delays rendering, and slow server response times (TTFB over 800ms).
4
How to fix poor LCP
Compress and convert hero images to WebP or AVIF. Add loading='eager' and fetchpriority='high' to the LCP image. Move non-critical JS to deferred loading. Use a CDN to reduce TTFB.
5
LCP element examples
Common LCP elements: hero banner images, above-the-fold H1 text (if it's the largest element), video poster frames, and large background images loaded via CSS.
INP
Interaction to Next Paint (INP)
1
What it measures
INP measures the time from a user interaction (click, tap, or key press) to the next visual update on the page. It replaced FID in March 2024 as a Core Web Vital.
2
Good threshold: under 200ms
INP under 200ms is Good. Between 200–500ms Needs Improvement. Over 500ms is Poor. Unlike FID, INP captures the worst interaction across the entire page session.
3
What causes poor INP
Long JavaScript tasks that block the main thread are the primary cause. When JS is executing, the browser can't respond to user interactions, causing INP to spike. Third-party scripts are common offenders.
4
How to fix poor INP
Break up long JS tasks using requestIdleCallback or setTimeout(0). Defer non-critical third-party scripts. Use a web worker for heavy computation. Reduce total JS bundle size.
5
INP vs FID
FID (First Input Delay) only measured the delay before the very first interaction on a page. INP measures all interactions throughout the session, making it a much harder threshold to pass.
CLS
Cumulative Layout Shift (CLS)
1
What it measures
CLS measures unexpected visual shifts — how much content moves around as the page loads. A score of 0 means nothing moved. A high CLS score means elements are jumping as resources load.
2
Good threshold: under 0.1
CLS under 0.1 is Good. Between 0.1–0.25 Needs Improvement. Over 0.25 is Poor. The score is calculated as impact_fraction × distance_fraction for each layout shift.
3
What causes high CLS
Images without explicit width and height attributes that resize when loaded. Ad slots without reserved space. Dynamically injected content above existing content. Web fonts causing FOUT (Flash of Unstyled Text).
4
How to fix high CLS
Always specify width and height on img tags (or use aspect-ratio CSS). Reserve space for ad slots and embeds. Load web fonts with font-display: optional to prevent FOUT.
5
CLS and user experience
CLS is often the most frustrating metric for users — articles that jump when an ad loads, forms that shift when a cookie banner appears, or buttons that move just as you're about to click them.
Fixes
How to Improve Your Scores
1
Run AuditAI's free Core Web Vitals check
AuditAI scans your page and flags which CWV signals are failing — render-blocking resources, oversized images, missing cache headers — with specific fixes.
2
Optimise your LCP image first
The single highest-impact change for most sites. Find your LCP element (usually the hero image), compress it, convert to WebP, and add fetchpriority='high'.
3
Audit your JavaScript bundle
Use Chrome DevTools Performance panel to identify long tasks. Third-party scripts (chat widgets, analytics, ad networks) are usually the largest contributors to poor INP.
4
Add dimensions to all images and embeds
This one change fixes the majority of CLS issues. Every img tag needs explicit width and height attributes matching the actual rendered size.
5
Check mobile separately
Google ranks based on mobile-first. Run your CWV audit on a mobile device or use the mobile simulation in AuditAI's report. Mobile scores are often significantly worse than desktop.
6
Monitor after every deployment
CWV scores can regress after any deployment that adds new third-party scripts, changes above-the-fold content, or modifies image loading. Run AuditAI after every significant release.
Check your Core Web Vitals automatically
AuditAI scans your LCP, INP, and CLS signals in under 30 seconds and generates specific fixes for every issue — free, no signup required.
Check My Core Web Vitals Free →Frequently Asked Questions
Do Core Web Vitals directly affect Google rankings?+
Yes. Google confirmed CWV as a ranking signal in May 2021 via the Page Experience update. Pages that pass all three CWV thresholds (Good LCP, INP, and CLS) receive a ranking boost in competitive searches. The effect is a tiebreaker — content quality still outweighs CWV, but for pages with similar content relevance, CWV can determine which ranks higher.
Are Core Web Vitals the same for mobile and desktop?+
The thresholds are the same, but scores are assessed separately. Google indexes and ranks based on mobile-first. A site that passes all CWV on desktop but fails on mobile will not receive the ranking benefit. Always check both, but prioritise mobile CWV if you need to choose.
What replaced FID in Core Web Vitals?+
INP (Interaction to Next Paint) replaced FID (First Input Delay) in March 2024. FID only measured the delay before the first user interaction was processed. INP measures the worst interaction delay across the entire page session, making it a much more complete measure of real-world responsiveness.