Повышение производительности сайта с помощью gzip и Nginx
General, LEMP Stack | Комментировать запись
Производительность сайта отчасти зависит от размера файлов, которые должен загрузить браузер посетителя. Уменьшив размер передаваемых файлов, вы можете сделать ваш сайт быстрее. Кроме того, это может удешевить ваш сайт для тех посетителей, которые платят за использование полосы пропускания по лимитным соединениям.
gzip – это популярная программа для сжатия данных. Вы можете настроить веб-сервер Nginx для сжатия загружаемых файлов через gzip. Затем эти файлы распакуют браузеры – и сайт работает без каких-либо потерь, но имеет существенное преимущество: между веб-сервером и браузером передается меньший объем данных. Еще одна хорошая новость: сжатие широко поддерживается всеми основными браузерами, и не использовать ее нет причин.
Из-за особенностей работы сжатия в целом и gzip в частности, некоторые файлы сжимаются лучше, чем другие. Например, текстовые файлы сжимаются очень хорошо (часто их можно сделать в два раза меньше). А изображения – файлы JPEG или PNG – уже сжаты по своей природе, и повторное сжатие с помощью gzip не дает практически никаких результатов. Конечно, операция сжатия файлов использует ресурсы сервера, поэтому лучше сжимать только те файлы, размер которых существенно уменьшится.
В этом мануале вы узнаете, как настроить Nginx для поддержки сжатия gzip. Это уменьшит размер контента, отправляемого посетителям вашего сайта, и повысит его производительность.
Требования
- Сервер Ubuntu 20.04, а также пользователь с привилегиями sudo. Вы можете узнать, как подготовить свой сервер, следуя этому руководству.
- Установка Nginx на сервере (следуйте руководству Установка Nginx в Ubuntu 20.04).
1: Создание тестовых файлов
На начальном этапе мы создадим несколько тестовых файлов в стандартном каталоге Nginx. Мы будем использовать эти файлы позже, чтобы проверить поведение Nginx при сжатии gzip и узнать, имеет ли сжатие желаемый эффект.
Чтобы определить, какой тип файла обслуживается по сети, Nginx не анализирует все его содержимое – это было бы слишком долго. Вместо этого он смотрит на расширение и определяет MIME-тип файла, который определяет его цель.
Это значит, что содержимое наших тестовых файлов не имеет значения. Называя файлы соответствующим образом, мы можем обмануть Nginx, заставить его думать, что, например, один пустой файл является изображением, а другой – таблицей стилей.
Создайте файл test.html в каталоге Nginx, используя truncate. Расширение этого файла означает, что это HTML-страница:
sudo truncate -s 1k /var/www/html/test.html
Давайте создадим еще несколько тестовых файлов с другими расширениями – jpg, css и 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
Следующим шагом будет проверка того, как Nginx ведет себя при обработке запрошенных файлов (на примере тех файлов, что мы только что создали).
2: Проверка стандартного поведения Nginx
Давайте проверим как обрабатывается HTML-файл test.html – со сжатием или без. Команда запрашивает файл с сервера Nginx и через HTTP-заголовок (Accept-Encoding: gzip) указывает, что можно использовать сжатый с помощью gzip контент:
curl -H "Accept-Encoding: gzip" -I http://localhost/test.html
В ответ вы должны увидеть несколько заголовков HTTP-ответа:
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:04:25 GMT
Content-Type: text/html
Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT
Connection: keep-alive
ETag: W/"6022dc8d-400"
Content-Encoding: gzip
В последней строке вы можете увидеть заголовок Content-Encoding: gzip. Это говорит нам о том, что для отправки этого файла использовалось сжатие. Произошло это потому, что в Nginx сжатие включено автоматически – то есть даже в новой установке Ubuntu.
Однако по умолчанию Nginx сжимает только файлы HTML. Все остальные файлы будут обслуживаться без сжатия, что не совсем хорошо. Чтобы убедиться в этом, вы можете запросить тестовый файл test.jpg:
curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg
Результат будет немного отличаться от предыдущего:
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:05:49 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag: "6022dc91-400"
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.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:06:04 GMT
Content-Type: text/css
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag: "6022dc91-400"
Accept-Ranges: bytes
Давайте настроим Nginx так, чтобы он мог сжимать все типы файлов, для которых полезно использовать gzip.
3: Настройка gzip в Nginx
Чтобы изменить стандартную конфигурацию gzip в Nginx, откройте главный конфигурационный файл Nginx в nano или в другом текстовом редакторе:
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 действительно включено (директива gzip on), но некоторые дополнительные параметры закомментированы знаком # и не используются. Давайте внесем в этот раздел несколько изменений:
- Раскомментируйте все закомментированные строки (удалив # в начале строки), чтобы активировать их.
- Добавьте gzip_min_length 256; эта директива указывает Nginx не сжимать файлы размером менее 256 байт. Сжимать очень маленькие файлы практически не имеет смысла.
- Добавьте в директиву gzip_types другие типы файлов (веб-шрифты, иконки, XML-каналы, структурированные данные JSON и изображения 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
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/svg+xml
text/css
text/javascript
text/plain
text/xml;
. . .
Сохраните и закройте файл.
Чтобы включить новую конфигурацию, перезапустите Nginx:
sudo systemctl restart nginx
Затем давайте убедимся, что новая конфигурация работает.
4: Проверка новой конфигурации
Выполните тот же запрос тестового HTML-файла, что и раньше:
curl -H "Accept-Encoding: gzip" -I http://localhost/test.html
Ответ останется прежним, так как сжатие для этого типа файла уже было включено:
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:04:25 GMT
Content-Type: text/html
Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT
Connection: keep-alive
ETag: W/"6022dc8d-400"
Content-Encoding: gzip
Но если мы запросим таблицу стилей CSS (которая не сжималась предыдущей настройкой), мы получим совсем другой ответ:
curl -H "Accept-Encoding: gzip" -I http://localhost/test.css
Теперь gzip сжимает этот файл:
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:21:54 GMT
Content-Type: text/css
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
Vary: Accept-Encoding
ETag: W/"6022dc91-400"
Content-Encoding: gzip
Из все наших тестовых файлов не сжимается только test.jpg. Чтобы проверить это, введите:
curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg
Как видите, сжатие здесь не работает:
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:25:40 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag: "6022dc91-400"
Accept-Ranges: bytes
Заголовок Content-Encoding: gzip отсутствует в этом выводе, как и ожидалось. Если это так, вы успешно настроили сжатие gzip в Nginx.
Заключение
Настроить Nginx для поддержки сжатия gzip легко, а преимущества такой настройки могут быть огромными. Ваши пользователи сразу заметят существенный прирост скорости (особенно посетители с ограниченной пропускной способностью). Поисковые системы тоже будут рады, если сайт станет загружаться быстрее. Сейчас скорость загрузки является важным показателем, который поисковые системы учитывают при ранжировании веб-сайтов. Следовательно, использование gzip – один из серьезных шагов к улучшению позиций сайта в выдаче.
Tags: Gzip, NGINX, Ubuntu 20.04