Повышение производительности сайта с помощью gzip и Nginx

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

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

Из-за особенностей работы сжатия в целом и gzip в частности, некоторые файлы сжимаются лучше, чем другие. Например, текстовые файлы сжимаются очень хорошо (часто их можно сделать в два раза меньше). А изображения – файлы JPEG или PNG – уже сжаты по своей природе, и повторное сжатие с помощью gzip не дает практически никаких результатов. Конечно, операция сжатия файлов использует ресурсы сервера, поэтому лучше сжимать только те файлы, размер которых существенно уменьшится.

В этом мануале вы узнаете, как настроить Nginx для поддержки сжатия gzip. Это уменьшит размер контента, отправляемого посетителям вашего сайта, и повысит его производительность.

Требования

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: , ,

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