CLS

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

Зачем это нужно

• Делать страницу визуально стабильной: чтобы контент не “уезжал” при загрузке.
• Улучшать пользовательский опыт: меньше промахов по кнопкам и ссылкам.
• Повышать доверие: когда страница не прыгает, она выглядит качественнее.
• Улучшать Core Web Vitals: CLS — одна из ключевых метрик стабильности интерфейса.
• Находить технические проблемы в фронтенде: изображения без размеров, поздние вставки блоков, шрифты и т.д.

Пример

Пример кода:

// Находим изображение и заранее задаём размеры, чтобы оно “зарезервировало” место
const img = document.getElementById('heroImg');

// Без размеров картинка может подгрузиться позже и сдвинуть контент
img.width = 1200;
img.height = 600;

// Альтернатива — задать размеры в HTML/CSS, а JS тут не нужен

Скриншот

Подпись к скриншоту: Lighthouse (или DevTools Performance): значение CLS и подсказки, какие элементы вызывают сдвиги

Частые ошибки

• Не задавать размеры изображениям и видео (width/height или через CSS), из-за чего место под них появляется “позже”.
• Вставлять баннеры/уведомления сверху контента после загрузки, сдвигая весь экран вниз.
• Подгружать шрифты так, что текст заметно меняет размер и ширину (FOIT/FOUT) без контроля.
• Использовать анимации, которые меняют размеры элементов (height/width), вместо трансформаций.
• Подгружать блоки “по факту” без заглушек (скелетонов), из-за чего страница постоянно перестраивается.

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

• Core Web Vitals
• LCP
• INP
• Lazy Load
• WebP
• AVIF
• Lighthouse

Наши услуги

• Доработка сайтов — найдём причины “прыжков” верстки и устраним CLS: размеры медиа, шрифты, динамические блоки.
• SEO-продвижение сайтов — улучшим технические показатели и стабильность, что положительно влияет на качество страниц.
• Техническая поддержка сайта — контролируем метрики и не даём производительности деградировать после обновлений.