Узнайте, как ускорить работу веб-сайтов с помощью модуля Nginx и Gzip

Даже в то время, когда по всему миру доступны значительные скорости Интернета, любые усилия по оптимизации времени загрузки веб-сайта приветствуются с распростертыми объятиями.

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

Для достижения цели, указанной в предыдущем абзаце, в этой статье мы будем использовать Nginx и его встроенный модуль gzip. Как указано в официальной документации, этот модуль представляет собой фильтр, сжимающий ответы с помощью известного метода сжатия gzip. Это гарантирует, что размер передаваемых данных будет сжат вдвое или даже больше.

Рекомендуется к прочтению: Полное руководство по обеспечению безопасности, усилению защиты и повышению производительности веб-сайтов Nginx.

К тому времени, как вы дочитаете этот пост до конца, у вас появится еще одна причина рассмотреть возможность использования Nginx для обслуживания ваших веб-сайтов и приложений.

Установка веб-сервера Nginx

Nginx доступен для всех основных современных дистрибутивов. Хотя для этой статьи мы будем использовать виртуальную машину CentOS 7 (IP 192.168.0.29).

Инструкции, приведенные ниже, будут работать с небольшими (если таковые имеются) изменениями и в других дистрибутивах. Предполагается, что ваша ВМ установлена заново; в противном случае вам придется убедиться, что на вашем компьютере не работают другие веб-серверы (например, Apache).

Чтобы установить Nginx вместе с необходимыми зависимостями, используйте следующую команду:


----------- On CentOS/RHEL 7 and Fedora 22-24 ----------- 
yum update && yum install nginx

----------- On Debian and Ubuntu Distributions ----------- 
apt update && apt install nginx

Чтобы убедиться, что установка завершилась успешно и что Nginx может обслуживать файлы, запустите веб-сервер:


systemctl start nginx
systemctl enable nginx

а затем откройте веб-браузер и перейдите по адресу http://192.168.0.29 (не забудьте заменить 192.168.0.29 на IP-адрес или имя хоста вашего сервера) . Вы должны увидеть страницу приветствия:

Мы должны помнить, что некоторые типы файлов сжимаются лучше, чем другие. Обычные текстовые файлы (такие как файлы HTML, CSS и JavaScript) сжимаются очень хорошо, в то время как другие файлы (.iso) файлы, архивы и изображения и многие другие) — нет, поскольку они уже сжаты по своей природе.

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

Также важно помнить, что когда модуль gzip включен, файлы HTML ВСЕГДА сжимаются, но другие типы файлов, обычно встречающиеся в веб-сайты и приложения (а именно, CSS и JavaScript) – нет.

Тестирование скорости веб-сайта Nginx БЕЗ модуля gzip

Для начала давайте загрузим полный шаблон Bootstrap — отличное сочетание файлов HTML, CSS и JavaScript.

После загрузки сжатого файла мы разархивируем его в корневой каталог нашего серверного блока (помните, что это Nginx эквивалент директивы DocumentRoot в объявлении виртуального хоста Apache. ):


cd /var/www/html
wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip
unzip -a gh-pages.zip
mv startbootstrap-creative-gh-pages tecmint

Внутри /var/www/html/tecmint у вас должна быть следующая структура каталогов:


ls -l /var/www/html/tecmint

Теперь перейдите по адресу http://192.168.0.29/tecmint и убедитесь, что страница загружается правильно. Большинство современных браузеров включают в себя набор инструментов разработчика. В Firefox его можно открыть через меню Инструменты → Веб-разработчик.

Нас особенно интересует подменю Сеть, которое позволит нам отслеживать все сетевые запросы, происходящие между нашим компьютером, локальной сетью и Интернетом.

Рекомендуется к прочтению: Установите Mod_Pagespeed, чтобы повысить производительность Nginx до 10 раз

Ярлык для открытия меню Сеть в инструментах разработчика — Ctrl + Shift + Q. Нажмите эту комбинацию клавиш или используйте строку меню, чтобы открыть ее.

Поскольку нас интересует передача файлов HTML, CSS и JavaScript, нажмите на кнопки внизу и обновите страницу. На главном экране вы увидите подробную информацию о переносе всех файлов HTML, CSS и JavaScript:

Справа от столбца Размер (в котором показаны размеры отдельных файлов) вы увидите индивидуальное время передачи. Вы также можете дважды щелкнуть любой файл, чтобы просмотреть более подробную информацию на вкладке Times.

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

Включение и настройка модуля gzip в Nginx

Чтобы включить и настроить модуль gzip, откройте /etc/nginx/nginx.conf, найдите блок основного сервера, как показано на рисунке ниже, и добавьте или измените следующее: строк (не забудьте поставить точку с запятой в конце, иначе Nginx вернет сообщение об ошибке при перезагрузке позже!)


root     	/var/www/html;
gzip on;
gzip_types text/plain image/jpeg image/png text/css text/javascript;

Директива gzip включает включение или выключение модуля gzip, тогда как gzip_types используется для вывода списка всех типов MIME, которые должен обрабатывать модуль.

Чтобы узнать больше о типах MIME и просмотреть доступные типы, перейдите в раздел Basics_of_HTTP_MIME_types.

Тестирование скорости веб-сайта Nginx с помощью модуля сжатия Gzip

Выполнив вышеуказанные шаги, давайте перезапустим Nginx и перезагрузим страницу, нажав Ctrl + F5 (опять же, это работает в Firefox, поэтому если вы используете другой браузер, сначала обратитесь к соответствующей документации), чтобы переопределить кеш, и давайте посмотрим на время передачи:


systemctl restart nginx

На вкладке сетевых запросов показаны некоторые существенные улучшения. Сравните время, чтобы убедиться в этом сами, помня, что это передача между нашим компьютером и 192.168.0.29 (передача между серверами Google и CDN нам недоступна):

Например, давайте рассмотрим следующие примеры передачи файлов до/после включения gzip. Тайминги указаны в миллисекундах:

index.html (представленный /tecmint/ в верхней части списка): 15/4
Creative.min.css: 18/8
jquery.min.js: 17/7

Разве это не заставляет вас любить Nginx еще больше? Насколько я понимаю, так и есть!

Рекомендуется к прочтению: 5 советов по повышению производительности вашего веб-сервера Apache

Краткое содержание

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

Кроме того, на веб-сайте Mozilla Developer Network есть запись о Network Monitor, в которой объясняется, как использовать этот инструмент, чтобы понять, что происходит за кулисами в сетевом запросе.

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