Core Web Vitals

Definition

Core Web Vitals are user experience metrics introduced by Google in 2020 and officially incorporated as ranking factors in 2021. Currently includes three core metrics: LCP (Largest Contentful Paint) measures loading performance, INP (Interaction to Next Paint, replacing FID in March 2024) measures interaction responsiveness, CLS (Cumulative Layout Shift) measures visual stability. These metrics are available through Chrome UX Report (CrUX) for real-user data, and through Lighthouse/PageSpeed Insights for lab testing. While CWV isn't the only ranking factor, good experience metrics can be decisive in competitive keyword rankings.

Why it matters

• Officially confirmed as ranking factor by Google: pages with better CWV may rank higher when other factors are equal
• Directly impacts user behavior: 1 second slower can increase bounce rate by 7% and reduce conversions
• In mobile-first indexing era, mobile CWV is especially critical
• Affects Google Discover eligibility: poor CWV may reduce Discover exposure
• Has dedicated reports in Search Console for easy tracking and prioritization
• Competitive analysis tools (Ahrefs, SEMrush) now include CWV comparisons
• Good CWV usually indicates good code quality, aiding long-term maintenance

How to implement

• Measure first: Use PageSpeed Insights to get Field Data (real users) and Lab Data (simulated)
• LCP optimization (target < 2.5s): compress images, use WebP/AVIF, implement CDN, optimize TTFB, preload critical resources
• INP optimization (target < 200ms): break up long tasks > 50ms, use Web Workers, reduce main thread blocking, defer non-critical JS
• CLS optimization (target < 0.1): set width/height for images/videos, avoid dynamically injected content, use font-display: swap
• Use Chrome DevTools Performance panel for deep bottleneck analysis
• Track 'Core Web Vitals' report in Search Console, prioritize fixing 'poor' URLs
• Set up RUM (Real User Monitoring) for ongoing tracking, e.g., web-vitals.js library

Examples

<!-- LCP optimization: preload hero image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- CLS optimization: set image dimensions -->
<img src="/product.jpg" width="800" height="600" alt="Product image">

<!-- Font optimization: prevent FOIT/FOUT causing CLS -->
<link rel="preload" as="font" href="/fonts/main.woff2" crossorigin>
<style>
  @font-face {
    font-family: 'Main';
    src: url('/fonts/main.woff2') format('woff2');
    font-display: swap;
  }
</style>

// Track CWV using web-vitals library
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  // Send to GA4 or custom analytics
  gtag('event', name, {
    event_category: 'Web Vitals',
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    event_label: id,
    non_interaction: true,
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Related