Показатель CLS смещения на веб странице: что это и как устранить

Этой главой, посвященной кумулятивному сдвигу макета (CLS), мы завершаем наш мини-сериал о ключевых показателях веб-страниц для пользователей WordPress. В предыдущих главах, посвященных Largest Contentful Paint (LSP) и First Input Delay (FID), мы уже говорили о том, что именно означают эти термины и как оптимизировать свой сайт под каждый из них. Теперь мы хотим сделать то же самое подробно разобрать показатель CLS.

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

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

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

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

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

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

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

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

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

Что вызывает CLS смещение? Показатель CLS

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

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

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

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

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

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

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

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

Что такое хороший показатель CLS сдвига макета?

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

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

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

Есть несколько способов проверить, является ли Cumulative Layout Shift (показатель CLS) проблемой на вашем сайте WordPress. Они практически такие же, как и для других метрик Core Web Vitals. Первым способом всегда должен быть PageSpeed Insights, который показывает эту метрику на своей странице результатов.

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

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

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

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

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

Как уменьшить кумулятивный сдвиг макета (показатель CLS) на вашем WordPress-сайте

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

Предоставьте размеры медиафайлов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Улучшение работы с веб-шрифтами для CLS

Веб-шрифты также могут вызывать смещение макета. Обычно это происходит в двух случаях: сначала вы видите нестилизованный текст, а затем появляется веб-шрифт (Flash of Unstyled Text или FOUT), либо сначала не видите текста, а затем он появляется вместе с веб-шрифтом (Flash of Invisible Text или FOIT).

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

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

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

Не позволяйте Cumulative Layout Shift отбросить ваш WordPress-сайт

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

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

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

---

Переведено с сайта Torquemag