Страница загрузилась быстро, а на нажатие реагирует с задержкой: меню открывается через полсекунды, поле ввода отстаёт от печати, кнопка «добавить в корзину» будто не сработала, и человек жмёт второй раз. Это и измеряет INP. Метрика неудобна тем, что её не видно при обычной проверке скорости. Разбираемся, из чего она складывается и что с этим делать.
Коротко
- INP складывается из задержки до обработки, самой обработки и отрисовки результата.
- Главная причина плохого INP — главный поток браузера занят скриптами.
- Метрику не видно при автоматическом замере: нужно, чтобы кто-то действовал на странице.
- Хорошо — 200 миллисекунд и меньше по полевым данным.
Из чего складывается INP
От нажатия до видимой реакции проходят три отрезка, и тормозить может любой.
| Часть | Что происходит | Типичная причина задержки |
|---|---|---|
| Задержка до обработки | Браузер занят другой задачей | Длинный скрипт выполняется прямо сейчас |
| Обработка | Выполняется ваш обработчик | Тяжёлые вычисления, много слушателей |
| Отрисовка | Браузер показывает результат | Перерисовка большой части страницы |
Инструменты разработчика показывают разбивку по этим частям. Это первое, что стоит сделать: оптимизировать обработчик бессмысленно, если 80% времени уходит на ожидание освободившегося потока.
Почему INP не видно в обычном замере. Метрика измеряется только при взаимодействии. Автоматическая проверка, где никто не кликает, покажет пустое значение. Реальные цифры берут из полевых данных, а воспроизводят вручную — открыв страницу и поработав с ней.
Длинные задачи: главный виновник
Браузер выполняет скрипты в один поток. Пока идёт длинная задача, он не может ни обработать нажатие, ни отрисовать реакцию. Человек нажимает — ничего не происходит — он нажимает ещё раз.
Найдите задачи длиннее 50 миллисекунд
В инструментах разработчика они помечаются как длинные. Именно они блокируют отклик.
Разбейте их на части
Длинный расчёт делится на куски с паузами, в которых браузер успевает отреагировать на действия.
Уберите лишнюю работу при загрузке
Многое из того, что выполняется сразу, можно отложить до первого взаимодействия или до прокрутки.
Считайте только то, что видно
Обработка всех ста карточек, когда на экране четыре, — частая и дорогая ошибка.
Сторонние скрипты
Чаты, виджеты отзывов, счётчики, пиксели, карты, конструкторы всплывающих окон. Каждый добавляет свою работу в тот же единственный поток, и вы не контролируете, сколько её будет.
Что проверить
- Сколько всего сторонних скриптов на странице
- Какие из них реально используются
- Грузятся ли они сразу или отложенно
- Сколько времени каждый занимает поток
- Есть ли дубли аналитики
Что сделать
- Удалить то, чем никто не пользуется
- Отложить всё, что не нужно в первые секунды
- Чат подгружать по клику на иконку
- Карту подгружать при прокрутке до неё
- Оставить по одному счётчику каждого типа
Приём с отложенной загрузкой чата. Вместо полноценного виджета на странице рисуется простая иконка, а настоящий скрипт подгружается только при клике по ней. Для человека разница незаметна — задержка в доли секунды при открытии, — а поток освобождается на всё время до этого.
Обработчики событий
Вторая часть метрики — время выполнения вашего кода в ответ на действие. Здесь помогают несколько приёмов.
- Покажите реакцию сразу. Подсветите кнопку, покажите индикатор — и только потом выполняйте расчёты. Человек видит отклик, метрика фиксирует быструю реакцию.
- Отложите несрочное. Отправка статистики, синхронизация, логирование — всё это может подождать до следующего свободного момента.
- Не вешайте слушателей на каждый элемент. Один обработчик на контейнер работает быстрее, чем сотня на карточках.
- Ограничьте частые события. Прокрутка, изменение размера, ввод текста срабатывают десятки раз в секунду — их обработку нужно прореживать.
Отрисовка результата
Третья часть: код отработал, но браузеру нужно перестроить и перерисовать страницу. Чем больше элементов затронуто, тем дольше.
| Что замедляет | Что делать |
|---|---|
| Перерисовка всего списка | Менять только изменившиеся элементы |
| Сложные тени и фильтры | Упростить или ограничить область |
| Очень длинные списки в DOM | Показывать порциями |
| Анимация свойств, вызывающих пересчёт | Анимировать transform и opacity |
| Чтение размеров сразу после изменения | Группировать чтение и запись |
Как измерять и проверять
Возьмите полевые данные
PageSpeed Insights и отчёт в Search Console. Только они показывают реальный INP.
Воспроизведите вручную
Откройте страницу, поработайте с ней: меню, фильтры, форма, кнопки. Запишите профиль в инструментах разработчика.
Найдите самое медленное взаимодействие
INP берёт показательное значение за визит, поэтому одно тяжёлое действие портит картину.
Проверьте на слабом устройстве
Включите замедление процессора: на вашем компьютере проблема может быть незаметна.
Правьте по одному и перепроверяйте
Полевые данные подтянутся через недели, но профиль покажет эффект сразу.
Частые вопросы
Какой INP считается хорошим?
200 миллисекунд и меньше по полевым данным. До 500 миллисекунд — «требует улучшения», выше — «плохо».
Почему INP показывает пустое значение при проверке?
Метрика измеряется только при взаимодействии со страницей. Автоматический замер никуда не нажимает, поэтому значения нет. Смотрите полевые данные или воспроизводите вручную.
У сайта был хороший FID, а INP плохой. Почему?
FID измерял только задержку первого действия, а INP смотрит на отклик в течение всего визита. Если тормоза начинаются после того, как страница загрузилась и человек начал ею пользоваться, FID этого не замечал, а INP замечает.
Можно ли улучшить INP без переделки сайта?
Часто да. Самые результативные меры — убрать неиспользуемые сторонние скрипты и отложить те, что не нужны сразу. Это не требует переписывания кода и нередко даёт основной эффект.
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
