Налаштування стиснення Gzip

Стиснення файлів необхідне для прискорення віддачі сторінок. Працює це таким чином, що під час завантаження сторінки вона стискається на сервері і передається в браузер користувачеві вже в стиснутому вигляді. Після чого браузер розпаковує сторінку і відображає відвідувачеві.

Ця функція не завжди працює на практиці (деякі типи файлів стискаються краще ніж інші). Так файли .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.

Якщо у вас залишились запитання або необхідна допомога з налаштуванням, звертайтесь у нашу цілодобову підтримку, ми з радістю вам допоможемо.

Наш телеграм

з важливими анонсами, розіграшами й мемами

Приєднатися