Core Web Vitals are a set of specific metrics that Google uses to measure real-world user experience on web pages. They focus on three aspects of the user experience: loading performance, interactivity, and visual stability.
Since 2021, Core Web Vitals have been a Google ranking signal, making them essential for SEO.
The Three Core Web Vitals
LCP — Largest Contentful Paint
What it measures: How long until the largest visible content element (image, video, or text block) renders on screen.
Target: Under 2.5 seconds
| Rating | Score |
|---|---|
| Good | ≤ 2.5s |
| Needs Improvement | 2.5s – 4.0s |
| Poor | > 4.0s |
Common causes of poor LCP:
- Slow server response time
- Render-blocking JavaScript and CSS
- Large, unoptimized images
- Client-side rendering delays
How to improve:
- Optimize server response time (use CDN, edge caching)
- Preload critical resources (fonts, hero images)
- Use modern image formats (WebP, AVIF) with proper sizing
- Implement server-side or static rendering
INP — Interaction to Next Paint
What it measures: The responsiveness of a page to user interactions. It tracks the delay between a user action (click, tap, keypress) and the next visual update.
Target: Under 200 milliseconds
| Rating | Score |
|---|---|
| Good | ≤ 200ms |
| Needs Improvement | 200ms – 500ms |
| Poor | > 500ms |
Common causes of poor INP:
- Heavy JavaScript execution blocking the main thread
- Large component re-renders
- Third-party scripts competing for resources
- Inefficient event handlers
How to improve:
- Break up long tasks with
setTimeoutorrequestIdleCallback - Reduce JavaScript bundle size
- Use web workers for heavy computation
- Optimize React rendering (memo, useMemo, useCallback)
- Defer non-critical third-party scripts
CLS — Cumulative Layout Shift
What it measures: How much the page layout shifts unexpectedly during loading. A layout shift occurs when visible elements move position without user interaction.
Target: Under 0.1
| Rating | Score |
|---|---|
| Good | ≤ 0.1 |
| Needs Improvement | 0.1 – 0.25 |
| Poor | > 0.25 |
Common causes of poor CLS:
- Images without width/height dimensions
- Dynamically injected content above existing content
- Web fonts causing text reflow (FOUT/FOIT)
- Ads or embeds without reserved space
How to improve:
- Always set width and height on images and videos
- Reserve space for dynamic content
- Use
font-display: swapwith font preloading - Avoid inserting content above existing content
Field data beats lab data
Google's ranking signal uses real-user data (CrUX), not lab scores. Your PageSpeed Insights score can be 90+ while real users experience a poor score. Always monitor Search Console's Core Web Vitals report alongside lab tools.
How to Measure Core Web Vitals
Lab Tools (Development)
- Google PageSpeed Insights — lab + field data with recommendations
- Chrome DevTools — Performance panel for detailed analysis
- Lighthouse — automated auditing in Chrome
Field Tools (Real Users)
- Google Search Console — Core Web Vitals report with real user data
- Chrome User Experience Report (CrUX) — aggregated real-user metrics
- web-vitals JavaScript library — collect metrics from your own users
Field data matters more than lab data for Google's ranking signal, because it reflects actual user experience.
Core Web Vitals and SEO
Google uses Core Web Vitals as part of its page experience ranking signals. While content relevance and authority remain the primary ranking factors, Core Web Vitals can be the tiebreaker between competing pages.
Impact on rankings:
- Competitive keywords — Core Web Vitals can differentiate closely matched pages
- Mobile search — mobile experience is weighted more heavily
- Top Stories — good Core Web Vitals are required for Top Stories carousel eligibility
How Moydus Optimizes Core Web Vitals
At Moydus, we build websites that consistently score in the "Good" range:
- Next.js with SSG/ISR — pre-rendered pages for fast LCP
- Image optimization — automatic WebP conversion, lazy loading, proper sizing
- Minimal JavaScript — Server Components reduce client-side JS
- Edge delivery — Cloudflare CDN for sub-100ms TTFB globally
- Font optimization — preloaded, subset fonts with
font-display: swap - Layout stability — explicit dimensions on all media elements