CLS: что это такое и почему важна визуальная стабильность

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

Простыми словами, CLS показывает, насколько страница «прыгает». Хорошая страница должна загружаться предсказуемо: блоки занимают свои места, изображения не выталкивают текст, реклама не сдвигает контент, шрифты не меняют резко размеры строк.

Автор экспертного мнения

Марина Харчистова

SEO-специалист в Digital-агентстве Saygona

Опыт: 5+ лет в SEO и поисковом продвижении

Как считается CLS

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

Упрощённо:

CLS = impact fraction × distance fraction

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

Какие значения CLS считаются хорошими

Что чаще всего ухудшает CLS

• Изображения без заданных размеров. Браузер не знает высоту изображения и перестраивает страницу после загрузки.
• Рекламные блоки без зарезервированного места. Баннер появляется поздно и сдвигает контент.
• Шрифты. После загрузки веб-шрифта текст меняет размер и переносы строк.
• Встраиваемые элементы. Видео, iframe, карты, виджеты и формы появляются с задержкой.
• Динамические блоки сверху страницы. Уведомления, плашки, cookie-баннеры и промо-блоки выталкивают контент.
• Поздняя загрузка CSS. Стили применяются после первичной отрисовки и меняют размеры блоков.
• JavaScript-вставки. Скрипты добавляют элементы в уже отрисованную область.

CLS и SEO

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

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

Как исправить высокий CLS

1. Задавайте размеры изображений. Указывайте width и height или используйте CSS aspect-ratio.
2. Резервируйте место под рекламу. Баннеры не должны внезапно выталкивать контент.
3. Контролируйте шрифты. Используйте font-display и подбирайте fallback-шрифты с близкими метриками.
4. Не вставляйте блоки выше текущего контента. Уведомления и плашки лучше показывать без сдвига основной области.
5. Задавайте размеры iframe и видео. Карты, видео и виджеты должны иметь предсказуемую высоту.
6. Оптимизируйте CSS. Критические стили должны применяться до отрисовки первого экрана.
7. Проверяйте lazy loading. Ленивые изображения не должны менять высоту блоков после загрузки.

CLS и изображения

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

<img src="/images/photo.jpg" width="800" height="500" alt="Описание изображения">

Также можно использовать CSS-свойство aspect-ratio, если размеры задаются через стили. Главное — не допускать ситуации, когда блок сначала имеет нулевую высоту, а затем резко расширяется.

CLS и шрифты

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

Чтобы снизить риск, используют font-display, preload для критичных шрифтов, локальные системные шрифты или подбирают fallback, близкий по метрикам к основному шрифту.

CLS и GEO для ИИ-поиска

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

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

Частые ошибки при оптимизации CLS

• оптимизировать только десктоп и не проверять мобильную версию;
• не задавать размеры изображений;
• вставлять рекламные блоки без резервного места;
• использовать тяжёлые шрифты без контроля загрузки;
• показывать cookie-баннер сверху со сдвигом контента;
• добавлять промо-плашку через JavaScript после загрузки;
• не проверять реальные полевые данные;
• считать CLS проблемой только дизайна, а не технического SEO.

Чек-лист CLS

• Все изображения имеют размеры или aspect-ratio.
• Место под рекламу и виджеты зарезервировано.
• Шрифты не вызывают заметных сдвигов.
• Видео, карты и iframe имеют фиксированную область.
• Плашки и баннеры не выталкивают основной контент.
• Критический CSS загружается вовремя.
• CLS проверен в PageSpeed Insights.
• Полевые данные проверены отдельно для mobile и desktop.
• Основные шаблоны сайта проверены вручную.

Автор экспертного мнения

Владислав Куконин

SEO-специалист, контент-стратег в Digital-агентстве Saygona

Опыт: 13+ лет в SEO и поисковом продвижении

Комментарий эксперта

CLS часто кажется мелочью, пока пользователь не нажимает не на ту кнопку из-за внезапного сдвига блока. Для SEO и UX визуальная стабильность — это базовое качество интерфейса. В аудите я сначала смотрю изображения без размеров, рекламные места, шрифты, cookie-баннеры и динамические блоки первого экрана. Именно они чаще всего дают высокий CLS.

Связанные термины

• Core Web Vitals;
• Cumulative Layout Shift;
• LCP;
• INP;
• FID;
• PageSpeed Insights;
• технический аудит сайта;
• CSS;
• JavaScript;
• lazy loading;
• SEO-аудит;
• GEO;
• ИИ-поиск.