Core Web Vitals: полный обзор

// Метрики настоящих посетителей: измеряются в их браузерах, собираются на нашем сервере
import { onCLS, onINP, onLCP } from 'web-vitals';

function send(metric) {
  const body = JSON.stringify({
    name: metric.name,     // LCP, INP или CLS
    value: metric.value,   // миллисекунды; у CLS — оценка без единиц
    rating: metric.rating, // good, needs-improvement или poor
    page: location.pathname,
  });
  // sendBeacon переживает закрытие вкладки — именно тогда INP и CLS становятся окончательными
  if (!navigator.sendBeacon('/api/vitals', body)) {
    fetch('/api/vitals', { method: 'POST', body, keepalive: true });
  }
}

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

<!-- Картинка первого экрана: браузер грузит её первой и никогда не лениво -->
<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="Дубовый стол на светлой кухне"
     fetchpriority="high">

<!-- Картинки ниже: грузятся, только когда человек до них докрутит -->
<img src="/img/table-top.webp" width="600" height="400"
     alt="Столешница из дуба крупным планом" loading="lazy" decoding="async">

/* Место резервируется до того, как придёт содержимое, — ничего ниже не прыгает */
img,
video {
  max-width: 100%;
  height: auto;          /* пропорции берутся из width и height в HTML */
}

.embed {
  aspect-ratio: 16 / 9;  /* видеоплееры, карты и другие iframe */
}
.embed > iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.promo-slot {
  min-height: 250px;     /* блок, который скрипт заполнит позже */
}

// Дать браузеру отрисовать реакцию до тяжёлой работы —
// клик сразу получает видимый ответ, а именно его и измеряет INP
const afterPaint = () =>
  new Promise((resolve) => requestAnimationFrame(() => setTimeout(resolve, 0)));

button.addEventListener('click', async () => {
  button.classList.add('is-loading'); // отрисуется сразу
  await afterPaint();
  const items = filterCatalogue();    // тяжёлая часть — уже после отрисовки
  render(items);
  button.classList.remove('is-loading');
});