Что такое INP и почему сайт «тормозит» уже после загрузки

Загружается быстро, работает медленно

Вы наверняка это видели: страница появилась быстро, вы нажимаете «Меню» или «В корзину» — и секунду ничего не происходит. Метрики загрузки в порядке, но сайт ощущается медленным. Именно эту задержку измеряет Interaction to Next Paint (INP).

12 марта 2024 года INP заменил First Input Delay (FID) в качестве метрики отзывчивости в Core Web Vitals от Google. FID измерял только задержку перед тем, как браузер начнёт обрабатывать первое взаимодействие. INP учитывает взаимодействия на протяжении всего визита и показывает, сколько прошло времени, пока экран реально обновился.

Какой результат считается хорошим

• 200 мс и меньше — хорошо
• 200–500 мс — требует улучшения
• больше 500 мс — плохо

Google оценивает 75-й перцентиль реальных визитов, отдельно для мобильных и десктопа. Значит, опыт посетителей на телефонах среднего уровня важен не меньше, чем быстрый ноутбук вашего разработчика.

Как найти проблему

• PageSpeed Insights и отчёт Core Web Vitals в Search Console показывают полевые данные реальных пользователей Chrome — начните с них, чтобы понять, есть ли проблема вообще
• Chrome DevTools, панель Performance: запишите, как кликаете по медленному элементу, и ищите длинные задачи в основном потоке
• JavaScript-библиотека web-vitals может собирать INP с ваших посетителей, включая элемент, с которым было взаимодействие

Типичные причины и решения

Почти всегда в момент взаимодействия основной поток браузера занят JavaScript. Задача дольше 50 мс считается «длинной», и пока она выполняется, страница не может ответить.

• Разбивайте длинные задачи. Сначала сделайте видимое обновление, затем уступите поток браузеру и доделайте остальное потом
• Проведите ревизию сторонних скриптов. Чат-виджеты, менеджеры тегов, A/B-тесты и пиксели аналитики — частые виновники; загружайте их позже или удалите то, чем никто не пользуется
• Держите DOM компактным. Огромные страницы с тысячами элементов дорого перерисовывать после каждого клика
• В React не перерисовывайте всю страницу на каждый ввод; помечайте несрочные обновления через useTransition и мемоизируйте тяжёлые компоненты
• Используйте debounce для полей поиска и фильтров вместо пересчёта на каждое нажатие

Почему это стоит усилий

Core Web Vitals входят в сигналы Google о качестве страницы, но главная причина — человеческая: люди нажимают повторно, бросают корзину и думают, что сайт сломан, когда он не реагирует. Отзывчивость пользователи чувствуют напрямую.

Отправную точку задаёт платформа — сравните WordPress и Next.js, — а у динамических приложений есть свои компромиссы для поиска, о них статья SEO для динамических веб-приложений. Отзывчивость мы исправляем в рамках разработки веб-приложений и технической поддержки сайтов.

Сайт медленно реагирует? Codearia анализирует Core Web Vitals и устраняет проблемы производительности на сайтах на Next.js, React и WordPress — пришлите нам ссылку.