Что такое Gzip, Brotli сжатие и как его включить, проверить?

В этой записи мы узнаем что такое Gzip и Brotli сжатие, как проверить работает ли оно на сайте или в  браузере и как его включить?

Браузеры умеют получать HTML-странички в сжатом виде, это сжатие называется "gzip". Сжатие никак не влияет на внешний вид сайта, но при этом количество передаваемого трафика сильно уменьшается. Сжимается только текст.

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

Узнать, поддерживает ли браузер сжатый контент можно по ссылке: http://www.whatsmyip.org/http-compression-test/

Зеленая галочка возле текста "YES, your browser is requesting compressed content" - сообщает что браузер поддерживает сжатие, в иных случаях - у вас что-то где-то не так настроено. У меня, к примеру, на работе gzip было отключено на уровне нашего прокси-firewall'a. Если браузер сжатие не поддерживает, то сервер сайта будет посылать не сжатые странички.

GZIP сжимает только текст. Видео, музыка, архивы, изображения  и остальные не текстовые данные не сжимаются.

Как включить gzip сжатие

Помимо поддержки gzip-сжатия браузером, его должен поддерживать и сам сайт.

За сжатие в apache отвечает модуль deflate_module. Он по умолчанию включен.

Включить Gzip можно при помощи:

• плагинов CMS
• Файла .htaccess
• Конфигурации веб-сервера

В WordPress сделать это можно с помощью плагинов кэширования, например: WP Super Cache или W3 Total Cache 

.htaccess

Включить gzip сжатие можно и самому, без каких-либо плагинов, для этого нужно добавить в файл .htaccess один из следующих кодов:

# compress text, html, javascript, css, xml:AddOutputFilterByType 
DEFLATE text/plainAddOutputFilterByType
DEFLATE text/htmlAddOutputFilterByType
DEFLATE text/xmlAddOutputFilterByType
DEFLATE text/cssAddOutputFilterByType
DEFLATE application/xmlAddOutputFilterByType
DEFLATE application/xhtml+xmlAddOutputFilterByType
DEFLATE application/rss+xmlAddOutputFilterByType
DEFLATE application/javascriptAddOutputFilterByType
DEFLATE application/x-javascript

# Or, compress certain file types by extension:
SetOutputFilter DEFLATE

Или

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
</IfModule>

На основе расширений файлов: 

<IfModule mod_deflate.c>
    <filesMatch "\.(js|css|html|php)$">
        SetOutputFilter DEFLATE
    </filesMatch>
</IfModule>

Или на основе Mime-заголовков:

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>

Если в веб-сервере используется модуль mod_gzip, вместо mod_deflate, то в .htaccess пропишите код:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
</ifModule>

NGINX

Для настройки gzip в веб-сервере NGINX пропишите в конфиг-файле:

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

Тестирование GZIP

Проверить включен ли на сайте gzip при помощи сайтов:

• www.whatsmyip.org/http-compression-test/
• varvy.com/tools/gzip
• gidnetwork.com/tools/gzip-test.php - этот ресурс проверил включен ли gzip на сайте, который доступен по ip с самоподписанным сертификатом.

Проверка через просмотр заголовков в браузере:

Включен ли gzip можно проверить и без помощи сторонних сайтов, достаточно в браузере chrome, в инструментах разработчика перейти на вкладку Network, кликнуть по файлу, сжатие которого хотим проверить и на вкладке headers найти строку "content-encoding: gzip":

Или в Firefox:

Проверка через просмотр включенных модулей на веб-сервере

Проверить действительно ли включен deflate можно при помощи команды в консоли :

• CentOS: httpd -t -D DUMP_MODULES
• debian / ubuntu: apache2ctl -t -D DUMP_MODULES

Ищите в ответе строку содержащую "deflate_module"

Brotli

Brotli — алгоритм сжатия данных основанный на современном варианте алгоритма LZ77. Brotli был разработан Google в 2015 году для сжатия веб-шрифтов. После была разработана версия Brotli, которая может использоваться для сжатия всего интернет-трафика (HTML, CSS, JS). Brotli более эффективен чем gzip.

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

Brotli использует свой словарь из почти 100 тысяч фраз и кусочков слов, которые чаще всего употребляются в Интернете. Словарь применяется как основа для поточного сжатия данных (как в LZ-кодировании), но не исключает добавление новых строк, найденных в сжимаемом тексте.

Фактически, в браузеры, поддерживающие brotli, уже встроен почти весь словарь, используемый при сжатии данных, и он в архиве не передается. За счет этого достигается выигрыш в размере архивов.

Максимальная степень сжатия — 11 — дает на 25% меньший размер файла в сравнении с gzip-9

На данный момент (2017.03.10) нет официального модуля для поддержки Brotli в Nginx. Поэтому для его включения придется пересобрать Nginx.

Полезные ссылки связанные с Brotli:

• caniuse.com/#feat=brotli - какие браузеры поддерживают brotli
• Хабр: Внедряем Brotli с помощью Nginx — экономим байты почти бесплатно
• Включаем поддержку Brotli в Nginx
• Static site implosion with Brotli and Gzip
• Методы сжатия данных в Сети: zopfli, brotli, sdch
• tools.keycdn.com/brotli-test - проверяет доступно ли на сайте brotli-сжатие