Оптимізація 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), викликають перерахунок геометрії та reflow — це прямий шлях до 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 — гарантуємо покращення метрик та підвищення конверсії. Замовте консультацію та отримайте попередню оцінку. Отримайте оцінку проєкту за один день — зв'яжіться з нами, і ми проведемо аудит.
