Ускоряем загрузку сайта на 1С-Битрикс: настройка сжатия CSS и JS

Оптимизация загрузки: сжатие CSS и JS на 1С-Битрикс

Сайт грузится 5 секунд, а GTmetrix показывает, что CSS и JS занимают 80% объёма. Типичная картина для среднего Битрикс-проекта: исходные файлы весят 500 KB–2 MB, и без сжатия каждый мегабайт передаётся как есть. Настройка HTTP-сжатия (Gzip или Brotli) уменьшает объём передаваемых данных в 3–7 раз для текстовых ресурсов — это один из самых быстрых способов ускорить загрузку без изменения кода. Мы настраиваем такие решения на десятках проектов, от простых корпоративных до крупных каталогов.

Встроенные инструменты сжатия Битрикс

Битрикс включает собственный механизм минификации и объединения CSS/JS, доступный в Настройки → Производительность → Сжатие. Он работает на уровне PHP: собирает подключённые через CMain::AddCSSLink() и CMain::AddHeadScript() файлы, минифицирует их и сохраняет в /bitrix/cache/css/ и /bitrix/cache/js/. Результирующие файлы получают хеш в имени — браузер кеширует их агрессивно.

Важно: минификация Битрикс работает только с файлами, подключёнными через API Битрикс. CSS и JS, подключённые напрямую в шаблоне через <link> и <script>, не обрабатываются. На legacy-проектах нередко половина файлов подключена «мимо» API. Мы переводим такие подключения на штатные методы — это обязательный этап аудита.

Почему минификации недостаточно для реального ускорения?

Минификация уменьшает размер файлов на диске, но при передаче по сети данные всё равно идут «как есть». Без сжатия на уровне HTTP (gzip/Brotli) вы теряете 70–80% потенциального выигрыша. Например, минифицированный файл jQuery UI может весить 150 KB, а с gzip — всего 40 KB. Разница заметна на каждом запросе.

Как настроить gzip на nginx для Битрикса?

Конфигурация в nginx требует всего несколько директив:

gzip on;
gzip_types text/css application/javascript application/json text/javascript;
gzip_min_length 1024;
gzip_comp_level 5;
gzip_vary on;

gzip_comp_level 5 — баланс между степенью сжатия и нагрузкой на CPU. Уровни 6–9 дают минимальный прирост сжатия при значительно большей нагрузке. gzip_vary on добавляет заголовок Vary: Accept-Encoding, необходимый для корректной работы кеширующих прокси и CDN. Brotli сжимает ещё лучше — выигрыш до 20% по сравнению с gzip. Настройка аналогична, но требует модуля ngx_brotli.

Что даёт Brotli по сравнению с gzip?

Brotli эффективнее gzip в 1.2–1.3 раза по степени сжатия. Для современных браузеров он предпочтительнее, но требует модуля nginx. Настройка:

brotli on;
brotli_types text/css application/javascript application/json text/javascript;
brotli_comp_level 6;

Лучше оставить gzip как fallback для старых клиентов. Оба метода можно комбинировать: gzip_static on для предварительно сжатых файлов.

Что проверить при настройке

Частая ошибка: двойное сжатие — gzip включён в nginx, но PHP-FPM или сам Битрикс тоже сжимают ответ. Симптом: браузер выдаёт ошибку декодирования или файл скачивается вместо выполнения. Проверяется через curl -I -H "Accept-Encoding: gzip" https://mysite.ru/bitrix/cache/css/file.css — в заголовках должно быть Content-Encoding: gzip.

Для минифицированных файлов с хешем в имени рекомендуется настроить статическое (pre-compressed) сжатие через gzip_static on — nginx отдаёт заранее сжатый .gz-файл без нагрузки на CPU в реальном времени.

Кейс из нашей практики

Корпоративный сайт на Битрикс «Стандарт» — 12 CSS и 23 JS файла подключены через API. После включения минификации Битрикс и gzip на nginx: суммарный размер CSS+JS снизился с 1,4 MB до 180 KB (минификация) → 48 KB (gzip). Количество HTTP-запросов к CSS сократилось с 12 до 2, к JS — с 23 до 3. Время до DOMContentLoaded снизилось на 0,8 с на мобильных соединениях 3G.

Сравнение алгоритмов:

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

• Аудит подключения ресурсов: выявляем «прямые» вставки CSS/JS, которые не обрабатываются Битрикс.
• Перевод всех файлов на API: AddCSSLink(), AddHeadScript().
• Включение штатной минификации и объединения в административной панели.
• Настройка gzip/Brotli на сервере (nginx/Apache).
• Проверка от двойного сжатия и тестирование на всех страницах.
• Подготовка отчёта с результатами до/после.

Процесс работы

1. Аналитика — изучаем структуру шаблонов, способ подключения ресурсов, текущий стек сервера.
2. Проектирование — выбираем оптимальную схему (минификация + gzip или Brotli, статическое сжатие).
3. Реализация — вносим изменения в конфигурацию nginx, настраиваем Битрикс, правим шаблоны при необходимости.
4. Тестирование — проверяем заголовки HTTP, скорость загрузки (Lighthouse, WebPageTest), отсутствие ошибок.
5. Деплой — применяем на бой, мониторим в течение недели.

Настройка занимает от 4 до 8 часов в зависимости от объёма legacy-кода. Закажите аудит скорости — выявим узкие места и настроим сжатие под ключ. Гарантируем стабильную работу — все изменения обратимы. У нас более 5 лет опыта в оптимизации Битрикс-проектов.

Полезные ссылки:

• gzip на Wikipedia
• Brotli на Wikipedia

80% сайтов на Битрикс тормозят из-за одной таблицы

b_iblock_element_property — EAV-структура, где каждая строка хранит одно значение одного свойства одного элемента. Каталог в 50 000 товаров с 30 свойствами даёт 1,5 млн строк. Умный фильтр делает JOIN этой таблицы с b_iblock_element по пяти свойствам — и MySQL уходит в full table scan на 3–5 секунд.

Наш опыт показывает: без вмешательства в эту таблицу ускорение сайта невозможно. Мы берёмся за проекты, где скорость загрузки упала до 8–10 секунд, и возвращаем TTFB < 200 мс за 1–2 недели. Оптимизация скорости сайта начинается с аудита slow-запросов и заканчивается комплексной перестройкой инфраструктуры под ключ.

[Свяжитесь с нами для аудита] — мы определим узкие места за 2 часа и предложим конкретный план.

Серверная оптимизация

Nginx. Не просто «включили gzip». Конкретно:

• gzip_comp_level 4-5 — выше бессмысленно, CPU сжирает больше, чем экономит трафик;
• brotli on с brotli_static on — для предварительно сжатых файлов;
• HTTP/2 с http2_max_concurrent_streams 128;
• fastcgi_cache для PHP-ответов — кэширование на уровне Nginx, минуя PHP-FPM;
• worker_processes auto, worker_connections под количество одновременных соединений.

PHP-FPM. Выбор между pm = dynamic и pm = static — не академический:

• Static: фиксированное количество воркеров, без overhead на форк — для выделенных серверов с предсказуемой нагрузкой.
• Dynamic: экономит RAM при низком трафике. pm.max_children считаем как (доступная RAM - RAM для MySQL/Redis) / средний расход на процесс.
• OPcache: opcache.memory_consumption=256, opcache.max_accelerated_files=20000, opcache.validate_timestamps=0 на продакшене (перезагрузка PHP-FPM при деплое).

MySQL/MariaDB. Главное узкое место почти всегда:

• slow_query_log с порогом 0.5 сек — каждый запрос разбираем через EXPLAIN.
• innodb_buffer_pool_size = 70–80% доступной RAM на выделенном сервере.
• Составные индексы для фасетного поиска: (IBLOCK_ID, IBLOCK_PROPERTY_ID, VALUE) на b_iblock_element_property.
• OPTIMIZE TABLE b_iblock_element_property после массовых операций.

Как настроить кэширование на три уровня?

Управляемый кэш компонентов. TTL настраиваем для каждого компонента отдельно. Каталог — 3600 сек, новостная лента — 300 сек, баннеры — 86400. Одинаковый TTL везде — гарантия либо устаревших данных, либо бесполезного кэша.

Композитный кэш. Технология bitrix:composite — Nginx отдаёт готовый HTML из файла, PHP не запускается. Динамические зоны (корзина, авторизация) подгружаются AJAX-запросом через CBitrixComponent::setFrameMode(true). TTFB < 50 мс. Но: не все компоненты совместимы, $APPLICATION->ShowPanel() и прямой вывод через echo ломают композит. Проверяем каждую страницу через панель «Производительность → Композитный сайт».

Сравнение: композитный кэш быстрее управляемого в 10–20 раз по времени первого байта. Официальная документация Битрикс по композитному кэшу: Bitrix Composite.

Memcached / Redis. Переносим кэш из файловой системы:

• Сессии → Redis (session.save_handler = redis) — быстрее файлов в 10–50×, плюс работа в кластере.
• Кэш компонентов → Memcached через .settings.php: 'cache' => ['type' => 'memcache'].
• Кэш ORM-запросов — чтобы одинаковые GetList() не нагружали MySQL на каждом хите.

Почему стандартных настроек MySQL недостаточно?

Индексы. Составные для фасетного поиска. Покрывающие для частых выборок — MySQL отвечает из индекса, не обращаясь к данным. Частичные индексы (MariaDB) для фильтрации по ACTIVE = 'Y'. Аудит неиспользуемых индексов — каждый замедляет INSERT/UPDATE.

Партиционирование. Для таблиц с миллионами строк: b_stat_session, b_search_content_stem, Highload-блоки с историей. Партиция по дате — запрос «заказы за месяц» не сканирует данные за три года.

Реальный кейс: каталог 200 000 товаров, 50 свойств. Фильтр по 10 свойствам занимал 12 секунд. После создания составных индексов по (IBLOCK_ID, IBLOCK_PROPERTY_ID, VALUE) и партиционирования b_iblock_element_property по IBLOCK_ID время выполнения упало до 0,3 секунды. Нагрузка на MySQL снизилась в 40 раз.

Очистка. В любой базе за год-два накапливается: устаревший поисковый индекс, просроченные записи в b_cache_tag, история b_iblock_element_prop_s*, логи в b_event_log на гигабайты. Настраиваем регулярную очистку через агенты.

Партиционирование также решает проблему с параллельными запросами при обмене с 1С через CommerceML. Подробнее: MySQL Partitioning Documentation.

Фронтенд

Изображения — 60–80% веса страницы:

• WebP через CFile::ResizeImageGet() с BX_RESIZE_IMAGE_PROPORTIONAL + конвертация;
• srcset + sizes — не грузим 3000px картинку в блок 400px;
• loading="lazy" для всего ниже первого экрана;
• AVIF — ещё 20–30% экономии vs WebP (подробнее: WebP).

CSS/JS:

• Встроенный модуль Битрикс: объединение и минификация через «Настройки → Оптимизация CSS/JS»;
• PurgeCSS / UnCSS — на типичном Битрикс-проекте 60–70% CSS не используются;
• defer / async для некритичного JS;
• Critical CSS инлайном в <head> для мгновенного FCP.

Шрифты:

• <link rel="preload" as="font" crossorigin> для основного шрифта;
• font-display: swap — текст виден сразу;
• Subsetting через pyftsubset — вырезаем кириллицу + латиницу, файл уменьшается в 3–5 раз.

CDN

Cloudflare, BunnyCDN, AWS CloudFront или российские (Selectel CDN, VK Cloud CDN).

• Статика (CSS, JS, изображения, шрифты) — через CDN.
• Правила кэширования: Cache-Control: public, max-age=31536000, immutable для файлов с хешем.
• Оптимизация изображений на лету (imgproxy, Cloudflare Polish) без нагрузки на origin.

Зачем нужно нагрузочное тестирование?

Не синтетические бенчмарки, а реальные сценарии:

• k6 / wrk — имитация маршрутов: каталог → фильтрация → карточка → корзина → оформление.
• Метрики: RPS, время ответа (p50, p95, p99), процент ошибок.
• Xdebug (callgrind) или Blackfire — профилирование PHP, поиск узких мест.

Результат тестирования — объективная картина, где реально тормозит, а не где «кажется». После оптимизации прогоняем повторно — фиксируем улучшения.

Результаты

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

1. Аудит текущей производительности — анализ slow-запросов, профилирование PHP, проверка кэширования, CDN, серверных настроек.
2. Настройка серверной части — Nginx, PHP-FPM, MySQL, Redis/Memcached, OPcache.
3. Оптимизация кэширования — управляемый кэш, композитный сайт, настройка TTL, тегированное кэширование.
4. Работа с БД — создание индексов, партиционирование, очистка, реорганизация EAV-таблиц.
5. Фронтенд — изображения (WebP/AVIF), CSS/JS (минификация, deferred), шрифты (preload, subsetting).
6. CDN — подключение, настройка правил кэширования.
7. Нагрузочное тестирование — сценарии реальных пользователей, отчёт по метрикам.
8. Документация — описание всех изменений, рекомендации по дальнейшему обслуживанию.
9. Гарантия — поддержка в течение 1 месяца после сдачи.

Мониторинг

Без мониторинга через полгода всё деградирует. Новый модуль, нерасчищенные логи, изменение в шаблоне — и скорость вернулась к исходной.

• web-vitals API — Real User Monitoring от реальных посетителей.
• Synthetic monitoring — Pingdom, UptimeRobot, регулярные проверки из разных локаций.
• Алерты — TTFB > 500 мс или LCP > 3 сек → уведомление.

Сроки и стоимость

Стоимость рассчитывается индивидуально после аудита. [Получите консультацию по вашему проекту] — оценим текущее состояние и предложим план ускорения с конкретными сроками и бюджетом. Мы — команда с 10+ годами опыта в Битрикс, выполнили более 200 проектов по оптимизации скорости сайта.