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