Несмотря на то, что средняя скорость Интернета в мире растет, пользователи с медленным, ограниченным или ненадежным доступом в Интернет часто вынуждены ждать. Вопрос в том, как сохранить скорость работы веб-сайтов, даже если они становятся все больше и больше? Один из ответов - сжатие данных с помощью gzip. Хорошая новость заключается в том, что его легко включить, и он поможет мгновенно увеличить скорость вашего сайта. Мы покажем вам, как это сделать.
Что такое gzip?
Gzip - это алгоритм сжатия данных, способный быстро сжимать и распаковывать файлы. Это название также относится к двум другим технологиям: программному обеспечению, используемому для сжатия и распаковки файлов, и формату, в котором эти файлы хранятся. Gzip может сжимать файлы практически любого типа, от обычного текста до изображений, и достаточно быстр для сжатия и распаковки данных "на лету".
Использование gzip в Интернете
Веб-серверы используют gzip для уменьшения общего объема данных, передаваемых клиентам. Когда браузер с поддержкой gzip отправляет запрос, он добавляет "gzip" в заголовок Accept-Encoding. Когда веб-сервер получает запрос, он генерирует ответ как обычно, а затем проверяет заголовок Accept-Encoding, чтобы определить, как закодировать ответ. Если сервер поддерживает gzip, он использует gzip для сжатия каждого ресурса. Затем он передает сжатые копии каждого ресурса с добавленным заголовком Content-Encoding, указывающим, что ресурс закодирован с помощью gzip. Затем браузер распаковывает содержимое в исходную несжатую версию перед тем, как отобразить ее пользователю.
Однако за это приходится платить. Сжатие - это процесс, требующий больших затрат процессора, и чем больше вы сжимаете файл, тем больше времени это занимает. В связи с этим gzip предлагает ряд уровней сжатия от 1 до 9; 1 обеспечивает самую высокую скорость сжатия, но с меньшим коэффициентом, а 9 - самый высокий коэффициент сжатия, но с меньшей скоростью. Приложение gzip по умолчанию использует уровень 6, отдавая предпочтение более высокой степени сжатия перед скоростью. Nginx, с другой стороны, использует уровень 1, отдавая предпочтение более высокой скорости, а не экономии размера файла.
75% веб-сайтов и почти все современные браузеры и веб-серверы поддерживают gzip. Весь процесс прозрачен для пользователя, достаточно быстр, чтобы работать практически на любом устройстве, и в некоторых случаях может уменьшить размер ресурса на 72%.
Добавление gzip на ваш сайт
Существует два способа сжатия веб-контента: динамическое и статическое. Динамическое сжатие сжимает файлы, когда они запрашиваются пользователем, и является стандартным подходом, используемым большинством веб-серверов. Динамическое сжатие полезно для содержимого, которое часто меняется, например, для веб-страниц, создаваемых приложениями.
С другой стороны, статическое сжатие сжимает каждый файл заранее и предоставляет эту предварительно сжатую версию при запросе исходного файла. Файлы, которые не меняются часто - такие как JavaScript, CSS, шрифты и изображения - получают наибольшую выгоду от статического сжатия, поскольку их нужно сжимать только один раз. Это экономит процессорное время за счет более длительного развертывания.
Nginx
Nginx поддерживает gzip с помощью модуля ngx_http_gzip_module.
Динамическое сжатие
Чтобы включить динамическое сжатие, просто добавьте gzip on; в блок глобальной конфигурации, конфигурации сайта или местоположения. Модуль gzip поддерживает ряд различных конфигураций, включая тип файлов для сжатия, уровень сжатия и поведение проксирования. Вы также можете задать минимально необходимый размер файла, что позволяет избежать более низких коэффициентов сжатия или даже больших размеров файлов для файлов меньшего размера.
Например, следующая команда сжимает HTML, CSS и JS файлы размером более 1,4 КБ, используя уровень сжатия 6, при этом разрешая сжатие для всех проксированных запросов:
| 1 2 3 4 | gzip_types text/html text/css application/javascript; gzip_min_length 1400; gzip_comp_level 6; gzip_proxied any; |
Предотвращение сжатия определенных типов файлов
Некоторые форматы файлов - в частности, форматы изображений, такие как JPG, PNG и GIF - уже сжаты с помощью собственных алгоритмов. Это также справедливо для многих аудио- и видеоформатов. Они не только не выиграют от gzip, но их размеры могут увеличиться. Именно поэтому gzip_types ограничен только текстовыми файлами, так как они больше всего выигрывают от сжатия.
Поддержка прокси-серверов
В некоторых случаях прокси-серверы (например, сети доставки контента) могут мешать доставке gzip-содержимого. Некоторые прокси-серверы могут кэшировать gzip-ресурсы без кэширования их Content-Encoding или даже пытаться повторно сжать сжатое содержимое. Заголовок ответа Vary HTTP определяет, как прокси и кэши обрабатывают сжатое содержимое, и должен быть включен независимо от того, включено ли динамическое или статическое сжатие. Вы можете сделать это, добавив gzip_vary on; в свою конфигурацию.
Статическое сжатие
Статическое сжатие доступно через модуль ngx_http_gzip_static_module. Этот модуль не собран по умолчанию, поэтому вам нужно собрать Nginx с параметром --with-http_gzip_static_module.
После сборки вы можете включить его, используя gzip_static on; вместо gzip on; в вашей конфигурации.
Прежде чем использовать статическое сжатие, необходимо создать gzip-копию каждого файла, который вы хотите обслуживать. Когда клиент запрашивает оригинальный файл, Nginx проверяет, доступна ли сжатая версия, добавляя ".gz" к оригинальному имени файла. Если сжатая версия недоступна или если клиент не поддерживает gzip, Nginx передает несжатую версию.
Apache
Apache поддерживает gzip через модуль mod_deflate. Чтобы загрузить плагин, добавьте следующую строку в конфигурационный файл Apache:
| 1 | LoadModule deflate_module modules/mod_deflate.so |
Динамическое сжатие
Чтобы включить динамическое сжатие, добавьте SetOutputFilter DEFLATE в раздел, который вы хотите настроить. Как и в случае с Nginx, вы можете включить gzip для всего веб-сервера или для определенного блока конфигурации.
Apache также поддерживает сжатие для определенных типов файлов, установку уровней сжатия и управление настройками прокси. Например, вы можете ограничить сжатие только HTML-файлами с помощью директивы AddOutputFilterByType:
| 1 2 | # Сжимает только файлы HTML и XML AddOutputFilterByType DEFLATE text/html |
Кроме того, вы можете сжать все типы файлов, кроме определенных, используя директиву SetEnvIfNoCase:
| 1 2 | # Сжимает все типы файлов, кроме GIF, JPG/JPEG и PNG SetEnvIfNoCase Request_URI "\.(?:gif|jpe?g|png)$" no-gzip |
Вы можете узнать больше об опциях mod_deflates в документации Apache.
Статическое сжатие
mod_deflate уже обеспечивает поддержку предварительно сжатых файлов. Однако для этого требуется дополнительная настройка с помощью mod_rewrite. Результат по сути тот же, что и у Nginx: Apache добавляет ".gz" к исходному имени файла, чтобы найти предварительно сжатую версию, и обслуживает ее, если она существует. В данном примере этот метод используется для передачи предварительно сжатых файлов CSS:
| 1 2 3 | RewriteCond "%{HTTP:Accept-encoding}" "gzip" RewriteCond "%{REQUEST_FILENAME}\.gz" -s RewriteRule "^(.*)\.css" "$1\.css\.gz" [QSA] |
Тестирование gzip с использованием статического и динамического сжатия
Чтобы показать разницу между сжатыми и несжатыми веб-сайтами, мы провели тест скорости страницы на сайте с тремя различными конфигурациями: с включенным сжатием, с полностью отключенным сжатием и с обслуживанием только предварительно сжатого контента.
Мы создали базовый веб-сайт с помощью Hugo и разместили его на экземпляре f1-micro Google Compute Engine под управлением Nginx версии 1.10.3 на Debian 9. Для версий с поддержкой gzip мы использовали настройки по умолчанию как для Nginx, так и для приложения командной строки gzip. Для теста статического сжатия мы сжимали только файлы CSS, шрифтов и JavaScript.
Для проведения теста мы использовали повторяющуюся проверку скорости страниц, которая проводилась каждые 30 минут. После четырех запусков мы перенастроили и перезапустили сервер Nginx для следующего теста. Мы отказались от первого запуска, чтобы дать время серверу Nginx прогреться. Затем мы усреднили оставшиеся результаты и сделали скриншот временной шкалы финального теста.
Поскольку пакет Debian Nginx не имеет встроенной поддержки статического сжатия, мы собрали Nginx из исходников Debian с включённым модулем. Мы проверили, что Nginx использует статическое сжатие, а не динамическое, с помощью strace, чтобы увидеть, к каким файлам осуществляется доступ:
| 1 2 3 4 5 6 | strace -p 2>&1 | grep gz [pid 4523] open("/var/www/html/css/bootstrap.min.css.gz", O_RDONLY|O_NONBLOCK) = 8 [pid 4523] open("/var/www/html/css/font-awesome.css.gz", O_RDONLY|O_NONBLOCK) = 8 [pid 4523] open("/var/www/html/css/custom.css.gz", O_RDONLY|O_NONBLOCK) = 8 [pid 4523] open("/var/www/html/js/jquery-1.11.3.min.js.gz", O_RDONLY|O_NONBLOCK) = 8 [pid 4523] open("/var/www/html/js/bootstrap.js.gz", O_RDONLY|O_NONBLOCK) = 8 |
Сжатие не включено
Без сжатия веб-сервер передал 445,57 КБ, а загрузка заняла 329 мс.
Размер типа содержимого:
HTML 5,15 КБ
Изображения 119.82 КБ
CSS 159.06 КБ
JavaScript 161,54 КБ
Итого 445.57 КБ
Динамическое сжатие включено
При динамическом сжатии веб-сервер передал 197,6 КБ, а загрузка заняла 281 мс. Наиболее значительная экономия была достигнута за счет файлов CSS и JavaScript, причем размер только файлов CSS уменьшился более чем на 130 КБ.
Размер типа содержимого:
HTML 2,01 КБ
Изображения 119,82 КБ
CSS 28,86 КБ
JavaScript 46,94 КБ
Всего 197.6 КБ
Включено статическое сжатие
При статическом сжатии веб-сервер передал 197,2 КБ, а загрузка заняла 287 мс.
Размер типа содержимого:
HTML 1,98 КБ
Изображения 119,85 КБ
CSS 28.63 КБ
JavaScript 46,57 КБ
Итого 197.2 КБ
Результаты
Как статическое, так и динамическое сжатие уменьшило размер нашего сайта на 77% и улучшило время загрузки страниц почти на 15%. Для некоторых файлов, таких как bootstrap.min.css, gzip уменьшил размер файла более чем на 83%. Хотя это был небольшой сайт с небольшим количеством оптимизаций, простое включение gzip на веб-сервере позволило значительно сократить время загрузки.
Тот факт, что статическое сжатие работает примерно так же, как и динамическое, также показывает, что для небольших сайтов затраты на динамическое сжатие системных ресурсов незначительны. Сайты с большими файлами и большим объемом трафика, скорее всего, будут испытывать более значительную нагрузку на процессор, и статическое сжатие принесет им больше пользы.
Заключение
Благодаря почти универсальной поддержке и простому процессу настройки, нет причин не использовать gzip на своих сайтах. Gzip - это быстрый и простой способ повысить скорость работы страниц, обеспечивая при этом высокое качество работы для ваших пользователей.