Какие взаимодействия учитываются

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

Первичный фокус: First Input Delay (FID)

Метрика First Input Delay (FID) измеряет задержку между первым взаимодействием пользователя и моментом, когда браузер способен на него отреагировать. К взаимодействиям, учитываемым FID, относятся:

  • Клики мышью — любые нажатия на элементы, способные вызвать обработчики событий.
  • Касания на сенсорных экранах — например, касание кнопки на мобильном устройстве.
  • Нажатия клавиш — ввод с клавиатуры, влияющий на функциональность страницы (например, ввод в форму).
  • Активация управляющих элементов — такие как переключатели, чекбоксы, радиокнопки.

Метрика не учитывает события, которые не инициируют обработку JavaScript, например, скроллинг или зум страницы, если они не вызывают обработчики событий.

Вторичный фокус: Interaction to Next Paint (INP)

Метрика Interaction to Next Paint (INP) расширяет концепцию FID, оценивая все значимые взаимодействия на странице, а не только первое. К взаимодействиям INP относятся:

  • Кликовые события, включая повторные клики по элементам интерфейса.
  • Формы ввода, включая текстовые поля, радиокнопки и выпадающие списки.
  • Навигационные действия внутри SPA (Single Page Application), если они инициируют ререндер элементов.
  • Другие пользовательские действия, которые вызывают визуальный отклик страницы, измеряемый временем до следующего кадра после взаимодействия.

INP позволяет оценить общее качество интерактивности, а не только первоначальное впечатление.

События Pointer Events и Keyboard Events

Web Vitals учитывает взаимодействия через два основных типа событий:

  1. Pointer Events

    • pointerdown, pointerup — нажатие и отпускание пальца или мыши.
    • click — событие клика, формируемое браузером после pointerup.

  2. Keyboard Events

    • keydown, keyup — нажатие и отпускание клавиши.
    • input — изменение значения элемента ввода, напрямую связанное с действием пользователя.

Каждое из этих событий измеряется с точки зрения задержки между действием пользователя и откликом страницы, что является критическим для FID и INP.

Исключения и особенности

Не все действия пользователя учитываются при расчёте Web Vitals:

  • События скролла не входят в FID, но могут участвовать в INP, если инициируют перерисовку контента.
  • События hover или mousemove без изменения DOM не влияют на метрики интерактивности.
  • События, обрабатываемые асинхронно через setTimeout или requestAnimationFrame, учитываются с точки зрения задержки до фактического отклика.

Рекомендации по измерению

При использовании библиотеки важно:

  • Отслеживать все значимые интеракции, которые пользователь воспринимает как отклик интерфейса.
  • Игнорировать незначимые или чисто визуальные действия, не влияющие на пользовательский опыт.
  • Понимать, что FID оценивает только первое взаимодействие, а INP учитывает множество взаимодействий, создавая более полную картину интерактивности страницы.

Итоговая логика учета взаимодействий

  1. Определяется событие пользователя (клик, касание, ввод).
  2. Проверяется, инициирует ли оно обработку JavaScript, изменяющую состояние интерфейса.
  3. Измеряется задержка до отклика браузера (FID) или до следующего визуального обновления (INP).
  4. События без визуального отклика игнорируются.

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

Оглавление