Brotli и Gzip: сжатие, которое незаметно ускоряет загрузку

Есть оптимизация, которую пользователь никогда не заметит как отдельное действие, но почувствует как общую быстроту сайта — сжатие текстовых ресурсов на лету. HTML, CSS, JavaScript, SVG и JSON прекрасно поджимаются: текст по своей природе избыточен, и алгоритмы сжатия легко уменьшают его в три-четыре раза. Если сжатие у вас не настроено, вы передаёте по сети в разы больше байтов, чем нужно, замедляя загрузку и тратя трафик. При этом включается оно буквально парой директив в конфиге сервера. Разберём, как работают Gzip и более современный Brotli, чем они отличаются, как проверить, включено ли сжатие, и как настроить его правильно.

Что такое сжатие текстовых ресурсов на лету

Когда браузер запрашивает страницу, он сообщает серверу, какие методы сжатия понимает, через заголовок Accept-Encoding. Сервер сжимает текстовый ответ подходящим алгоритмом, отдаёт его в сжатом виде и помечает заголовком Content-Encoding. Браузер на своей стороне распаковывает данные и работает с ними как обычно. Всё это происходит прозрачно и за миллисекунды.

Сжатию хорошо поддаются именно текстовые форматы — HTML, CSS, JS, SVG, JSON, XML, шрифты в формате без предварительного сжатия. Типичная HTML-страница ужимается на 60–80%, а минифицированный, но несжатый JS-бандл легко теряет две трети веса. Это напрямую сокращает объём передаваемых данных, ускоряет загрузку и улучшает метрики скорости, о которых речь в материале про то, как улучшить Core Web Vitals и скорость загрузки.

Как работает Gzip

Gzip — ветеран сжатия в вебе, основанный на алгоритме DEFLATE (комбинация LZ77 и кодирования Хаффмана). Суть проста: алгоритм находит повторяющиеся последовательности в тексте и заменяет их короткими ссылками на предыдущие вхождения, а часто встречающиеся символы кодирует более короткими битовыми последовательностями. В разметке и коде повторов масса — теги, классы, ключевые слова, — поэтому Gzip даёт отличный результат.

Gzip поддерживается абсолютно всеми браузерами и серверами уже два десятилетия, работает быстро и нетребователен к ресурсам. Это золотой стандарт по умолчанию: если у вас не настроено вообще ничего, включить Gzip — первоочередная задача. Его поддержка универсальна, и он остаётся надёжным фолбэком даже там, где доступен более продвинутый Brotli.

Что такое Brotli и почему он лучше

Brotli — алгоритм от Google, разработанный специально для веба. Его ключевое преимущество — встроенный словарь часто встречающихся в вебе строк (типичные HTML-теги, CSS-свойства, фрагменты JS), благодаря которому он сжимает текст эффективнее. На практике для текстовых ресурсов Brotli даёт выигрыш примерно на 15–25% по сравнению с Gzip при сопоставимом уровне сжатия — то есть файлы получаются ещё легче.

Brotli поддерживается всеми современными браузерами и передаётся в заголовке Accept-Encoding как значение br. Важная тонкость: Brotli работает только по HTTPS, что сегодня не проблема, поскольку защищённое соединение — стандарт. Если вы ещё не до конца перевели сайт на HTTPS, начните с материала про то, как правильно настроить HTTPS и SSL-сертификат. Оптимальная схема — отдавать Brotli браузерам, которые его поддерживают, и Gzip как фолбэк остальным.

Таблица сравнения Gzip и Brotli

Критерий	Gzip	Brotli
Степень сжатия текста	хорошая, базовая	на 15–25% лучше Gzip
Заголовок Content-Encoding	gzip	br
Поддержка браузеров	абсолютно все	все современные
Требует HTTPS	нет	да
Скорость кодирования	очень быстрая	зависит от уровня
Лучшее применение	динамика, фолбэк	статика, основной метод

Вывод из таблицы: использовать стоит оба. Brotli как основной метод для современных браузеров, Gzip как универсальный фолбэк. Серверы умеют отдавать нужный вариант автоматически, ориентируясь на Accept-Encoding запроса.

Сжатие — это самая незаметная и при этом одна из самых дешёвых оптимизаций. Несколько строк в конфиге сервера срезают вес текстовых ресурсов в три-четыре раза. Не включить сжатие сегодня — всё равно что добровольно платить за лишний трафик и секунды загрузки.

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

Прежде чем что-то менять, проверьте текущее состояние. Способов несколько.

• Заголовок Content-Encoding. Откройте DevTools, вкладка Network, кликните по запросу документа или CSS-файла и в разделе Response Headers найдите content-encoding. Значение br означает Brotli, gzip — Gzip, отсутствие заголовка — сжатие не работает.
• Сравнение размеров. В колонках Size той же вкладки Network видно переданный и фактический размер: если они сильно отличаются, ресурс сжат.
• Онлайн-чекеры. Есть сервисы проверки сжатия, куда достаточно ввести URL — они покажут, какой алгоритм применяется и какова экономия.
• PageSpeed Insights. Аудит «Включите сжатие текста» (Enable text compression) прямо укажет на несжатые ресурсы. Это часть стандартной диагностики при техническом SEO-аудите сайта.

Как включить сжатие на nginx и Apache

Настройка делается на уровне веб-сервера. Разберём два самых распространённых.

Nginx

Gzip включается директивой gzip on; с указанием типов через gzip_types (text/css, application/javascript, application/json, image/svg+xml и так далее) и уровня gzip_comp_level. Для Brotli нужен модуль ngx_brotli: после его подключения добавляются директивы brotli on;, brotli_types и brotli_comp_level. Эти настройки логично делать в рамках общей оптимизации сервера и хостинга для SEO.

Apache

В Apache за Gzip отвечает модуль mod_deflate: в конфиге или .htaccess указываются типы ресурсов для сжатия через директивы AddOutputFilterByType DEFLATE. Для Brotli используется модуль mod_brotli с аналогичной настройкой типов. На многих хостингах эти модули уже доступны, и достаточно прописать несколько строк в .htaccess.

Уровни сжатия и что не сжимать

Уровень сжатия — компромисс между нагрузкой на процессор и размером файла. Высокие уровни дают чуть меньший размер, но тратят больше CPU при кодировании. Для динамического сжатия на лету разумны средние уровни (Gzip 5–6, Brotli 4–5), для заранее сжатой статики можно ставить максимум.

Важно: не сжимайте то, что уже сжато. Изображения JPEG, PNG, WebP, AVIF, видео и архивы уже упакованы своими алгоритмами, и повторное сжатие только сожжёт процессорное время без выигрыша, а иногда даже слегка увеличит размер. Сжимайте только текстовые типы. Про оптимальные форматы самих картинок — отдельный материал про современные форматы WebP и AVIF.

Статическое против динамического сжатия

Есть два режима. Динамическое сжатие происходит в момент запроса: сервер сжимает ответ на лету. Это удобно для HTML, который генерируется индивидуально, но тратит CPU при каждом обращении. Статическое сжатие — это заранее подготовленные сжатые версии файлов (например, style.css.br и style.css.gz рядом с оригиналом): сервер просто отдаёт готовый сжатый файл, не тратя процессор.

Оптимальная стратегия: для статики (CSS, JS) — предварительное статическое сжатие на максимальном уровне, так вы получаете лучший размер без затрат CPU в рантайме. Для динамического HTML — сжатие на лету средним уровнем. Это снимает основную проблему высоких уровней Brotli, которые медленно кодируют, но дают самый компактный результат.

Влияние на скорость, TTFB и Core Web Vitals

Сжатие сокращает объём передаваемых байтов, а значит — время на скачивание ресурсов. Меньше данных по сети — раньше браузер получает CSS и JS, раньше начинает отрисовку, лучше показатели FCP и LCP. На мобильных каналах эффект особенно заметен.

С TTFB нюанс двоякий. Сжатие первого байта HTML практически не задерживает, если уровень разумный, а вот меньший объём ответа ускоряет его доставку. Но если выкрутить динамическое сжатие на максимальный уровень, сервер потратит лишнее время на кодирование тяжёлого HTML, и TTFB может чуть подрасти — поэтому для динамики и держат средние уровни. Связь сжатия с ответом сервера мы разбирали в материале про разгон TTFB до 200 мс.

Нюансы CDN: Cloudflare сжимает сам

Если вы используете CDN, сжатием часто занимается именно он, причём прозрачно. Cloudflare, например, по умолчанию применяет Brotli и Gzip к текстовым ответам на своей стороне, отдавая каждому браузеру оптимальный вариант. В этом случае настраивать сжатие на собственном сервере для внешнего трафика может быть необязательно — но проверить, что оно реально работает на конечной выдаче, всё равно нужно.

Важно не получить конфликт двойного сжатия и убедиться, что CDN корректно проксирует и сжимает нужные типы. Подробно про работу сетей доставки — в материале про CDN для SEO и ускорения сайта. Если CDN нет, сжатие на своём сервере обязательно.

Чек-лист настройки сжатия

1. Проверьте в DevTools заголовок content-encoding для HTML, CSS и JS.
2. Если сжатия нет — включите как минимум Gzip на сервере (mod_deflate или gzip on).
3. Подключите Brotli (ngx_brotli или mod_brotli) как основной метод для современных браузеров.
4. Перечислите в типах все текстовые форматы: HTML, CSS, JS, JSON, SVG, XML.
5. Исключите из сжатия уже упакованные форматы: JPEG, PNG, WebP, AVIF, видео, архивы.
6. Для статики настройте предварительное сжатие на максимальном уровне.
7. Для динамического HTML используйте средние уровни, чтобы не нагружать CPU.
8. Если есть CDN — проверьте, что сжатие работает на его стороне без двойной обработки.
9. Перепроверьте через PageSpeed Insights, что аудит сжатия текста стал зелёным.

Сжатие Brotli и Gzip — это тот случай, когда несколько строк конфигурации дают мгновенный и измеримый прирост скорости без какого-либо риска. Если ваш сайт до сих пор отдаёт несжатый HTML и JS, вы теряете секунды загрузки и платите за лишний трафик. Доверьте настройку сервера профессионалам — закажите доработку сайта с полной серверной оптимизацией или комплексное продвижение сайтов, где скорость — один из факторов выхода в ТОП Яндекса и Google.

Услуги LSI Продвижение

Наша команда предлагает полный спектр услуг по SEO-продвижению и технической доработке сайтов. Мы работаем только белыми методами, ориентируемся на реальный бизнес-результат — трафик, заявки и продажи, а не только позиции в отчёте, — и выстраиваем продвижение системно, под конкретные задачи и нишу вашего проекта. Начать можно с бесплатной диагностики, чтобы понять текущее состояние сайта и точки роста, а затем перейти к комплексной работе. Выберите подходящую услугу из списка ниже:

• Бесплатный SEO аудит сайта — автоматическая проверка на 50+ параметров за 2 минуты
• Комплексный SEO аудит — глубокий ручной анализ с рекомендациями от эксперта
• Продвижение сайтов — вывод в ТОП Яндекса и Google по целевым запросам
• SEO консультация — разбор вашего сайта с конкретными рекомендациями
• LSI тексты — экспертный контент, оптимизированный для поисковых систем
• Доработка сайта — техническая оптимизация и исправление ошибок
• Создание сайта под ключ — разработка с нуля с SEO-оптимизацией
• Стоимость продвижения — прозрачные тарифы и условия
• Портфолио и кейсы — реальные результаты наших клиентов