Накопительное смещение макета (CLS) в WordPress: как его устранить

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

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

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

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

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

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

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

Почему это важно?

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

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

Что вызывает СЛС?

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

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

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

Как рассчитывается совокупное смещение макета?

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

• Сдвиг макета — это когда элемент, уже видимый на странице, перемещается из своего начального положения после того, как он уже был отрисован. Такие элементы называются нестабильными элементами (творческими, я знаю).
• Ожидаемые и неожиданные изменения макета — изменения макета негативны только в том случае, если пользователь их не ожидает. Существуют также изменения макета, которые ожидаются и приветствуются, например, после взаимодействия с веб-страницей (например, отправки формы). CSS-анимация и переходы — другие примеры ожидаемых изменений макета. Чтобы учесть это, CLS считает ожидаемыми все изменения макета, которые происходят в течение 500 мс после взаимодействия с пользователем.
• Доля воздействия — процент области просмотра (видимая часть веб-сайта на экране), на которую влияет движущийся элемент, в виде десятичного числа (например, 0,5, если он затрагивает 50% экрана).
• Доля расстояния — расстояние в процентах от экрана, на которое перемещается нестабильный элемент за смену. Также указывается в виде десятичного числа.
• Оценка смещения макета — рассчитывается путем умножения доли воздействия на долю расстояния (например, 0,4 x 0,15 = 0,06). Как следствие, большие элементы, которые перемещаются на большое расстояние, дают более высокий балл, чем мелкие элементы, перемещающиеся на короткое расстояние.

CLS фиксирует наибольшее количество случаев неожиданного смещения макета в течение пятисекундного интервала. Очевидно, чем ниже, тем лучше.

В конце концов, вам не нужно знать специфику. Все, что вам нужно знать, это как измерить CLS и к какой ценности должен стремиться ваш сайт.

Что такое хороший показатель изменения макета?

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

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

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

Есть несколько способов проверить, является ли накопительное смещение макета проблемой на вашем сайте WordPress. Они почти такие же, как и для других показателей Core Web Vitals. Ваш первый порт захода всегда должен быть PageSpeed ​​Insights, который показывает метрику на своей странице результатов.

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

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

Помимо этого, вы также можете использовать следующее:

• Отчет Core Web Vitals в Google Search Console
• Инструменты разработчика браузера Chrome
• Маяк
• JavaScript-библиотека web-vitals

Существует также расширение Chrome под названием CLS Visualizer. Он выделяет меняющиеся элементы на ваших веб-страницах. Для Firefox попробуйте SpeedVitals.

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

Если вы заметили, что CLS является проблемой на вашем сайте WordPress, вы, вероятно, захотите ее исправить. Это то, о чем остальная часть этой статьи.

Укажите размеры мультимедиа

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

К сожалению, в адаптивном дизайне принято не указывать конкретные размеры изображения. Чаще всего для изображений устанавливается width или max-width: 100%; и height: auto; . Затем браузер должен выяснить, каковы фактические размеры, когда он загружает изображение.

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

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

Если это не так для конкретного изображения, вы можете исправить это в редакторе Гутенберга.

Работа с рекламой, встраиванием и подобным контентом

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

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

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

Для других типов контента, которые вы добавляете вручную, обязательно добавляйте width и height вручную. Если вы не знаете точную высоту, которую займет объявление или другой элемент, по крайней мере, добавьте к нему свойство min-height . Это по-прежнему позволяет использовать более крупные элементы, но оставляет некоторое пространство и может устранить или, по крайней мере, уменьшить CLS на странице.

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

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

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

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

• Заранее зарезервируйте место . Как и в предыдущем случае, если у вас есть контейнер фиксированного размера, в который вы можете загружать контент, он сохраняет макет стабильным, даже если он появится позже. Фиксированный контейнер также может быть каруселью или чем-то подобным.
• Свяжите это с взаимодействием с пользователем — если контент загружается динамически после действия пользователя, он не влечет за собой штрафа для CLS, даже если макет смещается. Однако имейте в виду отсечку 500 мс.
• Загружать контент за пределы экрана — если вы загружаете контент за пределами области просмотра, а затем предоставляете пользователю уведомление о том, что он доступен, и возможность прокрутки к нему, CLS также отсутствует. Платформы социальных сетей любят делать это для новых обновлений.

Улучшение обработки веб-шрифтов

Веб-шрифты также могут привести к смещению макета. Две распространенные формы заключаются в том, что вы либо сначала видите нестилизованный текст до того, как появится веб-шрифт (Flash of Unstyled Text или FOUT), либо сначала не видите текста вообще, а затем он появляется вместе с веб-шрифтом (Flash of Invisible Text или FOUT). ФОИТ).

И то, и другое может привести к изменению макета, и вот что вы можете с этим сделать:

• Используйте правильный формат шрифта . Если вы загружаете пользовательские шрифты на свой веб-сайт WordPress, обязательно используйте формат WOFF2 или WOFF. Они имеют наименьшую площадь, загружаются быстрее и помогают избежать описанных выше проблем.
• Используйте правильный резервный шрифт . Если вы используете резервный шрифт, который сильно отличается от вашего фактического шрифта, момент переключения, скорее всего, приведет к смещению макета. Вы можете избежать этого, используя фоновый шрифт, близкий к конечному продукту. Сопоставитель стиля шрифта может помочь вам найти его.
• Предварительная загрузка шрифтов — размещайте ресурсы веб-шрифтов в начале документа и добавляйте к ним rel=preload . Таким образом, браузеры будут отдавать им приоритет.

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

Не позволяйте кумулятивному смещению макета испортить ваш сайт WordPress

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

Как и другие показатели в Core Web Vitals, он важен не только для пользователей, но и для рейтинга в поиске, а значит, важен для успеха вашего веб-сайта.

К настоящему моменту вы знаете, что это такое, как оно рассчитывается, чем оно вызвано, как его тестировать и как с этим бороться. Пусть твой макет всегда будет твердым, мой друг.

Есть ли у вас дополнительные советы о том, как предотвратить кумулятивное смещение макета в WordPress? Дайте нам знать в комментариях ниже!