Настроить сжатие Gzip/Brotli на сервере

Зачем настраивать сжатие Gzip/Brotli

Сжатие на сервере — это одна из базовых оптимизаций, которая уменьшает размер передаваемых данных в 3-7 раз без потери качества. HTML-страница весом 100 КБ после Gzip сжимается до 15-25 КБ, после Brotli — до 12-20 КБ. CSS и JavaScript сжимаются ещё эффективнее: файл jQuery 90 КБ превращается в 30 КБ с Gzip и 27 КБ с Brotli.

Без сжатия каждая страница передаётся в полном объёме. Для мобильных пользователей с ограниченной скоростью это ощутимая разница. PageSpeed Insights помечает отсутствие сжатия рекомендацией «Enable text compression» и оценивает потенциальную экономию в секундах загрузки.

На практике сжатие ускоряет FCP и LCP, потому что браузер быстрее получает HTML, CSS и шрифты. По моему опыту, включение Brotli вместо Gzip даёт дополнительные 5-15% экономии трафика. Для сайтов с большим объёмом текстового контента — блоги, каталоги, документации — экономия может быть ещё заметнее.

Пошаговая инструкция

Шаг 1. Проверьте текущее состояние сжатия

Откройте DevTools (F12), вкладка Network. Загрузите страницу. Кликните на любой HTML, CSS или JS-файл. В заголовках ответа (Response Headers) найдите Content-Encoding. Возможные значения:

• gzip — сжатие Gzip включено
• br — сжатие Brotli включено
• Заголовок отсутствует — сжатие не работает

Альтернативная проверка через curl в терминале:

curl -I -H "Accept-Encoding: gzip, br" https://example.com/

В ответе ищите строку content-encoding: br или content-encoding: gzip. Если её нет — сервер отдаёт файлы без сжатия.

Шаг 2. Разберитесь в разнице Gzip и Brotli

Gzip — стандарт сжатия, поддерживается всеми браузерами и серверами с начала 2000-х. Brotli — алгоритм от Google, появился в 2015 году. Ключевые отличия:

• Степень сжатия: Brotli сжимает на 15-25% эффективнее Gzip при одинаковой скорости сжатия.
• Скорость сжатия: На максимальных уровнях Brotli значительно медленнее Gzip. Для динамического контента (HTML) используйте Brotli уровня 4-6, для статики — можно предварительно сжать на уровне 11.
• Поддержка: Brotli поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge). Работает только через HTTPS — по HTTP Brotli не применяется.
• Рекомендация: Настройте Brotli как основной алгоритм, Gzip как fallback для старых клиентов.

Шаг 3. Включите сжатие в Nginx

Gzip обычно включён по умолчанию, но нужно проверить и расширить список типов файлов. Добавьте в блок http или server:

# Gzip
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_min_length 256;
gzip_types
    text/plain
    text/css
    text/javascript
    application/javascript
    application/json
    application/xml
    image/svg+xml
    font/woff2;

Для Brotli в Nginx нужен модуль ngx_brotli. Если он установлен:

# Brotli
brotli on;
brotli_comp_level 6;
brotli_types
    text/plain
    text/css
    text/javascript
    application/javascript
    application/json
    application/xml
    image/svg+xml
    font/woff2;

После изменений перезагрузите Nginx: sudo nginx -t && sudo systemctl reload nginx.

Шаг 4. Включите сжатие в Caddy

В Caddy сжатие Gzip и Brotli включено по умолчанию для всех текстовых типов. Если по какой-то причине оно отключено, добавьте в Caddyfile:

encode gzip zstd

Для включения Brotli (если модуль установлен):

encode {
    br
    gzip
}

Caddy автоматически выберет лучший алгоритм на основе заголовка Accept-Encoding от клиента. Brotli будет использоваться, если браузер его поддерживает, иначе — Gzip.

Шаг 5. Включите сжатие в Apache

Для Apache используется модуль mod_deflate (название историческое, фактически применяет Gzip). Добавьте в .htaccess или конфигурацию виртуального хоста:

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

Brotli в Apache доступен через модуль mod_brotli (Apache 2.4.26+). На shared-хостингах он часто не установлен — уточните у провайдера.

Шаг 6. Настройте предварительное сжатие статики

Динамическое сжатие (на лету) нагружает процессор сервера при каждом запросе. Для статических файлов эффективнее предварительное сжатие: файлы сжимаются один раз при деплое, и сервер отдаёт готовые .gz и .br файлы.

В Nginx включите:

gzip_static on;
brotli_static on;

Теперь при запросе style.css Nginx сначала проверит наличие style.css.br (Brotli) или style.css.gz (Gzip) и отдаст готовый файл без затрат на сжатие. Сжать файлы можно командами:

find /path/to/static -type f \( -name "*.css" -o -name "*.js" -o -name "*.svg" \) -exec gzip -9 -k {} \;
find /path/to/static -type f \( -name "*.css" -o -name "*.js" -o -name "*.svg" \) -exec brotli -9 -k {} \;

Шаг 7. Проверьте результат

После настройки выполните проверку несколькими способами:

• DevTools → Network → Response Headers: Content-Encoding: br для Brotli или gzip для Gzip.
• Сравните колонки Size и «Размер ресурса» в Network — Size (transfer size) должен быть значительно меньше.
• PageSpeed Insights: рекомендация «Enable text compression» должна исчезнуть.
• Онлайн-инструменты: KeyCDN Brotli Test покажет, поддерживает ли сервер Brotli.

Типичные ошибки

• Сжимать уже сжатые форматы. JPEG, PNG, WebP, WOFF2, ZIP — это уже сжатые форматы. Повторное сжатие Gzip/Brotli не уменьшит их размер, но потратит ресурсы процессора. Настраивайте сжатие только для текстовых типов: HTML, CSS, JS, JSON, XML, SVG.
• Использовать максимальный уровень сжатия для динамического контента. Brotli уровня 11 или Gzip уровня 9 сжимают на 5-10% лучше, но работают в 10-20 раз медленнее. Для HTML, который генерируется при каждом запросе, используйте уровень 4-6. Максимальные уровни — только для предварительного сжатия статики.
• Забывать про Vary: Accept-Encoding. Этот заголовок говорит кешам и CDN, что ответ отличается в зависимости от поддерживаемых алгоритмов сжатия. Без него промежуточный кеш может отдать Brotli-версию клиенту, который поддерживает только Gzip. Nginx добавляет его автоматически при gzip_vary on.
• Не проверять сжатие после настройки CDN. CDN может переопределять заголовки сервера. Cloudflare, например, применяет собственное сжатие и может отключить серверный Brotli. Проверяйте итоговые заголовки на уровне конечного пользователя, а не на origin-сервере.
• Включить сжатие только для одного типа файлов. Часто настраивают сжатие для HTML, но забывают про CSS, JavaScript, JSON, SVG. Каждый из этих типов даёт существенную экономию.

Что проверить в итоге

• Все текстовые ресурсы (HTML, CSS, JS, JSON, XML, SVG) отдаются с заголовком Content-Encoding: br или gzip.
• Transfer size в DevTools значительно меньше реального размера для текстовых файлов (минимум в 3 раза).
• Сервер поддерживает Brotli (Content-Encoding: br) при HTTPS-соединении.
• Gzip настроен как fallback для клиентов без поддержки Brotli.
• Изображения (JPEG, PNG, WebP) и шрифты (WOFF2) не проходят через дополнительное сжатие.
• PageSpeed Insights не показывает рекомендацию «Enable text compression».
• Заголовок Vary: Accept-Encoding присутствует в ответах сервера.