TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как исправить кумулятивный сдвиг макета в WordPress?

13

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

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

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

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

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

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

Как исправить кумулятивный сдвиг макета в WordPress?

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

Чтобы найти элементы, вызывающие проблемы, прокрутите вниз до раздела диагностики и отметьте «Избегайте больших сдвигов макета». Здесь Google покажет список элементов, вызывающих сдвиг макета на протестированной странице.

Как исправить кумулятивный сдвиг макета в WordPress?

Избегайте большого сдвига макета

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

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

Как исправить кумулятивный сдвиг макета в WordPress?

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

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

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

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

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

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

1 Оптимизация доставки CSS

Как вы видите на приведенном выше снимке экрана «Избегайте больших сдвигов макета», первым элементом является «<div class =» row footer-row »>». Это удивительно, поскольку нет возможности загрузить нижний колонтитул над областью сгиба. После проверки мы поняли, что это связано с опцией «Оптимизировать доставку CSS», включенной в плагине WP Rocket. Эта опция создаст критический CSS и встроит его в раздел заголовка, чтобы удалить CSS, блокирующий рендеринг. Однако во многих случаях это приведет к кумулятивной проблеме сдвига макета. Если вы используете WP Rocket или любой другой плагин кеширования для встраивания CSS в заголовок, отключите эту опцию и проверьте, помогает ли улучшить задержку CLS.

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

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

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

Как исправить кумулятивный сдвиг макета в WordPress?

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

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

Как исправить кумулятивный сдвиг макета в WordPress?

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

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

Невозможно зарезервировать место для этих слотов до запроса рекламного контента, а объявления с изменяемым размером всегда вызывают сдвиги в макете. Чтобы уменьшить влияние сдвигов макета при работе с гибкими рекламными местами, мы рекомендуем следующее: Используйте гибкий размер только для рекламных мест ниже сгиба.

Google

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

3 Используйте правильные размеры изображения

Это похоже на использование фиксированной рекламы. Если у вас нет размеров изображения, браузеры будут ждать загрузки изображений и отправлять содержимое ниже, вызывая проблему сдвига макета. К счастью, это не проблема, поскольку WordPress автоматически добавляет размеры изображениям при загрузке через редактор сообщений. Однако вам необходимо вручную добавить параметры высоты и ширины в тег img, если вы вручную вставляете изображения с помощью блока «Пользовательский HTML», функции «Редактировать как HTML» или изображения логотипа. Кроме того, укажите фиксированную ширину и высоту при встраивании видео и фреймов со сторонних веб-сайтов.

Как исправить кумулятивный сдвиг макета в WordPress?

Отсутствуют ширина и высота изображения

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

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

Как исправить кумулятивный сдвиг макета в WordPress?

Проблема со шрифтом

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

Как исправить кумулятивный сдвиг макета в WordPress?

Оптимизация веб-шрифтов SG Optimizer

  • Другой вариант – использовать системные шрифты или разместить файлы шрифтов на вашем сервере. Например, такие темы, как GeneratePress и Astra, позволяют вам выбрать системный шрифт для вашего сайта.
  • В любом случае не забудьте предварительно загрузить шрифты, чтобы исключить предупреждение о предварительном запросе ключа, которое также может вызвать кумулятивную задержку сдвига макета.

5 иконок шрифтов в меню и ATF

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

6 Ленивая загрузка изображения логотипа

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

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

Как исправить кумулятивный сдвиг макета в WordPress?

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

7 ленивых слайдеров изображений в ATF

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

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

8 Отображение блокирующего JavaScript, такого как jQuery

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

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

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

Как исправить кумулятивный сдвиг макета в WordPress?

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

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

Заключение

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

Источник записи: webnots.com
Leave A Reply

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