Структура Pagespeed Google, к которой мы привыкли уже много лет, построена вокруг обеспечения быстрой загрузки и обслуживания веб-сайтов. Создавая измеримые параметры и используя анонимные данные, собранные о рыночной доле Chrome, Google использует эти показатели в качестве индикаторов SEO. С появлением Interaction to Next Paint (INP) в 2022 году акцент сместился с простой скорости загрузки страниц на более широкую перспективу веб-производительности. INP измеряет не только скорость загрузки страницы, но и скорость обработки действий пользователя на ней. По сути, он превращает навигацию по сайту в показатель Pagespeed.
В блоге Керема, термин «Общая задержка взаимодействия» предлагается как подходящий для этой концепции, которую Google также хорошо объясняет в своем собственном видео. Однако, чтобы полностью понять эту метрику, мы углубимся в эту тему в следующих разделах.
Как объясняется продолжительность INP?
Продолжительность ИЯП включает в себя:
- Время между взаимодействием пользователя со страницей и выполнением обработчика событий.
- Время выполнения скрипта.
- Время от выполнения кода до отображения вывода пользователю.
Эти процессы обычно происходят в течение миллисекунд, но на мобильных устройствах, особенно старых телефонах Android с низкой мощностью процессора, такие задержки (латентность) часто могут быть заметны. Стоит отметить, что данные INP, как и другие данные Lighthouse, собираются анонимно и оцениваются на основе 75 процентиль. Поэтому цель состоит в том, чтобы создавать приложения, которые хорошо работают на устройствах среднего уровня, а не только на устройствах высокого класса.
Реальные примеры продолжительности INP
Вот несколько реальных примеров из Интернет-страниц, которые мы посещаем ежедневно, чтобы объяснить эту концепцию:
Ввод адреса на сайте электронной коммерции
Когда вы совершаете покупки на сайте электронной коммерции и вводите адрес для доставки, вы сначала выбираете провинцию. Затем, когда вы нажимаете на поле выбора, чтобы выбрать район, вы некоторое время ждете загрузки результата Ajax, и через определенное время загружается информация о округе. Это хороший пример INP. Улучшение взаимодействия с пользователем в этом примере может включать добавление «индикатора загрузки», информирующего пользователя о процессе Ajax.
Сортировка выбора
При использовании фильтров на страницах со списком продуктов, если отфильтрованные продукты не управляются должным образом после установки флажка, это приведет к увеличению INP. Использование менее сложного JS и учет пользовательского опыта во время операций фильтрации могут помочь сохранить значение INP как можно более высоким.
Галереи фотографий продуктов
Время, в течение которого пользователи ждут загрузки фотогалереи после нажатия на фотографию продукта на страницах с описанием продукта, потенциально может повлиять на INP.
Кнопка бронирования
Задержка взаимодействия между нажатием кнопки «Сделать бронирование» и переходом на следующую страницу является примером INP.
Кнопка "Добавить в корзину"
Миллисекунды задержки при нажатии кнопки «Добавить в корзину» и размышлении о том, был ли товар добавлен в корзину или нет, идеально определяют INP.
Как видно из этих примеров, ловушки INP присутствуют в сценариях, влияющих как на SEO, так и на коэффициенты прямой конверсии.
Как улучшить INP?
- Используйте актуальные библиотеки JS Frontend: Повышение производительности с помощью современных библиотек JS-интерфейса, таких как Vue, React и Angular, выгодно, поскольку они обеспечивают преимущества в производительности и возможности повторного использования.
- Минимизируйте сложность JS-библиотек: Целесообразно использовать менее сложные библиотеки JS. Лично я рекомендую по возможности избегать jQuery.
Приемлемые уровни показателей INP
Пороговые значения для хороший, средний и плохой уровни INP составляют 200 миллисекунд и 500 миллисекунд.. Поддержание INP ниже этих пороговых значений имеет решающее значение для обеспечения хорошего пользовательского опыта и общей производительности сети.
