Функция onMetric для единой подписки на все метрики

Функция onMetric является ключевым инструментом для работы с библиотекой Web Vitals в JavaScript, позволяя централизованно получать все метрики производительности страницы в одном месте. Она служит обёрткой вокруг отдельных функций измерения Core Web Vitals: getCLS, getFID, getLCP, getTTFB и getFCP. Основная задача onMetric — упрощение сбора данных и предоставление единого интерфейса для обработки метрик.

Синтаксис и базовое использование

import { onMetric } from 'web-vitals';

onMetric(metric => {
  console.log(metric.name, metric.value, metric.delta, metric.id);
});

Параметр metric — объект, содержащий следующую структуру:

  • name — название метрики (CLS, FID, LCP, TTFB, FCP).
  • value — текущее значение метрики.
  • delta — изменение значения метрики с последнего измерения (полезно для CLS).
  • id — уникальный идентификатор измерения, который может использоваться для связывания событий.

Функция вызывается автоматически для каждой метрики, как только соответствующее событие фиксируется на странице.

Поддерживаемые метрики

  1. CLS (Cumulative Layout Shift) — измеряет непредвиденные сдвиги контента.
  2. FID (First Input Delay) — задержка отклика на первое взаимодействие пользователя.
  3. LCP (Largest Contentful Paint) — время загрузки наибольшего видимого элемента.
  4. TTFB (Time to First Byte) — время получения первого байта ответа от сервера.
  5. FCP (First Contentful Paint) — момент появления первого содержимого на экране.

Каждая метрика имеет свои особенности измерения и точности. onMetric автоматически собирает все данные и передаёт их в единую функцию обратного вызова, исключая необходимость вручную вызывать каждую отдельную функцию.

Преимущества использования onMetric

  • Централизация логики: не нужно вызывать пять отдельных функций для каждой метрики.
  • Единый объект метрики: упрощает отправку данных в аналитические системы.
  • Поддержка последующих изменений: метрики могут обновляться при динамических изменениях страницы, например, при SPA-навигации.
  • Отслеживание изменений: delta позволяет отслеживать рост CLS при взаимодействии пользователя.

Примеры расширенного использования

Отправка данных в аналитическую систему

onMetric(metric => {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify(metric),
    headers: { 'Content-Type': 'application/json' },
  });
});

Фильтрация и логирование только критических метрик

onMetric(metric => {
  if (metric.name === 'CLS' && metric.value > 0.1) {
    console.warn('High CLS detected:', metric.value);
  }
});

Поддержка SPA и динамического контента

let currentRoute = location.pathname;

onMetric(metric => {
  if (location.pathname !== currentRoute) {
    currentRoute = location.pathname;
    console.log(`Metric for ${currentRoute}:`, metric);
  }
});

Особенности работы с delta и идентификаторами

  • delta актуален для метрик, которые могут изменяться с течением времени, таких как CLS. Для метрик типа FID или TTFB delta всегда равен значению.
  • id позволяет уникально идентифицировать каждое событие, что полезно при агрегации данных на сервере или при визуализации исторических метрик.

Оптимизация и интеграция

  • onMetric можно комбинировать с инструментами аналитики вроде Google Analytics или собственной системой мониторинга.
  • Рекомендуется использовать дебаунсинг или батчинг при отправке данных на сервер для снижения нагрузки.
  • В SPA приложениях стоит вызывать onMetric один раз при инициализации и обновлять метрики по необходимости, чтобы не создавать лишние подписки.

Эта функция обеспечивает единый канал сбора всех Core Web Vitals метрик, упрощает интеграцию с аналитикой и позволяет детально отслеживать показатели производительности страницы без дублирования кода и сложных проверок.

Оглавление