Уявіть: ваш сайт завантажується 5 секунд, але 80% часу йде на передачу JavaScript-бандлів. Ви вже оптимізували зображення, увімкнули кешування, але швидкість завантаження майже не змінилася. Швидше за все, ви упустили стиснення на транспортному рівні. За даними Google, ефективне стиснення може зменшити розмір контенту в 3–10 разів без змін у коді, що особливо важливо для Core Web Vitals. Ми налаштовуємо Gzip та Brotli на сервері. Економія на трафіку може сягати 70% при використанні Brotli — це знижує витрати на хостинг та CDN, наприклад, для сайту з трафіком 10 TB/міс можна заощадити до 5000 грн на місяць.
Brotli дає на 15–25% краще стиснення, ніж Gzip, при порівнянному навантаженні на CPU. Один із наших проєктів — інтернет-магазин з бандлом 1.2 МБ. Після налаштування Brotli з pre-compressed статикою розмір зменшився до 280 КБ, а LCP впав з 4.2 с до 1.8 с — покращення у 2.3 рази. Для статики ми використовуємо pre-compressed файли — .gz та .br створюються при збірці, сервер віддає їх без повторного стиснення. Це економить до 30% процесорного часу на піку, що зменшує навантаження на CPU та витрати на серверні ресурси.
Чому Brotli кращий за Gzip?
Brotli використовує алгоритм LZ77 зі словником для HTML/JS/CSS, що дає щільнішу упаковку. Наприклад, app.js 500 КБ стискається до 130 КБ (Brotli) проти 150 КБ (Gzip) — Brotli стискає в 1.15 рази краще. Різниця особливо помітна в мобільних мережах з обмеженою пропускною здатністю. Крім того, Brotli підтримує рівні стиснення до 11, що дозволяє максимально ущільнити статику при збірці. Однак на льоту високі рівні (9–11) сильно навантажують CPU, тому для динамічного стиснення рекомендується рівень 6. Якщо порівнювати, при рівні 6 Brotli стискає на 20% краще за Gzip при тому ж навантаженні.
| Параметр | Gzip | Brotli |
|---|---|---|
| Алгоритм | Deflate (LZ77+Huffman) | LZ77 + словник |
| Макс. рівень | 9 | 11 |
| Середнє стиснення (HTML) | 4x | 5x |
| Підтримка браузерами | 100% | ~95% |
Мінімізація навантаження на CPU при стисненні
Основний спосіб — використовувати pre-compressed статику. Файли .gz та .br генеруються один раз при збірці проєкту (наприклад, за допомогою vite-plugin-compression), а сервер віддає їх напряму, не витрачаючи процесорний час на стиснення кожного запиту. Для динамічного контенту (HTML, JSON) застосовується on-the-fly стиснення з рівнем 6 — баланс між ступенем стиснення та навантаженням на CPU. У пікові години можна вимкнути стиснення для великих файлів через директиву gzip_min_length 256. Моніторинг CPU дозволяє своєчасно скоригувати рівень стиснення — якщо навантаження вище 80%, розгляньте зниження рівня або збільшення gzip_min_length. Для зменшення навантаження на CPU також варто використовувати кешування та CDN із підтримкою Brotli.
Nginx: Gzip + Brotli
# /etc/nginx/conf.d/compression.conf # Для Brotli потрібен модуль ngx_brotli (встановлюється з репозиторію) gzip on; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_min_length 256; gzip_types application/javascript application/json application/xml application/rss+xml image/svg+xml text/css text/html text/javascript text/plain text/xml font/woff font/woff2; brotli on; brotli_comp_level 6; brotli_types application/javascript application/json text/css text/html text/plain image/svg+xml font/woff2; Перевірка:
curl -H "Accept-Encoding: br" -I https://www.wikipedia.org # Відповідь має містити: Content-Encoding: br curl -H "Accept-Encoding: gzip" -I https://www.wikipedia.org # Відповідь: Content-Encoding: gzip Pre-compressed static assets
Для статичних файлів (JS, CSS, бандли) — генерувати .gz та .br файли при збірці, віддавати напряму. Немає витрат CPU при кожному запиті:
// vite.config.ts import { defineConfig } from 'vite'; import viteCompression from 'vite-plugin-compression'; export default defineConfig({ plugins: [ viteCompression({ algorithm: 'gzip', ext: '.gz' }), viteCompression({ algorithm: 'brotliCompress', ext: '.br' }), ] }); # Nginx: віддавати pre-compressed файли location ~* \.(js|css|woff2)$ { gzip_static on; # шукає .gz версію brotli_static on; # шукає .br версію (модуль ngx_brotli) expires 1y; add_header Cache-Control "public, immutable"; } Як перевірити, що стиснення працює?
Використовуйте curl або вкладку Network в DevTools. У відповіді має бути заголовок Content-Encoding: br або gzip. Також перевірте Vary: Accept-Encoding — він вказує кешувальним серверам, що контент залежить від кодування. Для покрокової діагностики можна використовувати онлайн-сервіси, наприклад, перевірку заголовків на сайті.
Якщо клієнт не підтримує Brotli, Nginx автоматично віддає Gzip або нестиснений контент. Переконайтеся, що директива gzip on увімкнена — це гарантує fallback. Використання CDN з підтримкою Brotli додатково прискорює доставку контенту та знижує навантаження на вихідний сервер.
Типові результати стиснення
| Файл | Оригінал | Gzip | Brotli |
|---|---|---|---|
| app.js | 500 кБ | 150 кБ | 130 кБ |
| app.css | 80 кБ | 18 кБ | 15 кБ |
| HTML сторінка | 50 кБ | 12 кБ | 10 кБ |
Рівні стиснення: рекомендації
Рівні 1–3 — низьке навантаження CPU, слабке стиснення. 4–6 — баланс. 7–9 — високе стиснення, але CPU зростає нелінійно: рівень 9 потребує в 3 рази більше часу, ніж 6. Для pre-compressed файлів використовуйте 11 (тільки Brotli) — компілюється один раз при збірці.
Apache
# .htaccess <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/css application/javascript AddOutputFilterByType DEFLATE application/json image/svg+xml font/woff2 </IfModule> Процес налаштування стиснення
- Аналіз поточної конфігурації сервера (Nginx/Apache) для виявлення нестисненого контенту.
- Вибір рівня стиснення (Gzip 6, Brotli 6 — баланс між CPU та стисненням).
- Налаштування винятків (нестисливі формати: PNG, JPEG, MP4, WebP, AVIF).
- Генерація pre-compressed файлів у збірці (Vite, Webpack) для статичних ресурсів.
- Перевірка заголовків відповідей (Content-Encoding, Vary: Accept-Encoding).
- Моніторинг навантаження на CPU та коригування рівня стиснення при потребі.
Що входить у роботу
- Налаштування Gzip та Brotli на сервері (Nginx/Apache) з урахуванням типів MIME.
- Конфігурація pre-compressed статики (якщо використовується збірник).
- Перевірка заголовків і тестування стиснення через curl або DevTools.
- Документація з внесеними змінами.
- Рекомендації щодо рівнів стиснення під ваш трафік.
Наші інженери мають 5+ років досвіду (з 2018 року) та реалізували 100+ успішних проєктів, знижуючи LCP та TTFB на 40-60%. Хочете так само? Замовте налаштування під ключ: термін виконання 1 день, вартість від 3000 грн. Послуга включає аудит, налаштування Gzip/Brotli, pre-compressed статику та перевірку заголовків. Пишіть для безкоштовної оцінки проєкту — оцінимо ваш сайт та запропонуємо оптимальне рішення.