CLS

CLS (Cumulative Layout Shift, сумарний зсув макета) — це метрика Core Web Vitals, яка вимірює, наскільки сильно елементи сторінки несподівано стрибають під час завантаження. Чим більше контент «плигає» під пальцем чи курсором, тим вищий CLS — і тим гіршою вважається візуальна стабільність сторінки.

Простими словами: ти цілишся пальцем у кнопку, а тут згори підвантажилася картинка — і кнопка поїхала вниз. Палець б’є не туди. Оцей неприємний ривок CLS і рахує.

Що таке CLS і навіщо він потрібен

CLS — одна з трьох ключових метрик Core Web Vitals поряд з LCP і INP. Вона відповідає за візуальну стабільність: наскільки передбачувано поводиться сторінка, поки вантажиться. Google офіційно враховує Core Web Vitals у сигналах Page Experience, тож високий Cumulative Layout Shift б’є і по зручності, і побічно по ранжуванні.

Показник рахується як добуток частки екрана, що зсунулася, на відстань зсуву — і підсумовується за весь час завантаження. Звідси й «cumulative»: враховуються всі неочікувані ривки, а не один.

Яке значення вважається хорошим

Орієнтир простий: норма — CLS ≤ 0.1. Усе, що вище 0.25, Google трактує як поганий результат.

Через що зростає CLS і як покращити

• Зображення без розмірів. Задавайте width і height (або aspect-ratio), щоб браузер заздалегідь резервував місце.
• Реклама й вбудовані блоки. Резервуйте контейнери фіксованої висоти під банери й віджети.
• Шрифти. Мерехтіння тексту (FOUT/FOIT) зсуває макет — використовуйте font-display і прелоад.
• Динамічні вставки. Не додавайте контент над уже видимим, окрім як у відповідь на дію користувача.

Приклад

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

Часто плутають з…

• FCP / LCP — про швидкість появи контенту; CLS — про його стабільність після появи.
• PageSpeed-бал — це загальна оцінка; CLS — лише одна метрика всередині неї.

Питання та відповіді

Яка норма CLS?

Хороший результат — CLS ≤ 0.1. Діапазон 0.1–0.25 потребує покращення, понад 0.25 — погано. Ці межі задає Google для Core Web Vitals.

Чи впливає CLS на позиції в Google?

Так, побічно. Cumulative Layout Shift — частина Core Web Vitals, які входять у сигнали Page Experience. Це не головний фактор, але за інших рівних умов може дати перевагу.

Чим виміряти CLS?

PageSpeed Insights, Lighthouse, розділ Core Web Vitals у Google Search Console та вкладка Performance у Chrome DevTools.

Сторінки «стрибають» і завалюють Core Web Vitals? Продіагностуємо й виправимо — почніть з SEO-аудиту.

Схожі терміни: FCP, PageSpeed, Адаптивний дизайн, Юзабіліті.