Руководство для начинающих: исправление кумулятивного смещения макета в WordPress

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

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

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

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

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

Оглавление:

• Что такое кумулятивный сдвиг макета?
• Как определить проблемы с Cumulative Layout Shift
• Как исправить кумулятивный сдвиг макета

Введение в Cumulative Layout Shift в WordPress

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

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

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

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

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

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

К сожалению, на этом проблемы с высоким показателем Cumulative Layout Shift не заканчиваются. Cumulative Layout Shift также является частью новой инициативы Google Core Web Vitals. Начиная с обновления Google Page Experience, показатели Core Web Vitals вашего сайта теперь являются небольшим фактором ранжирования SEO, а это означает, что проблемы с CLS могут повлиять на ранжирование вашего сайта.

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

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

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

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

• Good , что равно или меньше 0,1
• OK , который находится между 0,1 и 0,25
• Bad , что составляет 0,25 или более

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

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

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

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

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

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

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

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

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

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

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

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

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

Например, если вы показываете рекламу размером 300x250 пикселей внутри блока div с идентификатором in-content-ad , вы можете зарезервировать место, используя этот код:

 <div>ВСТАВЬТЕ ЗДЕСЬ РЕКЛАМНЫЙ КОД</div>

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

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

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

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

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

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

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

Однако для более продвинутых пользователей вы также можете предварительно загрузить шрифты с собственным фрагментом кода. Чтобы добавить этот фрагмент кода, вам нужно отредактировать файл header.php вашей дочерней темы. Вы можете отредактировать этот файл, выбрав « Внешний вид» > «Редактор тем» > «Заголовок темы» на своем сайте WordPress:

Отредактировав файл header.php в дочерней теме, прокрутите страницу вниз, затем скопируйте и вставьте следующую строку кода, заменив ссылку на пример шрифта — roboto.woff2 в этом примере — на фактическая ссылка на файл шрифта, который вы используете на своем сайте:

 <link rel="preload" href="roboto.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>

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

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

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

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

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

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

Исправление кумулятивного смещения макета в WordPress навсегда

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

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

У вас остались вопросы по улучшению кумулятивного смещения макета в WordPress? Дайте нам знать об этом в комментариях!