Сборка CSS и JS в 1С-Битрикс: ускорение загрузки сайта
Мы часто берём проекты, которые развивались годами, и обнаруживаем хаос из CSS и JS. Типичный случай: на странице каталога 60-120 запросов к стилям и скриптам. Даже с HTTP/2 каждый новый запрос тратит время на DNS, TCP и TLS. На мобильных сетях это убивает производительность. Наш опыт показывает: объединение файлов может сократить количество запросов в 10-20 раз и ускорить загрузку на 40-70%.
Почему объединение CSS и JS ускоряет сайт?
Браузер ограничивает количество одновременных соединений к одному домену (обычно 6). Если файлов много, они загружаются последовательно. Объединение в один файл уменьшает количество запросов, что особенно заметно на мобильных сетях. Также снижается overhead на DNS, TCP и TLS для каждого запроса. Подробнее про HTTP/2.
Встроенный механизм объединения Битрикс
Битрикс предлагает два подхода: через API управления активами и через компонент bitrix:main.include. При включённой минификации (Настройки → Производительность → Сжатие) все зарегистрированные CSS собираются в /bitrix/cache/css/<hash>.css, JS — в /bitrix/cache/js/<hash>.js. Однако есть нюанс: объединяются только файлы, зарегистрированные до ShowHead(). Прямые <link> в шаблонах игнорируются.
Какие проблемы решаем?
Порядок подключения. При объединении каскад CSS часто ломается. Например, сброс стилей должен быть первым, а компонентные стили — позже. Решение — использовать \Bitrix\Main\Page\Asset::addCss() с явным указанием зависимости или разбивать на два бандла: базовый (grid, typography) и динамический (виджеты).
Inline-стили и скрипты. Многие компоненты (например, bitrix:news.list) выдают рендер прямо в HTML. Это не объединяется. Для кастомных решений заменяем echo '<style>' на $this->addExternalCSS() — тогда файл попадает в общий бандл и кэшируется.
Дубли и конфликты версий. На одном проекте мы нашли 12 одинаковых normalize.css и три версии jQuery (1.9, 2.1, 3.6) на одной странице. Аудит через перехват AddCSSLink() и логирование помог унифицировать библиотеки. Tree shaking и code splitting — ваш следующий шаг.
Как мы это делаем: Vite и Webpack
Для современных проектов встроенные средства Битрикс недостаточны. Мы используем Vite или Webpack.
Пример структуры с Vite:
local/templates/mytemplate/ ├── src/ │ ├── css/ │ │ ├── main.scss │ │ └── components/ │ ├── js/ │ │ ├── app.js │ │ └── pages/ ├── dist/ ← сюда собирает Vite │ ├── app.[hash].css │ └── app.[hash].js ├── header.php ← подключает dist/ └── vite.config.js В header.php подключаем бандлы через CMain::AddCSSLink() — так они кэшируются Битрикс. Vite обеспечивает HMR во время разработки, tree shaking для продакшена.
Почему Vite лучше встроенного механизма?
Vite поддерживает SCSS, TypeScript, автоматический code splitting. Встроенное объединение Битрикс этого не умеет. Мы на практике добиваемся уменьшения веса бандла на 30-50% за счёт удаления мёртвого кода. Сравнение:
| Характеристика | Встроенный механизм | Vite/Webpack |
|---|---|---|
| Поддержка SCSS | Нет | Да |
| Code splitting | Нет | Да |
| Tree shaking | Нет | Да |
| HMR | Нет | Да |
| Настройка | Простая | Требует конфига |
Кейс: портал с тремя командами разработчиков
Один из наших клиентов — B2B-портал, 5 лет разработки, три команды сменилось. На странице каталога: 47 CSS-запросов (суммарно 890 KB без сжатия), 68 JS-запросов (суммарно 1,4 MB). Аудит, проведённый нами, показал: 12 CSS дублей, 8 JS-библиотек в нескольких версиях.
Что сделали:
- Аудит всех подключений через перехват
CMain::AddCSSLink()иAddHeadScript()с логированием. - Унификация библиотек: jQuery единая версия, удаление дублей.
- Перенос всех прямых
<link>в API Битрикс. - Настройка сборки через Vite для нового кода, упаковка legacy в единый бандл.
- Code splitting: критический бандл + 4 страничных бандла.
Результат:
- 47 CSS-запросов → 3.
- 68 JS-запросов → 5.
- Суммарный вес CSS+JS (после gzip) снизился с 850 KB до 210 KB за счёт удаления дублей и tree shaking.
- Скорость загрузки страницы упала с 4.2 с до 1.1 с (по Lighthouse).
Процесс работы:
- Аналитика — собираем логи всех подключений, выявляем дубли, конфликты, неиспользуемый код.
- Проектирование — определяем архитектуру бандлов: критический, страничные, отложенные.
- Реализация — переносим подключения на API, настраиваем сборку (Vite/Webpack), пишем конфиги.
- Тестирование — проверяем каждую страницу на корректность отображения и функциональность JS.
- Деплой — заливаем на боевой сервер, проверяем кэширование.
Тегированное кэширование Битрикс сбрасывает кэш при изменении данных. При объединении файлов важно, чтобы кэш CSS/JS инвалидировался корректно. Настраиваем через $arParams["CACHE_TAGS"].
Что входит в работу:
- Полный аудит текущих подключений с отчётом.
- Унификация библиотек и удаление дублей.
- Настройка сборщика (Vite или Webpack) под ваш шаблон.
- Интеграция с тегированным кэшированием Битрикс.
- Документация по процессу сборки и подключению.
- Обучение команды работе с новой архитектурой.
- Пост-релизная поддержка неделю.
Сроки и стоимость
| Тип проекта | Содержание работ | Срок |
|---|---|---|
| Простой сайт (1 шаблон, <30 компонентов) | Перевод подключений на API, включение минификации | 1–2 дня |
| Средний проект (кастомный фронтенд, несколько шаблонов) | Аудит + унификация библиотек + настройка сборки | 3–7 дней |
| Крупный портал (множество команд, legacy код) | Полный аудит, рефакторинг подключений, настройка Webpack/Vite | 7–20 дней |
Стоимость рассчитывается индивидуально после аудита. Закажите консультацию — мы предложим оптимальное решение. Гарантируем результат: ускорение загрузки минимум в 2 раза, подтверждённое тестами. Свяжитесь с нами для оценки вашего проекта.
Нагрузочное тестирование после объединения обязательно — в редких случаях порядок загрузки скриптов важен, и его нарушение приводит к JS-ошибкам на конкретных страницах. Наш опыт позволяет предвидеть такие нюансы и избежать их на этапе проектирования. Получите консультацию и план оптимизации.