Core Web Vitals — это набор показателей, которые Google определил для измерения качества взаимодействия с пользователем на веб-сайте. В 2021 году они впервые стали рейтинговым сигналом.

В то время как определения метрик были изменены с течением временивведение метрики Interaction to Next Paint является наиболее значительным изменением с момента запуска инициативы Core Web Vitals.

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

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

Для лучшего ранжирования в Google эта задержка взаимодействия должна быть менее 200 миллисекунд. Это гарантирует, что веб-сайт чувствует себя отзывчивым для пользователей.

Как развиваются Core Web Vitals?

Google объявил, что взаимодействие с Next Paint станет одним из трех Core Web Vitals статистика по состоянию на март 2024 года. На данный момент веб-сайт, который слишком медленно реагирует на действия пользователя, может ухудшить позиции в результатах поиска.

INP заменит текущий Задержка первого входа (FID) метрика. Хотя FID также измеряет скорость отклика, он более ограничен, поскольку учитывает только первое взаимодействие с пользователем. Он также измеряет только задержку до начала обработки входного события, а не ждет, пока пользователь увидит результат.

В настоящее время только 64,9% мобильных сайтов преуспеть в метрике «Взаимодействие с следующей отрисовкой», и будет сложнее получить хороший балл INP, чем хороший балл «Задержка первого ввода».

Как я могу измерить метрику Interaction to Next Paint на своем веб-сайте?

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

Откройте вкладку «Web Vitals» после завершения теста. Вы можете увидеть метрику Interaction to Next Paint внизу страницы.

В этом случае только 38% пользователей имеют хороший опыт работы с INP.

Как оптимизировать взаимодействие с Next Paint?

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

• Непрерывные фоновые задачи препятствуют обработке пользовательского ввода
• Сама обработка пользовательского ввода занимает много времени

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

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

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

Используйте Chrome DevTools для анализа производительности

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

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

Проверьте показатель «Общее время блокировки», чтобы определить фоновые задачи.

НАШИ Общее время блокировки Метрика отслеживает, как часто возникают фоновые задачи ЦП, которые могут препятствовать выполнению другого кода. Если пользователь взаимодействует со страницей, когда задача уже выполняется, браузер сначала завершает эту задачу, прежде чем обрабатывать событие ввода.

Вы можете использовать такие инструменты, как Флагман Google чтобы увидеть, как можно оптимизировать этот показатель.

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

Отслеживание взаимодействия со следующей картиной

Хотите узнать, как у вас дела с INP и другими Core Web Vitals? DebugBear может отслеживать скорость вашего сайта и помочь вам оптимизировать его.

Начните 14-дневную бесплатную пробную версию сегодня и обеспечьте лучший пользовательский опыт.

Заключение

Метрика Interaction to Next Paint представляет собой самое большое изменение в Google Core Web Vitals с момента их первоначального объявления. INP устраняет недостатки предыдущего измерения задержки первого входа и обеспечивает лучшее представление о том, как пользователи воспринимают веб-сайт.

Проверьте эффективность своего веб-сайта по показателю «Взаимодействие с следующей отрисовкой» до того, как в 2024 году произойдет изменение рейтинга. Таким образом, у вас будет достаточно времени для определения оптимизаций и ускорения работы вашего веб-сайта.

Попробуйте DebugBear с 14-дневной бесплатной пробной версией.