Ваш сайт получил низкую оценку INP: что делать?

Введение
Здравствуйте, друзья! Сегодня мы поговорим о показателе INP и о том, что делать, если он находится не там, где должен быть. Этим летом Google разослал радостные письма с текстом «У вашего сайта следующая проблема с INP: значение «INP» слишком высокое: более 200 мс (мобильные устройства)». Что это значит и как с этим бороться?

Что такое INP?
INP (Interaction to Next Paint) — это новая метрика, отражающая скорость отклика веб-сайта. Начиная с марта 2024 года она заменит метрику FID в семействе Core Web Vitals.

INP оценивает скорость реакции страницы на взаимодействие с пользователем. Она измеряет самое продолжительное наблюдаемое взаимодействие без учета выпадающих значений.

INP учитывает только следующие типы взаимодействия:

Щелчок мыши
Прикосновение к устройству с сенсорным экраном
Нажатие клавиши на физической или экранной клавиатуре.

На INP не влияет движение мыши или прокрутка страницы. Однако прокрутка с помощью клавиатуры (например, «пробел», «страница вверх», «страница вниз» и т.д.) требует нажатия клавиш, что, в свою очередь, может вызывать другие события, которые регистрируются и учитываются в ИНП. Но сам факт прокрутки не влияет на расчет INP, и любая прокрутка не учитывается при определении общей задержки ввода.

Что отличает INP от FID
Когда речь идет об измерении взаимодействия пользователя с веб-страницей, используются две метрики:
1. Общая задержка ввода (INP)
2. Задержка первого входа (FID)

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

В качестве общей информации в приведенном ниже видеоролике можно услышать объяснения инженеров из команды веб-платформы Chrome Энни Салливан и Майкла Макни о том, почему была введена метрика INP и как она облегчает жизнь конечным пользователям.

Как оптимизировать отзывчивость веб-страниц с помощью Interaction to Next Paint

Как рассчитывается INP
Под взаимодействием понимается совокупность обработчиков событий, которые активируются одним и тем же логическим действием пользователя. Управление взаимодействием может осуществляться с помощью JavaScript, CSS, стандартных элементов управления браузера (например, элементов формы) или их комбинации.

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

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

Значение ИНП
INP подразделяется на три категории: «Хорошо», «Требует улучшения» и «Плохо».
-Время отклика менее 200 миллисекунд считается хорошим,
-от 200 до 500 миллисекунд требует улучшения,
-более 500 миллисекунд — плохое.

Действия пользователя измеряются одним числом для этой метрики, и оно каждый раз меняется. Инструменты, которые сообщают о рейтинге полей Core Web Vitals, используют 75-й процентиль.

Оптимизация INP
Стратегия оптимизации INP направлена на сокращение времени ожидания, возникающего при загрузке скриптов, загрузке ресурсов и разборе HTML/CSS, что позволяет добиться более точной и быстрой отрисовки веб-страниц. Механизм оптимизации INP состоит из следующих этапов:

— Выявление проблемных областей
— Анализ полученных результатов
— Ускорение проблемных областей при загрузке страницы

Выявление проблемных областей начинается с анализа полевых данных. Под полевыми данными понимаются реальные данные, которые мы получаем от пользователей, также известные как мониторинг реальных пользователей (RUM).

Эти данные собираются путем отслеживания действий всех пользователей, посещающих определенную веб-страницу. Инструменты Chrome, составляющие отчеты о полевых данных, обычно получают эти данные из
Chrome User Experience Report (CrUX).
Также может использоваться PageSpeed Insights.

Посмотреть значение метрики INP можно в разделе «Core Web Vitals» в Google Search Console. Если сайт испытывает проблемы с INP, там появится соответствующее предупреждение.

6 сентября 2023 года компания Ahrefs в своем блоге объявила о введении метрики авторитетности веб-сайта — INP. Чтобы найти страницы с низкими показателями INP во время сканирования, выберите «Page Explorer» в левом меню, нажмите на «Columns» и добавьте колонки, связанные с INP, через функцию поиска.

Ahrefs объявил

После выявления страниц с плохими показателями INP (Input Delay) следующим шагом будет понимание того, какое именно действие пользователя вызывает медленный отклик страницы и как можно увеличить скорость отклика. В большинстве случаев для ускорения работы страниц сайта помогают стандартные методы:

-Оптимизация изображений;
-уменьшение или сжатие CSS- и JS-файлов;
-асинхронная загрузка;
-кэширование медленных страниц;
-очистка кода;
-Переход к более быстрому хостинг-провайдеру;
-использование сети доставки контента.

Однако нередки ситуации, когда веб-мастер с отличным FID вдруг сталкивается с проблемами в работе INP. Чаще всего это означает, что медленно работает скрипт, инициированный пользователем, а не загрузка страницы. Именно изучение логики работы таких скриптов обычно помогает решить подобную проблему.

Например, одним из методов решения проблемы является возможность вручную задержать выполнение части кода с помощью функции setTimeout(). Даже если установить таймаут равным нулю, эта функция создаст отдельную задачу, удалив ее из основного потока, что позволит сократить время отклика.

Основные сложные проблемы, как правило, вызывают внешние скрипты, к которым у вебмастера нет доступа, например iframe с плеерами. Скорость загрузки таких скриптов может заметно влиять на показатель INP. В таких случаях стоит поискать собственные решения для улучшения показателя.

Заключение
Несмотря на громкие заявления Google, до марта 2024 года, когда INP начнет оказывать влияние на ранжирование, мы не можем точно сказать, насколько значимым фактором будет общая входная задержка (INP). Поскольку INP будет использоваться вместо FID, можно предположить, что его влияние на ранжирование будет сопоставимым, но точно мы не знаем: это все же разные факторы.

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

Дорогие друзья, спасибо, что дочитали статью до конца! Надеюсь, что статья была для вас полезной, и ваши сайты будут иметь улучшенные показатели INP! ?