Что измеряет метрика INP
Эта метрика оценивает общую отзывчивость страницы на протяжении всего сеанса взаимодействия, а не только при первой загрузке.
- Взаимодействия. Клики мышью, нажатия на сенсорном экране, нажатия клавиш.
- Задержка. Время обработки события скриптами и отрисовки нового кадра.
- Всесессионность. Учитывается худшее или близкое к худшему взаимодействие за время визита.
- Визуальный отклик. Фиксируется момент, когда пользователь видит изменение на экране.
Пример из практики: Пользователь заходит в интернет-магазин и нажимает кнопку «Добавить в корзину». Если анимация добавления и изменение счетчика корзины происходят мгновенно (через 50 мс), INP низкий. Если же после клика ничего не происходит в течение 400 мс, а потом резко появляется иконка, пользователь думает, что кнопка не сработала, и нажимает еще раз. Это высокий INP, который негативно влияет на опыт использования.
Отличие INP от FID
INP заменил устаревшую метрику First Input Delay (FID) в наборе Core Web Vitals.
| Метрика |
Что измеряет |
Ограничения |
| FID |
Задержку только первого взаимодействия |
Не учитывает дальнейшую работу со страницей |
| INP |
Задержку всех взаимодействий во время сеанса |
Дает полную картину отзывчивости |
Скорость загрузки — это то, как быстро сайт появляется. Отзывчивость (INP) — это то, насколько быстро сайт слушается ваших команд.
Нормативы Google для INP
Поисковая система устанавливает пороги для оценки качества взаимодействия.
| Статус |
Время INP |
Цвет индикатора |
| Хорошо |
Менее 200 мс |
Зеленый |
| Требует улучшения |
От 200 до 500 мс |
Оранжевый |
| Плохо |
Более 500 мс |
Красный |
Факторы, влияющие на INP
Несколько технических аспектов могут замедлять реакцию интерфейса.
- Тяжелый JavaScript. Долгое выполнение скриптов блокирует основной поток.
- Сложный CSS. Дорогие вычисления стилей при изменении макета.
- Переполненный DOM. Большое количество элементов усложняет обработку событий.
- Сторонние скрипты. Аналитика, чаты и рекламные сети могут перехватывать поток.
- Слабое устройство. На мобильных телефонах с низким CPU задержки ощущаются острее.
Способы оптимизации INP
Улучшение отзывчивости требует работы над кодом и архитектурой приложения.
| Метод |
Суть оптимизации |
Ожидаемый эффект |
| Разбиение задач |
Дробление длинных скриптов на мелкие части |
Высокий, поток разблокируется чаще |
| Web Workers |
Вынос тяжелых вычислений в отдельный поток |
Высокий, интерфейс не зависает |
| Отложенная обработка |
Использование requestAnimationFrame для визуализации |
Средний, синхронизация с частотой кадров |
| Удаление лишнего кода |
Очистка от неиспользуемых библиотек и функций |
Средний, меньше кода для выполнения |
| Оптимизация обработчиков |
Упрощение логики функций на события клика |
Высокий, мгновенная реакция на ввод |
Пользователь не ждет, пока скрипты закончат работу. Он хочет видеть результат своего действия здесь и сейчас.
Инструменты для измерения INP
Для диагностики проблем с отзывчивостью доступны различные сервисы.
- Google PageSpeed Insights. Показывает полевые данные INP для URL.
- Google Search Console. Отчет Core Web Vitals с группировкой страниц по статусу INP.
- Chrome DevTools. Вкладка Performance для записи и анализа взаимодействий.
- WebPageTest. Детальный анализ временной шкалы выполнения скриптов.
- Библиотека web-vitals. JavaScript-библиотека для измерения INP в реальном времени.
Роль основного потока браузера
Большинство проблем с INP связано с блокировкой основного потока выполнения.
- Очередь задач. Скрипты выполняются последовательно, долгий код тормозит всё.
- Стилизация. Изменение классов запускает пересчет макета.
- Отрисовка. Компоновка и painting требуют ресурсов процессора.
- Решение. Необходимо освобождать поток как можно быстрее после ввода.
Распространенные ошибки
Неправильный подход к разработке может ухудшить показатели отзывчивости.
| Ошибка |
Последствие |
Как исправить |
| Синхронные вычисления |
Интерфейс замирает во время обработки данных |
Использовать асинхронность и Web Workers |
| Сложные селекторы CSS |
Медленное применение стилей при изменении классов |
Упрощать селекторы и избегать глубокой вложенности |
| Частые изменения DOM |
Постоянный пересчет макета (Layout Thrashing) |
Группировать изменения DOM и использовать фрагменты |
| Тяжелые обработчики событий |
Задержка реакции на клик или скролл |
Оптимизировать код внутри event listeners |
Влияние на мобильные устройства
На смартфонах проблемы с INP проявляются острее из-за меньшей мощности процессора.
- Тач-интерфейс. Пользователи ожидают мгновенной реакции на касание.
- Ограниченные ресурсы. Фоновые процессы могут конкурировать за CPU.
- Термическое троттлинг. При нагреве телефон снижает производительность.
- Приоритет. Оптимизация под мобильные устройства критична для хорошего INP.
Interaction to Next Paint является ключевой метрикой, определяющей качество взаимодействия пользователя с веб-интерфейсом. Низкий INP обеспечивает ощущение плавности и отзывчивости сайта, что напрямую влияет на удовлетворенность клиентов и конверсию. Оптимизация INP означает создание профессиональных приложений, которые работают быстро не только на этапе загрузки, но и на протяжении всего сеанса использования, соответствуя самым высоким стандартам современной веб-разработки.