«У ваших сайтов плохие показатели INP»

Google постоянно вводит новые правила, которые прибавляют хлопот владельцам сайтов. Например, требования Google Speed Insights регулярно обновляются, и приходится изворачиваться, чтобы сохранить высокий рейтинг. А сейчас владельцам сайтов начали приходить «письма счастья», где говорится о проблемах с INP. Что это за зверь — расскажем в статье.

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

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

INP был впервые представлен в 2022 году как экспериментальное решение на смену показателю FID (First Input Delay). FID тоже измеряет время от взаимодействия пользователя с интерфейсом до реакции сайта, но он учитывает только первый контакт, а INP замеряет все взаимодействия. Кроме этого, FID показывает техническую скорость отклика, а INP — конкретно визуализацию. Таким образом, INP точнее показывает отзывчивость ресурса именно с точки зрения пользователя.

Новый показатель в течение года тестировался в полевых условиях и получал отзывы сообщества Google. А в мае 2023 года было объявлено, что INP перешел из разряда экспериментальных в текущие, став частью Core Web Vitals — ключевых показателей, с помощью которых Google ранжирует сайты. С 2024 года планируется, что новый показатель полностью заменит FID.

Хотя до этого события еще есть время, специалисты Google советуют уже сейчас оптимизировать сайты. По их данным, 93% сайтов в мобильной версии имеют хорошие показатели FID, но лишь 65% оптимизированы по метрике INP.

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

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

Хороший показатель INP — до 200 мс, средний — 200−500 мс, плохой — выше 500 мс. INP рассчитывается, когда пользователь уходит со страницы, при этом анализируются все его взаимодействия. Это делает INP более релевантным показателем для оценки качества сайта, чем FID.

Задача — это каждый процесс, который выполняет браузер: рендеринг, парсинг, выполнение различных сценариев и т. д. Если задача выполняется слишком долго (более 50 мс), она блокирует реакцию браузера на действия пользователя — в глазах пользователя сайт «зависнет». В идеале, лучше вовсе избавиться от таких задач, а если этого сделать нельзя — то использовать различные инструменты и приемы для их разбивки. Здесь можно почитать рекомендации Google по этому поводу.

По данным Web Almanac, с каждым годом в сайтах используется все больше JavaScript, и похоже, что эта тенденция не изменится в ближайшее время. Но когда на странице одновременно запускается слишком много JavaScript, задачи начинают конкурировать друг с другом, и сайт тормозит. Основное решение здесь — регулярно проводить ревизию кода и удалять неиспользуемые фрагменты. А если код не используется на конкретной странице, но нужен для выполнения других задач, то можно разбить его на несколько фрагментов — здесь Google рассказывает, как.

Рендеринг сам по себе занимает много ресурсов и способен значительно затормозить сайт. Чтобы оптимизировать рендеринг, достаточно не использовать requestAnimationFrame () для выполнения невизуальных задач, сохранять небольшой размер DOM и использовать свойство CSS Containtment.

Помимо этого, Google дает такие рекомендации для улучшения показателя INP:

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

В общем, основная задача для улучшения INP — сделать код как можно легче и проще: оптимизировать изображения, использовать Lazy Loading, грамотно работать с большими объемами данных. Более подробно об этом можно почитать в Руководстве Google по оптимизации INP.

Очевидно, что правильно измерить INP можно только в полевых условиях — по данным реальных пользователей на сайтах. Соответственно, заранее — на этапе верстки или сборки сайта — этот параметр проверить нельзя. Хотя Google и предлагает тестировать INP с помощью своих инструментов — например, Lighthouse — скорее всего, показатели все равно будут не такими актуальными, как при наблюдении за реальными пользователями. Соответственно, особого смысла в лабораторных тестах нет.

Сам Google говорит, что оптимизация INP — это итеративный процесс. Когда вы, ориентируясь на аналитику сайта, исправите одно медленное взаимодействие, то скорее всего, обнаружите еще несколько — особенно, если на вашем сайте много интерактивных элементов. То есть, добиться наилучшего для своего ресурса INP вы сможете только со временем. Более того, при добавлении новых функций вам придется снова оптимизировать работу сайта.

Важно заранее предусмотреть, чтобы JavaScript был максимально быстрым и легким — уже на этапе верстки. А после релиза проекта отлаживать итеративно, постепенно получится понять, как добиться максимальных показателей INP.

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

В целом, INP — только один из множества показателей, влияющих на рейтинг сайта. Просто еще один фактор, который будет учитывать Google, наряду со скоростью загрузки контента (LSP) и визуальной стабильностью (CLS).