INP метрика: как измерить и ускорить отклик сайта

Что показывает INP метрика

INP — сокращение от Interaction to Next Paint, одна из метрик Core Web Vitals. Она измеряет время между действием посетителя (касание, клик, нажатие клавиши) и моментом, когда браузер показал на экране результат. Важно не то, когда сработал код, а то, когда человек увидел изменение.

В марте 2024 года INP заменил прежнюю метрику FID. Для владельца бизнеса вывод простой: отзывчивость сайта теперь оценивается строже и входит в набор показателей удобства страниц, на которые смотрит Google. Это не единственный фактор ранжирования и не кнопка «в топ». Но медленный сайт теряет заявки и заказы независимо от поисковика, и это главная причина заниматься показателем.

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

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

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

Пороги и где смотреть значения

Хорошим считается INP до 200 миллисекунд, плохим — больше 500. Всё, что между ними, требует улучшения. Оценка строится по реальным данным посетителей, поэтому одним замером на своём компьютере её не подтвердить.

Где смотреть:

• Search Console, отчёт Core Web Vitals: показывает группы страниц с проблемами, то есть шаблоны, а не отдельные адреса.
• PageSpeed Insights: полевые данные по странице или по всему сайту.
• Инструменты разработчика Chrome, вкладка Performance: запись взаимодействия и разбивка по времени.
• Lighthouse: при обычной загрузке INP не измеряет. Оценить его можно в режиме записи периода, самостоятельно выполняя действия на странице.

Из чего складывается задержка

Любое взаимодействие состоит из трёх частей, и лечатся они по-разному.

Задержка ввода: браузер занят другой работой и не может сразу начать обработку. Обычно виноваты тяжёлые скрипты, которые ещё выполняются после загрузки.

Время обработки: работают обработчики событий. Здесь виден ваш собственный код: пересчёт корзины, фильтрация товаров, проверка формы.

Задержка отображения: браузер пересчитывает стили и раскладку и рисует результат. Чем больше элементов на странице, тем дольше этот этап.

Пример: интернет-магазин из Ташкента

Возьмём типичную ситуацию (иллюстрация, а не конкретный клиент). Магазин одежды в Ташкенте: на странице каталога подключены пиксель Meta, аналитика, онлайн-чат, кнопка перехода в Telegram, карта с филиалами и виджет рассрочки. Фильтр по размеру перерисовывает сразу весь список карточек.

У разработчика на мощном ноутбуке всё открывается мгновенно. Покупатель из региона с недорогим Android нажимает «Размер M», экран секунду не меняется, он нажимает ещё раз и получает сбитый фильтр. После этого он, скорее всего, уйдёт в Instagram или на Uzum. Заявки из рекламы в таком случае оплачены, но не дошли до покупки.

Чаще всего задержку создают одни и те же причины:

• тяжёлые скрипты, блокирующие основной поток при загрузке;
• сторонние виджеты: чаты, пиксели, рекламные теги, карты;
• обработчики кликов, которые делают много работы сразу;
• огромный DOM — тысячи элементов в каталоге;
• анимации и пересчёт раскладки при каждом действии;
• лишние перерисовки компонентов на React, Vue и похожих фреймворках.

Пошаговый порядок работ

Не пытайтесь исправить всё сразу. Последовательность, которая экономит время:

• В Search Console найдите шаблоны страниц с плохим INP: каталог, карточка товара, страница услуги.
• Воспроизведите действия на слабом телефоне или включите замедление процессора в инструментах разработчика.
• Запишите профиль и найдите длинные задачи, которые держат основной поток.
• Исправьте самое медленное взаимодействие: разбейте работу на части и сначала покажите реакцию (смену состояния кнопки, индикатор), а остальное догружайте потом.
• Отложите сторонние виджеты до первого действия или до момента, когда страница стала интерактивной; неиспользуемые уберите.
• Выводите длинные списки товаров порциями и упростите вложенность меню.
• Проверьте, не появилось ли новое медленное действие, и дождитесь обновления полевых данных: они накапливаются не мгновенно.

Типичные ошибки

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

Третья: проверять только главную. Проблемы чаще сидят в каталоге, корзине и формах. Четвёртая: ставить новый плагин «для ускорения», который сам добавляет скрипты. Пятая: после исправления сразу искать результат в отчёте и расстраиваться, что цифры не изменились: обновление занимает время.

Что делать самим, а что отдать разработчику

Без программиста можно ревизовать сторонние скрипты: оставить только те, что приносят пользу (чат, который отвечает; пиксель, по которому настроена реклама), и убрать забытые. Можно ограничить число товаров на странице и проверить сайт на бюджетном телефоне.

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

Чек-лист перед запуском рекламы

Если вы платите за трафик в Meta Ads или Google Ads, сначала убедитесь, что страница реагирует на нажатия. Проверьте:

Команда markdev разбирает такие задачи в рамках SEO-оптимизации сайта в Узбекистане: находим шаблоны с плохим INP, составляем список правок для разработчика и проверяем результат на реальных данных. Если хотите понять, что тормозит ваш сайт, обсудите задачу с нами.

• открытие мобильного меню;
• фильтры и сортировка каталога;
• добавление в корзину;
• отправка формы заявки;
• переключение вкладок и аккордеонов на странице услуги;
• работу чата и кнопки Telegram;
• все шаги выше на недорогом телефоне.