Оптимизация CLS (Cumulative Layout Shift)
Представьте: пользователь наводит курсор на кнопку «Купить», а в этот момент подгружается рекламный баннер — кнопка уезжает вниз, клик идёт впустую. Это и есть Cumulative Layout Shift (CLS). По данным Google, сайты с CLS выше 0.25 теряют до 15% конверсии. Для интернет-магазина с месячным оборотом 10 млн рублей это прямой убыток 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 — гарантируем улучшение метрик и повышение конверсии. Закажите консультацию и получите предварительную оценку бесплатно. Получите оценку проекта за один день — свяжитесь с нами, и мы проведём аудит.