Поле name и перечень возможных значений

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

Структура поля name

Поле name представляет собой строку, значение которой указывает на конкретную метрику. В объекте метрики Web Vitals это выглядит следующим образом:

{
  name: 'CLS',   // имя метрики
  value: 0.05,   // числовое значение
  delta: 0.05,   // изменение с последнего измерения
  id: 'v1-12345' // уникальный идентификатор
}
  • name — уникальное имя метрики.
  • value — измеренное значение метрики.
  • delta — изменение значения с предыдущего измерения (актуально для долгоживущих страниц SPA).
  • id — уникальный идентификатор события для отслеживания.

Основные значения поля name

Web Vitals выделяет несколько ключевых метрик, каждая из которых имеет строго определённое имя. Рассмотрим их подробно.

  1. CLS (Cumulative Layout Shift)

    • Описание: измеряет кумулятивное смещение контента страницы во время её загрузки.
    • Диапазон значений: от 0 (идеально) до 1+ (плохо).
    • Ключевой момент: фиксирует только неожиданные смещения, а не преднамеренные анимации.

  2. FID (First Input Delay)

    • Описание: оценивает задержку реакции страницы на первое взаимодействие пользователя (например, клик или нажатие клавиши).
    • Единица измерения: миллисекунды (ms).
    • Практическое значение: значение FID до 100 мс считается отличным, до 300 мс — удовлетворительным, выше 300 мс — плохим.

  3. LCP (Largest Contentful Paint)

    • Описание: определяет время рендеринга самого большого видимого элемента контента на экране пользователя.
    • Единица измерения: миллисекунды (ms).
    • Цель: LCP менее 2.5 секунд — показатель хорошей производительности.

  4. TTFB (Time to First Byte)

    • Описание: измеряет время, прошедшее от запроса страницы до получения первого байта ответа сервера.
    • Применение: критично для оценки серверной производительности и скорости отклика.

  5. INP (Interaction to Next Paint)

    • Описание: новая метрика, оценивающая отзывчивость страницы при всех пользовательских взаимодействиях, а не только первом.
    • Практическое использование: INP менее 200 мс — отлично, 200–500 мс — удовлетворительно, более 500 мс — требует оптимизации.

Дополнительные значения для расширенного мониторинга

Помимо основных метрик, библиотека Web Vitals позволяет отслеживать и другие значения через поле name, если подключены расширенные модули или кастомные метрики:

  • FCP (First Contentful Paint) — время появления первого текстового или графического элемента.
  • TTI (Time to Interactive) — время до полной интерактивности страницы.
  • CLS-Session — кумулятивное смещение за сессию пользователя, учитывающее несколько навигаций.

Принципы использования поля name в коде

  1. Уникальность и читаемость — всегда использовать стандартные имена Web Vitals, чтобы интеграции с аналитикой оставались корректными.
  2. Фильтрация по name — при сборе метрик важно фильтровать события по значению name, например:
import {getCLS, getFID, getLCP} from 'web-vitals';

getCLS(metric => {
  if (metric.name === 'CLS') {
    console.log('CLS метрика:', metric.value);
  }
});

getFID(metric => {
  if (metric.name === 'FID') {
    console.log('FID метрика:', metric.value);
  }
});
  1. Логирование и передача в аналитику — поле name обеспечивает однозначную идентификацию каждой метрики в системах мониторинга, таких как Google Analytics, Datadog или собственные решения.

Заключение по полю name

Поле name является центральным элементом структуры Web Vitals и служит ключом для идентификации и категоризации метрик. Корректное понимание возможных значений и их интерпретация позволяет точно оценивать производительность страницы и принимать обоснованные решения по её оптимизации.

Оглавление