Сжатие (Gzip, Brotli)

Что такое сжатие

Сжатие — это техника, при которой сервер перед отправкой файла браузеру упаковывает его в более компактный формат. Браузер получает сжатый файл, декодирует его и использует. Это сокращает время передачи данных по сети, особенно на медленных соединениях. Для текстовых файлов (HTML, CSS, JS, JSON, шрифты в формате WOFF) выигрыш может составлять 60–80%.

Сравнение Gzip и Brotli

Gzip — стандартный алгоритм, поддерживается практически всеми серверами и браузерами. Brotli — более современный, разработанный Google, обеспечивает лучшее сжатие на 10–20%, но может быть чуть медленнее при упаковке. Brotli особенно хорош для текста и шрифтов.

Современная рекомендация: включать Brotli для HTTPS-трафика и оставлять Gzip как fallback для старых клиентов.

Что и что не нужно сжимать

• Сжимать: HTML, CSS, JavaScript, JSON, XML, SVG (без потерь), файлы шрифтов WOFF/WOFF2 (ещё дополнительно), текстовые ответы API.
• Не сжимать: Уже сжатые форматы — JPEG, PNG, WebP, MP4, WebM, ZIP (двойное сжатие не даёт выигрыша и только тратит ресурсы).

Как включить сжатие (настройки сервера)

Настройка зависит от вашего веб-сервера.

# Nginx: включение Brotli (требуется модуль ngx_brotli)
brotli on;
brotli_types text/plain text/css application/json application/javascript text/xml;
brotli_min_length 1000;

# Gzip (как fallback)
gzip on;
gzip_vary on;
gzip_types text/plain text/css application/json application/javascript text/xml;
gzip_min_length 1000;

# Apache (.htaccess)
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json application/javascript text/xml
  <IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI text/html text/plain text/css application/json application/javascript text/xml
  </IfModule>
</IfModule>

Как проверить, работает ли сжатие

• Chrome DevTools → Network → выберите запрос → Headers → Response Headers → `Content-Encoding: br` (Brotli) или `gzip`.
• PageSpeed Insights — рекомендует включить сжатие, если оно отключено.
• Онлайн-сервисы — например, CheckGzipCompression.com.
• Команда curl — `curl -H "Accept-Encoding: br" -I https://example.com/style.css`

# Проверка через curl
curl -s -I -H "Accept-Encoding: gzip, deflate, br" https://example.com | grep -i content-encoding