Оптимизация CLS (Cumulative Layout Shift)
Представьте: пользователь наводит курсор на кнопку «Купить», а в этот момент подгружается рекламный баннер — кнопка уезжает вниз, клик идёт впустую. Это и есть Cumulative Layout Shift (CLS). По данным Google, сайты с CLS выше 0.25 теряют до 15% конверсии. Для интернет-магазина с месячным оборотом $90k–130k это прямой убыток 1.5 млн. Наша команда — инженеры с 10+ летним опытом, выполнившие более 200 проектов по оптимизации Core Web Vitals. Мы оцениваем проект за один день и предоставляем гарантию результата — CLS ≤ 0.1.
Почему CLS важен для бизнеса?
Согласно исследованиям Google, сайты с высоким CLS теряют до 15% конверсии. Среднее значение CLS по данным CrUX для топ-1000 сайтов — 0.15, а клиенты с CLS > 0.25 имеют показатель отказов на 32% выше. Пользователи раздражаются, когда контент прыгает, особенно на мобильных устройствах с медленным соединением. Для e-commerce, новостных порталов и SPA это критично: каждый миллиметр смещения — потерянный клиент. Инвестиция в оптимизацию CLS окупается за 2-3 месяца за счёт роста конверсии и снижения отказов.
Как мы оптимизируем CLS?
Процесс состоит из четырёх этапов: аудит → исправление типовых проблем → тестирование → отчёт. На аудите мы используем Chrome DevTools, Lighthouse и PerformanceObserver для сбора точных метрик, затем ранжируем проблемы по влиянию на CLS. Первыми исправляем изображения — это 80% смещений, затем шрифты и динамический контент. Ниже — полный чек-лист.
| Проблема | Решение | Влияние на CLS |
|---|---|---|
| Изображения без размеров | width/height + aspect-ratio | 80% случаев |
| Шрифты с font-display: swap | font-display: optional + size-adjust | 10-20% |
| Динамическая реклама/виджеты | min-height + contain: layout | 5-15% |
| Анимации с layout-свойствами | transform/opacity | 0% после замены |
Изображения — самая частая причина
<!-- Плохо: браузер не знает размер до загрузки -->
<img src="product.webp" alt="...">
<!-- Хорошо: атрибуты width и height -->
<img src="product.webp" width="800" height="600" alt="...">CSS для адаптивности с сохранением соотношения:
img { max-width: 100%; height: auto; } .product-image { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; } Шрифты и FOUT
Font Swap вызывает смещение, когда основной шрифт загружается и меняет fallback. Используйте font-display: optional или подберите size-adjust:
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: optional;
}
@font-face {
font-family: 'InterFallback';
src: local('Arial');
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
body {
font-family: 'Inter', 'InterFallback', sans-serif;
}Инструмент fontaine или next/font автоматически подбирает size-adjust. Сравнение значений font-display:
| Значение | Поведение | Влияние на CLS |
|---|---|---|
| swap | мгновенный fallback, замена шрифта | высокое (FOUT) |
| optional | короткий блок, fallback, замена не гарантирована | низкое |
| block | скрытый текст до загрузки шрифта | нулевое |
| fallback | короткий блок, fallback, быстрая замена | среднее |
Динамический контент и скелетоны
Для рекламных блоков и виджетов фиксируйте минимальную высоту и используйте contain: layout. Не оставляйте место пустым — показывайте skeleton placeholder с правильными размерами:
.skeleton-image, .skeleton-title, .skeleton-price {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px;
}
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}Почему transform/opacity лучше layout-анимаций?
Анимации, изменяющие layout-свойства (width, height, top, left, margin, padding), вызывают пересчёт геометрии и рефлоу — это прямой путь к CLS. Свойства transform и opacity не затрагивают layout, поэтому абсолютно безопасны. Замена layout-анимаций на transform/opacity снижает CLS в 5–10 раз. Пример:
/* Хорошо — только transform */
.modal {
animation: slideDown 300ms;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}Для изолированных компонентов используйте contain: layout — это предотвращает влияние внутренних изменений на внешний layout.
Как диагностировать CLS?
Для обнаружения проблем используйте Chrome DevTools: вкладка Performance → запись → найдите отметки «Layout Shift» (фиолетовые). Или установите PerformanceObserver в коде: new PerformanceObserver(...). Это позволит отслеживать смещения в реальном времени.
Что входит в работу
- Анализ всех страниц (Core Web Vitals, N+1 query, bundle splitting).
- Исправление изображений (width, height, aspect-ratio, lazy loading с размером).
- Замена font-display: swap на optional + size-adjust.
- Фиксация размеров рекламных блоков и динамических виджетов.
- Замена layout-анимаций на transform/opacity.
- Добавление скелетонов с shimmer-эффектом.
- Отчёт с метриками до/после (Lighthouse, CrUX).
Типичные ошибки при оптимизации
Часто разработчики задают width/height в процентах без aspect-ratio — браузер не может вычислить высоту до загрузки. Правильное решение: комбинировать width: 100% с aspect-ratio или задавать фиксированную высоту через padding-bottom. Ещё одна частая ошибка — использование font-display: swap без size-adjust: fallback-шрифт может быть уже или шире основного, вызывая смещение.
Источник: web.dev/cls — официальная документация Google
Срок оптимизации: 1–3 дня для базового набора, до 5 дней при комплексном аудите. Мы сертифицированы Google по Core Web Vitals — гарантируем улучшение метрик и повышение конверсии. Закажите консультацию и получите предварительную оценку. Получите оценку проекта за один день — свяжитесь с нами, и мы проведём аудит.
