Оптимизация CLS (Cumulative Layout Shift) для 1С-Битрикс

Оптимизация CLS (Cumulative Layout Shift) для 1С-Битрикс

CLS измеряет визуальную нестабильность страницы: как сильно элементы смещаются во время загрузки. Порог Google — CLS < 0.1. Смещение, которое заставляет пользователя промахнуться мимо кнопки или потерять место чтения, — плохой UX и фактор ранжирования.

На Битрикс-сайтах CLS обычно 0.2–0.6. Виновники предсказуемы и устраняются систематически.

Как считается CLS

CLS = сумма (impact fraction × distance fraction) для каждого смещения. Impact fraction — доля экрана, которую затронуло смещение. Distance fraction — на какую долю экрана переместился элемент. Смещение изображения высотой 30% экрана вниз на 20% экрана даёт 0.06 за один инцидент.

Измерение: Chrome DevTools → Performance → запись + прокрутка страницы. Раздел Layout Shift показывает каждое смещение с указанием элемента.

Изображения без width и height

Самая распространённая причина CLS в Битрикс. Когда браузер парсит <img src="..."> без размеров, он не знает, сколько места занять. Контент ниже изображения рендерится без отступа, затем при загрузке изображения всё смещается вниз.

Стандартные шаблоны компонентов Битрикс часто выводят изображения без атрибутов размера. Исправление в шаблоне компонента:

// Получить размеры изображения при рендеринге
$imgFile = \CFile::GetByID($arItem['PREVIEW_PICTURE'])->Fetch();
$width  = $imgFile['WIDTH']  ?: 300;
$height = $imgFile['HEIGHT'] ?: 300;

echo '<img src="' . \CFile::GetPath($arItem['PREVIEW_PICTURE']) . '"'
   . ' width="' . (int)$width . '"'
   . ' height="' . (int)$height . '"'
   . ' loading="lazy"'
   . ' alt="' . htmlspecialchars($arItem['NAME']) . '">';

CSS aspect-ratio как альтернатива — когда размеры заранее известны и фиксированы:

.product-card__image-wrapper {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.product-card__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Тогда место резервируется через CSS, а конкретные размеры в HTML необязательны.

Динамические блоки: корзина, счётчики, баннеры

Битрикс-сайты часто имеют динамические блоки в шапке: количество товаров в корзине, сумма, количество уведомлений. Эти данные загружаются AJAX после рендеринга. Если под корзиной есть контент — при загрузке данных корзины он смещается.

Резервирование места через CSS:

.header__cart-count {
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

Задайте фиксированные размеры для всех динамических элементов шапки и сайдбара. Пустой элемент занимает место, после загрузки данных — размер не меняется.

Скелетон-загрузка вместо пустого блока: показывает серые плашки нужного размера до загрузки данных. Не устраняет CLS, но улучшает восприятие.

Рекламные и баннерные блоки

Рекламные блоки — классический источник CLS. Блок подгружается через JS, вставляется в DOM и раздвигает контент. Решение — всегда резервировать место под рекламу:

.ad-block {
    min-height: 90px;   /* стандартная высота баннера */
    width: 100%;
}

Если размер баннера непредсказуем — используйте контейнер с фиксированным размером и overflow: hidden.

Шрифты и FOIT/FOUT

Без настройки font-display веб-шрифты вызывают два эффекта: FOIT (Flash of Invisible Text) — текст скрыт до загрузки шрифта, или FOUT (Flash of Unstyled Text) — текст сначала системным шрифтом, потом перерисовывается кастомным.

FOUT вызывает CLS, если системный и кастомный шрифты имеют разные метрики (размер символа, высота строки). Решения:

@font-face {
    font-family: 'SiteFont';
    src: url('/bitrix/fonts/sitefont.woff2') format('woff2');
    font-display: swap;        /* FOUT вместо FOIT */
    font-style: normal;
    font-weight: 400;
}

Для минимизации CLS от FOUT — font-display: optional (шрифт используется только если уже в кеше) или подбор системного шрифта-фоллбека с похожими метриками через CSS size-adjust:

@font-face {
    font-family: 'SiteFontFallback';
    src: local('Arial');
    size-adjust: 105%;
    ascent-override: 90%;
}

Анимации и трансформации

Анимации через top, left, margin изменяют геометрию и вызывают reflow — браузер пересчитывает расположение элементов, что фиксируется как CLS. Используйте только transform и opacity для анимаций:

/* Вызывает CLS — изменяет геометрию */
.banner { transition: top 0.3s; }

/* Не вызывает CLS — только compositing */
.banner { transition: transform 0.3s; }
.banner.hidden { transform: translateY(-100%); }

Виджеты обратного звонка и чат-боты

Виджеты типа JivoSite, CallTouch, Битрикс24-чат подгружают JS асинхронно и вставляют кнопку в DOM. Если кнопка появляется поверх контента — CLS. Варианты:

1. Зарезервировать место под виджет через CSS placeholder
2. Использовать position: fixed с bottom: 20px; right: 20px — fixed-элементы не вызывают CLS
3. Отложить загрузку виджета на idle через requestIdleCallback

Сроки оптимизации CLS

После исправлений — проверьте PageSpeed Insights по реальным данным. CrUX обновляется с задержкой 28 дней — изменения метрики в реальном трафике увидите через месяц.