Cumulative Layout Shift (CLS): что это

Простыми словами

Когда вы открываете сайт, ожидаете, что кнопки, текст и картинки останутся на своих местах. Если вы начинаете читать статью, и внезапно текст сдвигается из-за подгрузки рекламы или изображения, — это и есть сдвиг макета. CLS измеряет, насколько сильно и насколько часто происходят такие сдвиги.

Как рассчитывается CLS

CLS складывается из всех отдельных сдвигов элементов, произошедших в течение времени загрузки страницы, пока пользователь с ней взаимодействует. Каждый такой сдвиг получает оценку — чем больше и заметнее смещение, тем выше его балл.

CLS = сумма всех «оценок» таких сдвигов. Чем выше итоговое число, тем хуже визуальный опыт.

Почему возникает сдвиг макета

Сдвиги происходят по следующим причинам:

• Изображения загружаются без заранее заданных размеров.
• Реклама или iframe вставки появляются в макете после загрузки других элементов.
• Шрифты подгружаются поздно, из-за чего изменяется высота строк.
• Динамические блоки вставляются или перемещаются без анимации.

Почему CLS важен

• Пользовательское раздражение. Люди случайно нажимают не на ту кнопку — например, на «рекламу» вместо «оформить заказ».
• Негативное влияние на SEO. Поисковые системы учитывают CLS при ранжировании сайта.
• Влияние на конверсии. Сайты с плохим CLS теряют клиентов, потому что интерфейс кажется нестабильным.

Хорошее значение CLS

• До 0.1 — отлично.
• 0.1–0.25 — допустимо, но стоит улучшить.
• Более 0.25 — плохой показатель, требует доработки.

Как избежать плохого CLS

• Задавайте размеры изображений и видео.
• Оставляйте место под рекламу.
• Используйте анимации при вставке элементов.
• Загружайте кастомные шрифты правильно, избегая «прыжков» текста.

Итак, CLS — это мера того, насколько предсказуемо ведёт себя веб-страница. Чем меньше «прыжков», тем выше доверие пользователей и лучше восприятие сайта.