Brotli — это способ упаковки веб-файлов, при котором сервер отдаёт браузеру данные в уменьшенном виде, а тот распаковывает их перед отрисовкой. Что это значит на практике: HTML, CSS и шрифты передаются меньшим объёмом байт, поэтому страница доезжает до пользователя быстрее. Работает алгоритм только когда его поддерживают обе стороны — и сервер, и браузер.
Метод сжатия использует предустановленный словарь из частых веб-конструкций, за счёт чего обходит gzip на текстовых ресурсах. Включается через заголовок Content-Encoding: br, а уровень сжатия задаётся от 1 до 11. Проверить, что ресурс отдаётся сжатым, можно во вкладке Network в DevTools по полю Content-Encoding.
§ 01Зачем нужен
Сокращает вес текстовых ресурсов сайта: HTML-разметки, CSS-стилей, JavaScript и SVG. Меньше байт в ответе — короче время до First Contentful Paint и Largest Contentful Paint, а это напрямую входит в Core Web Vitals. На больших JS-бандлах разница с gzip заметнее всего, потому что словарь br заранее знает типовые ключевые слова кода. Для картинок в JPEG и WebP этот кодек сжатия бесполезен — они уже упакованы своими алгоритмами, повторное сжатие только тратит ресурсы CPU.
§ 02Как настраивается
На Nginx подключается модуль ngx_brotli, после чего в конфиг добавляются директивы brotli on, brotli_types и brotli_comp_level. На Apache за это отвечает mod_brotli. Уровень 11 даёт максимальную плотность, но грузит процессор — для файлов, которые сжимаются на лету, берут 4–6, а статику готовят заранее на 11. CDN вроде Cloudflare включают br-сжатие на своей стороне без правки сервера. Как проверить настройку: запросить страницу с заголовком Accept-Encoding: br и посмотреть ответ.
TTFB-ассеты −21%, LCP 3.4→2.6 c — Медиапортал о финансах на WordPress с 1.2M визитов в месяц включил Brotli уровня 5 на nginx для HTML, CSS и JS. Вес текстовых ассетов упал на 21% против gzip, LCP снизился с 3.4 до 2.6 с за 4 недели. Замер через PSI и CrUX-75th по мобильным.
JS-бандл 480kb→392kb, −18% — B2B SaaS для логистики на React с MRR $150k раздавал статику через CDN с Brotli уровня 11 на этапе билда. JS-бандл сжался с 480kb до 392kb, First Load ускорился на 0.7 с за 2 недели. Динамика по WebPageTest и вкладке Network в Chrome DevTools.
§ 03Где смотреть результат
Открой DevTools в браузере, вкладку Network, кликни по нужному запросу и найди в разделе Response Headers строку Content-Encoding: br. Столбец Size показывает переданный объём и распакованный размер через дробь — по разнице видно степень сжатия. PageSpeed Insights в блоке диагностики отдельно указывает ресурсы без сжатия текста. Дополнительно вес до и после отдачи сравнивают в отчётах Screaming Frog при краулинге сайта.
§ 04Подводные камни
Алгоритм работает только по HTTPS в большинстве браузеров — на голом HTTP сжатие br молча отключается и отдаётся gzip. Старые клиенты без поддержки заголовка получают несжатый ответ, поэтому gzip оставляют как запасной вариант, а не удаляют. Сжатие на уровне 11 на динамических страницах при каждом запросе поднимает нагрузку на процессор — для такого контента уровень снижают. Ещё одна ошибка — включить компрессию для уже сжатых форматов: архивов, видео и растровых изображений, где выигрыша нет.