Включаем объединение файлов CSS и JS в настройках Главного модуля
Хочу себе такие же кнопкиВы уже заметили, что страница вашего интернет‑магазина открывается дольше, чем должна, а в консоли браузера появляются запросы к множеству файлов .css и .js?
Объединение этих файлов в один запрос сократит количество HTTP‑соединений, уменьшит время загрузки и, как следствие, повысит позицию в поиске и удовлетворённость покупателей. В этом уроке вы узнаете, как включить объединение файлов CSS и JS в настройках Главного модуля Битрикса, какие нюансы учитывать и как проверить, что всё работает правильно.
1. Почему объединение файлов – это не просто «клик по галочке»
| Показатель | До объединения | После объединения |
|---|---|---|
| Количество запросов к серверу | 15‑30 | 2‑4 |
| Размер передаваемых данных | 1 МБ + (много мелких файлов) | 300 КБ ‑ (один сжатый файл) |
| Время до первого отображения (TTFB) | 1,8 с | 0,9 с |
| Показатель Speed Index в Lighthouse | 5 с | 2,5 с |
Объединение (англ. bundling) – это процесс склеивания всех CSS‑файлов в один и всех JS‑файлов в один, после чего каждый из этих «пакетов» проходит минификацию и кэширование. Для небольших сайтов эффект может быть незаметным, но уже при 10 000‑20 000 посетителей в день экономия в несколько сотен миллисекунд становится критически важной.
2. Где находится настройка в админке
- Контент → Настройки → Главный модуль (путь в меню может немного отличаться в зависимости от версии).
- В открывшейся вкладке ищем секцию «Оптимизация».
- Внутри неё находятся переключатели:
- «Объединять CSS‑файлы»
- «Объединять JS‑файлы»
Эти переключатели управляются глобальными параметрами CSS_OPTIMIZE и JS_OPTIMIZE в файле /.settings.php. При включении система автоматически генерирует файлы styles.min.css и scripts.min.js в папке /bitrix/cache/.
3. Пошаговый процесс включения
Шаг 1 – Открываем настройки
Админка → Настройки → Настройки продукта → Главный модуль → Оптимизация
Шаг 2 – Включаем галочки
- Объединять CSS‑файлы → ставим галочку.
- Объединять JS‑файлы → ставим галочку.
Важно: Если ваш шаблон использует сторонние библиотеки (jQuery, Bootstrap) через CDN, их не нужно объединять – они уже кэшируются браузером глоб#### Шаг 3 – Сохраняем и очищаем кэш
Нажимаем «Сохранить», затем «Очистить кэш» (в меню «Настройки → Очистить кэш»). Это заставит Битрикс пересоздать объединённые файлы с учётом текущих изменений.
Шаг 4 – Проверяем файлы на сервере
Перейдите по адресу:
/bitrix/cache/css/merged.css
/bitrix/cache/js/merged.js
Оба файла должны существовать, быть сжатыми (без пробелов, переносов) и иметь размер, соответствующий сумме исходных файлов, но с учётом минификации.
Шаг 5 – Тестируем в браузере
- Откройте страницу в режиме инкогнито.
- Откройте DevTools → Network.
- Обновите страницу (Ctrl + F5).
- Убедитесь, что запросов к
*.cssи*.jsтеперь только два (или один, если вы включили «Объединять всё в один файл»).
Если запросов всё ещё много, проверьте, нет ли в шаблоне вручную вставленных <link>/<script>‑тегов, которые обходят механизм объединения.
4. Как проверить, что объединение действительно ускорило сайт
4.1. Инструменты измерения
| Инструмент | Что измеряет | Как использовать |
|---|---|---|
| Google Lighthouse | Speed Index, First Contentful Paint | Запустите аудит в Chrome DevTools → Lighthouse |
| WebPageTest | Полное время загрузки, количество запросов | Введите URL, выберите «Chrome», включите «Filmstrip» |
| YSlow | Количество запросов, размер страниц | Установите расширение, нажмите «Run audit» |
4.2. Сравнительные цифры
| Показатель | До объединения | После объединения |
|---|---|---|
| First Contentful Paint | 2,3 с | 1,2 с |
| Total Blocking Time | 420 мс | 180 мс |
| Количество запросов | 22 | 4 |
Эти цифры следует фиксировать в таблице, чтобы видеть реальный эффект и аргументировать заказчику или руководителю.
5. Подводные камни и как их избежать
| Проблема | Причина | Решение |
|---|---|---|
| Скрипты перестают работать | В одном файле конфликтуют версии библиотек (например, два разных jQuery) | Выделите конфликтующие скрипты в отдельный блок, отключив их от объединения (в init.php добавить CJSCore::Init(array('jquery')) без объединения) |
| CSS‑потеря стилей | Селекторы с одинаковыми именами, но разными областями видимости | Добавьте префиксы к классам в шаблонах или используйте CSS_PREPROCESSOR (Sass) для генерации уникальных имён |
| Кеширование не обновляется | Браузер держит старый merged.css в кэше |
Добавьте параметр версии к URL: merged.css?ver=12345 (Битрикс делает это автоматически, но при ручных изменениях вызывайте CBitrixComponent::clearComponentCache() ) |
| Большой размер конечного файла | Объединены файлы, которые уже минифицированы и сжаты (gzip) | Отключите объединение для уже оптимизированных пакетов, оставив их отдельными |
6. Расширенные настройки и рекомендации
- Отложенная загрузка (defer/async) для JS – в
init.phpможно добавить атрибуты к скриптам, чтобы они не блокировали рендеринг.CJSCore::Init(array('jquery'), true, array('defer' => 'defer')); - Кеширование на уровне CDN – если у вас подключён CDN (например, VDSina), настройте правила кэш‑контроля для
merged.cssиmerged.js(TTL = 30 дней). - Разделение по типу контента – иногда имеет смысл держать «библиотеки» в отдельном файле, а «тему» в другом, чтобы при изменении темы не пере‑загружать весь набор.
- Автоматическая пере‑генерация – включите «Пересоздавать объединённые файлы при изменении» в настройках, чтобы разработчики не забывали обновлять кэш.
7. Практика для закрепления
- Включите объединение CSS и JS в настройках Главного модуля вашего сайта, очистите кэш и проверьте, что в папке
/bitrix/cache/появились файлыmerged.cssиmerged.js. - Сделайте измерение времени первой отрисовки (First Contentful Paint) до и после включения объединения, используя Lighthouse. Запишите результаты в таблицу.
- Найдите конфликт: добавьте на страницу два разных скрипта jQuery (один из ядра, второй из CDN). После включения объединения проверьте, работает ли ваш кастомный скрипт. Если нет – исправьте конфликт, выне один из скриптов из объединения.
- Настройте CDN (например, через VDSina) так, чтобы
merged.cssиmerged.jsобслуживались с кэш‑TTL = 30 дней. Проверьте заголовкиCache-Controlв DevTools. - Оптимизируйте: включите атрибут
deferдля всех скриптов, кроме тех, что нужны для раннего выполнения (например, аналитика). Сравните количество блокирующих запросов до и после изменения.
Краткое резюме
- Объединение файлов уменьшает количество запросов и ускоряет загрузку.
- Настройка находится в Главном модуле → Оптимизация.
- После включения очистите кэш, проверьте файлы и измерьте показатели.
- Будьте внимательны к конфликтам библиотек и кэшированию.
- Используйте CDN и defer/async для дополнительного ускорения.
Пройдя эти шаги, вы сделаете ваш сайт на Битриксе быстрее, а покупатели получат более приятный пользовательский опыт. 🚀
CamZamZam - онлайн фото с вебкамеры с эффектами
Cartoon Network: игры с персонажами
Чат рулетка в 2026: будущие функции
Эксперт по доменным стратегическим решениям
Хостинг для e-commerce проектов
Как играть в слоты
Как настроить CDN для сайта на хостинге Host.bg
Как настроить SSL-сертификат для сайта на Host.bg
Как оптимизировать производительность сайта с хостингом Host.bg
Как выбрать правильный хостинг для вашего сайта
Какие бывают ЛОР болезни у детей
Кассовые терминалы с оплатой картами
LOL куклы витрина детская
Лучшие видеорегистраторы для водителей
Онлайн QR-код сканер
Онлайн-связь
Оптимизация производительности баз данных на хостинге Host.bg
Основы настройки веб-хостинга: что вам нужно знать
Партнёрская программа без блога: как получать трафик из Telegram
Профессиональные хитрости для пользователей хостинга Host.bg
Регистрация ИП в Москве для иностранных граждан
Сравнение хостинга Host.bg с другими провайдерами
Субтитры — нет, уши — включены: погружение в английский за 5 минут
Сумки с бусинами
Техника для строительства загородных трасс
ТОП-10 VPS для разработчика: рейтинг серверов под рабочие задачи
WordPress блог для бизнеса