Налаштування стиснення контенту (Gzip/Brotli) для сайту

Налаштування Gzip/Brotli сжиття

Сжиття на транспортному рівні зменшує розмір HTML, CSS, JS у 3–10 разів. Brotli дає на 15–25% краще сжиття ніж Gzip при тому ж CPU. Налаштування займає 30 хвилин і не вимагає змін коду.

Nginx: Gzip + Brotli

# /etc/nginx/nginx.conf або /etc/nginx/conf.d/compression.conf

# Gzip — підтримується скрізь
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;        # 1-9, баланс CPU/сжиття; 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 — потребує модуль ngx_brotli
# Встановлення: apt install libnginx-mod-brotli
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://example.ru/
# Ответ повинен містити: Content-Encoding: br

curl -H "Accept-Encoding: gzip" -I https://example.ru/
# Ответ: Content-Encoding: gzip

Pre-compressed статичні ассети

Для статичних файлів (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";
}

Apache

# .htaccess
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css application/javascript
    AddOutputFilterByType DEFLATE application/json image/svg+xml font/woff2
</IfModule>

Laravel: middleware для API

// Laravel не сжимає відповіді за умовчанням
// Додати middleware у bootstrap/app.php для API
->withMiddleware(function (Middleware $middleware) {
    $middleware->api(append: [
        \Illuminate\Http\Middleware\GzipResponse::class, // Laravel 11+
    ]);
})

Або через Nginx — переважно для продуктивності.

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

Час налаштування: 30 хвилин для конфігурації Nginx.