Что такое показатель INP Google и как его улучшить в WordPress

Статьи

В этой статье мы покажем вам, как улучшить вашу оценку INP от Google в WordPress, и объясним, что такое оценка INP от Google

Статьи

Вам интересно, какова оценка INP от Google и как улучшить ее на вашем веб-сайте WordPress?

Взаимодействие с Next Paint (INP) — это основной показатель веб-жизни от Google. Повышение этого показателя сделает ваш сайт более отзывчивым для ваших пользователей.

В этой статье мы покажем вам, как улучшить вашу оценку INP от Google в WordPress, и объясним, что такое оценка INP от Google.

Каковы основные веб-показатели Google?

Основные показатели веб-активности Google — это показатели производительности веб-сайта, которые Google считает важными для общего взаимодействия с пользователем. Эти показатели веб-активности являются частью общего показателя взаимодействия с страницей Google, который повлияет на ваш рейтинг в SEO.

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

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

В прошлом Google использовал три качественных теста:

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

Однако в марте 2024 года Google заменил FID новым тестом под названием INP (Взаимодействие с Next Paint). Продолжают использоваться два других теста.

Давайте посмотрим, что такое INP и почему Google перешел на него.

Что такое INP Google?

INP расшифровывается как ‘Взаимодействие с Next Paint». Это новый показатель Google Core Web Vital, который измеряет взаимодействия пользователей, вызывающие задержки на вашем веб-сайте.

Тест INP измеряет, сколько времени проходит между взаимодействием пользователя с вашим сайтом, например, нажатием на что-либо, и визуальным обновлением вашего контента в ответ. Это визуальное обновление называется ‘next paint’.

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

Затем в результате теста Google будет получена единая оценка INP, основанная на продолжительности большинства взаимодействий пользователей на вашем веб-сайте. Оценка будет либо ‘Хорошей’, либо «Нуждается в улучшении», либо ‘Плохой’, в зависимости от того, сколько времени потребуется вашему веб-сайту для визуального обновления.

Почему Google изменил показатель FID на INP?

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

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

Однако этот показатель оказался не таким полезным, как мог бы быть. У теста FID было два ограничения:

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

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

Как измерить показатель INP от Google в WordPress

Самый простой способ проверить свой рейтинг Google Core Web Vitals — использовать инструмент PageSpeed Insights. Просто введите URL, который вы хотите протестировать, и нажмите кнопку ‘Проанализировать’.

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

Теперь, наряду с другими ключевыми веб-функциями Google, вы также увидите, как страница взаимодействует со следующей оценкой Paint (INP).

Оценки для пользователей мобильных устройств и настольных компьютеров будут разными.

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

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

Google предоставил несколько рекомендаций по интерпретации вашей оценки INP:

  • Быстрее 200 миллисекунд – хорошая отзывчивость
  • 200-500 миллисекунд – требуется улучшение
  • Медленнее 500 миллисекунд – низкая скорость отклика

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

Затем вы можете улучшить свою оценку INP, следуя рекомендациям в разделах ниже.

Тематическое исследование: поиск медленных взаимодействий на веб-сайтах Awesome Motive

Но сначала, возможно, будет полезно ознакомиться с тематическим исследованием. Мы начали измерять показатели INP на сайтах наших брендов, включая All in One SEO, MonsterInsights и WPForms.

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

Используя панель управления Chrome User Experience (CrUX), мы могли видеть, что:

  • 80% наших сессий были оценены как ‘хорошие’
  • 12% наших сессий получили оценку ‘нуждается в улучшении’
  • 8% наших сессий были оценены как «плохие’

На данный момент мы еще не знаем, какие конкретные взаимодействия на наших страницах происходят медленно и нуждаются в оптимизации. Эта информация не предоставлена Google во время тестирования.

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

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

Инструменты разработчика

В инструментах разработчиков Chrome перечислен ряд инструментов, которые можно использовать для тестирования, таких как расширение Chrome Web Vitals и новый режим timespan на панели Lighthouse в DevTools. Вы также можете ознакомиться со статьей Google о том, как выполнять отладку с помощью расширения Web Vitals.

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

Вы можете сделать это с помощью функции проверки элементов в Chrome, перейдя в просмотр » Разработчик », чтобы проверить элементы. Вы можете переключиться на вкладку ‘Сеть’ и выбрать опцию регулирования из выпадающего меню.

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

Как улучшить оценку INP Google в WordPress

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

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

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

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

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

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

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

Разработчикам вашей темы WordPress, плагинов и пользовательского JavaScript может потребоваться оптимизировать свой код, чтобы немедленно предоставлять обратную связь вашим пользователям. Хорошая новость в том, что они, вероятно, уже работают над этим, чтобы уложиться в крайний срок, установленный в марте 2024 года.

Далее в этой статье мы предлагаем несколько конкретных советов для разработчиков с примерами.

Как владельцы веб-сайтов могут оптимизировать свои сайты для INP

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

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

Вот несколько шагов, которые вы можете предпринять для достижения этой цели.

1. Убедитесь, что у вас установлена последняя версия WordPress

Первое, что вам следует сделать, это убедиться, что вы используете последнюю версию WordPress.

Это потому, что в версиях WordPress 6.2 и 6.3 были внесены значительные улучшения производительности. Они улучшат производительность вашего веб-сайта на стороне сервера и клиента, что улучшит ваш показатель INP.

Подробные инструкции вы можете найти в нашем руководстве по безопасному обновлению WordPress.

2. Оптимизация фоновых процессов в WordPress

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

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

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

Подробные инструкции вы можете найти в разделе «Оптимизация фоновых процессов» нашего окончательного руководства о том, как повысить скорость и производительность WordPress.

3. Ознакомьтесь с рекомендациями по производительности PageSpeed Insights

После запуска теста PageSpeed Insights на своем веб-сайте вы можете прокрутить вниз до раздела результатов теста «Производительность».

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

Например, вы можете увидеть рекомендации по устранению ресурсов, блокирующих рендеринг. Вы можете сделать это, следуя нашему руководству о том, как исправить JavaScript и CSS, блокирующие рендеринг в WordPress.

4. Уменьшите количество JavaScript в WordPress

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

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

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

Чтобы узнать, как это сделать, вы можете ознакомиться с нашим руководством о том, как минимизировать файлы CSS и JavaScript в WordPress.

Как разработчики могут оптимизировать свой код для INP

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

1. Немедленно визуально подтверждайте ввод данных пользователем

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

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

Вот несколько примеров:

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

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

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

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

2. Оптимизируйте, где браузер проводит большую часть своего времени

Следующее, что вам следует сделать, это выяснить, где браузер тратит большую часть своего времени, а затем оптимизировать эти части.

В Google Chrome, когда вы переходите к просмотру производительности »Разработчика» »Инструментов разработчика», можно проверить функции JavaScript и обработчики событий, которые блокируют следующий paint.

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

3. Сократите количество макетов

Иногда большая часть работы процессора связана с версткой.

Когда это произойдет, вам следует проверить, сможете ли вы уменьшить количество relayout функций в своем коде.

4. Сначала покажите исходный контент

Если рендеринг содержимого страницы происходит медленно, это может повлиять на вашу оценку INP.

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

Примеры хороших методов кодирования на JavaScript для разработчиков

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

Мы собрали пример проекта на CodePen, с которым вы можете поэкспериментировать. Вы можете изучить наш пример кода, прочитать краткие пояснения и увидеть разницу, нажимая кнопки.

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

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

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

Пример 1: Обновите экран перед запуском тяжелой задачи процессора

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

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

// Bad example
button.addEventListener('click', () => {
  // Heavy CPU task
  for (let i = 0; i < 10000000; i++) {
    console.log(i);
  }
  // UI update
  button.textContent = 'Clicked!';});

В этом улучшенном примере пользовательский интерфейс обновляется сразу же при нажатии кнопки.

После этого тяжелая задача процессора переводится на setTimeout обратный вызов:

// Better example
button.addEventListener('click', () => {
  // UI update
  button.textContent = 'Processing...';
 
  // Heavy CPU task
  setTimeout(() => {
    for (let i = 0; i < 10000000; i++)
 {
      console.log(i);
    }
    // Final UI update
    button.textContent = 'Done!';
  }, 0);
});

Это позволяет браузеру обновлять экран перед запуском медленной задачи, что приводит к хорошей оценке INP.

Пример 2: Запланируйте несрочную обработку

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

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

Вот пример:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';
 
  // Non-essential processing  window.requestIdleCallback(() => {
    // Perform non-essential processing here...    button.textContent = 'Done!';
  });
});

Это сделает веб-страницу более отзывчивой для пользователя и повысит вашу оценку INP.

Пример 3: Запланируйте запуск функции перед следующим Paint

Вы также можете использоватьrequestAnimationFrame, чтобы запланировать запуск функции перед следующей перерисовкой:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';
 
  // Visual update
  window.requestAnimationFrame(() => {
    // Perform visual update here...    button.style.backgroundColor = 'green';    button.textContent = 'Done!';
  });
});

Это может быть полезно для анимации или визуальных обновлений в ответ на взаимодействия с пользователем.

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

Пример 4: Избегайте искажения макета

Перебои с версткой возникают, когда вы многократно читаете и записываете в DOM (объектную модель документа), в результате чего браузер несколько раз пересчитывает верстку.

Вот пример изменения макета:

// Bad example
elements.forEach(element => {
  const height = element.offsetHeight; // read  element.style.height = height + 'px'; // write});

Этого можно избежать, распределив операции чтения и записи по группам.

Это лучший пример:

// Good example
const heights = elements.map(element => element.offsetHeight); // batched read
elements.forEach((element, index) => {
  element.style.height = heights[index] + 'px'; // batched write
});

Руководства по повышению производительности WordPress

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

Обратная связь

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

  • Электронная почта: Пишите нам на info@kowalski.su для подробных запросов или отправки дополнительных материалов. Мы обеспечиваем оперативный ответ и всестороннюю информацию.
  • Телефон: Звоните на номер +7 (906) 825 44-41 для немедленной помощи или консультации. Рабочие часы с 7:00 до 15:00 (МСК).
  • Telegram: Для быстрой связи используйте наш Telegram-канал @ivan_zh. Идеально подходит для получения оперативных ответов.

Откройте новые возможности с интеграцией WordPress и Bitrix24

Отличных вам сайтов!

  1. Переведено с сайта Wpbeginner ↩︎
Задать вопрос