Black Friday! Дарим до 3 месяцев вашего тарифа VPS!

Подробнее

Настройка сжатия 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

Наш телеграм

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

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

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

Причины возникновения ошибки 502. Как ее исправить?

Причины возникновения ошибки 502. Как ее исправить?

Ошибки 5хх означают проблемы на стороне сервера. Если говорить конкретно об ошибке 502, то...

Ruslan Holovatiuk | Обновлено: 30.10.2024

Причины возникновения ошибки 403. Как исправить?

Причины возникновения ошибки 403. Как исправить?

Для большинства пользователей интернета не слишком принципиально, почему они не могут попасть на сайт....

Ruslan Holovatiuk | Обновлено: 23.10.2024

Причины возникновения ошибки 508. Как исправить?

Причины возникновения ошибки 508. Как исправить?

Ошибка 508: Resource Limit Is Reached обычно означает, что ваша учетная запись превысила назначенные...

Ruslan Holovatiuk | Обновлено: 15.10.2024

Как вставить картинку в HTML и оптимизировать ее для лучшего ранжирования в Google 

Как вставить картинку в HTML и оптимизировать ее для лучшего ранжирования в Google 

Согласитесь, визуальные эффекты играют важную роль в создании привлекательного и функционального интерфейса. В этой...

Hostpro Company | Обновлено: 26.09.2024