Как исправить кумулятивную ошибку сдвига макета в WordPress?

Google подталкивает веб-мастеров к принятию всех мер, необходимых для повышения скорости загрузки страницы. Скорость загрузки страницы вашего сайта измеряется на основе нескольких параметров, как вы можете видеть в инструменте Google PageSpeed ​​Insights. Накопительное смещение макета (CLS) – один из критериев измерения скорости Core Web Vital. Это важный фактор не только для повышения скорости, но и для лучшего взаимодействия с пользователем. В этой статье мы объясним различные причины проблемы с CLS и как исправить совокупную ошибку сдвига макета в WordPress.



Что такое кумулятивный сдвиг макета?

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

Связанный: Как включить отложенную загрузку изображений в Google Chrome?

Проверка совокупной ошибки сдвига макета

Откройте инструмент Google PageSpeed ​​Insights (PSI) и проверьте скорость своей веб-страницы. Вы можете проверить данные поля или сводку по происхождению, чтобы убедиться, что на вашем сайте существует проблема кумулятивного сдвига макета. Вы можете навести указатель мыши на индикатор выполнения, чтобы узнать совокупный процент загрузки, при которой существует проблема на странице / сайте.

Проверьте проблему CLS в PSI

Проверить детали в Google Search Console

Вы можете просмотреть URL-адреса страниц с проблемой CLS в своей учетной записи Google Search Console. После входа в свою учетную запись перейдите в раздел «Core Web Vitals» в разделе «Улучшения». Вы можете найти отчеты как для мобильных устройств, так и для компьютеров, чтобы просмотреть страницы с сообщением «Проблема CLS: более 0,25 (мобильный) / (рабочий стол)».

Проблема CLS в Google Search Console
Проблема CLS в Google Search Console

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

Хороший Требуется улучшение Бедные
<0,1 с От 0,1 до 0,25 с > 0,25 с

Следовательно, вы должны стремиться сократить время CLS менее чем на 0,25 секунды, чтобы сделать этот зеленый / желтый цвет в инструменте PSI и удалить ошибки из вашей учетной записи Search Console.

Возможные факторы, влияющие на CLS в WordPress

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

  1. Рекламные скрипты вроде AdSense в ATF
  2. Ленивая загрузка изображения логотипа
  3. Ленивая загрузка слайдера или других изображений в ATF
  4. Шрифты, задерживающие загрузку контента
  5. Иконки шрифтов в меню и ATF
  6. Отображать блокирующий JavaScript, например jQuery

Как исправить кумулятивную ошибку сдвига макета в WordPress?

Давайте подробно объясним каждую из вышеупомянутых проблем и возможные решения.

1. AdSense и другие рекламные скрипты в ATF

Многие издатели используют Google AdSense или другую рекламную сеть для монетизации своего онлайн-контента. Вы должны вставить кусок рекламного кода JavaScript на свою веб-страницу, чтобы показывать рекламу. Как правило, вы должны вставить рекламный код в область над сгибом (ATF), чтобы увеличить видимость рекламы и увеличить доход. Однако это напрямую повлияет на скорость загрузки страницы и создаст совокупную ошибку сдвига макета в инструменте Google PageSpeed ​​Insight (PSI).

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

Смещение макета из-за рекламы
Смещение макета из-за рекламы

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

Отложить выполнение объявления JavaScript
Отложить выполнение объявления JavaScript

2. шрифты, задерживающие загрузку содержимого

На каждом веб-сайте используются шрифты. Это создаст кумулятивную проблему сдвига макета, особенно при использовании сторонних сервисов, таких как шрифты Google. Поскольку шрифты Google необходимо загружать с внешних серверов, это создаст подобную кумулятивную проблему сдвига макета, как и рекламный код. Вы также можете увидеть эту проблему в PSI как «Убедитесь, что текст остается видимым во время загрузки веб-шрифта», что указывает на задержку загрузки видимого содержимого.

Проблема со шрифтом
Проблема со шрифтом
  • Эффективный способ решить эту проблему – использовать плагин кеширования для предварительного подключения и предварительной выборки DNS-доменов, таких как домен fonts.googleapis.com и fonts.gistatic.com. Это поможет вам ускорить загрузку шрифтов, предварительно подключив сервер шрифтов Google. SG Optimizer, WP Rocket (автоматический) и многие другие плагины предлагают эту функцию, которую вы можете использовать для этой цели. Кроме того, вы можете ограничить количество семейств шрифтов и уменьшить вес загружаемого файла.
Оптимизация веб-шрифтов SG Optimizer
Оптимизация веб-шрифтов SG Optimizer
  • Другой вариант – использовать системные шрифты или разместить файлы шрифтов на вашем сервере. Например, такие темы, как GeneratePress и Astra, позволяют вам выбрать системный шрифт для вашего сайта.

3. Иконки шрифтов в меню и ATF

Многие темы WordPress используют значки шрифтов в области навигации для отображения элементов подменю. Как правило, эти значки предоставляются сторонними веб-сайтами, такими как font awesome или icomoon. Это создаст аналогичные проблемы, такие как шрифты, и увеличит общее время смены макета. Такие темы, как GeneratePress, позволяют выбирать значки SVG вместо шрифтов для меню навигации. Точно так же в теме Astra вы можете отключить загрузку библиотеки шрифтов с помощью настраиваемой функции. Таким образом вы можете решить проблему кумулятивного сдвига макета в WordPress. Однако у вас не будет другого выбора, кроме отключения элементов подменю в большинстве других тем, что не является хорошим решением.

Веб-мастера неправильно понимают предупреждение PSI «Отложить закадровые изображения». Это предупреждение появляется, если вы не загружаете изображения, доступные в нижней части страницы (BTF). Однако, если вы используете плагин в WordPress, все изображения с тегом HTML будут заключены в сценарий отложенной загрузки. Сюда входит изображение логотипа, которое является частью области содержимого в верхней части страницы (ATF). Ленивая загрузка изображения логотипа ATF приведет к кумулятивному смещению макета.

Чтобы сократить время CLS в инструменте PSI, вам нужно исключить изображение логотипа из отложенной загрузки. Решение зависит от плагина, который вы используете для отложенной загрузки изображений. Например, в WP Rocket перейдите в раздел «Медиа> LazyLoad» и укажите название логотипа или URL-адрес, чтобы исключить ленивую загрузку.

Исключить логотип из отложенной загрузки
Исключить логотип из отложенной загрузки

5. Ленивая загрузка слайдеров изображений в ATF

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

Связанный: 25 советов по SEO для повышения рейтинга вашего сайта WordPress.

6. Отображайте блокирующий JavaScript, например jQuery.

Последняя тема – это популярный JavaScript, блокирующий рендеринг из-за тем на основе jQuery. Фактически, WordPress также включает jQuery как часть wp-включает папка. Вы можете отложить jQuery и другие сценарии блокировки рендеринга на своей странице с помощью плагина кеширования, такого как W3 Total Cache. Однако не забудьте тщательно протестировать свой сайт, чтобы избежать поломки макета.

Проверка исправления в Google Search Console

После устранения проблемы не забудьте отправить свои проверки в учетной записи Google Search Console. Вы можете вернуться в раздел «Core Web Vitals» и отправить проверки для всего сайта.

Проверка проблемы CLS в Google Search Console
Проверка проблемы CLS в Google Search Console

Google потребуется до 28 дней, чтобы проверить проблему CLS на вашем сайте и отобразить соответствующие результаты в учетной записи Search Console.

Вывод

Как видите, основная причина кумулятивной ошибки сдвига макета в WordPress связана с размещением скриптов блокировки рендеринга в верхней части области содержимого. Это могут быть рекламные коды, jQuery, шрифты, значки или что-то еще. Решение этой проблемы – использовать простые минималистичные темы, такие как GeneratePress или Astra. С другой стороны, вы можете использовать плагины кеширования для предварительного подключения и комбинировать файлы шрифтов, чтобы сократить совокупное время сдвига макета.

Похожие записи

Добавить комментарий

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