INP: как сократить задержку отклика страницы на действия посетителя

Interaction to Next Paint, или INP, — метрика Core Web Vitals, которая оценивает отзывчивость страницы. Она измеряет, сколько времени проходит между действием посетителя — нажатием, касанием, вводом с клавиатуры — и моментом, когда браузер показывает результат на экране. В марте 2024 года INP заменил прежнюю метрику FID.

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

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

Пороги

Хорошим считается INP до 200 миллисекунд, плохим — больше 500 миллисекунд. Оценка, как и у других Core Web Vitals, идёт по реальным данным посетителей.

Где смотреть

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

В лабораторном режиме Lighthouse INP не измеряется при обычной загрузке. Его можно оценить в режиме записи периода, выполняя действия вручную.

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

1. Задержка ввода — браузер занят другой работой и не может сразу начать обработку
2. Время обработки — выполняются обработчики событий
3. Задержка отображения — браузер пересчитывает стили, раскладку и рисует результат

Частые причины плохого INP

• Тяжёлые скрипты, которые долго выполняются при загрузке и блокируют основной поток
• Сторонние виджеты: чаты, пиксели, рекламные скрипты, карты
• Обработчики кликов, которые делают много работы сразу: фильтрация каталога, пересчёт корзины
• Огромный DOM: тысячи элементов на странице каталога
• Анимации и пересчёт раскладки при каждом действии

Что помогает

Разбивать длинные задачи

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

Меньше скриптов

Уберите неиспользуемые библиотеки, отложите загрузку сторонних виджетов до взаимодействия или до момента, когда страница уже стала интерактивной. Каждый лишний скрипт конкурирует за основной поток.

Упростить DOM

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

Осторожно с фреймворками

На сайтах на React, Vue и подобных медленный INP часто связан с лишними перерисовками компонентов. Здесь нужен разработчик с профилировщиком.

Что проверить на типичном сайте

• Открытие мобильного меню
• Фильтры каталога
• Добавление в корзину
• Отправка формы заявки
• Переключение вкладок и аккордеонов на странице услуги

Это самые частые действия, и именно они попадают в оценку.

Почему это важно бизнесу

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

Порядок работ

1. Найти шаблоны страниц с плохим INP в Search Console
2. Воспроизвести действия на слабом телефоне или с замедлением процессора в инструментах разработчика
3. Записать профиль и найти длинные задачи
4. Исправить самое медленное взаимодействие
5. Проверить, не появилось ли новое
6. Дождаться обновления полевых данных