Тип Metric и его универсальная структура

Библиотека Web Vitals в JavaScript предоставляет разработчикам стандартизированные метрики для оценки пользовательского опыта на веб-страницах. Основной единицей измерения является объект Metric, который обладает универсальной структурой, подходящей для всех ключевых показателей производительности.

Универсальные свойства объекта Metric

Каждая метрика в Web Vitals представлена объектом с набором обязательных и опциональных свойств:

  1. name Строковое значение, определяющее название метрики. Например, 'CLS', 'LCP', 'FID', 'TTFB'. Используется для идентификации метрики в логах и аналитических системах.

  2. value Числовое значение метрики, отражающее измеренный показатель. Единицы измерения зависят от типа метрики:

    • Для LCP — миллисекунды до отображения крупнейшего содержимого.
    • Для CLS — безразмерный коэффициент суммарного смещения элементов страницы.
    • Для FID — миллисекунды задержки первой интерактивности.
    • Для TTFB — миллисекунды до получения первого байта от сервера.

  3. delta Число, показывающее изменение значения метрики по сравнению с предыдущим измерением. Позволяет отслеживать динамику и выявлять ухудшения производительности при интерактивном мониторинге.

  4. entries Массив объектов PerformanceEntry или их производных, которые привели к формированию значения метрики. Для LCP это могут быть записи largest-contentful-paint, для CLS — записи layout-shift. Это свойство обеспечивает глубокий доступ к деталям метрики и позволяет анализировать конкретные элементы страницы, которые влияют на пользовательский опыт.

  5. id Уникальный идентификатор метрики. Генерируется автоматически и используется для связывания нескольких замеров одной метрики в динамических сценариях, например при SPA-приложениях, где одна и та же метрика может меняться многократно.

Принципы использования Metric

  • Все метрики имеют универсальный интерфейс, что позволяет использовать один и тот же код для обработки различных показателей.
  • Свойство entries даёт возможность детализированного анализа без необходимости прямого обращения к API Performance.
  • delta позволяет строить графики изменений и реагировать на ухудшение показателей в реальном времени.

Типизация и совместимость

В TypeScript объект Metric описывается следующим образом:

interface Metric {
  name: 'CLS' | 'FID' | 'LCP' | 'TTFB' | string;
  value: number;
  delta: number;
  entries: PerformanceEntry[];
  id: string;
}

Такое строгое определение обеспечивает корректную типизацию при сборе метрик и передаче их в аналитику.

Особенности реализации Web Vitals

  • Метрики собираются асинхронно, с учётом реального поведения пользователя.
  • Для SPA и страниц с динамическим контентом каждый объект Metric может быть сгенерирован несколько раз.
  • Поддерживается автоматическая фильтрация дублей с помощью id, что гарантирует точность данных.

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

import { getLCP, getCLS } from 'web-vitals';

getLCP((metric) => {
  console.log(metric.name);   // LCP
  console.log(metric.value);  // миллисекунды
  console.log(metric.entries); // массив PerformanceEntry
});

getCLS((metric) => {
  console.log(metric.delta);  // изменение метрики с момента последнего измерения
});

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

Практическая ценность Metric

  • Позволяет создавать динамические отчёты о производительности страницы.
  • Обеспечивает гибкий мониторинг в реальном времени.
  • Универсальная структура облегчает объединение данных разных метрик в единую аналитическую панель.

Универсальный объект Metric является ключевым элементом библиотеки Web Vitals, объединяя все показатели производительности в единый интерфейс с понятной и предсказуемой структурой.

Оглавление