Объект INPMetric: поля и типы

Объект INPMetric является одной из ключевых структур данных в библиотеке Web Vitals, используемой для измерения показателя Interaction to Next Paint (INP) — метрики, отражающей отзывчивость страницы на пользовательские взаимодействия. INP оценивает, сколько времени проходит между взаимодействием пользователя с интерфейсом (клик, нажатие клавиши, касание) и моментом, когда браузер визуально обновляет страницу.

Объект INPMetric представляет собой JavaScript-объект с фиксированным набором полей, каждое из которых имеет строго определённый тип и предназначение.

Основные поля INPMetric

  1. value

    • Тип: number
    • Описание: Основное числовое значение метрики INP в миллисекундах. Показывает длительность взаимодействия, измеряемую в реальном времени.
    • Примечание: Значение может быть дробным, но чаще всего округляется для отображения в аналитике. Метрика отражает наиболее значимое взаимодействие на странице, а не среднее значение всех взаимодействий.

  2. rating

    • Тип: 'good' | 'needs-improvement' | 'poor'

    • Описание: Категория качества взаимодействия, основанная на пороговых значениях INP:

      • 'good' — значение меньше 200 мс
      • 'needs-improvement' — 200–500 мс
      • 'poor' — больше 500 мс

    • Использование: Позволяет быстро классифицировать UX страницы для аналитических панелей и отчетов.

  3. delta

    • Тип: number
    • Описание: Изменение значения метрики с момента последнего измерения. Может быть отрицательным или положительным.
    • Применение: Используется для отслеживания динамики INP при последовательных пользовательских сессиях или при изменении состояния страницы.

  4. entries

    • Тип: Array

    • Описание: Массив объектов InteractionEntry, описывающих каждое отдельное пользовательское взаимодействие, участвовавшее в вычислении INP.

    • Структура InteractionEntry:

      interface InteractionEntry {
  name: string;          // Тип события: 'click', 'keydown', 'pointerdown' и др.
  startTime: number;     // Время начала взаимодействия относительно загрузки страницы (ms)
  processingEnd: number; // Время окончания обработки события (ms)
  duration: number;      // Длительность обработки события (ms)
}

    • Примечание: Поле entries позволяет анализировать, какие события наиболее влияют на задержку взаимодействия.

  5. id

    • Тип: string
    • Описание: Уникальный идентификатор конкретного измерения INP. Используется для связи данных с аналитическими платформами и внутренней отладкой.

  6. name

    • Тип: string
    • Описание: Строковое обозначение метрики, всегда 'INP'. Это поле упрощает интеграцию с инструментами визуализации и аналитики, где обрабатываются несколько Web Vitals одновременно.

  7. isFinal

    • Тип: boolean
    • Описание: Флаг, указывающий, что текущее значение INP является окончательным для данной страницы.
    • Контекст: Метрика INP может изменяться в течение сессии пользователя, если он совершает несколько взаимодействий. isFinal = true сигнализирует, что больше изменений не будет, и значение можно сохранять для отчетности.

  8. deltaMode

    • Тип: number

    • Описание: Определяет единицы измерения delta по аналогии с Performance API:

      • 0 — миллисекунды
      • 1 — секунды

    • Использование: Позволяет корректно интерпретировать delta при обмене данными между разными системами мониторинга.

Важные особенности структуры INPMetric

  • Объект не содержит методов, это чистая структура данных для передачи результатов измерений.
  • Каждое поле строго типизировано, что облегчает использование TypeScript и предотвращает ошибки при обработке аналитики.
  • Поле entries является основным источником для детального анализа задержек, позволяя выявлять узкие места в интерфейсе.
  • Параметр isFinal важен для оптимизации сетевых запросов: фиксированные значения INP отправляются в аналитические сервисы только после завершения сессии взаимодействий.
Оглавление