CLS

Cumulative Layout Shift (CLS) — показатель, влияющий на опыт взаимодействия пользователя с веб-страницей и отражающий ее визуальную стабильность. Он показывает, насколько сильно элементы страницы, такие как картинки, тексты или кнопки, смещаются во время ее загрузки. Другими словами, CLS оценивает, как неожиданное перемещение контента на экране влияет на пользователя.

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

CLS — один из ключевых показателей Google Core Web Vitals (наряду с FID и LCP) и является важной частью оценки производительности веб-ресурсов. Его высокие значения могут негативно повлиять на SEO и ухудшить ранжирование сайта в поисковой выдаче, поэтому его оптимизация важна для улучшения взаимодействия пользователей с ресурсом и повышения его видимости в поисковых системах.

Причины сдвигов на странице

Как оптимизировать CLS

Причины сдвигов на странице

Элементы страницы могут смещаться по следующим причинам:

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

Как оптимизировать CLS

Для оптимизации CLS следуйте этим рекомендациям:

• задавайте размеры для изображений и видео. Используйте атрибуты width и height в HTML-коде или CSS для того, чтобы резервировать пространство для изображений и видео до их полной загрузки. Это позволит браузеру заранее понять, сколько места должно занять медиа;
• используйте резервирование места для рекламных блоков. Для динамических объявлений можно выделять фиксированные размеры или использовать плейсхолдеры, чтобы избежать внезапного появления рекламы и смещения контента;
• предварительно загружайте шрифты. Используйте font-display swap для того, чтобы контент сначала рендерился с системными шрифтами, а затем заменялся на веб-шрифты без существенного сдвига макета;
• минимизируйте использование анимаций. Если анимации все же необходимы, убедитесь, что они не вызывают значительных изменений в структуре страницы. Используйте те из них, которые не влияют на основные элементы контента;
• загружайте контент асинхронно. Если необходимо загружать дополнительный контент динамически, старайтесь, чтобы он не влиял на основные элементы макета или отображался внизу страницы.