Cumulative Layout Shift — метрика Core Web Vitals, измеряющая, сколько видимого контента неожиданно двигается, пока страница загружается и устаканивается — текст, прыгающий вниз, когда изображение или реклама грузится над ним, кнопка, смещающаяся ровно когда пользователь идёт тапнуть её.
Определение
Cumulative Layout Shift — метрика Core Web Vitals, измеряющая, сколько видимого контента неожиданно двигается, пока страница загружается и устаканивается — текст, прыгающий вниз, когда изображение или реклама грузится над ним, кнопка, смещающаяся ровно когда пользователь идёт тапнуть её. Она оценивается по размеру смещённой области и расстоянию, на которое она сдвинулась, суммируется за жизненный цикл страницы (в худшем окне сессии).
Хороший CLS — 0,1 или меньше; выше 0,25 — плохо.
CLS вызывается элементами без зарезервированного места — изображения и iframe без атрибутов ширины и высоты, реклама и встраивания, которые толкают контент при загрузке, веб-шрифты, которые перекомпоновывают текст при подмене, и контент, инъецируемый над существующим контентом после загрузки.
В контексте
Для iGaming-аффилиата проблемы CLS обычно идут от элементов, которые склонен иметь монетизированный контентный сайт: display рекламные слоты, которые толкают контент при заполнении, логотипы операторов и скриншоты без размеров, встроенные виджеты и таблицы сравнения, которые изменяют размер при загрузке, баннеры кук и возрастного гейта, которые появляются и смещают страницу, и веб-шрифты. Страница, которая прыгает при загрузке, раздражает на любом устройстве и особенно на мобильном, и она напрямую вредит сигналу page-experience.
Исправления в основном о резервировании места: задай явные ширину и высоту (или CSS aspect-ratio) на всех изображениях, iframe и медиа; зарезервируй фиксированное место для рекламных слотов, встраиваний и виджетов, чтобы они заполнялись без толкания контента; грузи UI согласия и возрастного гейта способом, который не перекомпоновывает контент (оверлей, а не вставка, или резервируй место); используй font-display и preload ключевых шрифтов, чтобы минимизировать перекомпоновку текста; и никогда не инъецируй контент над существующим контентом после загрузки. CLS следует проверять как полевые данные, поскольку он зависит от реального заполнения рекламой, реальной загрузки шрифтов и реального тайминга взаимодействия.
Для обращённого к аффилиатам контента рамка в том, что CLS измеряет неожиданное движение видимого контента во время загрузки, что хорошая оценка — 0,1 или меньше, что на аффилиатных сайтах он обычно идёт от неразмеренных изображений, рекламных слотов, встраиваний и баннеров и что исправление — резервирование места для каждого элемента, который загружается или меняет размер.
Разобранный пример
Полевые данные аффилиата показывают CLS 0,28 на страницах обзоров, в основном от рекламных слотов и неразмеренных логотипов операторов, толкающих контент, плюс баннер кук, вставляющийся над статьёй. Команда задаёт размеры на всех изображениях, резервирует фиксированную высоту для рекламных слотов и встраиваний и переключает баннер кук на оверлей; CLS падает до 0,05.
Связанные термины
Частые вопросы
Смотрите полный глоссарий iGaming и арбитража — сотни терминов EN/RU с примерами.
← Назад к глоссарию