Сжатие и объединение CSS/JS

Объединение и сжатие статики — одна из самых дешёвых по трудозатратам оптимизаций в 1С-Битрикс. Она уменьшает число HTTP-запросов и вес CSS/JS, а включается штатными галочками в настройках главного модуля — но именно из-за кажущейся простоты её часто включают вслепую и ломают вёрстку или скрипты.

Что именно делает Битрикс

В 1С-Битрикс за работу со статикой отвечает механизм страничного ассетов (класс \Bitrix\Main\Page\Asset). Все подключённые через API стили и скрипты он собирает в единый пул, а затем, если включены соответствующие настройки, объединяет их в общие файлы и минифицирует.

Различают два независимых действия, которые часто путают:

• Объединение (concatenation) — десятки отдельных .css и .js склеиваются в один-два файла. Цель — сократить количество HTTP-запросов.
• Сжатие (минификация) — из кода удаляются комментарии, переносы строк и лишние пробелы. Цель — уменьшить вес файла.

Дополнительно поверх этого работает gzip/Brotli — компрессия на уровне веб-сервера при отдаче. Это уже не задача Битрикса, но именно связка «минификация + gzip» даёт основной выигрыш по весу.

Где включаются настройки

Ключевые галочки лежат в настройках главного модуля: Настройки → Настройки продукта → Настройки модулей → Главный модуль, вкладка с параметрами оптимизации. Отвечают за поведение параметры:

Результат объединения складывается в каталог /bitrix/cache/css/ и /bitrix/cache/js/. Там появляются файлы вида page_...css, к которым обращается страница вместо десятков исходных.

Gzip, Brotli и модуль сжатия

Минификация убирает символы из кода, а компрессия сжимает уже готовый поток при передаче. Их путать нельзя: gzip даёт кратное уменьшение веса и включается на уровне сервера.

Есть два пути. Первый — настроить компрессию в nginx (директивы gzip on, gzip_types, при наличии модуля — brotli on). Это предпочтительный вариант: сжатие идёт мимо PHP и почти бесплатно по нагрузке.

Второй — штатный модуль «Сжатие» (compression) в Битрикс. Он сжимает HTML-ответ средствами PHP, когда веб-сервер этого не делает. На нагруженном каталоге его лучше не использовать для статики: компрессию CSS/JS дешевле повесить на nginx, а модуль оставить максимум для HTML на площадках, где доступа к конфигу сервера нет.

Связка с композитом и кэшем

Объединение статики хорошо работает в паре с композитным сайтом и кэшированием компонентов. Но есть нюанс: имя объединённого файла зависит от набора подключённых на странице ассетов. Если на разных страницах набор скриптов разный, Битрикс создаст разные объединённые файлы — это нормально.

Проблема возникает, когда после правок шаблона старые склейки остаются в кэше. Порядок действий при обновлении:

1. Внесли изменения в CSS/JS шаблона или компонента.
2. Сбросили кэш: Настройки → Настройки продукта → Автокэширование или кнопка сброса на панели.
3. Очистили каталоги /bitrix/cache/css/ и /bitrix/cache/js/, если склейки не пересобрались.
4. Проверили страницу с обходом кэша браузера (Ctrl+F5).

При активном композите не забывайте, что закэшированная HTML-«обёртка» может ссылаться на прежние имена объединённых файлов — сбрасывать нужно оба слоя.

Где ломается вёрстка и скрипты

Большинство инцидентов после включения объединения связано с двумя причинами.

• Порядок и специфичность CSS. При склейке файлы объединяются в порядке подключения. Если вёрстка держалась на «случайном» порядке загрузки или на дублирующихся правилах с одинаковым весом, после объединения стили могут перекрыться иначе.
• Относительные пути внутри CSS. Объединённый файл лежит в /bitrix/cache/css/, а не там, где исходный стиль. Ссылки на шрифты и картинки через url(../images/...) ломаются, если они не переписаны корректно. Битрикс переписывает относительные пути при объединении, но нестандартные конструкции (например, пути в JS или в @import) он может не обработать.

С JS основной риск — ошибки в одном скрипте роняют всю склейку. Отдельный битый файл раньше ломал только себя, а после объединения синтаксическая ошибка или отсутствующая точка с запятой в конце неминифицированного файла способна «положить» весь общий бандл. Поэтому JS-минификацию включают в последнюю очередь и обязательно с проверкой консоли.

Как проверить результат

Включать настройки нужно поэтапно и замерять эффект, а не «щёлкать всё сразу». Практический порядок:

1. Снять базовые метрики во вкладке Network DevTools: число запросов, суммарный вес CSS/JS, время загрузки.
2. Включить объединение CSS и JS, сбросить кэш, проверить вёрстку на ключевых типах страниц: главная, каталог, карточка, корзина, оформление заказа.
3. Включить сжатие CSS, снова проверить.
4. В последнюю очередь включить сжатие JS и внимательно просмотреть Console на ошибки.

Признак корректной работы: в Network вместо длинного списка мелких файлов видно несколько объединённых, в заголовках ответа присутствует Content-Encoding: gzip (или br), а в консоли нет новых ошибок JS. Дополнительно можно свериться с отчётом PageSpeed по пунктам об уменьшении и минификации ресурсов.

Итог

Объединение и сжатие CSS/JS в Битрикс — быстрый способ сократить число запросов и вес страницы штатными средствами, без переписывания шаблона. Ключ к безопасному внедрению — включать настройки поэтапно, разделять минификацию и серверный gzip/Brotli, а после каждого шага проверять вёрстку и консоль на реальных типах страниц каталога и оформления заказа.

Если статику нужно оптимизировать на нагруженном магазине без риска для конверсии, мы в B2Bsite настраиваем связку «объединение + композит + кэш» под конкретный шаблон и следим за Core Web Vitals после запуска. Это часть работ по ускорению сайта на Битрикс, которые можно вести как разовый проект или в рамках поддержки.