Cumulative Layout Shift (CLS)

Метрика визуальной стабильности. Измеряет неожиданные сдвиги контента во время загрузки страницы.

Стабильность макета

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

Пороговые значения:

Оценка

Значение

Статус

Хорошо

< 0.1

✓ Good

Требует улучшения

0.1 - 0.25

⚠ Needs Improvement

Плохо

> 0.25

✗ Poor

Причины плохого CLS:

• Изображения без размеров — <img> без width/height
• Динамический контент — баннеры, реклама, вставляемые после загрузки
• Web fonts — FOIT (Flash of Invisible Text) или FOUT (Flash of Unstyled Text)
• Анимации — изменение размеров элементов

Как улучшить CLS:

1. Указывайте размеры изображений — width и height атрибуты
2. Резервируйте место — для динамического контента (skeleton screens)
3. font-display: swap — для веб-шрифтов
4. Избегайте вставки контента — над существующим контентом
5. Используйте transform — вместо изменения width/height/top/left

Примеры кода:

<!-- Плохо: без размеров -->
<img src="hero.jpg" alt="Hero">

<!-- Хорошо: с размерами -->
<img src="hero.jpg" alt="Hero" width="1200" height="600">

<!-- Хорошо: aspect-ratio -->
<img src="hero.jpg" alt="Hero" style="aspect-ratio: 16/9; width: 100%;">