[WP] Gzip vs Brotli: разница между двумя алгоритмами сжатия

Чтобы ускорить сайты, в том числе на CMS WordPress, полезно настроить сжатие данных на сервере. Тогда данные, которые передаются между веб-сервером и браузером, загружаются быстрее, а сайт в целом ускоряется. Это один из факторов, о которых больше всего думают администраторы сайтов. Сжатие gzip применяется широко, но многие веб-серверы постепенно переходят со сжатия gzip на Brotli — и таких серверов становится всё больше.

1️⃣ Что такое сжатие?

Сайты URL: при его открытии между браузером и сервером начинается диалог. В этот момент браузер сообщает серверу, умеет ли он распаковывать содержимое после сжатия (Compression) и какие алгоритмы сжатия использует. Это помогает браузеру правильно распаковать данные, когда сервер присылает их в сжатом виде. Поэтому, если сервер и браузер поддерживают алгоритмы сжатия, сайт загружается ещё быстрее.

Подключаясь к серверу, веб-браузер отправляет заголовки с указанием сжатия gzip или Brotli. Браузер получает данные, сжатые одним из двух способов, а сжатые данные загружаются быстрее несжатых.

Content-encoding: gzip
Content-encoding: br

Сжимаются в основном текстовые файлы:
· HTML
· CSS
· JavaScript

2️⃣ Что такое сжатие Gzip?

Самые распространённые алгоритмы сжатия у веб-хостингов — Gzip и Brotli. Бета-версия Gzip появилась в 1992 году, а версия 1.0 вышла в 1993 году. В целом Gzip — один из стандартных способов сжатия данных при передаче через интернет. Он основан на раннем алгоритме сжатия DEFLATE, а название получил от gzip — программы сжатия файлов, которую ранее разработали для Unix.

DEFLATE — это способ сжатия, сочетающий алгоритм LZ77 (Lempel-Ziv 1977) и кодирование Хаффмана. LZ77 ищет повторяющиеся данные, находит совпадающие строки и заменяет их кодами. Кодирование Хаффмана сжимает данные, назначая самые короткие битовые коды с учётом того, как часто встречается каждый символ.

Gzip сжимает данные методом DEFLATE и, используя заголовок ‘Accept-Encoding: gzip’ в HTTP-запросах и ответах, выполняет сжатие только тогда, когда клиент поддерживает Gzip. Благодаря такому сжатию данных сайт загружается быстрее.

3️⃣ Что такое сжатие Brotli?

Сжатие Brotli разработали в 2013 году сотрудники Google Jyrki Alakuijala и Zoltán Szabadka.

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

Brotli использует те же две ключевые базовые технологии, что и сжатие GZIP: LZ77 и кодирование Хаффмана.

4️⃣ Сжатие Gzip vs Brotli

Gzip сжимает (& распаковывает) данные методом DEFLATE, а Brotli — собственным форматом, в котором к LZ77 и кодированию Хаффмана добавлено контекстное моделирование.

• Gzip сжимает быстрее, чем Brotli.
• Brotli разработан специально для веба.
• Brotli даёт лучшую степень сжатия (то есть создаёт сжатые файлы меньшего размера) на любом уровне сжатия.
• По сравнению с Gzip Brotli лучше сжимает три типа файлов: HTML — на 21%, CSS — на 17%, JavaScript — на 14%.

Всё больше веб-серверов предпочитают Brotli, а не Gzip. Поскольку Brotli рассчитан на сжатие потоков на лету, общая скорость распаковки на фронтенде, как считается, до 64% выше, чем у Gzip.

RFC 1952, вышедший в мае 1996 года, описывает формат Gzip так: он использует метод сжатия DEFLATE и содержит значение CRC для проверки повреждения данных. В конце сжатых данных записываются значение CRC-32 и размер исходных данных.

RFC 7932, вышедший в июле 2016 года, указывает, что Brotli сжимает данные, сочетая алгоритм LZ77 и кодирование Хаффмана. При этом он выбирает коды Хаффмана, используя в качестве контекста два предыдущих байта несжатых данных, а вместо повторяющихся строк может ссылаться на слова из статического словаря размером 122 784 байта.

В заголовке ответа эти форматы обозначаются как [Content-Encoding: gzip] и [Content-Encoding: br]. Значение [br] зарегистрировано в RFC 7932 как кодирование содержимого HTTP.

5️⃣ Замеры сжатия Gzip и Brotli: сервер Nginx + Apache

На сервере WordPress, где Nginx и Apache работают вместе, сравнили ответы для одной и той же записи, CSS-файла стандартных блоков WordPress и файла jQuery, меняя только заголовок запроса. Запросы только с gzip в [Accept-Encoding], только с br и без заголовка отправили через curl с того же сервера.

for ae in gzip br ''; do echo == ${ae:-none}; curl -s -o /dev/null -D - -w 'size: %{size_download}\n' -H Accept-Encoding:$ae https://example.com/hello-world/ | grep -i -E '^(content-encoding|size)'; done

== gzip
content-encoding: gzip
size: 21390
== br
content-encoding: br
size: 20190
== none
size: 90833

HTML одной записи на запрос gzip сжался до 21 390 байт, на запрос br — до 20 190 байт, а на запрос без заголовка пришёл несжатый ответ размером 90 833 байта. Ответ br оказался на 1 200 байт (5,6%) меньше, чем gzip.

for f in wp-includes/css/dist/block-library/style.min.css wp-includes/js/jquery/jquery.min.js; do for ae in gzip br ''; do echo == ${f##*/} ${ae:-none}; curl -s -o /dev/null -D - -w 'size: %{size_download}\n' -H Accept-Encoding:$ae https://example.com/$f | grep -i -E '^(content-encoding|size)'; done; done

== style.min.css gzip
content-encoding: gzip
size: 19655
== style.min.css br
size: 140829
== style.min.css none
size: 140829
== jquery.min.js gzip
content-encoding: gzip
size: 30633
== jquery.min.js br
size: 87553
== jquery.min.js none
size: 87553

На запрос gzip CSS-файл сжался до 19 655 байт, а файл jQuery — до 30 633 байт. При запросе только br или без заголовка сервер вернул оригиналы размером 140 829 и 87 553 байта как есть, без заголовка [Content-Encoding].

nginx -V 2>&1 | grep -c brotli

0

httpd -M 2>/dev/null | grep -E 'brotli|deflate'

 deflate_module (shared)
 brotli_module (shared)

Статические файлы вроде CSS и JS Nginx отдаёт и сжимает сам, а в Nginx этой конфигурации нет модуля Brotli, поэтому он сжимает только методом gzip.

HTML формирует WordPress в ответ на запрос, который Nginx передаёт Apache, а сжимает его Apache. В Apache есть и модуль Brotli, и модуль [mod_deflate], который отвечает за сжатие Gzip.

for f in hello-world/ wp-includes/css/dist/block-library/style.min.css wp-includes/js/jquery/jquery.min.js; do echo == $f; curl -s -o /dev/null -D - -w 'size: %{size_download}\n' -H 'Accept-Encoding: gzip, deflate, br, zstd' https://example.com/$f | grep -i -E '^(content-encoding|size)'; done

== hello-world/
content-encoding: gzip
size: 21390
== wp-includes/css/dist/block-library/style.min.css
content-encoding: gzip
size: 19655
== wp-includes/js/jquery/jquery.min.js
content-encoding: gzip
size: 30633

Наличие модуля Brotli на сервере ещё не означает, что браузер получит ответ, сжатый Brotli. При запросе с [gzip, deflate, br, zstd] — тем же значением, которое отправляет Edge 155, — Apache тоже сжал HTML методом gzip, и все три файла пришли в gzip.

Даже если поставить br перед gzip или пометить br как приоритетный, как в [br;q=1.0, gzip;q=0.5], HTML приходил в gzip. Когда ту же запись и два файла открыли в Edge, всё тоже было передано в gzip.

Время до первого байта — это медиана значений curl [time_starttransfer], измеренных по 40 раз в перемешанном порядке запросов; для каждого запроса открывалось новое соединение, поэтому в него входит и время установки TLS-соединения. Для HTML несжатый ответ занял 22,7 мс, gzip — 26,3 мс, br — 26,5 мс, а запрос как у браузера — 25,0 мс. CSS и JS — 18–21 мс со сжатием и без него.

Скорость сжатия Gzip и Brotli здесь не измерялась, а сравнивалась по открытым источникам. В RFC 7932 указано, что Brotli сжимает со значительно более высокой степенью сжатия, чем программа gzip, и распаковывает намного быстрее, чем текущие реализации LZMA. Google в репозитории Brotli поясняет, что по скорости Brotli сопоставим с deflate, но сжимает плотнее.

В 2015 году Cloudflare испытала оба метода на 10 655 файлах HTML, CSS и JavaScript. Результат Brotli на максимальном качестве в среднем был в 1,19 раза меньше, чем у zlib на максимальном качестве, но скорость сжатия — 0,5 МБ в секунду — оказалась намного ниже, чем 41,9 МБ у zlib на уровне 9. Brotli на уровне 4 давал степень сжатия, сравнимую с zlib на уровне 8, и в среднем по всем файлам был немного быстрее, но на файлах меньше 64 КБ — в 1,48 раза медленнее.

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

🔢 FAQ & рекомендуемые материалы

ℹ️ О партнёрских ссылках
Материалы этого сайта содержат партнёрские ссылки. Если посетитель покупает товар или услугу по такой ссылке, сайт получает комиссию от продавца. При этом сумма, которую платит покупатель ^{(при акционных скидках сумма снижается ↓)}, не увеличивается. Указанные цены, скидки и наличие актуальны на момент написания и могут отличаться, поэтому перед покупкой уточняйте их у продавца. Товары выбираются и оцениваются по нашим собственным критериям, а комиссия не влияет ни на порядок, ни на содержание обзоров.