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

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

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

574
Время чтения: 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 минут

    Другие термины
    ТВИЦ

    Термин ТВИЦ (или TWiC) в контексте SEO (поисковая оптимизация) — это аббревиатура, обозначающая «Тема, Вопрос, Информация, Контент». Этот метод используется для создания структурированного подхода к контенту с целью повышения его релевантности для пользователей и поисковых систем. Рассмотрим подробнее, как ТВИЦ влияет на SEO-стратегии.

    810
    Время чтения 1 минута
    Горячие лиды

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

    656
    Время чтения 1 минута
    Лид

    Потенциальный клиент, который проявил интерес к продукту или услуге компании, оставив свои контактные данные или выполнив определенное действие (например, подписавшись на рассылку).

    947
    Время чтения 1 минута
    Hreflang

    hreflang — это атрибут/метка, указывающий поисковым системам языковую и региональную версию страницы. Он помогает:

    1. Корректно показывать пользователям страницу на их языке или для их региона.
    2. Избежать дублирования контента, когда одна и та же страница доступна на разных языках/для разных стран.
    779
    Время чтения 2 минуты
    Битая ссылка

    Битая ссылка (также известная как мертвая ссылка, неработающая ссылка, broken link, dead link) — это гиперссылка на веб-странице, которая больше не ведет к целевому ресурсу или отображает ошибку при попытке перехода.

    899
    Время чтения 1 минута
    Микроформаты

    Микроформаты (microformats) — это простой и гибкий способ добавления структурированных семантических данных прямо в HTML-разметку веб-страницы, без необходимости изобретать новые теги или сложные RDF-схемы. Вместо этого используются уже существующие элементы HTML и добавляются «ключевые имена» (имена классов и атрибуты), которые позволяют парсерам (автоматическим средствам) извлекать из страницы чётко определённые сущности: контакты, события, отзывы, рецепты и т. д.

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