Core Web Vitals Guide 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.

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

3. Interaction to Next Paint (INP)

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

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.

Common causes

• Images or videos without dimensions
• Ads, embeds, or iframes without reserved space
• Web fonts causing FOIT/FOUT
• Dynamically injected content above existing content

How to fix

• Always set width and height on images and videos
• Reserve space for ads and embeds with CSS aspect-ratio
• Use font-display: swap or optional to manage web fonts
• Add new content below the viewport, not above

5. Measuring Core Web Vitals

• Field data (real users): CrUX, Google Search Console, web-vitals JS library
• Lab data (synthetic): Lighthouse, WebPageTest, Dr Urls
• Key distinction: INP can only be measured in the field (requires real interactions)

6. Impact on SEO rankings

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.

7. Debugging poor scores

1. Open Chrome DevTools > Performance panel and record a page load
2. Check the "Experience" row for CLS events and long tasks
3. Use the web-vitals library to log CWV attribution data to your analytics
4. Compare CrUX data (75th percentile) with lab data to find discrepancies
5. 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