INP: как измерять отклик страницы на действия

Что измеряется после нажатия

Interaction to Next Paint оценивает промежуток от взаимодействия до следующего отображённого кадра. В него могут входить ожидание начала обработки, работа обработчиков событий и подготовка визуального обновления. Метрика рассматривает взаимодействия в ходе использования страницы, а не только её стартовую загрузку. INP не является средним временем всех кликов: он отражает один из самых медленных откликов за посещение с учётом правил расчёта.

Прокрутка и наведение мыши не входят в набор взаимодействий INP так же, как клики, касания и клавиатура. Это не означает, что плавность прокрутки не важна: просто для разных проблем нужны подходящие способы проверки. Не следует называть задержку любого движения на экране измеренным INP.

Учебный пример: посетитель нажимает фильтр товаров. Кнопка сразу показывает состояние загрузки, а результат приходит позже. Быстрая обратная связь и длительность всей операции здесь различаются. Хороший отклик ещё не обещает мгновенного ответа сервера; оба этапа нужно рассматривать с точки зрения пользователя.

Полевой результат и пороги

Для оценки опыта посетителей используют 75-й перцентиль, отдельно для мобильных устройств и компьютеров. INP до 200 мс включительно считается хорошим. Значение свыше 200 до 500 мс включительно требует улучшения, выше 500 мс считается плохим. Важен источник числа: полевая оценка и задержка выбранного тестового клика не являются одной выборкой.

В CrUX доступны обобщённые сведения о реальных посещениях. Отсутствие значения не означает, что никто никогда не взаимодействовал со страницей, и не доказывает нулевую задержку. Могло не хватить подходящих наблюдений. Не подставляйте вместо них TBT или балл Performance.

Где может возникнуть задержка

До запуска обработчика главный поток браузера может быть занят другой работой: выполнением скриптов, таймерами или предыдущими событиями. Тогда часть задержки возникает ещё до выполнения кода кнопки. Ускорение самого обработчика не устранит всё ожидание, если причина находится раньше.

Другая часть связана с выполнением обработчиков: например, пересчётом большой выборки или созданием множества элементов. После окончания JavaScript браузеру ещё может понадобиться работа со стилями, расположением блоков и отрисовкой. Поэтому полезнее исследовать профиль одного воспроизводимого действия, чем произвольно отключать скрипты.

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

Как проверить взаимодействие

1. Выберите полезный сценарий: открыть меню, переключить вкладку, применить фильтр. Запишите URL, устройство и шаги до действия. Не используйте оформление покупки или отправку личных данных как случайный тест.
2. Повторите действие в одинаковых условиях. Укажите, выполнялось ли оно сразу после загрузки или позже. Фоновая работа страницы в эти моменты может различаться.
3. Запишите профиль в Performance и найдите нужное взаимодействие. Посмотрите, где расходуется время: до обработчика, внутри него или перед обновлением кадра.
4. Для дополнительной диагностики можно открыть бесплатный INP Debugger. Он проверяет выбранные элементы, но не сообщает, как часто именно их нажимают все посетители сайта.
5. Сохраните сам сценарий и профиль, затем проверьте изменение теми же шагами. Если проблема не воспроизводится, зафиксируйте это ограничение вместо утверждения, что она исправлена.

Что улучшать по результатам профиля

При ожидании свободного потока рассматривают уменьшение необязательной работы и порядок её выполнения. При тяжёлом обработчике сокращают вычисления и обновления интерфейса. Если большая задержка возникает перед кадром, проверяют объём изменений страницы и работу со стилями. Выбор зависит от наблюдений, а не от одного красного числа.

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

Чего не доказывает хороший тест

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

TBT полезен для поиска блокировки при загрузке, но не заменяет INP. Задача может мешать тесту загрузки и не пересекаться с обычным действием посетителя. Возможна и обратная ситуация: поздний обработчик создаёт задержку, которую стартовый тест не увидел. Поэтому перенос одного числа в колонку другого показателя неверен.

Как читать результат после изменения

Лабораторный профиль помогает проверить конкретное исправление. Полевые данные показывают последующий опыт подходящих посетителей за свой период и обновляются отдельно. Сохраните дату публикации, сценарий, устройство и результаты повторов. Не обещайте, что одна правка немедленно изменит весь CrUX или обеспечит позиции в поиске.

В отчёте скорости Seohonest лабораторные показатели подписаны отдельно. Для анализа взаимодействий используйте подходящий источник INP, а затем передавайте разработчику воспроизводимый сценарий. Одного общего балла недостаточно, чтобы установить причину задержки конкретной кнопки или подтвердить исправление.