CLS (Cumulative Layout Shift)

Что такое метрика CLS (Сдвиг макета)?

Каждый из нас хотя бы раз испытывал эту боль на телефоне: вы заходите на новостной сайт, начинаете читать статью, видите кнопку "Закрыть рекламу", подносите палец к экрану, чтобы нажать на нее... и ровно за миллисекунду до клика сверху подгружается гигантский рекламный баннер. Весь текст резко "уезжает" вниз, и ваш палец нажимает на кнопку "Купить подписку за 500 рублей".

В SEO-сообществе это называется "Фантомные прыжки контента". Алгоритмы Google ненавидят сайты с таким поведением. Метрика CLS (Cumulative Layout Shift) суммирует все эти незапланированные "прыжки и сдвиги" блоков в течение жизни страницы.

Почему CLS критичен для SEO (2026)?

Google официально включил CLS в свой главный отчет Core Web Vitals. Это прямой фактор ранжирования в Mobile-First Indexing.

• Зеленая зона (Идеал): CLS < 0.1 (Блоки стоят намертво, ничего не дергается). Сайт получает буст в поиске.
• Желтая зона: CLS от 0.1 до 0.25 (Требуется оптимизация фронтенд-кода).
• Красная зона: CLS > 0.25 (Сайт бесит людей). Поисковик опустит такой сайт в выдаче.

Главные технические причины и как их лечить

1. Картинки без размеров (Width / Height): Если в HTML <img src="foto.jpg"> не указаны ширина и высота в пикселях, браузер выделяет под нее 0 пикселей. Когда картинка загружается из сети — она "растопыривает" макет и смещает вниз весь текст. Решение: Всегда прописывать width и height прямо в HTML теге.
2. Подгрузка Веб-шрифтов (FOUT/FOIT): Браузер сначала рисует системный шрифт, а потом загружает красивый шрифт (например, Roboto) с сервера. Буквы меняют размер и смещают строки. Решение: использовать предзагрузку шрифтов <link rel="preload">.
3. Вставка рекламных iframe-блоков: Если вы продаете рекламу РСЯ, заранее резервируйте под нее пустой <div> нужной минимальной высоты, чтобы при появлении рекламы контент не прыгал.