Настройка сжатия Gzip

post thumbnail

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

Данная функция не всегда работает на практике (некоторые типы файлов сжимаются лучше чем другие), так файлы .jpeg или .png в исходном виде сжатые, поэтому их сжатия и уменьшения размера не происходит. Тогда как текстовые файлы можно уменьшить почти вдвое.

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

В данном гайде рассмотрим как настроить Nginx и использовать сжатие файлов для ускорения страниц веб-сайта с помощью gzip.

ШАГ 1 — Тест работы программы сжатия файлов

Для начала создадим пару файлов в дефолтном каталоге Nginx для тестирования сжатия файлов с помощью gzip.

Nginx для определения типа файла распознает его расширение, определяя MIME-тип (отвечает за назначение файла), поскольку это быстрее способ чем анализ содержимого файла.

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

Для тестирования создаем файл test.html (HTML-страница) в каталоге Nginx по умолчанию, используя truncate, размер которого 1 кб чтобы сжатие было незаметным.

truncate -s 1k /var/www/html/test.html

Проделаем ту же манипуляцию и проверку для файлов форматов .jpg, .css и .js.

truncate -s 1k /var/www/html/test.jpg

truncate -s 1k /var/www/html/test.css

truncate -s 1k /var/www/html/test.js

ШАГ 2 — Тестирование стандартного поведения сервера при работе с .html файлом

Веб-сервер Nginx отдает сжатый файл в ответ на запрос с заголовком HTTP (Accept-Encoding: gzip)

curl -H "Accept-Encoding: gzip" -I http://localhost/test.html

вы получите ответ сервера, который свидетельствует о том, что для отправки этого файла использовалось сжатие:

HTTP/1.1 200 OK
Server: nginx/1.14.0 (Ubuntu)
Date: Sat, 18 Jul 2020 13:12:13 GMT
Content-Type: text/html
Last-Modified: Sat, 18 Jul 2020 13:11:57 GMT
Connection: keep-alive
Content-Encoding: gzip

В настройках по умолчанию веб-сервера Nginx прописана поддержка сжатия формата .html, другие расширения обслуживаются в исходном размере.
Проверить это можно в файле test.jpg

curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg

Получаем вывод:

HTTP/1.1 200 OK
Server: nginx/1.14.0 (Ubuntu)
Date: Sat, 18 Jul 2020 13:12:41 GMT
Content-Type: image/jpeg
Content-Length: 0
Last-Modified: Sat, 18 Jul 2020 13:12:01 GMT
Connection: keep-alive
ETag: "569e973e-0"
Accept-Ranges: bytes

В выводе отсутствует Content-Encoding: gzip заголовок, то есть файл отдается без сжатия.
Удостоверимся также на формате .css:

curl -H "Accept-Encoding: gzip" -I http://localhost/test.css

получаем такой же результат в выводе, с отсутствием в заголовке Content-Encoding: gzip

HTTP/1.1 200 OK
Server: nginx/1.14.0 (Ubuntu)
Date: Sat, 18 Jul 2020 13:12:51 GMT
Content-Type: text/css
Content-Length: 0
Last-Modified: Sat, 18 Jul 2020 13:12:04 GMT
Connection: keep-alive
ETag: "569e9a91-0"
Accept-Ranges: bytes

Далее настроим Nginx для обслуживания всех форматов файлов.

ШАГ 3 — Настройка параметров gzip в Nginx

Изменяем gzip конфигурацию, внося коррективы в файл конфигурации

vim /etc/nginx/nginx.conf

:

. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";

# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
. . .

раскомментируем строки (стерев #) для активации дополнительных настроек.
Ограничим сжатие для файлов меньше 256 байт (которые не выигрывают от сжатия, а как мы уже знаем, само сжатие потребляет значительные ресурсы). Для этого добавим директиву

gzip_min_length 256

Добавим в gzip_types директиву с дополнительными типами файлов, обозначающими веб-шрифты, .ico значки и изображения .svg.

После внесенных изменений раздел настроек /etc/nginx/nginx.conf будет вида:

. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
. . .

Сохраняем и закрываем файл.

После закрытия проверяем корректность синтаксиса конфигурационного файла:

nginx -t

Если проверка прошла успешно, то выполняем перезагрузку Nginx, чтобы изменения применились.

systemctl restart nginx.service

ШАГ 4 — Тестирование обновленной конфигурации

Можно проверить используя curl каждый из тестовых файлов и проверяя вывод Content-Encoding: gzip заголовка.

curl -H "Accept-Encoding: gzip" -I http://localhost/test.html

curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg

curl -H "Accept-Encoding: gzip" -I http://localhost/test.css

curl -H "Accept-Encoding: gzip" -I http://localhost/test.js

Согласно внесенным правкам, исключено сжатие только для расширения.jpg. Для других типов файлов сжатие активно, о чём будет свидетельствовать Content-Encoding: gzip заголовок в выводе. Если это так, вы успешно настроили gzip сжатие в Nginx.

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

Telegram Hostpro

Наш телеграм

с важными анонсами, розыгрышами и мемами

Присоединиться

Возможно, вас заинтересует

Как заменить все ссылки в файлах и базе данных сайта

Как заменить все ссылки в файлах и базе данных сайта

Эта статья является бонусной в цикле о борьбе со смешанным контентом при переводе сайта...

Diana Honcharenko | Обновлено: 10.04.2025

Установка и настройка локального веб-сервера MAMP на Windows

Установка и настройка локального веб-сервера MAMP на Windows

Локальная среда разработки – это незаменимый инструмент для любого веб-разработчика. Она позволяет тестировать сайты,...

Maryana Movchaniuk | Обновлено: 10.04.2025

Как создать сайт на BOLT NEW и загрузить его на хостинг

Как создать сайт на BOLT NEW и загрузить его на хостинг

Чтобы создать сайт, больше не нужно писать код и продумывать дизайн – ИИ-ассистенты могут...

Anastasiia Saksa | Обновлено: 10.04.2025

Установка и настройка локального веб-сервера WampServer на Windows

Установка и настройка локального веб-сервера WampServer на Windows

WAMP (Windows, Apache, MySQL, PHP) на Windows VPS – доступное и мощное решение для...

Maryana Movchaniuk | Обновлено: 10.04.2025