INP практически: как улучшить отзывчивость

Если у вас сайт «загружается быстро», но пользователю кажется, что он «тупит» после первого клика — у вас, скорее всего, проблема именно с INP. Эта метрика измеряет ощущение отзывчивости и заменила старую FID в Core Web Vitals.

01Что такое INP и чем отличается от FID

INP (Interaction to Next Paint) — это задержка между действием пользователя (клик, тап, нажатие клавиши) и моментом, когда браузер успевает отрисовать следующий кадр после этого действия. Простыми словами: «насколько быстро сайт реагирует на клик».

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

Пороги Google:

• До 200 мс — хорошо.
• 200–500 мс — требует улучшения.
• Больше 500 мс — плохо.

INP входит в Core Web Vitals и косвенно влияет на ранжирование. Подробнее о метриках — в статье Core Web Vitals: как пройти проверку скорости сайта.

02Почему INP проседает

Главный виновник — занятый главный поток JavaScript. Когда пользователь кликает, браузер должен:

• Получить событие.
• Выполнить обработчик клика.
• Дать другим скриптам шанс отработать.
• Пересчитать стили и разметку.
• Отрисовать кадр.

Если на любом из этих шагов JS «жуёт» сотни миллисекунд — пользователь видит «зависание». На сайтах малого бизнеса чаще всего виноваты:

• Тяжёлые сторонние скрипты: чаты, поп-апы, виджеты подписок.
• Конструкторы и темы WordPress, которые подгружают всё подряд.
• Слишком много счётчиков аналитики и пикселей в head.
• Длинные циклы перерисовки при анимациях и фильтрах каталога.
• Heavy hydration в JS-фреймворках.

03Как замерить INP в реальной жизни

Особенность INP в том, что его сложно увидеть в синтетических тестах: PageSpeed Insights даёт оценку, но реальные цифры собираются на живых пользователях.

Лабораторные инструменты

Lighthouse и PageSpeed Insights показывают приблизительный INP по тестовому профилю. Это полезно для общего понимания, но не отражает того, что видят реальные посетители.

Полевые данные

CrUX (Chrome User Experience Report) собирает реальные метрики с пользователей Chrome. Эти данные тоже отображаются в PageSpeed Insights, если у сайта достаточно трафика.

Web Vitals в Яндекс.Метрике

Метрика поддерживает отчёт по Core Web Vitals для сайтов на собственных счётчиках. Это самый удобный способ для российского бизнеса увидеть реальные значения INP в разрезе страниц и устройств.

Если у вас в десктопе INP «зелёный», а в мобильной выдаче — «красный», это нормально. Слабые телефоны тяжелее переживают тяжёлый JS.

04Что оптимизировать в первую очередь

Стандартный путь — выявить самые «дорогие» взаимодействия и разрезать их на части.

• Уберите ненужный JS. Каждый скрипт счётчика и виджета — это нагрузка. Если вы не используете сервис, удалите его счётчик.
• Отложите загрузку второстепенных скриптов. Чаты, формы подписки, ремаркетинг-пиксели можно подгружать после первого взаимодействия пользователя или с задержкой.
• Разбейте длинные задачи. Тяжёлый JS-обработчик клика разбивается на куски через setTimeout или requestIdleCallback, чтобы между ними успевал отрисовываться кадр.
• Сократите перерисовки. Анимации через transform и opacity дешевле, чем через width, height и top/left.
• Кэшируйте результаты вычислений. Если форма пересчитывает что-то на каждый ввод — добавьте debounce.

Эти правки одновременно ускоряют другие метрики Core Web Vitals и снижают расход батареи на мобильных. Подробнее о сопутствующих фиксах — в статьях LCP практически и CLS практически.

05WordPress и INP

Большая часть сайтов малого бизнеса — на WordPress. Тут есть свои частые проблемы.

• Темы вроде Elementor или WPBakery нередко подгружают много JS на каждой странице, даже если он не нужен.
• Плагины «всё в одном» (попап, форма, чат, статистика) часто тянут собственный JS-стек.
• Конструкторы добавляют тяжёлый «redactor» в админку, который иногда вылезает и на фронт.

План действий:

1. Аудит активных плагинов: что реально нужно, что просто болтается.
2. Настройка плагина кэширования с грамотным отложенным JS.
3. Подключение бессерверного чата и подписки только на нужных страницах.
4. Замена тяжёлых слайдеров на CSS-альтернативы.

Подробный разбор — в материале как ускорить сайт на WordPress.

06Что не помогает

Есть несколько мифов, на которые тратят время впустую.

• «Перейдём на новейший CDN — INP упадёт». CDN влияет на скорость загрузки, а не на отзывчивость интерфейса.
• «Поменяем хостинг». Если узкое место — клиентский JS, более мощный хостинг ничего не поправит.
• «Заплатим за более крутую тему». Часто это тот же набор скриптов, только в другой обёртке.

07С чего начать на этой неделе

Если у вас сайт малого бизнеса и вы не знаете, с чего начать улучшение INP:

1. Откройте PageSpeed Insights и посмотрите INP по мобильным.
2. Если данных CrUX нет — включите отчёт Core Web Vitals в Яндекс.Метрике и подождите неделю.
3. Соберите список сторонних скриптов и выкиньте всё неиспользуемое.
4. Отложите загрузку чатов и подписок до первого взаимодействия пользователя.
5. Замерьте снова через две недели.

Если сайт большой и оптимизация требует серьёзной работы — это плановая техническая доработка сайта, которая разумно делается этапами вместе с SEO.

Официальная документация по теме — Справка Яндекс.Вебмастера.