INP
INP (Interaction to Next Paint, Взаимодействие со следующей отрисовкой) - метрика из набора Core Web Vitals, оценивающая отзывчивость веб-страницы. INP измеряет время от момента действия пользователя (клик, касание, нажатие клавиши) до момента, когда браузер отрисовывает следующий кадр, визуально подтверждая реакцию на это действие.
В интернет-маркетинге и SEO INP рассматривается как показатель качества пользовательского опыта. Страницы с высоким INP (медленной реакцией) могут хуже ранжироваться в поисковых системах.
История и отличие от FID
[править]В марте 2024 года INP официально заменил метрику FID (First Input Delay) в составе Core Web Vitals. FID измерял только задержку при первом взаимодействии пользователя со страницей. INP оценивает отзывчивость на всём протяжении визита, учитывая все взаимодействия и выбирая наихудшее значение.
Это изменение позволяет точнее оценить реальный пользовательский опыт: даже если страница быстро загрузилась, но тормозит при скролле или заполнении формы, это будет зафиксировано метрикой INP.
Как измеряется INP
[править]INP учитывает все взаимодействия пользователя со страницей за время её жизненного цикла:
- Клики мышью
- Касания экрана (на мобильных устройствах)
- Нажатия клавиш на клавиатуре
Для каждого взаимодействия фиксируется задержка между действием пользователя и следующей отрисовкой. Итоговым значением INP становится самое длинное (наихудшее) взаимодействие.
Измерения исключают прокрутку страницы и наведение курсора - учитываются только те действия, после которых пользователь ожидает визуальной реакции.
Нормативные значения
[править]Для прохождения оценки Core Web Vitals INP должен быть:
- Хороший (Good) - менее 200 миллисекунд
- Требует улучшения (Needs Improvement) - от 200 до 500 миллисекунд
- Плохой (Poor) - более 500 миллисекунд
Рекомендуется ориентироваться на 75-й процентиль всех посещений страницы, с учётом как десктопных, так и мобильных устройств.
Что влияет на INP
[править]Долгие задачи в главном потоке
[править]Браузер выполняет JavaScript в одном главном потоке. Если этот поток занят долгими вычислениями, он не может реагировать на действия пользователя.
Проблемные места:
- Тяжёлые скрипты аналитики, загружаемые при взаимодействии
- Обработка событий, выполняющая сложные DOM-операции
- Рендеринг больших списков или таблиц после клика
Размер DOM
[править]Слишком большой DOM (много элементов на странице) замедляет браузерные операции при каждом взаимодействии. Рекомендуется держать общее количество узлов в разумных пределах и избегать чрезмерной вложенности.
Частота событий
[править]Некоторые действия генерируют множество событий за короткое время (например, ввод текста в поле). Если на каждое событие повешена тяжёлая обработка, это приведёт к высокому INP.
Третьесторонние скрипты
[править]Внешние виджеты, кнопки соцсетей, рекламные скрипты и другие сторонние интеграции могут блокировать главный поток и увеличивать INP. Особенно опасны скрипты, выполняющиеся при взаимодействии с их элементами.
Устаревшие браузеры
[править]На старых устройствах и в устаревших браузерах выполнение JavaScript может занимать больше времени, что также влияет на INP для пользователей с таким софтом.
Как улучшить INP
[править]Оптимизация JavaScript
[править]- Разбивать долгие задачи на более мелкие с использованием setTimeout или scheduler.yield
- Убирать неиспользуемый код (tree shaking)
- Минимизировать объём работы, выполняемой в обработчиках событий
- Делегировать обработку событий (вешать 1 обработчик на родителя вместо множества на детей)
Отложенная загрузка
[править]- Скрипты, не участвующие в формировании интерфейса, загружать после отрисовки
- Тяжёлые компоненты показывать только по требованию, а не сразу при загрузке
- Использовать Intersection Observer для загрузки скрытых элементов
Оптимизация рендеринга
[править]- Избегать принудительных перерасчётов стилей (layout thrashing)
- Использовать will-change для элементов, которые будут анимироваться
- Применять виртуальные списки для отображения больших объёмов данных
Контроль третьесторонних скриптов
[править]- Оценивать необходимость каждого стороннего скрипта
- Загружать их асинхронно или с defer
- Размещать виджеты таким образом, чтобы они не блокировали основной контент
Как проверять INP
[править]Инструменты для полевых данных (field data)
[править]- Google Search Console - отчёт Core Web Vitals показывает реальные значения INP для страниц сайта на основе данных пользователей Chrome
- Chrome User Experience Report (CrUX) - публичный датасет с агрегированными данными по сайтам
- PageSpeed Insights - показывает как лабораторные, так и полевые данные для конкретной страницы
Инструменты для лабораторных данных (lab data)
[править]- Lighthouse - проверяет страницу в контролируемых условиях и даёт рекомендации
- Chrome DevTools (Performance panel) - позволяет профилировать взаимодействия и видеть длительность задач
- Web Vitals JavaScript библиотека - можно установить на сайт и собирать реальные данные от своих пользователей
Влияние на бизнес-метрики
[править]Медленная отзывчивость интерфейса влияет на поведение пользователей:
- Посетители реже заполняют длинные формы
- Падает конверсия при оформлении заказа
- Увеличивается процент отказов на интерактивных страницах
- Снижается удовлетворённость от использования сайта
Улучшение INP, как правило, положительно сказывается на этих показателях, особенно для мобильного трафика и сайтов со сложными интерфейсами.
Ограничения метрики
[править]INP не измеряет:
- Скорость загрузки страницы (за это отвечают LCP и FCP)
- Визуальную стабильность (за это отвечает CLS)
- Задержки, связанные с сетью
Для комплексной оценки производительности сайта INP нужно рассматривать вместе с другими метриками Core Web Vitals и бизнес-показателями.
