Как оптимизировать Core Web Vitals для WordPress (окончательное руководство)

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

Вы хотите оптимизировать основные веб-показатели для WordPress?

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

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

Вот краткий обзор того, что мы рассмотрим в этом руководстве.

  • Что такое показатели Google Core Web Vitals?
  • Как проверить свой рейтинг Google Core Web Vitals
  • Почему основные показатели важны?
  • Как улучшить основные показатели сайта в WordPress (7 советов)

Что такое Google Core Web Vitals?

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

Core Web Vitals: как оптимизировать их для SEO

Правда в том, что никому не нравится медленно загружающийся сайт, включая Google.

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

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

Основные показатели сайта

Для этого Google использует три теста качества (Web Vitals).

  • Крупнейший контентный рисунок (LCP)
  • Первая задержка ввода (FID)
  • Кумулятивный сдвиг макета (CLS)

Названия этих тестов могут показаться слишком техническими, но понять, что они делают, довольно просто.

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

Крупнейший контентный рисунок — LCP

Largest Contentful Paint или LCP, смотрит на то, как быстро основной контент (будь то изображение, статья или описание) становится видимым для пользователей.

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

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

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

Первая задержка ввода (FID)

First Input Delay (FID) измеряет время, которое требуется браузеру пользователя, чтобы начать обработку обработчиков событий в ответ на взаимодействие с пользователем.

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

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

Кумулятивный сдвиг макета (CLS)

Cumulative Layout Shift (CLS) измеряет время, необходимое для того, чтобы веб-сайт стал визуально стабильным.

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

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

Если вы предпочитаете письменные инструкции, просто продолжайте читать.

Как проверить свой показатель Google Core Web Vitals

Самый простой способ проверить свой показатель Google Core Web Vitals Score — использовать инструмент Page Speed Insights. Просто введите URL-адрес, который вы хотите проверить, и нажмите на кнопку «Анализ».

Использование инструмента Page Speed Insights для просмотра основного показателя Web Vitals

Результаты основных показателей отображаются в разделе под названием «Полевые данные».

Пример отчета Core Web Vitals

Чтобы упростить задачу, вы увидите сообщение вверху: «[…] данные поля показывают, что эта страница прошла оценку Core Web Vitals».

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

  • Наибольший объем содержимого (LCP) — 2.5 секунд
  • Задержка первого ввода (FID) — менее 100 миллисекунд
  • Кумулятивный сдвиг макета (CLS) — менее 0.1

Как просмотреть основные показатели Google для всего веб-сайта?

Теперь инструмент Page Speed Insights позволяет проверить отдельную страницу. Если проверяемая страница является корнем вашего доменного имени, то вы также можете нажать на флажок ‘Show Origin Summary’.

Сводный показатель Origin

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

Однако, чтобы действительно углубиться, вы можете получить доступ к отчету Core Web Vitals на панели Google Search Console.

Основные веб-тесты в Google Search Console

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

Чтобы получить еще более подробные отчеты для Web Vitals, вы можете использовать тест скорости маяка, перейдя в раздел Web.dev Measure tool или с помощью встроенного теста в браузере Google Chrome.

Просто откройте веб-сайт в Chrome, щелкните правой кнопкой мыши в любом месте экрана, а затем выберите опцию Inspect. На вкладках вы увидите опцию под названием Lighthouse.

Тестирование веб-показателей в Google Chrome

После этого нажмите кнопку Generate Report.

Примечание: Для получения наиболее точных результатов тест в Chrome следует проводить в режиме «Инкогнито». В противном случае расширения вашего браузера могут негативно повлиять на основной показатель, который он вам показывает.

Почему важны показатели Core Web Vitals?

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

Согласно недавнему исследованию, задержка времени загрузки страницы на 1 секунду может привести к 7% снижению конверсии, 11% снижению количества просмотров страниц и 16% снижению удовлетворенности клиентов.

Исследование StrangeLoop

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

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

Пользовательский опыт также является важным фактором для SEO-рейтинга. Google уже объявил, что начиная с мая 2021 года обновление поискового алгоритма будет включать опыт страницы как один из факторов ранжирования.

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

Как улучшить основные показатели сайта в WordPress (7 советов)

Улучшить основной показатель Web Vitals в WordPress не так уж и сложно. Используя некоторые важные советы по оптимизации производительности, вы сможете легко сдать экзамен Web Vitals.

1. Оптимизация хостинга WordPress

Ваша хостинговая компания WordPress играет самую значительную роль в производительности вашего сайта.

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

Мы рекомендуем использовать SiteGround для высокопроизводительного сайта. Они являются одной из официально рекомендованных WordPress хостинговых компаний, и мы используем SiteGround для сайта WPBeginner.

SiteGround

Чтобы обеспечить вашему сайту необходимый прирост производительности, SiteGround использует Google Cloud Platform для своих серверов, а также сверхбыстрый PHP.

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

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

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

WP Rocket — лучший плагин кэширования WordPress на рынке. Это позволит вам легко настроить кэширование на вашем сайте WordPress, не вдаваясь в технические подробности управления сервером.

2. Улучшение показателя Largest Content Paintful (LCP) Score

Как упоминалось ранее, Largest Content Paintful (LCP) — это буквально самая большая часть контента в пределах области просмотра страницы. Например, в блоге это может быть главная картинка или текст статьи.

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

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

Самый большой элемент, влияющий на содержание

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

Если это текст, то вы можете попробовать разбить его на абзацы и заголовки.

3. Улучшение показателя первой входной задержки (FID)

Показатель First Input Delay измеряет время между нажатием пользователем на что-то на вашем сайте и началом обработки элементов браузером.

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

Еще один простой способ улучшить показатель FID — использовать плагин кэширования, например WP Rocket. Он поставляется со встроенной функцией, которая позволяет вам оптимизировать доставку файлов.

Сначала вам нужно установить и активировать плагин WP Rocket. Для получения более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.

После этого перейдите к пункту Настройки » WP Rocket страницу и переключитесь на вкладку Оптимизация файлов.

Оптимизация файлов в WP Rocket

Прокрутите страницу вниз и установите флажок напротив опции ‘Load JavaScript deferred’.

Отложите JavaScript

Не забудьте нажать на кнопку «Сохранить изменения», чтобы сохранить свои изменения.

Отсрочка JavaScript позволяет вашему сайту загружаться, не дожидаясь загрузки JavaScript. Это улучшает показатель First Input Delay (FID) Score для страниц, где причиной может быть JavaScript.

4. Улучшение показателя кумулятивного сдвига макета (CLS)

Показатель Cumulative Layout Shift (CLS) влияет, когда различные элементы на веб-странице загружаются медленно и заставляют двигаться другие элементы на экране.

Вы можете посмотреть, какие элементы влияют на показатель CLS, развернув вкладку «Избегать больших смещений макета» в результатах Page Speed Insights.

Элементы сдвига макета

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

Чтобы визуальный макет вашей страницы не смещался при загрузке других элементов, вам необходимо сообщить браузерам размеры (ширину и высоту) таких элементов, как изображения, видео вставки, рекламные объявления, такие как Google AdSense, и т.д.

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

Один из способов сделать это — использовать инструмент Inspect Tool. Просто щелкните правой кнопкой мыши в браузере и выберите Inspect, чтобы открыть консоль разработчика.

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

Проверьте атрибуты высоты и ширины

5. Устранение элементов, блокирующих рендеринг

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

Результаты Page Speed Insights покажут вам элементы, блокирующие рендеринг. Обычно это файлы JavaScript или CSS, добавленные вашими плагинами WordPress, сторонними инструментами, такими как Google Analytics, Facebook (признана экстремистской организацией на территории РФ) Pixel, Google Ads и другими.

Рендеринг блокирующих элементов

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

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

6. Правильный размер изображений в WordPress

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

Оптимизированные и неоптимизированные изображения в WordPress

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

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

7. Используйте CDN для сервера, чтобы улучшить оценку Web Vitals

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

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

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

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

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

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий