Сжатие Brotli как настроить и ускорить загрузку сайта

На подходящих текстовых файлах Brotli позволяет получить меньший размер, чем Gzip. Это может сократить время загрузки ресурсов, особенно при медленном соединении. Однако результат зависит от состава страницы и настроек: сжатие текста не устраняет задержки сервера и не уменьшает автоматически тяжёлые изображения или видео.

Чтобы понять, как включить Brotli на конкретном сайте, нужно определить, откуда посетители получают файлы: непосредственно с веб-сервера или через сеть доставки контента — CDN. От этого зависят способ настройки и место проверки. Затем необходимо убедиться, что браузер действительно получает сжатые ответы, и сравнить объём передачи и время загрузки до и после изменений.

Как работает Brotli и чем он отличается от Gzip?

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

Сжатие применяется к содержимому HTTP-ответа. Браузер сообщает о поддерживаемых алгоритмах в заголовке Accept-Encoding. Сервер выбирает подходящий вариант и указывает его в Content-Encoding: для Brotli используется значение br, для Gzip — gzip. Браузер распаковывает полученные данные автоматически.

Accept-Encoding: br, gzip

Такой заголовок запроса сообщает о поддержке обоих алгоритмов. Если сервер отправляет ответ, сжатый Brotli, в нём должен присутствовать заголовок:

Content-Encoding: br

Само наличие br в запросе ещё не подтверждает работу Brotli: сервер может выбрать другой алгоритм или вернуть несжатый ответ. Проверять нужно заголовки ответа конкретного ресурса.

Для неизменяемых CSS и JavaScript затраты на сильное сжатие можно перенести на этап сборки сайта: подготовить файлы заранее, а затем многократно отправлять готовые версии. Это уменьшает объём передачи без повторного сжатия при каждом запросе, но требует хранения и своевременного обновления сжатых копий.

Для ответов, которые формируются заново при каждом обращении, ситуация другая. Максимальный уровень Brotli может уменьшить размер ответа, но увеличить время его подготовки. Поэтому уровень выбирают по измерениям: учитывают одновременно размер данных, задержку ответа и нагрузку на процессор. Числовые уровни Brotli и Gzip напрямую не сопоставимы.

Уже сжатые изображения, видео и архивы обычно почти не выигрывают от дополнительного HTTP-сжатия. Для них полезнее подобрать формат, разрешение и качество. Основная область применения Brotli на сайте — текстовые ресурсы.

Что проверить перед включением Brotli на сайте?

Перед настройкой Brotli проверьте HTTPS, поддержку сжатия на сервере или CDN и текущие заголовки ответов. Затем выберите ресурсы для сжатия и сохраните исходные показатели: объём передаваемых данных и время загрузки. Это позволит проверить результат после изменений.

Начните с проверки действующей конфигурации. Откройте инструменты разработчика в браузере, перейдите на вкладку «Сеть» (Network), отключите кеш на время проверки и перезагрузите страницу. Выберите основной HTML-документ, затем файлы CSS и JavaScript. В заголовках ответа найдите Content-Encoding: значение br подтверждает Brotli, gzip — Gzip. Отсутствие заголовка обычно указывает, что содержимое ответа передано без HTTP-сжатия.

Проверяйте несколько ресурсов отдельно. Сжатие может работать для HTML, но не применяться к таблицам стилей, сценариям или ответам программного интерфейса. Файлы со сторонних доменов обслуживаются их владельцами: настройка вашего сервера на них не повлияет.

Определите, где формируется ответ для посетителя. Если сайт работает через CDN или обратный прокси-сервер, именно этот узел может сжимать данные перед отправкой браузеру. На обычном хостинге возможность включения Brotli зависит от настроек провайдера. При самостоятельном администрировании потребуется проверить наличие соответствующего модуля или встроенной поддержки в используемом серверном ПО.

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

Разделите ресурсы по способу подготовки. Для файлов, которые меняются только при обновлении сайта, можно заранее создавать сжатые копии. Для HTML и других ответов, формируемых по запросу, потребуется сжатие во время обработки обращения либо на уровне CDN. От этого выбора зависят нагрузка на процессор, настройки кеширования и порядок публикации обновлений.

До внесения изменений зафиксируйте:

• какое сжатие сейчас используется для HTML, CSS и JavaScript;
• размер выбранных ресурсов при передаче по сети;
• время ожидания ответа сервера и загрузки этих ресурсов;
• условия проверки: браузер, ограничение скорости соединения и состояние кеша.

После настройки повторите измерения в тех же условиях несколько раз. Сравнивайте одни и те же версии файлов: обновление кода или содержимого страницы одновременно со сменой алгоритма помешает выделить эффект Brotli.

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

Как включить Brotli на Nginx, Apache и через CDN?

Способ включения Brotli зависит от того, какой узел отправляет данные браузеру. На Nginx потребуется модуль сжатия, на Apache — mod_brotli, а при использовании CDN настройку можно выполнить на стороне сети доставки контента. Выберите вариант, соответствующий вашей инфраструктуре.

На Nginx. Для приведённой ниже конфигурации нужен модуль ngx_brotli. Установите совместимый пакет из репозитория вашей системы или поставщика Nginx. Команда установки и способ загрузки модуля зависят от дистрибутива и сборки сервера.

После подключения модуля добавьте настройки в существующий блок http или в блок server нужного сайта:

brotli on;
brotli_comp_level 5;
brotli_types text/plain text/css text/javascript application/javascript application/json application/xml image/svg+xml;

HTML включён в перечень сжимаемых типов по умолчанию. Уровень 5 можно использовать как отправную точку для измерений, затем проверить нагрузку и размер ответов. Повышение уровня увеличивает затраты на сжатие.

Если при сборке сайта создаются готовые файлы .br, подключите статическую часть модуля и добавьте:

brotli_static on;

Рядом с исходным файлом, например app.js, должна находиться актуальная копия app.js.br. Директива сама её не создаёт. Используйте значение on: оно учитывает поддержку алгоритма клиентом.

Проверьте конфигурацию и примените её только при успешном результате:

sudo nginx -t
sudo systemctl reload nginx

Команда перезагрузки через systemctl подходит для систем, где Nginx управляется службой systemd.

На Apache. Проверьте наличие модуля Brotli в списке загруженных модулей:

apachectl -M

Если brotli_module отсутствует, установите и включите его способом, предусмотренным вашим дистрибутивом. Для директивы AddOutputFilterByType также необходим модуль mod_filter.

В конфигурацию нужного виртуального хоста добавьте:

BrotliCompressionQuality 5
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css text/javascript application/javascript application/json application/xml image/svg+xml

Здесь BROTLI_COMPRESS включает фильтр для перечисленных типов содержимого, а BrotliCompressionQuality задаёт уровень сжатия. Эта директива применяется в конфигурации сервера или виртуального хоста — переносить весь пример в .htaccess нельзя.

Перед применением выполните проверку:

apachectl configtest

Если ошибок нет, перечитайте конфигурацию штатной командой вашей системы. Название службы зависит от установки: обычно это apache2 или httpd.

Через CDN. Если посетители получают ресурсы через сеть доставки контента, Brotli можно включить на её стороне. Это упрощает настройку сервера, но передаёт управление сжатием провайдеру CDN.

Например, в Cloudflare для подходящих ответов предусмотрено сжатие по умолчанию, а правила Compression Rules позволяют изменить выбор алгоритма. Параметр «Enable Brotli and Gzip compression» задаёт предпочтение Brotli с переходом на Gzip или несжатый ответ, если клиент не поддерживает нужный формат. Проверьте, что другое правило не отключает сжатие для выбранного адреса.

Настройка CDN действует только на трафик, проходящий через неё. После изменения проверяйте публичный адрес сайта, по которому заходят посетители.

Проблема: Nginx сообщает unknown directive "brotli" при проверке конфигурации.

Решение: проверьте установку, совместимость и загрузку модуля. Запись brotli on; включает уже подключённую возможность, но не устанавливает её. Пока проверка конфигурации завершается ошибкой, применять изменения нельзя.

После настройки запросите HTML-документ и несколько файлов CSS и JavaScript. Заголовок Content-Encoding: br должен появиться в ответах, для которых сервер выбрал Brotli. Сохраните работающую настройку Gzip как запасной вариант.

Как выбрать уровень сжатия Brotli и настроить кеширование?

Для сжатия ответов во время запроса начните с умеренного уровня и проверьте нагрузку на сервер. Для заранее подготовленных CSS и JavaScript можно использовать более высокий уровень: посетитель получит готовый файл, поэтому время его сжатия не увеличит ожидание ответа.

Brotli поддерживает уровни от 0 до 11. Высокий уровень обычно уменьшает размер файла, но требует больше времени на обработку. Разница между соседними уровнями зависит от содержимого: универсального значения, которое обеспечивает лучшую скорость на любом сайте, нет.

Для динамических ответов сравнивайте размер и задержку одновременно. Если повышение уровня сократило передачу на несколько килобайт, но заметно увеличило ожидание первого байта, настройка может ухудшить загрузку. Проверяйте результат при характерном для сайта числе одновременных запросов: одиночное обращение не показывает поведение сервера под нагрузкой.

Для предварительного сжатия ограничение другое — продолжительность сборки. Можно проверить уровни 9–11 и оставить тот, который даёт полезное сокращение размера при приемлемом времени подготовки. Исходный файл и его сжатые копии должны публиковаться вместе. Иначе браузер может получить старый код из файла .br, хотя несжатая версия уже обновлена.

Кеш должен учитывать способ сжатия. Если один адрес возвращает Brotli, Gzip или несжатое содержимое в зависимости от запроса, заголовок ответа должен сообщать об этом:

Vary: Accept-Encoding

Обычно его формирует модуль сжатия или обслуживающий прокси-сервер. Проверьте фактический ответ перед добавлением настройки вручную. Если в Vary уже перечислены другие поля, их нужно сохранить: они также могут влиять на выбор версии содержимого.

Для общедоступных CSS и JavaScript с уникальным адресом каждой версии можно назначить длительное кеширование. Например, файл app.a81f3c.js при изменении содержимого должен получить новое имя. Для таких ресурсов подходит следующий заголовок:

Cache-Control: public, max-age=31536000, immutable

Он разрешает хранить ответ год и сообщает, что содержимое по этому адресу не изменится в течение срока свежести. Цена такого подхода — обязательное обновление адресов при выпуске новой версии. Если постоянно перезаписывать app.js и сохранить этот заголовок, часть посетителей продолжит использовать старый файл.

Для HTML, который должен проверяться на обновления перед повторным использованием, возможен другой вариант:

Cache-Control: no-cache

Директива no-cache разрешает хранение, но требует проверки актуальности перед повторным использованием. Для ответов, которые вообще нельзя сохранять в кеше, предназначена no-store. Правила для личного кабинета и персональных данных задают отдельно; длительное публичное кеширование статических файлов на них переносить нельзя.

После настройки проверьте два сценария: первое открытие с пустым кешем и повторный визит. В первом случае оценивается объём передачи после сжатия, во втором — возможность повторно использовать уже загруженные ресурсы. Эти измерения показывают разные составляющие ускорения сайта.

Content-Encoding: br
Vary: Accept-Encoding

curl -sS -D - -o /dev/null -H 'Accept-Encoding: br' 'https://example.com/assets/app.js'

curl -sS --compressed -H 'Accept-Encoding: br' -o /dev/null 'https://example.com/assets/app.js'

curl -sS -D - -o /dev/null -H 'Accept-Encoding: br' -w '\nbytes=%{size_download} total=%{time_total}\n' 'https://example.com/assets/app.js'

curl -sS -D - -o /dev/null -H 'Accept-Encoding: gzip' -w '\nbytes=%{size_download} total=%{time_total}\n' 'https://example.com/assets/app.js'

curl -sS -D - -o /dev/null -H 'Accept-Encoding: identity' -w '\nbytes=%{size_download} total=%{time_total}\n' 'https://example.com/assets/app.js'

Почему после Gzip появился Brotli и нужно ли полностью переходить на него?

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

Gzip давно используется для HTTP-сжатия. Его распространённость упростила внедрение: поддержку алгоритма можно найти в браузерах, веб-серверах и промежуточных узлах. Однако с ростом объёма CSS и JavaScript стало полезно дополнительно сокращать передаваемые файлы. Brotli расширил возможности сжатия благодаря встроенному словарю распространённых последовательностей и другим способам кодирования данных.

Переход не требует менять исходный код страниц или формат подключения ресурсов. Браузер по-прежнему запрашивает файл по его обычному адресу. Разница возникает при передаче: сервер отправляет совместимое с клиентом сжатое представление, которое браузер восстанавливает перед использованием.

Практический выбор зависит от частоты обновления содержимого. Для файлов, подготовленных заранее, можно потратить больше времени на сжатие ради меньшего объёма каждой последующей передачи. Для ответов, создаваемых при каждом запросе, приходится учитывать стоимость обработки: более плотное сжатие полезно, пока оно не увеличивает задержку сильнее, чем сокращает время передачи.

Поэтому полностью отключать Gzip ради Brotli обычно незачем. Сохранение обоих вариантов обеспечивает совместимость, но требует проверки выбора алгоритма и раздельного кеширования представлений. Решение о переходе принимают по результатам измерений на собственных ресурсах, а не по максимальной степени сжатия в чужом тесте.

С чего начать внедрение Brotli на сайте?

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

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