MODRACXKENNETH D'SILVA

← Archive & Insights

Monitoring & Optimizing Core Web Vitals for E-commerce

Field metrics (CrUX data) dictate real-world Google search rankings. Learn how to diagnose and remediate LCP, INP, and CLS performance bottlenecks across mobile and desktop environments.

By Kenneth D'Silva • Reading Time: 35 min read • Category: Performance & Speed

Real-User Monitoring (RUM) Implementation

// Web Vitals Real-User Monitoring (RUM) Snippet
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  const body = JSON.stringify({ name, value: Math.round(value), id });
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/rum-vitals', body);
  }
}

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

Suggested & Related Reading

Explore related engineering guides from Kenneth D'Silva: