Що таке CLS (Cumulative Layout Shift)?

CLS (Cumulative Layout Shift) - це метрика з Core Web Vitals, яка вимірює, наскільки сильно і несподівано зміщуються елементи на сторінці під час її завантаження. Вона показує візуальну стабільність інтерфейсу.

Якщо під час завантаження раптом "стрибають" картинки, тексти, кнопки або банери - це і є поганий CLS. Користувач може:

• промахнутися по кнопці,
• втратити місце, де читав текст,
• випадково клікнути не туди.

---

#Що відображає CLS

CLS не про швидкість. Це метрика про якість відображення і зручність. Вона фіксує несподівані зміщення елементів, що відбуваються без дії користувача.

---

#Норми Google

• Добре: ≤ 0.1
• Задовільно: 0.11-0.25
• Погано: > 0.25

---

#Типові причини поганого CLS

• зображення без заданих ширини/висоти,
• рекламні банери, які підвантажуються пізніше і зсувають контент вниз,
• динамічні елементи (плашки, pop-up'и) без заздалегідь зарезервованого місця,
• шрифти, що змінюють розмір тексту після завантаження.

---

#Навіщо це важливо

CLS впливає на відчуття контролю і комфорту. Навіть швидка сторінка здається "кривою" і дратівливою, якщо інтерфейс скаче. А отже - зростає кількість відмов, знижується залученість і конверсія.

Висновок: CLS - про стабільний, передбачуваний інтерфейс. Чим менше візуальних стрибків, тим кращий користувацький досвід і сигнали для SEO.