Core Web Vitals are Google's metrics for user experience: LCP (loading), INP (interactivity), and CLS (visual stability). They matter because they affect search rankings and directly correlate with user satisfaction and conversion rates.
The Three Core Web Vitals:
LCP (Largest Contentful Paint)
INP (Interaction to Next Paint)
CLS (Cumulative Layout Shift)
Why They Matter:
// Using web-vitals library
import { onLCP, onINP, onCLS } from 'web-vitals';
function sendToAnalytics({ name, value, id }) {
// Send to your analytics service
console.log({ name, value, id });
// Example: Send to Google Analytics
gtag('event', name, {
event_category: 'Web Vitals',
event_label: id,
value: Math.round(name === 'CLS' ? value * 1000 : value),
non_interaction: true,
});
}
// Measure each vital
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
// Using Performance Observer API directly
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(entry.name, entry.startTime);
}
});
observer.observe({ entryTypes: ['largest-contentful-paint'] });