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

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

Что взаимодействует с Next Paint (INP)?

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

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

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

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

ИЯФ заменит нынешний Первая задержка входа (ФИД). Хотя FID также измеряет скорость реагирования, он более ограничен, поскольку учитывает только первое взаимодействие пользователя. Он также измеряет только задержку до начала обработки входного события, а не ждет, пока пользователь увидит результат.

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

Как я могу измерить показатель взаимодействия с помощью Next Paint на своем веб-сайте?

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

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

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

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

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

• Запуск фоновых задач предотвращает обработку пользовательского ввода
• Управление пользовательским вводом само по себе занимает много времени

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

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

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

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

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

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

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

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

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

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

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

Хотите отслеживать свои успехи в INP и других основных веб-показателях? DebugBear может отслеживать скорость вашего сайта и помочь вам оптимизировать его.

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

Заключение

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

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

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