Поле interactionType

В контексте библиотеки Web Vitals поле interactionType играет ключевую роль при измерении показателя First Input Delay (FID) и других метрик, связанных с интерактивностью страницы. Это свойство позволяет точно идентифицировать, какой тип взаимодействия пользователя вызвал событие, и тем самым помогает анализировать производительность интерфейса на уровне пользовательских действий.

Назначение interactionType

interactionType отражает конкретный способ взаимодействия пользователя с элементами страницы, который инициировал событие ввода. В основном это относится к событиям типа:

  • pointerdown
  • keydown
  • click
  • touchstart

Поле фиксирует именно категорию события, а не конкретный DOM-элемент. Благодаря этому можно понимать, через какие каналы взаимодействия пользователи чаще всего сталкиваются с задержками.

Формат и возможные значения

Поле interactionType возвращается в объекте события метрики Web Vitals, например, при вызове FID через API:

import { getFID } from 'web-vitals';

getFID((metric) => {
  console.log(metric.name);          // "FID"
  console.log(metric.value);         // Задержка в миллисекундах
  console.log(metric.delta);         // Изменение значения с момента предыдущего измерения
  console.log(metric.id);            // Уникальный идентификатор события
  console.log(metric.entries);       // Массив PerformanceEventTiming
  console.log(metric.entries[0].interactionType); // Тип взаимодействия
});

Возможные значения поля interactionType:

  • "click" – клик мышью по элементу
  • "keydown" – нажатие клавиши на клавиатуре
  • "pointerdown" – нажатие на сенсорный экран или указатель
  • "touchstart" – начало касания на мобильных устройствах

Эти значения строго соответствуют стандарту Event Timing API, который является основой измерений FID.

Взаимосвязь с другими полями метрики

Поле interactionType тесно связано с массивом entries метрики. Каждый элемент entries представляет собой объект PerformanceEventTiming, содержащий:

  • startTime – время начала события в миллисекундах от загрузки страницы
  • duration – продолжительность обработки события
  • name – название события (например, "click")
  • interactionId – идентификатор пользовательского взаимодействия, который связывает последовательные события

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

Примеры практического применения

  1. Анализ задержек на мобильных устройствах
getFID((metric) => {
  metric.entries.forEach(entry => {
    if (entry.interactionType === 'touchstart') {
      console.log(`Задержка при касании: ${entry.duration} мс`);
    }
  });
});

Этот подход позволяет отделять FID для сенсорного ввода и мыши, что особенно важно для адаптивных интерфейсов.

  1. Фильтрация интерактивных элементов по типу ввода
getFID((metric) => {
  const keyboardEvents = metric.entries.filter(entry => entry.interactionType === 'keydown');
  console.log(`Количество задержек на клавиатуре: ${keyboardEvents.length}`);
});

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

Ограничения и нюансы использования

  • interactionType доступен только для событий, которые связаны с пользовательским вводом, и не будет заполнен для других типов метрик, например CLS или LCP.
  • Для браузеров, которые не поддерживают Event Timing API, поле может быть undefined. В таких случаях необходимо предусмотреть полифилл или fallback-логику.
  • interactionType отражает тип первичного события, а не цепочки последующих обработчиков. Если событие инициировало сложную анимацию, поле будет указывать лишь на стартовую точку взаимодействия.

Выводы по применению

Использование поля interactionType позволяет:

  • Точно определять тип пользовательского действия, вызывающего задержку,
  • Разделять метрики по каналам ввода (мышь, клавиатура, сенсор),
  • Создавать детализированные отчёты FID, позволяющие улучшать UX и производительность интерфейсов,
  • Проводить мониторинг доступности и реагировать на проблемы с интерактивностью на конкретных устройствах.

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

Оглавление