Core Web Vitals: a complete overview

// Metrics of real visitors: measured in their browsers, collected on our server
import { onCLS, onINP, onLCP } from 'web-vitals';

function send(metric) {
  const body = JSON.stringify({
    name: metric.name,     // LCP, INP or CLS
    value: metric.value,   // milliseconds; for CLS a score without units
    rating: metric.rating, // good, needs-improvement or poor
    page: location.pathname,
  });
  // sendBeacon survives closing the tab — that is when INP and CLS become final
  if (!navigator.sendBeacon('/api/vitals', body)) {
    fetch('/api/vitals', { method: 'POST', body, keepalive: true });
  }
}

onLCP(send);
onINP(send);
onCLS(send);

<!-- The first-screen picture: the browser loads it first and never lazily -->
<img src="/img/hero-1200.avif"
     srcset="/img/hero-800.avif 800w, /img/hero-1200.avif 1200w"
     sizes="(max-width: 800px) 100vw, 1200px"
     width="1200" height="630" alt="Oak table in a bright kitchen"
     fetchpriority="high">

<!-- Pictures further down: loaded only when the person scrolls to them -->
<img src="/img/table-top.webp" width="600" height="400"
     alt="Oak table top, close-up" loading="lazy" decoding="async">

/* Space is reserved before the content arrives — nothing below jumps */
img,
video {
  max-width: 100%;
  height: auto;          /* proportions come from width and height in the HTML */
}

.embed {
  aspect-ratio: 16 / 9;  /* video players, maps and other iframes */
}
.embed > iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.promo-slot {
  min-height: 250px;     /* a block that a script fills in later */
}

// Let the browser paint the reaction before the heavy work —
// the click gets a visible response at once, and that is what INP measures
const afterPaint = () =>
  new Promise((resolve) => requestAnimationFrame(() => setTimeout(resolve, 0)));

button.addEventListener('click', async () => {
  button.classList.add('is-loading'); // painted right away
  await afterPaint();
  const items = filterCatalogue();    // the heavy part runs after the paint
  render(items);
  button.classList.remove('is-loading');
});