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

Как устранить CLS на 1С-Битрикс?

Наша команда уже 5 лет помогает сайтам на 1С-Битрикс проходить Core Web Vitals. Один из ключевых показателей — CLS (Cumulative Layout Shift), который отвечает за визуальную стабильность. Если страница дёргается при загрузке — пользователь не может комфортно читать или кликать, а Google снижает позиции. Мы на практике устранили CLS с 0.6 до 0.05 на проектах с каталогом 50 000 товаров. Давайте разберём, как это сделать системно.

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

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

Почему CLS — проблема именно для 1С-Битрикс?

В типовых решениях Битрикс изображения часто выгружаются без атрибутов размера, динамические блоки (корзина, счётчики, избранное) подгружаются асинхронно, а веб-шрифты настраиваются без font-display. Всё это приводит к высокому CLS. Дополнительно — рекламные виджеты и чат-боты, которые вставляются через JS и раздвигают контент.

Исправление этих проблем вручную в каждом шаблоне — трудоёмкая задача. Мы автоматизируем проверку и вносим изменения во все компоненты разом.

Как измерить CLS на сайте Битрикс?

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

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

Что вызывает CLS в типовых решениях Битрикс?

Рассмотрим основные источники:

• Изображения без width и height — самая частая причина. Когда браузер парсит <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 необязательны. Фиксированные размеры изображений в 10 раз эффективнее снижают CLS, чем любые CSS-трюки.

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

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

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

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

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

• Шрифты и FOIT/FOUT — без настройки font-display веб-шрифты вызывают два эффекта: FOIT (текст скрыт до загрузки шрифта) или FOUT (текст сначала системным шрифтом, потом перерисовывается кастомным). FOUT вызывает CLS, если системный и кастомный шрифты имеют разные метрики.

@font-face {
    font-family: 'SiteFont';
    src: url('/bitrix/fonts/sitefont.woff2') format('woff2');
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

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

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

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

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

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

Что входит в работу

• Аудит текущего CLS через PageSpeed Insights и CrUX
• Исправление изображений во всех шаблонах компонентов (добавление width/height)
• Резервирование места под динамические блоки (корзина, счётчики)
• Настройка font-display и подбор шрифтов-фоллбеков
• Фиксация рекламных блоков с min-height
• Перевод анимаций на transform
• Документация по внесённым изменениям
• Финальный замер CLS и подготовка отчёта

Сроки: от 3 до 10 дней в зависимости от объёма шаблонов. Оценим ваш проект бесплатно — свяжитесь с нами.

Наши компетенции

5 лет на рынке, 80+ выполненных проектов по оптимизации Core Web Vitals, сертифицированные специалисты 1С-Битрикс. Гарантируем снижение CLS до 0.1 и ниже.