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

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

Cumulative Layout Shift, или сокращенно CLS, — это показатель, ориентированный на пользовательский опыт, который является частью новой инициативы Google Core Web Vitals .

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

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

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

В этой статье мы познакомим вас с метрикой Google Cumulative Layout Shift и покажем, как обнаруживать проблемы с CLS на вашем сайте. Затем мы рассмотрим три простых способа решения проблем и снижения оценки CLS вашего сайта.

Введение в кумулятивный сдвиг макета в WordPress

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

Одним из распространенных примеров является поздняя загрузка рекламы, которую вы, вероятно, видели на сайтах СМИ. Возможно, вы начали читать текст на странице , но неожиданно текст был «вытеснен» рекламой, которая отображается после того, как страница уже загружена.

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

Но в целом высокий балл указывает на большое количество сдвигов макета (плохо), а низкий балл указывает на небольшое количество сдвигов макета (хорошо). А нулевой балл означает, что у вашего сайта нет проблем со сдвигом макета, что идеально.

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

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

Key Term: Совокупное смещение макета (CLS)важный, ориентированный на пользователя показатель для измерения визуальной стабильности, так как он помогает количественно оценить, как часто пользователи сталкиваются с неожиданными сдвигами макета. Низкое значение показателя CLS говорит о том, что страница выглядит восхитительно.

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

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

Для начала введите свой URL-адрес в поле и нажмите « Анализировать» . Процесс займет всего несколько минут. Когда вы получите результаты, прокрутите вниз до раздела « Лабораторные данные» или « Полевые данные» и найдите для своего сайта совокупную оценку сдвига макета :

Отсюда вы можете определить, насколько хорошо ваш сайт работает в этой области. Как правило, существует три возможных диапазона, в которые может попасть ваша оценка CLS:

Хорошо , не более 0,1
ОК , это от 0,1 до 0,25
Плохо , то есть 0,25 или больше

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

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

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

Как исправить кумулятивный сдвиг макета в WordPress (3 способа)

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

1. Добавьте размеры к изображениям, видео и рекламе.

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

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

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

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

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

На примере , у меня установлен полный размер ( он не превышает размеры страницы ) . Вы также произвести изменения и установить произвольный .

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

Один из способов сделать это — применить свойства min-heightи min-widthCSS к <div>контейнеру, содержащему ваше объявление. У Google есть хорошее руководство, как это сделать .

Например, если вы показываете рекламу размером 350 x 250 пикселей внутри divс идентификатором in-content-ad, вы можете зарезервировать место с помощью этого кода:

<div id = "in-content-ad" style = "min-width: 350px; min-height: 250px;"> РАЗМЕСТИТЕ РЕКЛАМНЫЙ КОД ЗДЕСЬ </div>

Некоторые рекламные инструменты также могут предлагать инструменты, которые помогут вам в этом. Например, если вы используете Google Рекламу , Google предоставляет редактор объявлений, который поможет в этом.

2. Предварительно загрузите шрифты.

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

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

Многие плагины для повышения производительности WordPress включают возможность предварительной загрузки шрифтов. Например, Autoptimize, Asset CleanUp, Perfmatters и WP Rocket.

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

Рекомендую ознакомиться : Как оптимизировать свой wordpress

3. Оптимизируйте свой динамический контент.

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

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

Есть два способа исправить это:

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

Заключение

В этой статье мы рассмотрели три способа исправить и уменьшить кумулятивный сдвиг макета в WordPress :

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

Если статья «Кумулятивный сдвиг макета в WordPress (3 способа исправить)» вам понравилась и была полезной, то стоит наверное поделиться с друзьями? Тогда, нажмите одну (можно и больше) из кнопок соц. сетей. Появились вопросы пишите в комментариях , при первой возможности отвечу .