Core Web Vitals

What are Core Web Vitals?

Core Web Vitals (CWV) is a set of three metrics that Google uses to measure the technical user experience on a website. They were launched in 2020 and have been an official ranking factor since 2021. Poor Core Web Vitals can lower your Google rankings, while good scores give you a competitive advantage.

The Three Core Web Vitals

LCP (Largest Contentful Paint)

Measures loading speed—specifically, how long it takes for the largest visible content element (typically a hero image or a large block of text) to be fully rendered.

• Good: Under 2.5 seconds
• Needs improvement: 2.5–4.0 seconds
• Poor: Over 4.0 seconds

INP (Interaction to Next Paint)

Replaced FID (First Input Delay) in March 2024. Measures responsiveness—how quickly the page visually responds to user interactions such as clicks, taps, and keyboard input throughout the visit.

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

CLS (Cumulative Layout Shift)

Measures visual stability—how much the page content unexpectedly shifts around while loading.

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

Why is CWV important for your online store?

• Google ranking: CWV is an official ranking factor. Two pages with the same content and relevance—the one with better CWV ranks higher.
• Conversion rate: Fast, stable pages convert better. Google has documented that a 100ms improvement in LCP can increase conversions by up to 2%.
• User experience: Slow pages, unresponsive buttons, and a jittery layout frustrate customers and drive them to competitors.
• Bounce rate: 53% of mobile visitors leave a page that takes more than 3 seconds to load.

How to Improve CWV

LCP Optimization

• Optimize images (WebP format, correct size, lazy loading for below-the-fold images)
• Minimize CSS and JavaScript that block rendering
• Use a CDN to deliver static files faster
• Preload the most important image (hero image)

INP optimization

• Minimize JavaScript execution and avoid long tasks (>50 ms)
• Defer or lazy-load third-party scripts (chat, analytics, pixels)
• Use `requestAnimationFrame` for visual updates

CLS optimization

• Always specify dimensions (width/height) for images and videos
• Reserve space for dynamic content (banners, ads)
• Use `font-display: swap` with `preload` for web fonts

Measurement tools

• Google Search Console: The Core Web Vitals report shows data for your entire site based on real user data.
• PageSpeed Insights: Detailed analysis of individual pages with specific suggestions for improvement.
• Chrome DevTools (Lighthouse): Lab-based performance audit with detailed metrics.
• Web Vitals Extension: A Chrome extension that displays CWV in real time.