Gzip и Brotli: сжатие HTML, CSS и JS

Почему без сжатия сайт весит в 3 раза больше

HTML-страница без сжатия может весить 50-100 КБ. CSS — 20-50 КБ. JavaScript — 100-500 КБ. Вместе — 200-650 КБ на одну страницу. Без сжатия.

Gzip и Brotli — это алгоритмы сжатия, которые уменьшают размер текста (HTML, CSS, JS, JSON) на 60-80%. Страница, которая весила 500 КБ, после сжатия будет 100-150 КБ.

Результат:

  • Страница загружается в 3-5 раз быстрее
  • Меньше трафика для пользователя
  • Меньше нагрузка на сервер
  • Лучшая скорость = лучшие позиции в поиске

Gzip — стандарт сжатия

Gzip — самый распространённый алгоритм сжатия. Поддерживается всеми браузерами.

Как включить gzip в nginx

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1000;
gzip_comp_level 6;
gzip_vary on;
gzip_proxied any;
gzip_buffers 16 8k;

Как включить gzip в Apache

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css application/json application/javascript text/xml application/xml
    DeflateCompressionLevel 6
    SetOutputFilter DEFLATE
</IfModule>

Как проверить, включён ли gzip

curl -sI 'https://example.ru/' | grep -i content-encoding

Если ответ Content-Encoding: gzip — сжатие включено. Если пусто — нет.

Brotli — более эффективный алгоритм

Brotli — алгоритм от Google, который сжимает на 15-20% лучше gzip. Поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge).

Как включить Brotli в nginx

brotli on;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
brotli_comp_level 6;
brotli_buffers 16 8k;
brotli_min_length 20;

Важно: nginx должен быть собран с модулем ngx_brotli.

Как проверить Brotli

curl -sI -H 'Accept-Encoding: br' 'https://example.ru/' | grep -i content-encoding

Если Content-Encoding: br — Brotli работает.

Gzip vs Brotli — что выбрать

Фактор Gzip Brotli
Сжатие Базовое На 15-20% лучше
Поддержка Все браузеры Современные браузеры
Нагрузка на сервер Средняя Выше
Сложность настройки Простая Требует модуль

Рекомендация: настройте оба. nginx сам выберет: если браузер поддерживает Brotli — отдаст Brotli, иначе — gzip.

# Сначала проверяем Brotli, потом Gzip
brotli on;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
brotli_comp_level 6;

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
gzip_comp_level 6;

Какие файлы сжимать

Сжимать нужно:

  • HTML — сжатие на 70-80%
  • CSS — сжатие на 70-80%
  • JavaScript — сжатие на 60-75%
  • JSON — сжатие на 70-80%
  • XML — сжатие на 70-80%
  • SVG — сжатие на 70-80%
  • Web Fonts (woff2) — уже сжаты, не нужно

Не нужно сжимать:

  • Изображения (jpg, png, gif) — уже сжаты
  • WebP — уже сжаты
  • woff2, ttf — шрифты уже сжаты
  • PDF — уже сжаты
  • Видео/аудио — уже сжаты

Настройка сжатия

Минимальная длина (gzip_min_length)

Не сжимайте файлы меньше определённого размера — overhead сжатия может превысить выгоду.

gzip_min_length 1000;  # не сжимать файлы < 1 КБ

Уровень сжатия (gzip_comp_level)

Уровень от 1 до 9. Чем выше — тем лучше сжатие, но больше нагрузка на сервер.

Рекомендуемый уровень: 6. Оптимальный баланс между сжатием и производительностью.

Vary: Accept-Encoding

gzip_vary on;

Добавляет заголовок Vary: Accept-Encoding, который говорит прокси-серверам кэшировать обе версии (сжатую и несжатую). Без этого прокси может отдать несжатый файл браузеру, который поддерживает сжатие.

Сжатие и Health Score

В Health Score seoquest.ru сжатие — один из ключевых параметров:

  • Gzip включён — критично, если не включено
  • Brotli включён — рекомендуется
  • Размер страницы — после сжатия должен быть в 3-5 раз меньше

Как проверить эффект сжатия

1. curl

# Без сжатия
curl -sI 'https://example.ru/' | grep -i content-length

# Со сжатием
curl -sI -H 'Accept-Encoding: gzip' 'https://example.ru/' | grep -i content-length

Сравните Content-Length — разница покажет эффект сжатия.

2. Проверка GZIP/Brotli

Покажет, отдаёт ли сервер сжатие по URL, без сторонних отчётов.

3. Размер страницы и заголовки кэша

Сверьте вес ответа и Cache-Control — сжатие без кэша статики даёт меньше эффекта на повторных визитах.

Итог

Gzip и Brotli — это самый простой способ ускорить сайт. Включите сжатие на сервере, и ваша страница станет в 3-5 раз меньше. Настройка занимает 5 минут, а эффект — мгновенный.

Проверить сайт по техническим и контентным пунктам можно в бесплатной проверке.

Вопросы и ответы

Brotli работает со всеми браузерами?

Нет, только с современными. Старые браузеры (IE, старые Safari) не поддерживают Brotli. Поэтому настраивайте fallback на gzip.

Сжатие влияет на CPU сервера?

Да, но незначительно. Уровень сжатия 6 — оптимальный баланс. На современных серверах нагрузка незаметна.

Нужно ли сжимать изображения?

Нет, изображения уже сжаты. Используйте WebP — это лучший формат сжатия для изображений.

Gzip и Brotli можно включать вместе?

Да, nginx сам выберет. Если браузер поддерживает Brotli — отдаст Brotli, иначе — gzip.

Связанная тема: скорость загрузки сайта.