Настройка gzip на Nginx в Ubuntu 16.04

Published by Leave your thoughts

Скорость загрузки сайта зависит от размера всех файлов, которые нужно  загрузить браузеру. Уменьшив размер файлов, вы сможете значительно ускорить загрузку страницы.

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

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

Данное руководство поможет настроить Nginx для использования gzip.

Требования

1: Создание тестовых файлов

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

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

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

В данном примере настройки Nginx не будет сжимать совсем маленькие файлы. Создайте тестовый файл по имени test.html размером в 1 килобайт.

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

Затем создайте ещё несколько тестовых файлов: jpg, таблицу стилей css и JavaScript-файл js.

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

2: Проверка сжатия

Теперь нужно проверить, как Nginx сжимает файлы.

Попробуйте сжать тестовый HTML-файл test.html.

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

Примечание: HTTP-заголовок Accept-Encoding: gzip указывает, что веб-сервер может обслуживать сжатый при помощи gzip контент.

В ответ сервер вернёт несколько заголовков HTTP.

HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:04:12 GMT
Content-Type: text/html
Last-Modified: Tue, 04 Mar 2014 11:46:45 GMT
Connection: keep-alive
Content-Encoding: gzip

В последней строке вывода находится заголовок Content-Encoding: gzip; он сообщает, что для отправки этого файла было использовано сжатие gzip. В Ubuntu 16.04 веб-сервер Nginx по умолчанию поддерживает сжатие gzip, однако может сжимать только файлы HTML. Остальные файлы будут обслуживаться в несжатом виде. Чтобы убедиться в этом, запросите файл test.jpg:

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

Команда выведет:

HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:10:34 GMT
Content-Type: image/jpeg
Content-Length: 0
Last-Modified: Tue, 19 Jan 2016 20:06:22 GMT
Connection: keep-alive
ETag: "569e973e-0"
Accept-Ranges: bytes

Как видите, в этом выводе заголовка Content-Encoding: gzip нет; это значит, что файл не был сжат.

Повторите проверку для таблицы стилей CSS:

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

Как видите, сервер не сжимал этого файла:

HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:20:33 GMT
Content-Type: text/css
Content-Length: 0
Last-Modified: Tue, 19 Jan 2016 20:20:33 GMT
Connection: keep-alive
ETag: "569e9a91-0"
Accept-Ranges: bytes

3: Настройка gzip в Nginx

Теперь нужно настроить Nginx для сжатия не только HTML, но и других форматов.

Чтобы настроить gzip, откройте главный конфигурационный файл Nginx в текстовом редакторе:

sudo nano /etc/nginx/nginx.conf

Найдите раздел настроек для gzip:

. . .
##
# `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;
. . .

Директива gzip on указывает, что на данный момент сжатие gzip поддерживается. Теперь нужно внести поправки в настройки.

  • Чтобы активировать все дополнительные настройки, раскомментируйте все строки в данном разделе (удалите все символы # в начале строк).
  • Добавьте директиву gzip_min_length 256;. Теперь Nginx не будет сжимать файлы меньше 256 байт.
  • Добавьте директиву gzip_types и укажите дополнительные типы файлов (шрифты, ico, SVG).

В результате настройки будут выглядеть так.

. . .
##
# `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.

sudo systemctl reload nginx

4: Тестирование настройки

После этого Nginx нужно убедиться, что сервер работает должным образом.

Запросите тестовые файлы (как в разделе 2). Вывод должен содержать заголовок 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

Теперь несжатым останется только test.jpg, файл изображения.

Заключение

Настройка сжатия gzip на Nginx очень проста, однако даёт сайту множество преимуществ. Посетители и поисковые системы смогут загружать сайт гораздо быстрее.

Tags: , ,

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>