Оптимізація завантаження: стиснення 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 в реальному часі.
Як перевірити стиснення вручну?
Використовуйте curl:curl -I -H "Accept-Encoding: gzip, br" https://example.com/bitrix/cache/css/s1/main.css
У відповіді шукайте Content-Encoding: gzip або Content-Encoding: br. Якщо заголовка немає — стиснення не працює.
Кейс з нашої практики
Корпоративний сайт на Бітрікс «Стандарт» — 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.
| Метод | Розмір (вих.) | Розмір (стис.) | Запити |
|---|---|---|---|
| Без стиснення | 1,4 MB | — | 35 |
| Мініфікація | 180 KB | 48 KB (gzip) | 5 |
| Brotli | 180 KB | 40 KB | 5 |
Порівняння алгоритмів:
| Алгоритм | Ступінь стиснення | Навантаження CPU | Підтримка браузерами |
|---|---|---|---|
| gzip (рівень 5) | 7–10 разів | Низька | 99.9% |
| Brotli (рівень 6) | 8–12 разів | Середня | 95% (сучасні) |
Що входить у роботу
- Аудит підключення ресурсів: виявляємо «прямі» вставки CSS/JS, які не обробляються Бітрікс.
- Переведення всіх файлів на API:
AddCSSLink(),AddHeadScript(). - Включення штатної мініфікації та об'єднання в адміністративній панелі.
- Налаштування gzip/Brotli на сервері (nginx/Apache).
- Перевірка від подвійного стиснення та тестування на всіх сторінках.
- Підготовка звіту з результатами до/після.
Процес роботи
- Аналітика — вивчаємо структуру шаблонів, спосіб підключення ресурсів, поточний стек сервера.
- Проектування — обираємо оптимальну схему (мініфікація + gzip або Brotli, статичне стиснення).
- Реалізація — вносимо зміни в конфігурацію nginx, налаштовуємо Бітрікс, виправляємо шаблони при необхідності.
- Тестування — перевіряємо заголовки HTTP, швидкість завантаження (Lighthouse, WebPageTest), відсутність помилок.
- Деплой — застосовуємо на бойовому середовищі, моніторимо протягом тижня.
Налаштування займає від 4 до 8 годин залежно від обсягу legacy-коду. Замовте аудит швидкості — виявимо вузькі місця та налаштуємо стиснення під ключ. Гарантуємо стабільну роботу — всі зміни оборотні. У нас понад 5 років досвіду в оптимізації Бітрікс-проектів.
Корисні посилання: