Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке CLS (Cumulative Layout Shift)?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**CLS (Cumulative Layout Shift)** - це метрика, яка вимірює, **наскільки сильно елементи на сторінці зсуваються під час завантаження**. **Ключове:** норма - менше 0.1; показник вище 0.25 вважається поганим і свідчить про візуальну нестабільність сторінки.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**CLS (Cumulative Layout Shift)** - це метрика, яка вимірює, **наскільки сильно елементи на сторінці зсуваються під час завантаження**. ### Як це виглядає: - Читаєш текст, і раптом усе зсунулося вниз, бо підвантажилася реклама. - Клікаєш по кнопці, а в цей момент вона «втекла», і ти натиснув не туди. Це і є layout shift - стрибки інтерфейсу. ### Що враховується: Кожен **раптовий зсув видимого елемента** - наприклад, коли текст, кнопки чи картинки зміщуються **без взаємодії користувача**. ### Як рахується: CLS - це сума всіх таких зсувів за час життя сторінки. - Чим більше і частіше зсуви - тим вищий бал. ### Норматив: - **Добре:** менше **0.1** - **Прийнятно:** 0.1-0.25 - **Погано:** більше 0.25 ### Причини високого CLS: - Зображення без указаних розмірів - Шрифти, що підвантажуються асинхронно - Блоки, які з'являються пізно (банери, iframes) - Анімації, які зсувають layout --- **Висновок:** CLS - це про **візуальну стабільність**. Хороший сайт не смикається. Усе стоїть на місці, як цього й очікує користувач.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.