MetricType и MetricRatingThresholds

Библиотека Web Vitals в JavaScript предоставляет набор инструментов для измерения ключевых показателей производительности веб-страниц. Основные метрики включают Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS) и другие. Для эффективного анализа результатов и их интерпретации используются типы метрик и пороговые значения, определяемые через MetricType и MetricRatingThresholds.

MetricType

MetricType представляет собой типизацию метрик, поддерживаемых библиотекой. Каждый объект метрики включает:

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

Пример структуры объекта MetricType:

{
  name: "LCP",
  value: 2500,           // значение в миллисекундах
  delta: 50,             // изменение относительно предыдущего измерения
  entries: [...],        // массив PerformanceEntry
  id: "v1-LCP-abc123"
}

Каждый тип метрики имеет специфические особенности:

  • LCP (Largest Contentful Paint) измеряет время загрузки самого большого видимого элемента на странице.
  • FID (First Input Delay) оценивает задержку отклика страницы на первое взаимодействие пользователя.
  • CLS (Cumulative Layout Shift) учитывает суммарное смещение элементов страницы, влияющее на визуальную стабильность.

Использование MetricType позволяет унифицировать обработку метрик, независимо от того, как они измеряются или собираются.

MetricRatingThresholds

MetricRatingThresholds определяет границы для классификации метрик по качеству. Основные категории:

  • Good — показатель в пределах, считающихся оптимальными для пользователя.
  • Needs Improvement — значение метрики выше минимально допустимого, но требует оптимизации.
  • Poor — критическое значение, существенно ухудшающее пользовательский опыт.

Для каждой метрики устанавливаются пороговые значения:

const MetricRatingThresholds = {
  LCP: {
    good: 2500,       // миллисекунды
    needsImprovement: 4000
  },
  FID: {
    good: 100,        // миллисекунды
    needsImprovement: 300
  },
  CLS: {
    good: 0.1,        // безразмерная величина
    needsImprovement: 0.25
  }
};

Интерпретация значения метрики через пороговые уровни:

function rateMetric(value, thresholds) {
  if (value <= thresholds.good) return 'good';
  if (value <= thresholds.needsImprovement) return 'needsImprovement';
  return 'poor';
}

const lcpRating = rateMetric(3200, MetricRatingThresholds.LCP); // 'needsImprovement'

Интеграция MetricType и MetricRatingThresholds

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

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

const metrics = [];

function processMetric(metric) {
  const thresholds = MetricRatingThresholds[metric.name];
  const rating = rateMetric(metric.value, thresholds);
  metrics.push({ ...metric, rating });
}

getLCP(processMetric);
getFID(processMetric);
getCLS(processMetric);

В результате каждый объект метрики получает следующие свойства:

  • name — тип метрики
  • value — численное значение
  • delta — изменение
  • entries — массив PerformanceEntry
  • id — уникальный идентификатор
  • rating — классификация по пороговым значениям (good, needsImprovement, poor)

Практические рекомендации

  • Использовать MetricType как единый интерфейс для хранения и передачи данных о метриках.
  • Обновлять MetricRatingThresholds в соответствии с актуальными рекомендациями Google Core Web Vitals, чтобы оценки оставались релевантными.
  • Применять рейтинги метрик для построения аналитики пользовательского опыта и формирования отчётов о производительности страницы.
  • При визуализации метрик разделять их на категории (good, needsImprovement, poor) для наглядного анализа.

Такое сочетание MetricType и MetricRatingThresholds обеспечивает структурированное и стандартизированное измерение производительности страниц, позволяя автоматически классифицировать показатели и выявлять узкие места в пользовательском опыте.

Оглавление