Функция onINP и её поведение

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

Основные принципы работы onINP

onINP принимает один обязательный аргумент — callback-функцию, которая вызывается при получении значения INP. Синтаксис выглядит следующим образом:

import { onINP } from 'web-vitals';

onINP((metric) => {
  console.log(metric.name, metric.value, metric.entries);
});
  • metric.name — название метрики, в данном случае всегда 'INP'.
  • metric.value — числовое значение INP в миллисекундах, которое отражает задержку между взаимодействием и рендером.
  • metric.entries — массив объектов PerformanceEventTiming, содержащий детализированные сведения о событиях взаимодействия, включая тип события, время начала, длительность и другие параметры.

Параметры и объект metric

Объект, передаваемый в callback, предоставляет структурированную информацию для анализа:

  • name: строка 'INP'.

  • value: число, среднее или максимальное значение задержки взаимодействия. Значение выбирается в зависимости от стадии загрузки страницы и количества взаимодействий.

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

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

    • entryType — тип записи ('event'), всегда указывает на взаимодействие.
    • name — имя события ('click', 'keydown', 'pointerdown' и т.д.).
    • startTime — время начала события в миллисекундах с момента загрузки страницы.
    • duration — длительность обработки события в миллисекундах.

Поведение функции в различных условиях

  1. Инициализация до полной загрузки страницы onINP можно вызывать сразу при инициализации скрипта, до полной загрузки DOM. В этом случае метрика будет собирать данные с момента загрузки, фиксируя все взаимодействия, начиная с ранней стадии.

  2. События взаимодействия INP учитывает не только клики и нажатия клавиш, но и сенсорные события на мобильных устройствах. Все события анализируются с точки зрения того, сколько времени потребовалось браузеру для полного визуального отклика.

  3. Формирование итогового значения В течение жизни страницы onINP может вызываться несколько раз по мере поступления новых данных. Итоговое значение INP для страницы вычисляется следующим образом:

    • Если количество событий невелико, берётся максимальная длительность отдельного события.
    • Для страниц с большим количеством взаимодействий используется среднее из 98-го перцентиля всех длительностей. Такой подход позволяет учитывать наиболее критические задержки без сильного влияния редких пиков.

  4. Отправка данных на сервер или в аналитические системы Callback-функция onINP может использоваться для отправки данных о производительности на сервер, в систему мониторинга или в аналитические платформы, например:

onINP((metric) => {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify(metric),
    headers: { 'Content-Type': 'application/json' }
  });
});

Тонкости и особенности использования

  • События, не влияющие на визуальный отклик, не учитываются. INP фокусируется исключительно на тех событиях, после которых пользователь ожидает видимого изменения интерфейса.
  • Асинхронная обработка внутри callback не блокирует основное измерение метрики, что позволяет безопасно выполнять сетевые запросы и вычисления.
  • Обновление метрики в реальном времени — значение INP может корректироваться по мере новых взаимодействий, поэтому важно учитывать, что первое значение не всегда окончательное.
  • Поддержка разных типов взаимодействий — функция корректно работает для кликов мышью, тач-событий, ввода с клавиатуры и даже скроллинга, если событие инициирует визуальное обновление.

Рекомендации по интеграции

  • Для SPA и динамических страниц onINP лучше вызывать один раз при инициализации приложения и использовать кумулятивное обновление метрик.
  • Для серверного рендеринга и аналитики по пользователям важно сохранять весь массив entries для последующего анализа.
  • Если требуется отслеживать INP только для конкретных интерактивных элементов, можно фильтровать события по entry.name внутри callback.

Пример расширенного использования

onINP((metric) => {
  const slowInteractions = metric.entries.filter(e => e.duration > 200);
  slowInteractions.forEach(e => {
    console.warn(`Событие ${e.name} заняло ${e.duration}ms`);
  });
});

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

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

Оглавление