Core Web Vitals are Google's metrics for measuring real-world user experience. This guide explains each metric, what causes poor scores, and how to fix them.
10 min readUpdated March 2026
1. What are Core Web Vitals?
Core Web Vitals are a set of three metrics that measure loading performance, interactivity, and visual stability. They are part of Google's page experience ranking signals.
LCP
Largest Contentful Paint
Good: < 2.5s
INP
Interaction to Next Paint
Good: < 200ms
CLS
Cumulative Layout Shift
Good: < 0.1
2. Largest Contentful Paint (LCP)
LCP measures when the largest visible element (image, video, or text block) finishes rendering. It reflects perceived loading speed.
Common causes of poor LCP
Slow server response time (high TTFB)
Render-blocking CSS and JavaScript
Large, unoptimized hero images
Client-side rendering delays
How to fix
Use a CDN and optimize server response time
Preload the LCP image: <link rel="preload" as="image" href="hero.webp">
Use fetchpriority="high" on the LCP image
Inline critical CSS, defer non-critical CSS
Use server-side rendering for above-the-fold content
Check your LCP score with a free Dr Urls performance audit.
INP measures the latency of all user interactions (clicks, taps, key presses) throughout the page lifecycle. It replaced FID (First Input Delay) in March 2024.
Common causes of poor INP
Long JavaScript tasks blocking the main thread
Expensive re-renders in React/Vue/Angular
Heavy third-party scripts (analytics, ads, chat widgets)
Large DOM size (>1,500 nodes)
How to fix
Break long tasks into smaller chunks using scheduler.yield() or setTimeout
Use startTransition in React for non-urgent updates
Debounce expensive input handlers
Reduce DOM complexity
Use Chrome DevTools Performance panel to record interactions and find the longest tasks.
4. Cumulative Layout Shift (CLS)
CLS measures unexpected layout shifts — when visible elements move after they have rendered. A poor CLS score means a frustrating, janky experience.
Core Web Vitals are a confirmed ranking factor, but they serve as a tiebreaker rather than a dominant signal. Content relevance still matters most. However, in competitive niches, CWV can be the difference between position 3 and position 8.
Do not sacrifice content quality to chase CWV scores. Fix major issues, but do not obsess over small improvements.
7. Debugging poor scores
Open Chrome DevTools > Performance panel and record a page load
Check the "Experience" row for CLS events and long tasks
Use the web-vitals library to log CWV attribution data to your analytics
Compare CrUX data (75th percentile) with lab data to find discrepancies
Test on real devices, not just your developer machine
8. Framework-specific tips
Next.js: Use the Image component (auto-sizing, lazy loading), Server Components for data fetching, streaming SSR
WordPress: Use a caching plugin (WP Rocket, W3 Total Cache), optimize images with ShortPixel or Imagify
Shopify: Use native lazy loading, minimize apps that inject JS, use system fonts where possible