Что такое INP (Interaction to Next Paint)

Interaction to Next Paint (INP) - в переводе на русский "Взаимодействие - отрисовка" - это новая метрика стандарта оценки скорости работы сайтов Core Web Vitals. Она заменяет устаревшую метрику FID (First Input Delay) - "Задержку первого ввода". INP метрика строится на основе статистики отзывчивости интерфейса сайта, которая собирается браузерами Google Chrome с помощью Event Timing API. Если после взаимодействия со страницей (после клика, нажатия клавиши на клавиатуре) пользователь не видит на экране "обратной связи" на свое действие - считается, что это оказывает плохое впечатление на пользователя - bad user experience... INP подсчитывает задержку между всеми действиями пользователя на странице, и использует как показатель самое большое значение задержки. Низкое значение метрики INP означает, что страница сайта быстро реагирует на все действия пользователей.

Некоторые действия пользователя на странице объективно будут занимать больше времени, чем другие. Важно, чтобы визуальная обратная связь на действие пользователя показывалась как можно раньше, чтобы другие процессы, блокирующие работу страницы (загрузка какой-то информации, обновление страницы), не приводили к впечатлению, что "браузер завис". И это правило взаимодействия пользователя с сайтом должно работать для всех элементов на странице - для всех кнопок, ссылок и, в особенности, динамических элементов на AJAX.

На примере, справа, пользователь сразу видит отклик на свои действия - список разворачивается моментально. А слева - список разворачивается с ощутимой задержкой, что приводит к лишним кликом пользователя, который думает, что что-то не работает.

Определение INP

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

Метод расчета метрики INP

Взаимодействие пользователя - например, нажатие на экран мобильного телефона (тап) - вызывает группу событий в браузере - pointerup, pointerdown, и click. Взаимодействие также может быть вызвано из Javascript, из CSS или интерфейса браузера. Самая длинная задержка отрисовки после группы событий, вызванных действием пользователя, от времени, когда пользователь начал действие, до появления следующего фрейма для отображения в браузере, и является основой для подсчета метрики INP.

Какое значение INP у быстрого сайта

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

Для примерной оценки рекомендуется не учитывать 15% самых медленных замеров, а оставшиеся данные анализировать отдельно для мобильных устройств и отдельно для десктопов и ноутбуков:

• до 200 миллисекунд - хорошая скорость страницы
• от 200 до 500 миллисекунд - надо работать над улучшением скорости
• выше 500 миллисекунд - плохая скорость страницы

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

В чем отличие INP от FID?

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

Что, если никакие данные INP по странице не передаются?

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

Оригинал - web.dev (opens new window)