INP

Определение простыми словами

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

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

Сравнение

Кейсы использования

• Оптимизация интерактивных элементов для повышения отзывчивости сайта.
• Оценка пользовательского опыта при разработке SPA (Single Page Applications).
• Анализ влияния тяжелого JavaScript-кода на задержки интерфейса.
• Сравнение производительности между различными устройствами и сетями.
• Мониторинг и улучшение показателей при обновлении или рефакторинге фронтенда.

Негативный пример:

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

Технические детали

INP считается ключевой метрикой в Lighthouse и Web Vitals, пришедшей на смену FID для оценки интерактивности страницы. Метрика основана на измерении задержек между взаимодействием пользователя и следующей визуальной отрисовкой, фиксируемой API браузера.

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

// Пример сбора данных INP с использованием PerformanceObserverif ('PerformanceObserver' in window) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.entryType === 'event') {
        console.log('INP задержка:', entry.processingStart - entry.startTime, 'мс');
      }
    }
  });
  observer.observe({ type: 'event', buffered: true });
}

Подробнее о метрике INP можно узнать в разделе Interaction to Next Paint, а также ознакомиться с другими метриками в Web Vitals и вопросами производительности в Performance.

Частые вопросы