Параметр durationThreshold в onINP

Метрика INP (Interaction to Next Paint) измеряет качество отклика страницы на действия пользователя. Основной задачей INP является оценка задержки между пользовательским вводом и моментом, когда браузер визуально обновляет интерфейс, чтобы отразить этот ввод. Важным элементом настройки отслеживания INP является параметр durationThreshold.

Назначение durationThreshold

durationThreshold задаёт пороговую длительность, после которой задержка взаимодействия считается проблемной. Иными словами, это максимальное допустимое время отклика, превышение которого влияет на метрику INP. Значение задаётся в миллисекундах и позволяет фильтровать редкие или экстремальные задержки, которые могут искажать реальную картину UX.

Пример базовой структуры использования:

import { onINP } from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value);
}, {
  durationThreshold: 200 // миллисекунды
});

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

Механизм работы

INP собирает все пользовательские взаимодействия на странице (клики, нажатия клавиш, сенсорные события) и фиксирует время от события до следующего полного визуального обновления. Метрика хранит несколько значений задержек и применяет алгоритм оценки:

  1. Если количество взаимодействий меньше определённого числа, используется среднее значение задержки.
  2. Если взаимодействий достаточно много, выбирается 95-й перцентиль задержек, чтобы исключить редкие быстрые реакции.

durationThreshold влияет на то, какие задержки считаются значимыми:

  • Задержка меньше durationThreshold не повышает значение INP.
  • Задержка больше durationThreshold учитывается как проблемная, что увеличивает итоговое значение метрики.

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

Настройка и подбор значения

Выбор подходящего порогового значения зависит от целей анализа:

  • 200–300 мс — подходит для большинства веб-приложений, отражает хорошую отзывчивость интерфейса.
  • 300–500 мс — применимо для сложных SPA с тяжёлыми обработчиками событий.
  • Более 500 мс — рекомендуется только для измерений критических пользовательских потоков, где важны экстремальные задержки.

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

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

  1. Обычная страница контента:
onINP(metric => {
  console.log(`INP значение: ${metric.value} мс`);
}, {
  durationThreshold: 200
});
  1. Сложное веб-приложение с динамическим рендерингом:
onINP(metric => {
  if (metric.value > 300) {
    console.warn(`Высокая задержка взаимодействия: ${metric.value} мс`);
  }
}, {
  durationThreshold: 300
});

В этих примерах видно, что durationThreshold позволяет дифференцировать обычные задержки от критических, обеспечивая точное измерение качества UX.

Взаимодействие с другими параметрами INP

Параметр durationThreshold напрямую влияет на:

  • metric.value — итоговое значение INP растёт при превышении порога.
  • metric.entries — список задержек, где фильтруются события с длительностью меньше порога.
  • алгоритмы агрегации — среднее, перцентиль или другие методы анализа задержек учитывают только события, превышающие durationThreshold.

Это делает durationThreshold критически важным инструментом для точной настройки метрики и предотвращения ложных срабатываний.

Практические рекомендации

  • Начинать с 200 мс, постепенно корректируя порог под конкретное приложение.
  • Использовать разные пороги для анализа разных типов взаимодействий (клики, клавиатура, сенсор).
  • Сохранять значения метрик вместе с порогом, чтобы при сравнении отчетов был понятен контекст измерения.
  • Совмещать с другими Web Vitals (CLS, LCP, FID) для комплексной оценки UX.

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

Оглавление