Core Web Vitals Optimization

What Are Core Web Vitals?

Core Web Vitals are a set of metrics that measure real-world user experience. They're a ranking factor for Google and directly impact how users perceive your site's quality.

Largest Contentful Paint (LCP)

LCP measures loading performance—specifically, how long it takes for the largest content element (image, video, or text block) to become visible.

Target: Under 2.5 seconds

• Good: 2.5 seconds or less
• Needs Improvement: 2.5 - 4 seconds
• Poor: Over 4 seconds

Optimization Techniques

• Preload critical resources: Use <link rel="preload"> for LCP images
• Optimize server response time: Use a CDN, cache responses, optimize database queries
• Use modern image formats: WebP and AVIF are smaller than JPEG/PNG
• Avoid lazy loading LCP image: The largest image should load immediately
• Remove render-blocking resources: Defer non-critical CSS and JavaScript
• Inline critical CSS: Avoid blocking the initial render

Interaction to Next Paint (INP)

INP measures responsiveness—how quickly your site responds to user interactions like clicks, taps, and key presses.

Target: Under 200 milliseconds

• Good: 200ms or less
• Needs Improvement: 200 - 500ms
• Poor: Over 500ms

Optimization Techniques

• Break up long tasks: Keep JavaScript tasks under 50ms to avoid blocking the main thread
• Use requestIdleCallback: Defer non-essential work until the browser is idle
• Prioritize event handlers: Event handlers should do minimal work and defer updates
• Use web workers: Move heavy computation off the main thread
• Reduce DOM size: Large DOM trees slow down rendering
• Virtualize long lists: Only render visible items
• Use CSS containment: contain: content isolates rendering

Cumulative Layout Shift (CLS)

CLS measures visual stability—how much the page layout shifts unexpectedly during loading.

Target: Under 0.1

• Good: 0.1 or less
• Needs Improvement: 0.1 - 0.25
• Poor: Over 0.25

Optimization Techniques

• Set explicit dimensions: Always specify width and height for images and videos
• Reserve space for ads: Use min-height or aspect-ratio containers
• Avoid inserting content above: New content should appear below existing content
• Use transform for animations: Prefer transform over width/height/top/left
• Preload fonts: Avoid FOUT (flash of unstyled text)
• Use font-display: optional: Prevents layout shift from font swap

Measuring Core Web Vitals

Lab Data (Testing)

• Lighthouse: Chrome DevTools or PageSpeed Insights
• WebPageTest: Detailed performance analysis
• Chrome DevTools: Performance panel for debugging

Field Data (Real Users)

• Search Console: Core Web Vitals report shows real user data
• PageSpeed Insights: Shows CrUX data when available
• web-vitals library: Collect RUM data from your users
• WebAudit: Continuous monitoring with alerts

Important: Google rankings are based on field data (CrUX), not lab data. Optimize based on real user experience.

Quick Wins

• Enable compression (gzip/Brotli)
• Use a CDN
• Add width/height to all images
• Preload LCP image
• Defer non-critical JavaScript
• Inline critical CSS