Gzip: что это и как включить сжатие

Gzip — алгоритм сжатия для HTTP-передачи, уменьшающий размер HTML, CSS и JS файлов на 60-80%. Обязателен для быстрой загрузки сайта.

gzipсжатиепроизводительностьhttpоптимизация

Что такое Gzip

Gzip — алгоритм сжатия данных, широко используемый для сжатия HTTP-ответов. Когда сервер отправляет HTML, CSS, JS, JSON файлы, он может сжать их с помощью gzip прежде чем передать браузеру. Браузер автоматически распаковывает данные.

Gzip существенно снижает объём передаваемых данных и ускоряет загрузку страниц.

Насколько эффективен Gzip

Степень сжатия зависит от типа файла:

| Тип файла | Без сжатия | С Gzip | Экономия | |-----------|-----------|--------|---------| | HTML | 100 KB | 25 KB | 75% | | CSS | 80 KB | 15 KB | 81% | | JavaScript | 200 KB | 60 KB | 70% | | JSON | 50 KB | 10 KB | 80% | | Изображения | Уже сжаты | — | ~0% |

Изображения (JPEG, PNG, WebP) уже содержат собственное сжатие — дополнительный gzip не даёт эффекта.

Как браузер запрашивает сжатие

Запрос браузера:
GET /page HTTP/1.1
Accept-Encoding: gzip, deflate, br

Ответ сервера:
HTTP/1.1 200 OK
Content-Encoding: gzip
Content-Type: text/html

br — это Brotli, более эффективный алгоритм сжатия (см. ниже).

Как включить Gzip

Nginx

http {
    gzip on;
    gzip_comp_level 6;
    gzip_min_length 1000;
    gzip_types
        text/plain
        text/css
        text/javascript
        application/javascript
        application/json
        application/xml
        image/svg+xml;
    gzip_proxied any;
    gzip_vary on;
}

Apache (.htaccess)

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

Node.js / Express

const compression = require('compression');
app.use(compression({
  level: 6,
  threshold: 1024 // не сжимать файлы < 1KB
}));

Next.js

Next.js включает gzip сжатие по умолчанию. Для дополнительной настройки:

// next.config.js
module.exports = {
  compress: true, // по умолчанию true
}

Gzip vs Brotli

| Аспект | Gzip | Brotli | |--------|------|--------| | Степень сжатия | Хорошая | На 20-30% лучше | | Поддержка | Все браузеры | Все современные браузеры | | Процессорная нагрузка | Низкая | Выше (при максимальном уровне) | | Рекомендация | Для совместимости | Предпочтительнее |

Проверка сжатия на reChecker

Используйте HTTP/2 & Brotli для проверки включения gzip и Brotli на вашем сайте. Инструмент проверит:

  • Наличие заголовка Content-Encoding: gzip или br
  • Фактическое сжатие для основных типов файлов
  • Протокол HTTP/2 и другие параметры производительности

FAQ

Gzip сжимает изображения? Технически да, но эффект минимальный — JPEG, PNG, WebP уже содержат собственное сжатие. Применяйте gzip только к текстовым форматам: HTML, CSS, JS, JSON, XML, SVG.

Нужно ли сжимать файлы размером менее 1 KB? Нет. Overhead на заголовки сжатия и процессорное время не оправдывает сжатие маленьких файлов. Минимальный порог 1-2 KB.

Влияет ли уровень сжатия на скорость сервера? Да. Уровень 1 — быстро, но слабее сжимает. Уровень 9 — максимальное сжатие, но нагружает CPU. Уровень 5-6 — оптимальный баланс для большинства сайтов.

Попробуйте инструмент

Проверьте gzip на вашем сайте с помощью бесплатного инструмента.

HTTP/2 & Brotli

Техническая поддержка

Нашли баг, сбой или ошибку в работе сервиса? Есть предложение по улучшению? Напишите нам — мы читаем каждое сообщение и стараемся быстро исправлять проблемы.