Оптимізація сайту за допомогою Gzip та Brotli на Nginx та Apache

Уявіть: ваш сайт завантажується 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 при тому ж навантаженні.

Мінімізація навантаження на 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 додатково прискорює доставку контенту та знижує навантаження на вихідний сервер.

Типові результати стиснення

Рівні стиснення: рекомендації

Рівні 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>

Процес налаштування стиснення

1. Аналіз поточної конфігурації сервера (Nginx/Apache) для виявлення нестисненого контенту.
2. Вибір рівня стиснення (Gzip 6, Brotli 6 — баланс між CPU та стисненням).
3. Налаштування винятків (нестисливі формати: PNG, JPEG, MP4, WebP, AVIF).
4. Генерація pre-compressed файлів у збірці (Vite, Webpack) для статичних ресурсів.
5. Перевірка заголовків відповідей (Content-Encoding, Vary: Accept-Encoding).
6. Моніторинг навантаження на CPU та коригування рівня стиснення при потребі.

Що входить у роботу

• Налаштування Gzip та Brotli на сервері (Nginx/Apache) з урахуванням типів MIME.
• Конфігурація pre-compressed статики (якщо використовується збірник).
• Перевірка заголовків і тестування стиснення через curl або DevTools.
• Документація з внесеними змінами.
• Рекомендації щодо рівнів стиснення під ваш трафік.

Наші інженери мають 5+ років досвіду (з 2018 року) та реалізували 100+ успішних проєктів, знижуючи LCP та TTFB на 40-60%. Хочете так само? Замовте налаштування під ключ: термін виконання 1 день, вартість від 3000 грн. Послуга включає аудит, налаштування Gzip/Brotli, pre-compressed статику та перевірку заголовків. Пишіть для безкоштовної оцінки проєкту — оцінимо ваш сайт та запропонуємо оптимальне рішення.

Ми регулярно стикаємося з ситуацією: «Сайт не відкривається» о 3 годині ночі — і виявляється, що disk full на VPS, тому що логи nginx не ротувалися півроку. Або сервер ліг під навантаженням у день запуску рекламної кампанії, тому що на shared хостингу стояв ліміт у 50 одночасних з'єднань. Налаштування хостингу та деплою — це не про «де дешевше», це про те, що відбувається в момент, коли щось іде не так. Наша команда допомагає уникнути таких інцидентів, проектуючи інфраструктуру з урахуванням реальних патернів навантаження.

Коли обирати Vercel та Netlify?

Vercel створений під Next.js — деплой в один push, preview deployments для кожного PR, автоматичний CDN, Edge Functions, ISR без конфігурації. Для фронтенд-проєктів та JAMstack це оптимальний вибір: немає операційного навантаження, time-to-deploy вимірюється хвилинами.

Обмеження реальні: Vercel Serverless Functions запускаються в us-east-1 за замовчуванням (latency для Європи +80–100ms), Function timeout 300 секунд на Pro, Bandwidth 1TB/місяць на Pro. Для важкого backend — потрібні воркери або окремий сервер.

Netlify ближчий до статики та Edge Functions на базі Deno Deploy. Build minutes — основне обмеження на безкоштовному тарифі.

Чому Docker — основа передбачуваного деплою?

«Працює на моїй машині» — класика. Docker вирішує це через контейнеризацію середовища. Але поганий Dockerfile створює нові проблеми.

Типова помилка: копіювати все в образ без .dockerignore, отримувати 800MB образ замість 80MB. node_modules всередині образу важить стільки ж. Правильно: multi-stage build.

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
EXPOSE 3000
CMD ["npm", "start"]

Підсумковий образ: 180MB замість 1.2GB. Час збірки CI скорочується через layer caching — якщо package.json не змінився, шар з npm ci береться з кешу.

Docker Compose для локальної розробки та простих продакшн-сценаріїв: застосунок + PostgreSQL + Redis в одній конфігурації. Для production на одному сервері — цілком робочий варіант, якщо немає вимог горизонтального масштабування.

Детальніше про контейнеризацію — Wikipedia: Docker.

Як налаштувати Nginx як reverse proxy?

Nginx перед застосунком — стандарт для VPS та виділених серверів. Основні функції: SSL termination, gzip, static files, rate limiting, upstream балансування.

Конфігурація, яку часто роблять неправильно: worker_processes auto — кількість процесів дорівнює числу CPU. worker_connections 1024 — це 1024 на кожний воркер-процес. При 4 CPU та 1024 connections = 4096 одночасних з'єднань. Для високонавантаженого сайту потрібно worker_connections 4096 та налаштування keepalive_timeout 65.

Для статичних ассетів з хешем в імені файлу:

location ~* \.(js|css|woff2|png|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

immutable повідомляє браузеру: не перевіряй цей файл навіть при hard refresh. Правильно працює лише з content-hashed іменами файлів (що робить Vite/webpack за замовчуванням). Документація — Wikipedia: Nginx.

AWS: гнучкість та складність

EC2 + Auto Scaling Group — класика для горизонтального масштабування. AMI з попередньо встановленим застосунком, Launch Template, ASG з min/desired/max instances, Application Load Balancer. При CPU > 70% на 3 хвилини — scale out, при CPU < 30% на 15 хвилин — scale in. Health check через ALB виключає нездорові інстанси з ротації.

ECS Fargate — контейнери без управління EC2. Деплой Docker-образу, задаєте CPU/пам'ять (512 CPU units = 0.5 vCPU, від 512MB пам'яті), Fargate запускає. Дорожче Lambda, але немає cold start та немає timeout-обмежень. Підходить для long-running процесів, WebSocket-серверів, важких воркерів.

RDS для PostgreSQL з Multi-AZ: автоматичний failover за 1–2 хвилини при падінні primary. Read Replicas для масштабування читання. RDS Proxy для connection pooling — Lambda-функції не вміють тримати довгострокові з'єднання, проксі буферизує це.

Kubernetes: коли це виправдано

K8s додає значну операційну складність. Виправданий, коли: кілька команд деплоять незалежні сервіси, потрібне тонке налаштування ресурсів на сервіс, canary deployments та blue/green без простою — вимога.

AWS EKS, GKE або managed k8s від Hetzner (дешевше). Helm charts для стандартних сервісів. Horizontal Pod Autoscaler по CPU та custom metrics (RPS через Prometheus).

Для більшості стартапів та середніх проєктів — Kubernetes надмірний. ECS або Fly.io дають 80% можливостей при 20% операційної складності.

Моніторинг та alerting

Сервер без моніторингу — це очікування інциденту. Мінімальний стек: Prometheus + Grafana (або Grafana Cloud для managed), alerting на disk > 80%, memory > 85%, CPU > 90% за 5 хвилин, error rate > 1%. Uptime через Better Uptime або Upptime (self-hosted).

Logs: Loki + Grafana або CloudWatch Logs Insights. Структуровані JSON-логи (winston, pino) — обов'язково, інакше пошук по логах перетворюється на біль.

Що входить у налаштування хостингу

• Аудит поточної інфраструктури та профілювання навантаження
• Вибір цільової архітектури (VPS, AWS, serverless, Kubernetes)
• Налаштування CI/CD pipeline (GitHub Actions, GitLab CI) з автоматичним деплоєм
• IaC через Terraform або Pulumi (інфраструктура як код)
• Конфігурація Nginx, SSL-сертифікати, HTTP/2, brotli
• Моніторинг та алертинг (Prometheus + Grafana, PagerDuty)
• Документація runbooks та навчання команди

Додатково: пишіть, якщо потрібна міграція з поточного хостингу або інтеграція із зовнішніми сервісами.

Процес роботи

1. Аудит поточної інфраструктури (2–5 днів)
2. Вибір цільової архітектури з обґрунтуванням за навантаженням та бюджетом (1–3 дні)
3. Налаштування CI/CD pipeline (GitHub Actions, GitLab CI) (2–5 днів)
4. IaC через Terraform або Pulumi (3–10 днів)
5. Налаштування моніторингу та alerting (2–5 днів)
6. Документація runbooks та навчання команди (1–3 дні)

Наш досвід — 7 років на ринку, понад 50 проєктів, гарантія працездатності після деплою.

Терміни

• Базовий деплой на VPS з Docker + Nginx + CI/CD: 1–2 тижні.
• Налаштування AWS інфраструктури з Auto Scaling, RDS, CDN: 3–6 тижнів.
• Міграція на EKS з нуля: 6–12 тижнів.
• Налаштування Vercel/Netlify для JAMstack: 3–5 днів.

Вартість розраховується індивідуально залежно від складності та обсягу робіт. Отримайте консультацію — оцінимо вашу архітектуру за один день.