Что такое CLS?

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

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

• Внезапно сдвигающаяся страница приводит к промахам по кнопкам, потере места чтения и чувству недоверия.
• CLS — один из трех основных показателей Core Web Vitals.
• Проблему обычно легко исправить: чаще всего достаточно заранее зарезервировать место под элементы.
• Сдвиги, происходящие сразу после действий пользователя (в течение примерно 500 мс), например, когда контент смещается вниз при открытии меню, не учитываются. Показыватель ухудшают только неожиданные сдвиги.

#Где это отображается в SEOAsist

• Карточка Core Web Vitals на странице Overview показывает CLS отдельно для мобильных и десктопных устройств.
• SEO-анализ выводит замечание Layout shift, если мобильный CLS превышает 0.1; в качестве решения предлагается задать размеры изображений и зафиксировать блоки с поздней загрузкой.

Подробнее: Overview dashboard.

#Пример

<!-- Без размеров: сдвигает весь контент ниже себя при загрузке -->
<img src="/img/product.webp" alt="Oak table">

<!-- С размерами: браузер заранее резервирует место -->
<img src="/img/product.webp" alt="Oak table" width="800" height="600">

<!-- Резервирование фиксированной высоты для позднего баннера -->
<div style="min-height:90px"><!-- campaign banner --></div>

#Распространенные ошибки

• Отсутствие атрибутов width/height (или свойства aspect-ratio) у изображений и видео.
• Вставка уведомления о куки или рекламной плашки над контентом после загрузки страницы; вместо этого используйте всплывающее окно снизу страницы (overlay).
• Сильное изменение размера текста при загрузке веб-шрифта; подбирайте резервный (fallback) шрифт со схожими метриками.
• Поиск сдвигов только при первичной загрузке; контент, подгружаемый при прокрутке страницы, также увеличивает CLS.