Инструкция

INP: почему интерфейс тормозит после нажатия

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

Поясняющая схема к материалу «INP: почему интерфейс тормозит после нажатия».
Поясняющая схема к материалу «INP: почему интерфейс тормозит после нажатия».

Воспроизведите действие#

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

В трассе выделите ожидание обработки, выполнение обработчика и задержку до следующего отображения.

Разберите тяжёлый обработчик#

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

Отложенный вызов уменьшает число запусков, но не делает один тяжёлый запуск дешёвым. Сначала измерьте работу, уменьшите объём обработки, затем при необходимости рассмотрите Web Worker для подходящих вычислений. Worker не может напрямую обновлять DOM.

Приёмка и ограничения#

  1. Сохраните исходную трассу и условия.
  2. Внесите одно обоснованное изменение.
  3. Повторите одинаковые действия несколько раз.
  4. Проверьте, что результат фильтра и доступность управления сохранились.
  5. После выпуска оцените полевые данные при достаточном объёме посещений.

Ориентир INP — не более 200 мс на 75-м перцентиле. Один измеренный клик не является итоговым полевым показателем сайта. См. как сравнивать измерения.

Источники#

Проверены 23 октября 2026 г.. Официальные рекомендации отделены от наших примеров и результатов проверки.

Продолжить разбор