Почему INP заменил FID

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

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

Принцип измерения INP

Метрика INP рассчитывается следующим образом:

  1. Сбор всех интерактивных событий на странице. К интерактивным относятся события click, keydown, pointerdown и touchstart.

  2. Замер времени обработки каждого события, включая:

    • задержку между пользовательским действием и началом обработки события (delay);
    • время выполнения обработчика события (duration).

  3. Выбор критического события для INP:

    • если событий менее 50, берется максимальное время среди всех событий;
    • если событий больше 50, берется девяностый перцентиль по времени отклика.

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

Почему FID устарел

Недостатки FID:

  • Измеряет только первое взаимодействие, игнорируя последующие.
  • Не учитывает динамически загружаемые скрипты и интерактивные элементы, появляющиеся после загрузки страницы.
  • Не показывает реальную производительность страницы для пользователей, которые активно взаимодействуют с контентом.

INP устраняет эти ограничения, предоставляя:

  • Полное покрытие всех интерактивных событий.
  • Более стабильный показатель отзывчивости страницы.
  • Возможность выявлять узкие места в интерактивных компонентах, которые FID просто не фиксировал.

Использование Web Vitals для измерения INP

Библиотека Web Vitals предоставляет удобный способ интеграции INP в JavaScript-код:

import { getINP } from 'web-vitals';

getINP((metric) => {
  console.log('INP:', metric.value);
  // metric.name - название метрики
  // metric.value - время отклика в миллисекундах
  // metric.entries - массив событий, участвующих в расчете
});

Особенности API:

  • Колбэк вызывается асинхронно, после того как можно получить достоверное значение INP.
  • metric.entries содержит подробную информацию о каждом событии: startTime, processingStart, duration. Это позволяет анализировать конкретные узкие места в интерактивности страницы.

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

  • Для современных сайтов INP становится ключевой метрикой производительности, особенно для SPA (Single Page Applications), где большое количество интерактивных элементов загружается динамически.

  • Оптимизация INP включает:

    • разбиение тяжёлых скриптов на асинхронные части;
    • использование requestIdleCallback и setTimeout для низкоприоритетных задач;
    • минимизацию блокирующего JavaScript;
    • оптимизацию работы с DOM и уменьшение времени выполнения обработчиков событий.

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

Связь INP с Core Web Vitals

INP напрямую влияет на оценку пользовательского опыта в Core Web Vitals. Метрики LCP, CLS и INP формируют полное представление о загрузке, визуальной стабильности и интерактивности страницы. INP становится ключевым компонентом для SEO и пользовательской удовлетворенности, поскольку Google учитывает её при ранжировании сайтов в поисковой выдаче.

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

Оглавление