Дарим 10 шоперов

в нашем Telegram

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

Настройка сжатия 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 | Обновлено: 15.03.2024

Что такое PIN-код поддержки в HostPro?

Что такое PIN-код поддержки в HostPro?

Когда вы обращаетесь в службу поддержки HostPro, нам может потребоваться подтвердить вашу учетную запись,...

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

Как добавить фавикон на WordPress сайт

Как добавить фавикон на WordPress сайт

В этой статье мы рассмотрим самую актуальную информацию, по состоянию на начало 2024 года,...

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

Как установить WP-CLI. Шпаргалка с основными командами

Как установить WP-CLI. Шпаргалка с основными командами

WP-CLI (WP Command Line Interface) – утилита для работы с сайтами на WordPress, которая...

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