Как оптимизировать взаимодействие со следующей отрисовкой (INP) в WordPress

Взаимодействие с следующей отрисовкой (INP) — это показатель скорости реагирования веб-страницы, измеряющий задержку всех взаимодействий пользователя на странице. Оптимизация показателя INP вашего веб-сайта играет решающую роль в его скорости, пользовательском опыте и SEO.

Объявленный в 2022 году в качестве экспериментальной метрики для устранения многих ограничений метрики первой задержки ввода (FID), Google заявил, что INP заменит FID в качестве метрики Core Web Vital в марте 2024 года.

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

Взволнованный? Пойдем!

Важность измерения отзывчивости веб-страницы

Никто не любит медленный сайт (включая Google!). И ничто не отталкивает пользователей от вашего сайта быстрее, чем медленный сайт.

Такие показатели, как Largest Contentful Paint (LCP), являются отличным индикатором скорости загрузки страницы, поэтому это показатель Core Web Vitals.

Но что происходит после того, как страница загрузится, а пользователь останется на ней? LCP не измеряет интерактивность страницы. По данным Google, пользователи проводят 90% своего времени на странице после ее загрузки. Следовательно, измерение скорости реагирования страницы на протяжении всего ее жизненного цикла — от открытия до закрытия — имеет решающее значение.

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

Вот тут-то и приходит на помощь измерение отзывчивости веб-страницы. Веб-сайты с хорошей отзывчивостью быстро реагируют на действия пользователя. И этот ответ должен быть в форме визуальной обратной связи.

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

Взаимодействие со следующей отрисовкой (INP) и задержка первого ввода (FID): в чем разница?

Измерить пользовательский опыт веб-страницы довольно сложно. Вы можете использовать такие показатели, как общее время блокировки (TBT) и время взаимодействия (TTI), чтобы получить представление об отзывчивости страницы, но они не отражают реальный опыт пользователя.

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

Введите FID — он напрямую измеряет первое взаимодействие пользователя с веб-страницей. В частности, он измеряет реальный пользовательский опыт в этой области.

Ограничения первой входной задержки (FID)

Как следует из названия, FID измеряет только «задержку» ответа браузера на «первый ввод».

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

Хотя первое впечатление имеет значение, оно не обязательно дает полную картину! FID улучшил способ измерения скорости реагирования веб-страницы, но он неточно измеряет, как пользователи взаимодействуют с веб-страницей — от открытия до закрытия веб-страницы.

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

Что такое взаимодействие со следующей отрисовкой (INP)?

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

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

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

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

Как и в случае с FID, низкий показатель INP означает лучшую реакцию страницы на ввод пользователя.

Как рассчитывается INP?

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

Например, если на вашей веб-странице в основном текст и изображения, на ней не будет много взаимодействий с пользователем. Но если это динамическая страница со множеством интерактивных элементов (например, текстовых редакторов и игр), на ней будет множество взаимодействий. В таких случаях случайная задержка может снизить оценку INP страницы на сайте, который в остальном очень отзывчив. Чтобы преодолеть эту проблему, INP игнорирует одно наибольшее взаимодействие на каждые 50 взаимодействий с пользователем.

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

В конечном счете, итоговый балл INP отражает то, что испытывает большинство пользователей.

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

Что такое хороший результат INP?

Пользователи могут просматривать веб-сайты на различных устройствах. И каждый сайт может быть уникальным. Следовательно, трудно назвать отзывчивость веб-сайта «хорошей» или «плохой» на основе одного показателя. Но именно этого и стремится достичь ИЯФ.

У Google есть простая диаграмма, позволяющая определить, имеет ли ваш сайт хороший или плохой балл INP:

• Хорошая скорость реагирования: показатель INP ниже 200 миллисекунд .
• Требует улучшения: показатель INP составляет от 200 до 500 миллисекунд .
• Плохое реагирование: показатель INP превышает 500 миллисекунд .

Как упоминалось ранее, INP учитывает 75-й процентиль всех зарегистрированных загрузок страниц, распределенных по настольным и мобильным устройствам.

Как измерить INP

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

Измерение INP в полевых условиях

Существует два способа измерения INP в полевых условиях: отчет об опыте пользователей Chrome (CrUX) и мониторинг реальных пользователей (RUM).

Данные CrUX собираются от пользователей браузера Chrome, которые дали свое согласие. Если ваш веб-сайт соответствует критериям оценки CrUX, вы можете измерить его INP с помощью инструмента тестирования скорости Google PageSpeed ​​Insights.

Google использует CrUX в качестве официального набора данных для оценки веб-сайтов для своей программы Core Web Vitals. Однако если ваш веб-сайт по какой-то причине не соответствует критериям CrUX (в основном из-за очень небольшого количества посетителей), вам необходимо собрать собственные данные полей, добавив код на свой веб-сайт. Затем вы можете передать данные этого поля поставщику RUM для более глубокого анализа.

Для большинства веб-сайтов PageSpeed ​​Insights является достаточно хорошим инструментом для измерения INP и всех связанных с ним показателей Core Web Vitals.

Однако CrUX не предоставляет вам подробной информации о своих результатах. Если вы хотите понять и улучшить свои показатели, рекомендуется инвестировать в решение RUM. Рассказ о том, как использовать эти инструменты, выходит за рамки этой статьи. Вы можете попробовать Datadog и New Relic, два популярных бесплатных решения RUM.

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

Измерение INP без полевых данных

Вы не можете измерить INP в лаборатории, но если вы по какой-то причине не можете измерить полевые данные — у вас очень мало посетителей сайта, чтобы претендовать на CrUX, или у вас недостаточно ресурсов для инвестирования в RUM — вы все равно можете улучшить свой потенциальный показатель INP, поиск медленных взаимодействий в лаборатории.

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

Расширение браузера Chrome Web Vitals — это самый простой способ проверить задержку взаимодействия с пользователем. После включения протестируйте типичные взаимодействия вашего веб-сайта. Расширение будет выводить на консоль подробную диагностическую информацию для каждого взаимодействия.

После установки расширения вам необходимо определить общие потоки взаимодействия с пользователем на вашей веб-странице и проверить скорость реагирования этих взаимодействий по отдельности. Например, отправка формы или добавление товара в корзину. Чтобы начать работу, вы можете следовать пошаговым инструкциям web.dev. Это не идеальный обходной путь, но при отсутствии полевых данных это отличная альтернатива.

Другой вариант — измерить показатель общего времени блокировки (TBT) вашего сайта. Он довольно хорошо коррелирует с INP и может указывать на взаимодействия, на которых вы можете сосредоточиться. Два отличных инструмента для измерения TBT вашей страницы — это Lighthouse и PageSpeed ​​Insights.

Однако имейте в виду, что TBT не измеряет медленное взаимодействие после загрузки страницы.

Как оптимизировать взаимодействие со следующей отрисовкой (INP)

Первый шаг к улучшению INP вашего веб-сайта — выявить самые медленные взаимодействия. В предыдущем разделе рассказывается, как собирать данные с полей для диагностики самых медленных взаимодействий на вашем веб-сайте.

Как только вы это поймете, вы сможете проанализировать эти медленные взаимодействия в лаборатории и найти подходящее решение.

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

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

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

Оптимизация входной задержки

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

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

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

• Сократите количество ресурсов, необходимых странице для полной функциональности.
• Избегайте загрузки больших сценариев, так как они потребуют ресурсоемкой оценки сценария браузером, блокируя основной поток. Подумайте о том, чтобы разбить ваши сценарии на несколько частей и распределить их.
• Включайте в свой код как можно меньше JavaScript.

Сокращение времени обработки обратного вызова событий

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

Помимо оптимизации кода обратного вызова события, вы можете предпринять некоторые действия, чтобы сократить время обработки:

• Не блокируйте основной поток. Разбивайте длинные задачи (>50 мс) на более мелкие задачи.
• Если вы встраиваете что-то на свою страницу, не загружайте их, когда они не используются. Например, неэффективно загружать видео с YouTube, если пользователь не собирается их воспроизводить.

Вот где WP Rocket, один из лучших плагинов производительности WordPress, может очень помочь. Вы можете включить функцию «Заменить iframe YouTube изображением предварительного просмотра» , чтобы заменить любой iframe YouTube миниатюрой изображения.

Тег iframe загрузит и воспроизведет видео только после того, как посетитель нажмет на миниатюру. Мощные функции WP Rocket могут сократить время загрузки и улучшить основные веб-показатели.

• Избегайте сторонних скриптов в своем коде. Для сторонних скриптов, которые вы используете, такие инструменты, как Google Tag Manager или Cloudflare Zaraz, могут помочь вам упростить загрузку этих скриптов.
• Отложите ненужные задачи для последующего асинхронного выполнения. Вы можете включить это с помощью встроенной функции отложенной загрузки JavaScript в WP Rocket.

Основной поток веб-страницы может одновременно обрабатывать только одну задачу внутри браузера. Задачи могут включать в себя такие действия, как анализ HTML/CSS, рендеринг страницы и запуск кода JS. Когда задача выполняется в течение длительного времени (скажем, 50 миллисекунд или более), она будет сдерживать выполнение всех других задач, включая взаимодействие с пользователем.

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

Разбивая длинные задачи на более мелкие части, вы освобождаете основной поток для выполнения высокоприоритетных задач, включая взаимодействие с пользователем. В результате получается быстрый веб-сайт!

Минимизация задержки презентации

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

Обычно задержка презентации занимает минимум времени на взаимодействие с пользователем. Однако его можно сдержать несколькими способами. Вот несколько способов свести это к минимуму:

• Сохраняйте размер DOM минимальным. Задачи рендеринга страниц масштабируются вверх или вниз в зависимости от размера DOM. Обновление большого DOM для каждого взаимодействия с пользователем может стать очень дорогим для браузера. Более того, большой DOM требует больше времени для отрисовки первого состояния страницы. Более подробную информацию можно найти в нашем удобном руководстве по размерам DOM.
• Лениво визуализируйте закадровые элементы. Если большая часть содержимого вашей страницы не видна пользователю при загрузке страницы, ленивый рендеринг внеэкранных элементов может обеспечить более быстрое взаимодействие с экранным содержимым. Вы можете использовать свойство CSS content-visibility , чтобы легко добиться этого без добавления дополнительного кода или плагинов.
• Избегайте рендеринга HTML с помощью JavaScript. Браузеры оптимально анализируют и отображают HTML, чтобы обеспечить наилучшее взаимодействие с пользователем. Использование JS для рендеринга частей HTML вполне допустимо и является неотъемлемой частью большинства взаимодействий с пользователем. Однако рендеринг больших фрагментов HTML с помощью JS существенно повлияет на производительность рендеринга вашего веб-сайта, включая задержки представления при взаимодействии с пользователем.

Повышение показателя INP вашего сайта с помощью WP Rocket

WP Rocket включает в себя множество опций, позволяющих мгновенно повысить производительность вашего веб-сайта. От автоматического включения кэширования страниц и предварительной загрузки кеша до сжатия GZIP и оптимизации электронной коммерции — он применяет 80% лучших практик веб-производительности, чтобы ваш веб-сайт работал невероятно быстро сразу после активации!

Помимо применения большинства передовых методов веб-производительности при активации, WP Rocket предлагает мощные функции, такие как отложенная загрузка, удаление неиспользуемого CSS и оптимизация JavaScript.

Самое главное, вы можете использовать встроенную функцию WP Rocket для задержки выполнения сценариев JS до взаимодействия с пользователем. Это сокращает время начальной загрузки страницы и повышает интерактивность. Это также влияет на такие показатели Core Web Vitals, как «Наибольшая отрисовка контента» (LCP), «Задержка первого ввода» (FID) и предстоящее «Взаимодействие с следующей отрисовкой» (INP).

Подведение итогов

Поскольку в марте 2024 года INP заменит FID в качестве основного показателя Web Vital, то, как ваш веб-сайт обрабатывает взаимодействие с пользователем, может оказать существенное влияние на его SEO.

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

Более высокий балл INP также означает лучший пользовательский опыт, а это стоит всех усилий и времени!