Сжатие Brotli: быстрая альтернатива сжатию GZIP

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

Это решение, разработанное Google, которое обеспечивает ряд преимуществ по сравнению со сжатием GZIP (а также альтернативой ему). Подробности в этой статье будут посвящены именно тому, что предлагает технология, но сжатие Brotli быстрое и эффективное, что соответствует всем требованиям, необходимым для его изучения.

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

Сжатие данных для Интернета

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

Распространенный подход — «минификация». Именно здесь алгоритм удаляет из кода вашего сайта некоторые лишние элементы. Идея состоит в том, что такие аспекты, как отступы, комментарии, пробелы и т. д., увеличат размер файла и, следовательно, время загрузки.

Удаление этих элементов не влияет на взаимодействие с пользователем (UX) в большинстве ситуаций. Тем не менее, это упрощает задачу для компьютеров, которые должны компилировать и отображать код. Например, возьмите этот набор кода:

 define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. */ require __DIR__ . '/wp-load.php'; require __DIR__ . '/wp-blog-header.php'; if ( ! is_multisite() ) { wp_redirect( wp_registration_url() ); die(); } $valid_error_codes = array( 'already_active', 'blog_taken' );

В приведенном выше коде используются такие элементы, как пробелы и возврат каретки, чтобы сделать его понятным для человека, но компьютеру они не нужны для понимания основного кода. Более того, эти наборы пробелов и разрывов строк будут занимать драгоценное место, удаление которого может повысить производительность.

Если свернуть этот код, он будет выглядеть совершенно иначе:

 define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. * / require __DIR__ . '/wp-load.php'; require __DIR__ . '/wp-blog-header.php'; if ( ! is_multisite() ) { wp_redirect( wp_registration_url() ); die(); } $valid_error_codes = array( 'already_active', 'blog_taken' );

Однако основы того, что делает этот код, остаются прежними.

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

Сжатие GZIP — это стандартный способ минимизировать размер пакетов файлов, таких как пакеты ZIP или Linux .tar . Но до сих пор не было реальных альтернатив. Подробнее о том, почему должна существовать альтернатива, мы поговорим позже, но сначала давайте познакомим вас с «конкурентом» GZIP.

Бротли Сжатие

В двух словах, Broti — это алгоритм сжатия данных. Однако, если это все, что мы должны сказать, не было бы причин исследовать это.

Он обеспечивает сжатие «без потерь» и разработан Google по лицензии MIT. Компания часто находится в авангарде веб-технологий, поэтому неудивительно, что Brotli стремится взять то, что делает GZIP, улучшить его и предложить расширенный опыт пользователям и сайтам.

Сжатие Brotli использует те же базовые технологии, что и сжатие GZIP, а именно:

• Алгоритм LZ77
• Кодирование и декодирование Хаффмана

Фактически, если вы объедините эти две технологии, вы получите формат DEFLATE , который служит основой для сжатия как GZIP, так и Brotli. Это то, что мы очень подробно рассматриваем в нашем посте о сжатии GZIP.

Короче говоря, несжатые файлы проходят через алгоритмы LZ77 и Хаффмана как часть процесса DEFLATE для их сжатия в формат Brotli. Оттуда процесс INFLATE снова распаковывает файлы, когда это необходимо.

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

Сжатие Brotli против сжатия GZIP

Как уже упоминалось, и Brotli, и GZIP используют метод DEFLATE для сжатия (и распаковки) данных. Это может сбить с толку многих людей, потому что само по себе это не гарантирует переключения.

Тем не менее, Google работает над DEFLATE , предлагая улучшенные методы и сжимая данные до более высокого и быстрого стандарта.

Как Brotli использует словари для улучшения сжатия данных

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

Разработчики будут использовать словарь пар ключ-значение для хранения данных, поскольку он эффективен, гибок и масштабируем. Вот как будет выглядеть словарь PHP (называемый «массивом»):

 $cats = get_categories( array( 'taxonomy' => 'link_category', 'hierarchical' => 0, 'include' => $link_cat, ) );

В то время как GZIP не использует словари, Brotli использует два файла .

Статический словарь Бротли

Первый — это статический (т. е. предопределенный) словарь общих терминов кода, который служит справочником для текста HTML, CSS и JavaScript.

Существует более 13 000 слов на шести разных языках, и Brotli будет использовать их в качестве ссылок на точки в коде. Это не точная аналогия, но она похожа на то, как хук WordPress ссылается на более крупный набор кода.

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

Вы также обнаружите, что в словаре есть фразы из реального мира, а также код, который не часто подвергается сжатию. Это помогает некоторым тегам, таким как <HTML> , и таким параметрам, как type="text/javascript" подвергаться некоторому сжатию и давать вам больше преимуществ.

В словаре также есть некоторые «преобразования»: неполные, неполные и другие типы словосочетаний, которые с новым префиксом, суффиксом или падежом становятся совершенно новым словом — например, «Работа» трансформируется в «Работа» или «html». » на «HTML».

Динамический словарь Бротли

Динамический словарь анализирует содержимое и код в источнике, что хорошо для небольших устройств, но не так хорошо для больших файлов. Оно также называется «скользящим окном» и может иметь размер до 16 МБ. Именно здесь алгоритм сжатия «кэширует» некоторые из самых последних данных, чтобы ссылаться на них. Он ультрадинамичный в том смысле, что он постоянно меняется.

Если вы сравните это со скользящим окном GZIP размером около 32 КБ, вы увидите, что возможности анализа и сжатия в реальном времени огромны. На самом деле, в большинстве типичных практик используется скользящее окно Brotli размером около 4 МБ, что по-прежнему гигантски по сравнению с конкурирующими алгоритмами.

Сравнение Brotli Compression и GZIP Compression: производительность и поддержка

Когда дело доходит до количества пользователей, сжатие GZIP по-прежнему остается номером один. Однако сжатие Brotli с каждым днем ​​находит все большее применение. Отчасти это связано с более широкими адаптационными мерами основных браузеров; появление браузеров на основе Chromium также помогает.

Веб-сайт Can I Use… записывает, какие технологии используют браузеры, и предоставляет своего рода историю. Этот сайт отмечает, что более 95% браузеров используют сжатие Brotli на момент написания, включая все основные версии.

В нашей статье о сжатии GZIP мы отметили тест производительности, в котором Brotli имел лучшую степень сжатия по сравнению с конкурирующими алгоритмами, но отставал по времени сжатия и распаковки:

Однако тесты Squash Benchmark показывают другую историю — более тонкую. Реальный вывод заключается в том, что в целом Brotli более гибок, чем GZIP, с более высокой степенью сжатия.

Вот краткое изложение выводов Squash Benchmarks:

• Brotli имеет лучшую степень сжатия (т. е. он создает сжатые файлы меньшего размера) на каждом уровне сжатия.
• Хотя GZIP в большинстве случаев превосходит Brotli по скорости, уровень сжатия влияет на результаты, которые вы увидите.

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

Также учтите, что некоторые инструменты тестирования, такие как Pingdom и некоторые сети доставки контента (CDN), пока не поддерживают Brotli. Это может исказить данные о том, как работает Brotli, которые собирают другие. Вы можете увидеть «ложноотрицательные результаты», если запустите тесты: более высокие показатели скорости страницы, которые игнорируют используемое вами сжатие файлов.

Преимущества сжатия Brotli

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

1. Он использует ту же технологию, что и GZIP, но дополняет ее современными методами.
2. Анализ Brotli на основе словаря означает, что он может сжимать больше ваших файлов на более глубоком уровне.
3. Хотя Brotli требует большей вычислительной мощности по сравнению с GZIP, результаты означают меньшие файлы.
4. На уровнях сжатия, используемых большинством веб-хостов — что-то среднее, например, уровень четыре или пять — Brotli работает лучше, чем GZIP, не вспотев.
5. Вы обнаружите, что Brotli имеет почти универсальную поддержку во всех браузерах, если не некоторые инструменты тестирования, к которым вы привыкли.
6. Brotli бесплатна для использования и имеет открытый исходный код. Это преимущество, если вы используете совместимую с Broti CDN, например Cloudflare.

Стоит отметить, что Cloudflare использует сжатие Brotli на всех своих серверах. Фактически, он использует модифицированную и оптимизированную версию Brotli, чтобы дать вам дополнительные преимущества в отношении скорости и доставки файлов.

Подпишитесь на рассылку новостей

Хотите знать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к более чем 20 000 других пользователей, которые получают нашу еженедельную рассылку с советами по WordPress, посвященными инсайдерской информации!

Подпишись сейчас

Поскольку Kinsta предлагает интеграцию с Cloudflare во всех планах, каждый размещенный сайт использует Brotli по умолчанию. Это лишь одна из причин, по которой Kinsta является одним из ведущих и лучших хостинг-провайдеров.

Как проверить, использует ли ваш сайт сжатие Brotli

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

1. Используйте онлайн-инструмент

Самый простой способ проверить, использует ли ваш сайт сжатие Brotli, — воспользоваться онлайн-инструментом. Хотя есть несколько на выбор, вам понадобится что-то быстрое и простое в использовании, которое также даст вам кучу информации о вашей настройке.

Мы выбрали Gift of Speed ​​для проверки сжатия Brotli.

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

Существует множество элементов, из которых состоит веб-сайт, и даже сторонние библиотеки и зависимости. Вы можете обслуживать их с помощью CDN, и если это так, для достижения наилучшей производительности также необходимо использовать сжатие Brotli.

Если вы используете Gift Of Speed ​​для тестирования отдельных активов, вы можете взглянуть на значение сервера, чтобы увидеть, как оно обслуживается.

Все сайты Kinsta используют CDN Kinsta на базе Cloudflare. Таким образом, каждый сайт также будет использовать сжатие Brotli во всей цепочке и архитектуре сервера.

2. Проверьте с помощью инструментов разработчика вашего браузера

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

Для всех основных браузеров, таких как Brave, Edge, Firefox или Chrome, вы можете перейти на экран « Сеть» > « Все ».

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

Здесь прокрутите вывод вниз, пока не увидите строку content-encoding: br :

Вкратце: если вы видите content-encoding: br , это говорит о том, что Brotli активен для этого сайта.

Как включить сжатие Brotli для вашего сайта

В этих последних нескольких разделах мы покажем вам несколько различных способов включения сжатия Brotli для вашего сайта. Первым будет подход, который мы рекомендуем для большинства сайтов WordPress, не использующих Kinsta, а последний — это то, что мы рекомендуем для каждого сайта, читающего первый подход!

1. Используйте плагин WordPress

Почти каждый сайт WordPress будет использовать по крайней мере один плагин — часто больше, в зависимости от функциональности, необходимой сайту. Кэширование — это один из вариантов использования плагинов, а их очень много. Однако не все позволят вам включить сжатие Brotli, поэтому вам нужно будет сделать правильный выбор и быть готовым сменить предпочтительное решение.

Прежде чем вносить какие-либо изменения в сайт, не забудьте сделать полную резервную копию на случай, если вам понадобится восстановить ее позже. Для этого метода мы будем использовать W3 Total Cache, потому что найти правильную настройку несложно.

Вам нужно перейти на страницу Performance > Browser Cache в WordPress:

На этом экране показаны две настройки. Вам нужно выбрать Enable HTTP (brotli) Compression :

Однако это не будет подходящим для каждого сайта и ситуации. Например, Kinsta оптимизирует свой сервер для быстрого, высокопроизводительного и надежного хостинга. Таким образом, есть ряд плагинов, которые вам не понадобятся, а некоторые другие даже запрещены к использованию на сайтах Kinsta.

В этих случаях вы захотите использовать другой подход.

2. Включите Brotli на сервере

Когда дело доходит до выбора типа сервера, Nginx против Apache — это давняя битва, в которой (на данный момент) побеждает первый. Несмотря на это, оба типа серверов могут включать сжатие Brotli, и для каждого из них существуют разные подходы.

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

• Вы захотите понять, как получить доступ к файлам конфигурации для вашего конкретного сервера.
• Знание командной строки будет полезно, особенно когда речь идет о серверах Apache. Чтобы запускать любые команды, вам нужно быть пользователем root с привилегиями sudo .
• Вам может понадобиться текстовый редактор, но для быстрых изменений, подобных этому, вам должно хватить.
• В некоторых случаях вам потребуются учетные данные для входа в качестве пользователя защищенной оболочки (SSH) на самом сервере. Вы можете найти их в панели управления хостингом или обратиться в службу поддержки.

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

Nginx

Чтобы включить сжатие Brotli на серверах Nginx, вам сначала нужно найти файл nginx.conf . Это будет одна из нескольких локаций:

• /usr/local/nginx/conf
• /etc/nginx
• /usr/local/etc/nginx

Когда вы откроете файл, добавьте следующее внизу:

 brotli on; brotli_static on; brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance. brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;

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

Апачи

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

Для этого выполните следующие действия:

1. Войдите на свой сервер, используя командную строку или приложение терминала, как пользователь root sudo .
2. Запустите команду a2enmod brotli , чтобы включить сжатие.
3. В конфигурации Apache VirtualHost или вашего сервера добавьте AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript , чтобы задать правильные типы файлов, которые вы хотите сжать.

Хотя Apache не поддерживает статическое сжатие, вы можете изменить предлагаемый уровень сжатия Brotli, используя BrotliCompressionQuality LEVEL-NUMBER . Однако вам нужно будет заменить заполнитель «НОМЕР УРОВНЯ» числом от 1 до 11.

3. Используйте поддерживающий веб-хостинг

Самый простой способ включить сжатие Brotli для вашего сайта — убедиться, что ваш хост делает это по умолчанию. Kinsta предлагает стандартное сжатие Brotli благодаря интеграции с CDN Cloudflare.

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

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

Резюме

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

Типичным подходом до сих пор был GZIP, но на блоке появился новичок.

Сжатие Brotli основывает свою технологию на том же фундаменте, что и GZIP, но включает в себя некоторые преимущества, повышающие производительность. Как мы уже говорили, он использует сопоставление контекста для более быстрой обработки запроса на сжатие и словарь, который использует динамическое заполнение. Это намного больше, чем то, что может предложить GZIP, а также позволяет мобильным пользователям воспользоваться сжатием.

Хорошей новостью является то, что каждый сайт Kinsta может извлечь выгоду из сжатия Brotli благодаря нашей уникальной интеграции с Cloudflare. Это означает, что ваш сайт, размещенный на Kinsta, работает быстрее, чем у конкурентов, использующих GZIP, и быстро загружается на устройствах меньшего размера.

У вас есть вопросы о сжатии Brotli? Не стесняйтесь спрашивать в разделе комментариев ниже!