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

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

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

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

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

поддержка gzip сжатия браузером

Зеленая галочка возле текста "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 при помощи сайтов:

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

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

Проверка GZIP

Или в Firefox:

Проверка 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:

Понравилось? =) Поделись с друзьями:

Обсуждение записи “Что такое Gzip, Brotli сжатие и как его включить, проверить?”

  1. Николай says:

    СуПЕР!!

    Громадное СПАСИБО!!
    ЗАРАБОТАЛО!

  2. elimS (elims.org.ua) says:

    На здоровье =) +1 пункт к скорости сайта)

  3. Владимир Демянович (elims.org.ua) says:

    А файл header.php в своем шаблоне редактировали?

    У меня на сайте сейчас gzip-сжатие автоматически совершается за счет хостингового сервера nginx, потому мне даже эти действия, которые описаны в статье, не нужно совершать.

    Хостинг у меня: www.ukraine.com.ua/?page=107131 — рекомендую. У них есть тестовый период на неделю. Можете попробовать там развернуть тестовую версию сайта — если понравится, все заработает и цены устроят, можете подумать о смене хостера =)

  4. Гузель (guzelish.ru) says:

    Задействуйте Владимир.Хотела применить Gzip сжатие на своем блоге, но, к сожалению, не хватило мозгов. Нашла файл .htaccess , скопировала приведенный вами код,в режиме редактирования в .htaccess вставляю, проверяю на рекомендованном вами сайте — не сжато. Помогите, пожалуйста.

  5. Гузель (guzelish.ru) says:

    Извините, даже здравствуйте написала с ошибкой. Пошла отдыхать.

  6. Гузель (guzelish.ru) says:

    header.php не редактировала. Зато научилась восстанавливать .htaccess. Насчет смены хостинга подумаю, но позже. Моему блогу только 2 месяца. Я только учусь, правда очень медленно. Спасибо за ответ.

  7. Владимир Демянович (elims.org.ua) says:

    Гузель, ну если не редактировали, то скорее всего именно в этом и была проблема. Нужно одновременно и в htacces прописать код, и файл header.php подредактировать так, как описано в записи. Тогда должно заработать.

  8. Гузель (guzelish.ru) says:

    Владимир, файл header.php изменила. Проверяю — не сжато. Буду еще пробовать.

  9. Гузель (guzelish.ru) says:

    Ура! моя проблема благополучно разрешилась. Написала в службу поддержки хостинга, согласно моей заявке они подключили gzip сжатие. Всего делов-то, а я то подумала, что я полный неисправимый чайник. Я рада и счастлива, и вам того же желаю.
    Владимир, спасибо за помощь, за статью и быстрый ответ. До встречи на страницах вашего блога.

  10. Владимир Демянович (elims.org.ua) says:

    Поздравляю, Ваша целеустремленность дала свои результаты =) Ну а по поводу чайника — это точно не про Вас, человека который интересуется gzip-сжатием язык не поворачивается называть чайником =)

  11. Гузель (guzelish.ru) says:

    Спасибо на добром слове, крылья выросли.

  12. Валерия (chicaboom.com.ua) says:

    «Сжатие никак не влияет на внешний вид сайта, но при этом количество передаваемого трафика сильно уменьшается. Сжимается только текст.»

    Ну ну, не влияет. Включила сжатие, не загружаются страницы. Мозила пишет что не верный формат сжатия. Да и вообще как то странно. Когда на сайте Gzip сжатие было выключено, сервис whatsmyip.org говорит что сжатие включено и наоборот.

  13. Владимир Демянович (elims.org.ua) says:

    Валерия, на некоторых хостингах gzip включено по умолчанию, потому дополнительные действия по включению уже включенного gzip могут наоборот его поломать. На моем предыдущем хостинге gzip приходилось настраивать самому, на текущем — достаточно в панели управления хостингом поставить галочку, ходя до недавнего времени галочку не можно было ставить или снимать он по умолчанию был включен.

  14. Валерия (chicaboom.com.ua) says:

    а теперь понятно, спасибо за разъяснение. В настройках хостинга gzip сжатия не нашла, но по крайней мере теперь понятно где собака зарыта))

  15. Андрей says:

    Уважуха с большой буквы

  16. Александр (udvstudio.com) says:

    Добрый день. Занялся вопросами кэширования и сжатия файлов, после рекомендаций инструмента pagespeed.
    Пробовал плагины WP Super Cache, W3 Total Cash вставлял коды, которые указаны данной статье в файл .htaccess. В результате каждая проверка в pagespeed гсообщала, что кэширование и сжатие не включено. Попытка включить кэш с использование ода FileETag MTime Size и добавлением строки в файл header.php привела к тому, что сайт был не доступен. Подскажите, какие ещё есть варианты сжатия и кэширования для Вордпрес.

  17. Владимир Демянович (elims.org.ua) says:

    Добрый день Александр, я посмотрел какой метод gzip-сжатия используется на моем подблоге, который был создан относительно недавно — https://elims.org.ua/lifehack/ и обнаружил что ни в htaccess ни в коде темы, ни в плагинах оно не используется, при этом я тест успешно прохожу.
    Я использую плагин Hyper Cache Extended, который также имеет опцию сжатия, но мне, как админу он не должен отдавать сжатые закешированные страницы, потому я делаю предположение что за сжатие отвечает не этот плагин, а мой хостинг, возможно его nginx сервер или его pagespeed модуль, о своем хостинге я писал вот тут: https://elims.org.ua/blog/xosting-ukraine-obzor-i-otzyv/

  18. Наталья says:

    Плагин W3 Total Cache, а сжатие отсутствует. Что-то нужно настроить?

Обсудить