INP больше 200 мс в Search Console — как исправить?

Ошибка «INP > 200 мс» в Google Search Console означает, что сайт медленно реагирует на действия пользователя — клики, тапы, ввод текста. Это не скорость загрузки (LCP), а отзывчивость интерфейса.

Где искать причину

Шаг 1: Откройте Chrome DevTools → вкладка Performance → запишите взаимодействие (клик по меню, добавление в корзину). Ищите «Long Tasks» — задачи дольше 50 мс, которые блокируют основной поток.

Шаг 2: Проверьте типичных виновников:

• Тяжёлые JS-библиотеки: слайдеры, кастомные селекты, виджеты чата. Один виджет «С этим товаром покупают» может блокировать поток на 300+ мс.
• Сторонние скрипты: аналитика, пиксели ретаргетинга, рекламные сети. Каждый добавляет задержку.
• Неоптимизированные обработчики событий: scroll-listener без throttle/debounce, тяжёлые onClick.

Как исправить

1. Отложите неиспользуемый JS: defer и async для скриптов, которые не нужны при первой загрузке.
2. Разбейте Long Tasks: используйте requestIdleCallback или setTimeout(fn, 0) для дробления тяжёлых операций.
3. Уберите или замените тяжёлые виджеты: ленивая загрузка для чатов и рекомендательных блоков.
4. Минифицируйте и tree-shake JS: удалите неиспользуемый код из бандла.

Целевое значение: INP < 200 мс. В моей практике после оптимизации JS-виджетов на e-commerce проекте INP упал с 320 мс до 150 мс, конверсия в корзину выросла на 11%.

В своей практике я часто сталкиваюсь с тем, что INP ухудшается из-за микрооптимизаций, которые не учитывают общую картину. Например, замена jQuery на нативный JS может дать прирост, но если при этом оставить тяжёлый слайдер с анимациями — проблема останется. Используйте Lighthouse или WebPageTest для проверки INP в разных сценариях, особенно на мобильных устройствах с медленным CPU. Обратите внимание на «Event Handlers» в Performance Tab — иногда один обработчик клика делает 10+ вложенных вызовов, что создаёт каскадную блокировку.

Для срочного улучшения рекомендую приоритезировать критические взаимодействия: кнопки «Купить», формы заказа, фильтры. Если INP выше 200 мс только в 5% случаев — это уже повод для оптимизации. Включите throttling в DevTools (4x CPU slowdown) для реалистичного тестирования. Часто помогает отложенная загрузка невидимых блоков (например, чат подгружать после 3 секунд бездействия) или замена CSS-анимаций на `transform/opacity` — они не блокируют поток.