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

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

#Як це виглядає:

• Читаєш текст, і раптом усе зсунулося вниз, бо підвантажилася реклама.
• Клікаєш по кнопці, а в цей момент вона «втекла», і ти натиснув не туди. Це і є layout shift - стрибки інтерфейсу.

#Що враховується:

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

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

CLS - це сума всіх таких зсувів за час життя сторінки.

• Чим більше і частіше зсуви - тим вищий бал.

#Норматив:

• Добре: менше 0.1
• Прийнятно: 0.1-0.25
• Погано: більше 0.25

#Причини високого CLS:

• Зображення без указаних розмірів
• Шрифти, що підвантажуються асинхронно
• Блоки, які з'являються пізно (банери, iframes)
• Анімації, які зсувають layout

---

Висновок: CLS - це про візуальну стабільність. Хороший сайт не смикається. Усе стоїть на місці, як цього й очікує користувач.