Core Web Vitals

Why It Matters

Google uses Core Web Vitals as an explicit ranking factor in Search page experience evaluations. Sites passing all three thresholds experience lower bounce rates, higher user engagement, and improved conversion rates, while failing sites risk reduced search visibility.

Google Core Web Vitals Official Thresholds (75th Percentile)

Practical Implementation Example

Using the official web-vitals library captures field measurements directly from end-user devices and beacons them to analytics endpoints without blocking main thread execution.

import { onCLS, onINP, onLCP, Metric } from 'web-vitals';

function sendToAnalytics(metric: Metric) {
  const body = JSON.stringify({ name: metric.name, value: metric.value, id: metric.id });
  navigator.sendBeacon('/api/vitals', body);
}

export function reportWebVitals() {
  onCLS(sendToAnalytics);
  onINP(sendToAnalytics);
  onLCP(sendToAnalytics);
}