Как уменьшить совокупное смещение макета (CLS) в WordPress

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

Кумулятивное смещение макета (CLS) — это показатель, используемый Google для измерения того, насколько веб-страница перестраивается при загрузке. Сайт, который значительно перемещается — заставляя пользователей щелкать неправильную ссылку или испытывать проблемы с чтением контента, — создает плохой пользовательский опыт и не одобряется Google.

Просмотр оценки CLS вашего сайта и других показателей Core Web Vitals может помочь вам определить способы улучшения его общего состояния и, в свою очередь, повысить ваш рейтинг!

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

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

Кумулятивное смещение макета (CLS) измеряет серьезность движения на веб-странице по мере загрузки ресурсов. Вы, наверное, замечали, что иногда, когда вы открываете веб-сайт, изображения и видео могут появляться в разное время и вытеснять другой контент по мере загрузки.

Здесь вы можете увидеть CLS в действии:

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

Как CLS влияет на взаимодействие с пользователем на сайте WordPress?

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

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

Что влияет на ваш балл CLS?

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

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

Вот пять факторов, которые могут повлиять на вашу оценку CLS:

1. Изображения и видео без атрибутов размера

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

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

На следующем рисунке вы можете увидеть загрузку некоторых ранних элементов на домашней странице GameStop:

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

Это именно тот сценарий, которого вы хотите избежать или свести к минимуму на своем сайте.

2. Объявления и встраивания без атрибутов размера

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

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

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

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

3. Пользовательские шрифты

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

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

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

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

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

4. Некомпозитные анимации

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

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

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

5. Динамически внедряемый контент

Динамически внедряемый контент — это элемент веб-страницы, который изменяется в зависимости от определенных факторов. Часто эти факторы зависят от пользователя, что обеспечивает более персонализированный опыт.

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

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

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

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

Как уменьшить совокупное смещение макета в WordPress

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

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

Ниже вы найдете решения по сокращению CLS и улучшению пользовательского опыта вашего сайта.

1. Установите плагин, разработанный для Core Web Vitals.

Core Web Vitals рассматривает три показателя:

• Совокупный сдвиг макета (CLS)
• Задержка первого ввода (FID)
• Самая большая содержательная краска (LCP)

С помощью Jetpack Boost вы можете отслеживать и улучшать свои показатели Core Web Vitals и другие показатели производительности прямо с панели управления WordPress.

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

2. Установите размеры для изображений и видео

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

К счастью, установить размеры в WordPress очень просто. Просто нажмите на встроенное изображение и настройте размеры изображения на соответствующие значения:

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

3. Установите размеры для рекламы и встроенного контента

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

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

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

4. Разместите пользовательские шрифты локально и предварительно загрузите их

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

Вы можете сделать это, перейдя в google-webfonts-helper и выбрав шрифт, который вы хотите использовать, из вариантов слева:

Затем выберите параметры, которые вы хотели бы использовать (в большинстве случаев по умолчанию), и скопируйте CSS из выбора « Лучшая поддержка » на шаге 3.

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

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

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

5. Установите заполнители для динамически внедряемого контента

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

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

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

6. Используйте плагин Happy Addons for Elementor для анимации

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

Если вы хотите придерживаться анимации, вы можете рассмотреть возможность использования плагина Happy Addons for Elementor, чтобы безопасно вставлять их и предотвращать проблемы с загрузкой.

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

Как я могу измерить показатель CLS моего сайта WordPress?

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

1. Статистика PageSpeed

PageSpeed ​​Insights — это простой ресурс, предоставляющий отчет о Core Web Vitals. Просто введите URL-адрес, и он проанализирует несколько компонентов, оценит их и предложит советы по улучшению.

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

2. Консоль поиска Google

Google Search Console — это генератор отчетов от Google, ориентированный на состояние вашего сайта в отношении результатов поиска. Как и в случае с PageSpeed ​​Insights, вы можете просматривать отчеты для мобильных и настольных версий вашего сайта с такими показателями, как FID, LCP и CLS.

Чтобы использовать Google Search Console, вам сначала необходимо подтвердить право собственности на свой домен. Затем в отчете будут отмечены неэффективные аспекты вашего сайта, что позволит вам выявить и устранить их.

3. Маяк

Еще одним инструментом Google для оценки качества страницы является Lighthouse, и его легко использовать всем, кто использует браузер Google Chrome. Он отслеживает веб-сайты в режиме реального времени на предмет доступности, производительности, SEO и многого другого.

Вы можете найти Lighthouse, зайдя в настройки браузера Google Chrome, наведя указатель мыши на Дополнительные инструменты и выбрав Инструменты разработчика внизу.

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

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

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

Как я могу легко оптимизировать свой показатель CLS прямо сейчас?

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

Установка плагина Jetpack Boost на ваш сайт WordPress — отличный способ начать. Этот инструмент прост в использовании и может помочь вам сразу улучшить свой балл CLS.

Использование других вышеперечисленных решений гарантирует, что ваш показатель CLS останется на хорошем счету, улучшив SEO и UX вашего сайта. Вы также можете использовать отчеты для определения других показателей Web Vitals, таких как LCP и FID, пока все не станет зеленым!

Начало работы с Jetpack Boost

Чтобы начать, просто установите Jetpack Boost со страницы плагинов WordPress (это бесплатно).

После активации инструмента выберите Boost на вкладке Jetpack в левой части панели инструментов.

Теперь вы увидите показатель производительности вашего сайта на мобильных и настольных устройствах.

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

Часто задаваемые вопросы

Ниже приведены некоторые часто задаваемые вопросы и ответы о CLS в WordPress, которые могут быть полезны при погружении.

Что такое хороший результат CLS?

Все, что ниже 0,1, считается хорошим показателем CLS.

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

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

Что делать, если смена макета неизбежна?

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

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

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

Влияют ли действия пользователя на совокупное смещение макета?

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

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

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

Теперь, когда вы знаете, как исправить кумулятивное смещение макета (CLS) в WordPress и как его измерить, вы можете улучшить SEO и UX своего сайта. Сокращение смен сделает навигацию по вашему сайту более приятной для посетителей, а также повысит ваш рейтинг на страницах результатов поисковых систем.

Чтобы свести к минимуму ваш балл CLS, не забудьте:

1. Установите основной плагин web Vitals, например Jetpack Boost.
2. Установите размеры для изображений, видео, рекламы и другого встроенного контента.
3. Размещайте веб-шрифты локально и предварительно загружайте их.
4. Установите заполнители для динамически внедряемого контента.
5. Используйте плагин Happy Addons for Elementor для анимации.

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