Що таке cumulative layout shift (CLS)?

Cumulative Layout Shift (CLS) - це метрика, яка вимірює, наскільки сильно елементи на сторінці неочікувано зсуваються під час завантаження.

---

#Що спричиняє зсуви

• зображення без вказаних розмірів
• динамічний контент, який вставляється пізніше (наприклад, банер або кнопка)
• шрифти, які підвантажуються і змінюють ширину тексту
• CSS-анімації, що змінюють layout

---

#Приклад

Користувач хоче натиснути «Оформити замовлення», але в цей момент завантажується банер зверху, і кнопка зсувається: замість цього натискається «Видалити все». Це і є поганий CLS.

---

#Як рахується

CLS = сума всіх неочікуваних зсувів верстки (layout) за час життя сторінки (поки контент у viewport не стабілізувався).

---

#Норми (за Google)

• < 0.1: добре
• 0.1-0.25: середньо

0.25: погано

---

#Висновок

CLS показує, наскільки «сіпається» інтерфейс під час завантаження. Низький CLS означає, що сайт стабільний і передбачуваний, нічого не стрибає і не збиває дії користувача.