Wiki · Техническая оптимизация
INP (Interaction to Next Paint)
INP (Interaction to Next Paint) – это показатель Core Web Vitals, который измеряет, сколько времени проходит от клика, касания или нажатия клавиши до момента, когда страница визуально отреагировала. Хорошим считается результат до 200 мс.
Знакомая ситуация: нажимаете «В корзину», и полсекунды ничего не происходит. Нажимаете ещё раз, и в корзине уже два товара. Или открываете фильтр каталога, а галочка ставится с заметной задержкой. Страница при этом загрузилась быстро, все картинки на месте. Проблема в отклике, и именно её ловит INP.
Три этапа отклика и пороги оценки
Каждое действие посетителя проходит три этапа:
- Задержка ввода. Браузер занят другой работой, например выполняет скрипт аналитики, и не может сразу взяться за клик.
- Обработка. Выполняются обработчики события: код, который пересчитывает корзину или фильтрует товары.
- Отрисовка. Браузер пересчитывает вёрстку и рисует следующий кадр с результатом.
INP равен сумме трёх этапов. Учитываются клики мышью, касания экрана и нажатия клавиш. Прокрутка, наведение курсора и масштабирование не считаются.
За визит человек может сделать десятки действий. В итог идёт самое медленное, но на страницах с большим числом действий отбрасывается одно худшее на каждые 50, чтобы случайный сбой не испортил картину. Затем Google берёт 75-й перцентиль по всем визитам: страница хорошая, если у трёх из четырёх посетителей отклик укладывается в норму.
| Оценка | INP |
|---|---|
| Хорошо | до 200 мс |
| Требует улучшения | от 200 до 500 мс |
| Плохо | больше 500 мс |
Как фильтр каталога может ускориться с 540 до 130 мс
Возьмём условный каталог стройматериалов: человек нажимает «Применить фильтр». Замер в DevTools показал:
| Этап | До правок | После правок |
|---|---|---|
| Задержка ввода | 120 мс, работал скрипт онлайн-чата | 20 мс, чат грузится после первого действия |
| Обработка | 310 мс, перерисовка всех товаров | 60 мс, сначала показан индикатор загрузки |
| Отрисовка | 110 мс, огромный список в DOM | 50 мс, на странице 24 товара |
| INP | 540 мс, плохо | 130 мс, хорошо |
Заметьте, что запрос к серверу за новыми товарами в INP не входит. Показатель заканчивается на первом кадре после клика. Поэтому быстрый визуальный ответ («фильтр применяется») решает проблему для показателя и для человека, даже если данные приходят позже.
Где смотреть INP и как найти медленное действие
- PageSpeed Insights, верхний блок с данными реальных посетителей за 28 дней.
- Google Search Console, отчёт по основным интернет-показателям: группы страниц сайта с плохим INP.
- Chrome DevTools, вкладка Performance. Там видно INP своих кликов прямо во время работы со страницей и какой код тормозит.
- Библиотека web-vitals: собирает INP реальных посетителей и отправляет в вашу аналитику вместе с элементом, по которому кликнули.
В обычном лабораторном тесте Lighthouse INP нет: робот ничего не нажимает. Вместо него смотрят Total Blocking Time, который показывает, насколько основной поток браузера занят при загрузке.
Само медленное действие ищут так:
- В Search Console найдите группу страниц с плохим INP и откройте пример адреса из неё.
- В Chrome откройте DevTools, вкладку Performance, и включите замедление процессора. Так ноутбук ведёт себя ближе к недорогому телефону, а у реальных посетителей INP почти всегда хуже на мобильных.
- Покликайте по тому, что люди трогают чаще всего: меню, фильтр, кнопку покупки, поля формы. Запомните действия с самым большим откликом.
- Запишите профиль во время такого действия. Длинные задачи на дорожке основного потока помечены красной штриховкой, а в деталях видно, какой файл скрипта их вызвал.
Если тормозит ваш код, задача уходит разработчику. Если чужой виджет, решают, нужен ли он на этой странице и можно ли загружать его позже.
Что занимает браузер в момент клика
- Сторонние скрипты: чаты, квизы, коллтрекинг, несколько счётчиков. Каждый занимает основной поток.
- Длинные задачи JavaScript дольше 50 мс, во время которых браузер не реагирует ни на что.
- Огромная структура DOM: мега-меню на тысячи пунктов, каталог без пагинации. Перерисовка такой страницы стоит дорого.
- Обработчик, который сначала делает всю работу и только потом что-то показывает.
Как ускорить отклик на клик
- Сначала визуальный ответ, потом тяжёлая работа. Кнопка меняет состояние сразу, расчёты идут после.
- Разбивать длинные задачи и отдавать управление браузеру между частями, чтобы он успевал обработать клик.
- Откладывать сторонние виджеты до первого действия или до простоя страницы.
- Уменьшать DOM: подгружать товары порциями, прятать редкие пункты меню.
INP заменил FID в марте 2024 года. FID смотрел только на задержку перед первым действием и не учитывал обработку и отрисовку, поэтому медленные страницы часто получали по нему хорошую оценку. Общую картину по трём показателям смотрите в статье Core Web Vitals.
INP и другие показатели скорости мы проверяем в техническом аудите, а исправляем при доработке сайта.
Медленный клик, лабораторный тест и поле поиска: вопросы об INP
Почему ожидание ответа сервера после клика не портит INP?
Отсчёт останавливается на первом кадре, который браузер нарисовал после действия. Если кнопка сразу показала индикатор, показатель уже записан, даже если товары придут через секунду.
Чем заменить INP в лабораторном тесте Lighthouse?
Косвенно его заменяет Total Blocking Time: если основной поток надолго занят при загрузке, клики тоже будут ждать. Точнее отклик проверяют вручную: записывают профиль в DevTools, кликают по меню и фильтрам и смотрят время каждого действия.
Страница грузится быстро, а INP плохой: в чём причина?
Загрузку и отклик меряют разные показатели: LCP заканчивается, когда показан главный блок, а INP следит за кликами уже после этого. Чаще всего отклик тормозят скрипты, которые подгружаются следом: чат, коллтрекинг, несколько счётчиков. Пока они выполняются, браузер не берётся за нажатие.
Зачем при проверке INP включать замедление процессора?
Чтобы ноутбук вёл себя как недорогой смартфон, с которого заходят многие ваши посетители. Мощный процессор прячет длинные задачи: на нём клик обрабатывается быстро, а у людей с телефонами тот же скрипт тормозит. Без замедления легко решить, что с откликом всё в порядке, хотя Search Console показывает обратное.
Как один медленный клик сказывается на INP всей страницы?
Сильно: в итог визита идёт самое медленное действие, а не среднее. Поблажка есть только длинным визитам, где на каждые 50 действий выбрасывают одно худшее. Дальше Google берёт 75-й перцентиль, поэтому если популярная кнопка «В корзину» тормозит больше чем у четверти посетителей, страница получит плохую оценку.
Что INP учитывает, когда человек печатает в поле поиска?
Каждое нажатие клавиши, на обычной или экранной клавиатуре, считается отдельным действием. Если поиск с подсказками перестраивает список на каждую букву, медленным может оказаться любое из нажатий. Помогает тот же приём, что и с кнопками: сначала показать введённый символ, а подбор подсказок запускать после короткой паузы в наборе.
Как собрать INP реальных посетителей в своей аналитике?
Через библиотеку web-vitals от Google. Её подключают к сайту, она замеряет отклик у каждого посетителя и сообщает, по какому элементу был клик. Данные отправляют в свою систему аналитики, и тогда видна не только общая оценка из PageSpeed Insights, но и конкретные кнопки, фильтры и страницы, где отклик хуже всего. Это особенно полезно, когда у сайта мало трафика и Google не показывает полевые данные.
Документация web.dev и Google по INP
Остались вопросы по теме «INP (Interaction to Next Paint)»?
Напишите нам в Telegram или MAX. Ответит специалист, который отвечает за эту тему, или руководитель проектов в рабочее время.
Отвечает по темеСергей ПимкинВедущий SEO-специалистНад статьёй работали
Услуги
Услуги по теме
Кейсы
Кейсы по теме
Маркетинг · Медицина, центр репродуктивной медицины
SEO-продвижение клиники «Три Сердца»
Посетителей в 5,5 раза большеНа январь 2025 года: 5 500 посетителей в неделю вместо 1 000, обращение стоит 60–70 ₽
Маркетинг · Медицина
SEO-продвижение медцентра «Медюнион»
10 000 обращений в месяц из интернета3 года работы, ноябрь 2018 – октябрь 2021: больше 1 000 фраз в ТОП-10 при цели 800
Тарифы
Тарифы по теме
Стартовый тариф для небольшого бизнеса: наводим порядок на сайте и получаем первые заявки из Яндекса и Google.
- Техническая оптимизация сайта
- Контентная оптимизация
- Семантическое ядро под город или регион
- Настройка Яндекс Вебмастера и Google Search Console
- Цели в Яндекс Метрике
- Ежемесячный отчёт по позициям, трафику и заявкам
- Оптимизация поведенческих факторов
- Оптимизация коммерческих факторов и E-A-T
Тариф для растущего бизнеса. Работаем на количество заявок: считаем звонки через коллтрекинг и дорабатываем сайт под конверсию.
- Техническая оптимизация сайта
- Контентная оптимизация
- Семантическое ядро под город или регион
- Настройка Яндекс Вебмастера и Google Search Console
- Цели в Яндекс Метрике
- Ежемесячный отчёт по позициям, трафику и заявкам
- Оптимизация поведенческих факторов
- Оптимизация коммерческих факторов и E-A-T
Для масштабирования бизнеса: SEO, A/B-тесты, карточки в Яндекс.Бизнесе и 2ГИС, техподдержка сайта. Нейросети берут на себя рутину, итог проверяют специалисты.
- Техническая оптимизация сайта
- Контентная оптимизация
- Семантическое ядро под город или регион
- Настройка Яндекс Вебмастера и Google Search Console
- Цели в Яндекс Метрике
- Ежемесячный отчёт по позициям, трафику и заявкам
- Оптимизация поведенческих факторов
- Оптимизация коммерческих факторов и E-A-T
Проверим ваш сайт бесплатно
Экспресс-аудит за 24 часа: скорость, индексация, мета-теги, коммерческие факторы и цели Метрики.