г. Москва, ул. Дубининская, д. 57, стр. 2, пом. III, офис 208.29
info@maximusmedia.pro
г. Москва, ул. Дубининская, д. 57, стр. 2, пом. III, офис 208.29

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

Cumulative Layout Shift (CLS) — это один из ключевых показателей, оценивающих визуальную стабильность веб-страницы. Он показывает, насколько неожиданно и непредсказуемо элементы на странице «прыгают» во время её загрузки или взаимодействия пользователя с ней.

624
Время чтения: 1 минута
Дата публикации

Cumulative Layout Shift (CLS)

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

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

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

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

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

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

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

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

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

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

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

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

Cumulative Layout Shift

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

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

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

Дмитрий Ларионов
Основатель маркетингового агентства полного цикла Maximus Media

Напишем или позвоним Вам первыми в течение 10 минут

    Другие термины
    HTTP2

    HTTP/2 (или HTTP2) — это вторая основная версия протокола HTTP (Hypertext Transfer Protocol), который используется для обмена данными между веб-браузером (или другим клиентом) и веб-сервером. HTTP/2 был разработан как более современная и эффективная альтернатива устаревшему HTTP/1.1, с целью ускорить загрузку веб-страниц, уменьшить задержки и повысить производительность.

    1708
    Время чтения 1 минута
    Исходящая ссылка

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

    870
    Время чтения 1 минута
    Title

    Title в SEO — это заголовок страницы, который отображается в результатах поиска и служит одним из важнейших факторов для продвижения сайта. Он также виден в верхней части вкладки браузера и может использоваться в социальных сетях при публикации ссылок. Title помогает как пользователям, так и поисковым системам понять, о чём страница.

    524
    Время чтения 1 минута
    CDN

    CDN (Content Delivery Network) — это распределённая географически сеть серверов и программных средств, задача которой — максимально быстро и надёжно доставлять пользователям статический и динамический контент (веб-страницы, медиафайлы, скрипты, стили и пр.) из ближайшего к ним узла сети.

    609
    Время чтения 1 минута
    Мультиразмещение (для авито)

    Мультиразмещение — это размещение одного и того же товара или услуги сразу в нескольких регионах и/или категориях на платформе Авито (и других классифайдах). Это инструмент массовой подачи объявлений, при котором объявления могут быть идентичными или адаптированными под конкретную аудиторию и географию.

    1275
    Время чтения 1 минута
    РСЯ

    РСЯ (Рекламная Сеть Яндекса) — это сервис контекстной рекламы, который предоставляет рекламодателям возможность размещать свои объявления на площадках, входящих в сеть Яндекса. Это включает в себя не только поисковые запросы пользователей, но и различные партнерские сайты и приложения, что позволяет достичь широкой аудитории. РСЯ позволяет эффективно рекламировать товары и услуги, охватывая потенциальных клиентов в момент их интереса.

    874
    Время чтения 1 минута
    ×
    Екатерина Ефремова
    Екатерина Ефремова Здравствуйте! Готова помочь вам. Напишите мне, если у вас появятся вопросы.
    +7 (123) 456-78-90 info@maximusmedia.pro Отдел работы с клиентами
    ул. Дубининская, д. 57, стр. 2, пом. III, офис 208.29, Москва, Московская область, 115054, Россия