Core Web Vitals are Google's set of user experience metrics used as ranking signals. Failing them hurts your rankings. Passing them is a competitive advantage. Here's what each one means and exactly how to fix it.
What Are Core Web Vitals?
Core Web Vitals are three specific measurements of how users experience your website:
- LCP — Largest Contentful Paint (loading performance)
- CLS — Cumulative Layout Shift (visual stability)
- INP — Interaction to Next Paint (responsiveness)
Google uses real-world data collected from Chrome users (Chrome User Experience Report / CrUX) to measure these for your site. You can see your field data in Google Search Console under "Core Web Vitals".
LCP — Largest Contentful Paint
What it measures: How long it takes for the largest visible element to render — usually a hero image or large heading.
Targets:
- ✅ Good: Under 2.5 seconds
- ⚠️ Needs Improvement: 2.5–4 seconds
- ❌ Poor: Over 4 seconds
Most common causes of poor LCP:
- Large, unoptimized hero image
- Render-blocking JavaScript delaying page paint
- Slow server response time (TTFB)
- No preloading of the LCP image
How to fix LCP:
- Preload the LCP image:
<link rel="preload" as="image" href="hero.webp"> - Convert to WebP and compress the hero image to under 100KB
- Use a CDN to reduce server response time
- Defer or remove render-blocking scripts in <head>
CLS — Cumulative Layout Shift
What it measures: How much the page layout shifts unexpectedly while loading. Have you ever been about to click a button and the page jumped? That's CLS causing a bad experience.
Targets:
- ✅ Good: Under 0.1
- ⚠️ Needs Improvement: 0.1–0.25
- ❌ Poor: Over 0.25
Most common causes of high CLS:
- Images without width and height attributes — browser doesn't know how much space to reserve
- Web fonts causing text reflow (FOUT — Flash of Unstyled Text)
- Ads, embeds or iframes that load without reserved space
- Dynamically injected content above existing content
How to fix CLS:
- Always add width and height to img tags:
<img width="800" height="400" src="..."> - Add
font-display: swapto all @font-face declarations - Reserve space for ads with CSS:
min-height: 250px;
INP — Interaction to Next Paint
What it measures: How quickly the page responds to user interactions — clicks, taps, keyboard inputs. Replaced FID (First Input Delay) in March 2024.
Targets:
- ✅ Good: Under 200 milliseconds
- ⚠️ Needs Improvement: 200–500ms
- ❌ Poor: Over 500ms
Most common causes of poor INP:
- Heavy JavaScript executing on the main thread
- Third-party scripts (chat widgets, analytics) blocking interactions
- Long tasks running during user interaction
How to fix INP:
- Defer non-critical third-party scripts
- Break up long JavaScript tasks with scheduler.postTask() or setTimeout
- Remove unnecessary event listeners
- Load chat widgets and analytics after page interaction (not on page load)
How to Check Your Core Web Vitals
- Google Search Console → Core Web Vitals (shows real user data)
- PageSpeed Insights (pagespeed.web.dev) — shows both field and lab data
- Chrome DevTools → Performance tab (for detailed analysis)
- GTmetrix — good for before/after comparisons
💡 Field data vs Lab data: Search Console shows field data (real users). PageSpeed shows both. Google uses field data for rankings. If you have no field data (low traffic), Google uses lab data as a proxy.
Failing Core Web Vitals?
We fix LCP, CLS and INP — all three, guaranteed. Send us your URL for a free analysis.
Get Core Web Vitals Fixed →