Core Web Vitals: The Complete Guide to Google’s Page Experience Metrics

Core Web Vitals are Google’s set of user experience metrics that measure real-world page performance. They are confirmed ranking signals that directly affect where your pages appear in search results. Understanding and optimizing these three metrics is essential for technical SEO.

The Three Core Web Vitals

LCP — Largest Contentful Paint

What it measures: How long it takes for the largest visible content element to load. This is usually a hero image, heading, or text block.

• Good: Under 2.5 seconds
• Needs improvement: 2.5-4 seconds
• Poor: Over 4 seconds

INP — Interaction to Next Paint

What it measures: How responsive the page is when users interact with it (clicks, taps, keyboard input). INP replaced FID (First Input Delay) in March 2024.

• Good: Under 200 milliseconds
• Needs improvement: 200-500 milliseconds
• Poor: Over 500 milliseconds

CLS — Cumulative Layout Shift

What it measures: How much the page layout shifts unexpectedly during loading. Layout shifts are when visible elements move from one position to another without user action.

• Good: Under 0.1
• Needs improvement: 0.1-0.25
• Poor: Over 0.25

How Core Web Vitals Affect Rankings

• CWV are part of Google’s page experience ranking signals
• They serve as a tiebreaker between pages with similar content quality
• Sites with all metrics passing tend to rank higher than those with failures
• The impact is most notable on mobile, where performance issues are more severe
• CWV alone will not overcome poor content — but good content with good CWV outperforms good content with poor CWV

Measuring Core Web Vitals

Field Data (Real Users)

• Google Search Console: Core Web Vitals report shows pass/fail status for all your pages based on real Chrome user data
• Chrome User Experience Report (CrUX): Public dataset of real-world performance data
• PageSpeed Insights: Shows field data alongside lab data

Field data represents actual user experience and is what Google uses for ranking purposes.

Lab Data (Simulated)

• Google Lighthouse: Simulated performance test in Chrome DevTools
• PageSpeed Insights: Lab section runs Lighthouse tests
• WebPageTest: Detailed performance testing from multiple locations

Lab data is useful for debugging and testing changes, but field data is what matters for rankings.

Optimizing LCP

Identify the LCP Element

Before optimizing, determine what the LCP element is on your page. Common LCP elements:

• Hero images
• Large text blocks (H1 headings)
• Background images
• Video poster images

Optimization Techniques

• Optimize images: Compress, resize to display dimensions, use WebP/AVIF format, and add width/height attributes
• Preload critical resources: Use <link rel="preload"> for the LCP image and critical fonts
• Reduce server response time: Target TTFB under 800ms — use caching, CDN, and optimize server configuration
• Eliminate render-blocking resources: Defer non-critical CSS and JavaScript
• Use a CDN: Serve assets from servers geographically close to users
• Inline critical CSS: Inline the CSS needed for above-the-fold content

Optimizing INP

Common INP Problems

• Heavy JavaScript execution blocking the main thread
• Long-running event handlers
• Excessive DOM size slowing rendering
• Third-party scripts consuming processing time

Optimization Techniques

• Break up long tasks: Split JavaScript tasks longer than 50ms into smaller chunks using requestIdleCallback or setTimeout
• Optimize event handlers: Keep click and input handlers fast — defer heavy processing
• Reduce JavaScript payload: Remove unused code, tree-shake dependencies, and lazy load non-critical scripts
• Minimize DOM size: Keep the DOM under 1,500 elements where possible
• Defer third-party scripts: Load analytics, ads, and widgets after the page is interactive
• Use web workers: Move heavy computation off the main thread

Optimizing CLS

Common CLS Causes

• Images and videos without explicit dimensions
• Ads, embeds, and iframes that load dynamically
• Web fonts causing text reflow (FOIT/FOUT)
• Dynamic content injected above existing content

Optimization Techniques

• Set dimensions on all media: Always include width and height attributes on images and videos
• Reserve space for ads: Use CSS to define ad container dimensions before ads load
• Optimize font loading: Use font-display: swap and preload critical fonts
• Avoid injecting content above existing content: New elements should appear below or replace existing elements, not push them down
• Use CSS aspect-ratio: Reserve space for responsive elements before they load
• Contain layout shifts: Use CSS contain: layout on elements that might shift

Core Web Vitals Monitoring Routine

• Weekly: Check Search Console CWV report for new failing URLs
• After deployments: Test key pages with PageSpeed Insights to verify no regressions
• Monthly: Review field data trends — are metrics improving or degrading?
• Quarterly: Full performance audit of top 50 pages by traffic

CWV Optimization Checklist

• All images compressed and served in modern formats
• LCP element preloaded on key pages
• Server response time under 800ms
• Non-critical JavaScript deferred
• Long JavaScript tasks broken into smaller chunks
• All images and videos have explicit width/height
• Ad containers have reserved dimensions
• Fonts preloaded with font-display: swap
• No content injected above existing content during load
• CDN configured for global asset delivery
• Field data passing in Google Search Console