Comment ajouter le module gzip à Nginx sur Ubuntu 16.04

introduction

La vitesse de chargement d'un site Web dépend de la taille de tous les fichiers qui doivent être téléchargés par le navigateur. Réduire la taille des fichiers à transmettre peut non seulement accélérer le chargement du site Web, mais également le rendre moins cher pour ceux qui doivent payer pour l'utilisation de la bande passante.

gzip est un programme de compression de données populaire. Vous pouvez configurer Nginx pour utilisergzip pour compresser les fichiers qu'il sert à la volée. Ces fichiers sont ensuite décompressés par les navigateurs qui les prennent en charge lors de la récupération, sans aucune perte, mais avec l’avantage de transférer moins de données entre le serveur Web et le navigateur.

En raison du fonctionnement de la compression en général, mais également du fonctionnement degzip, certains fichiers se compressent mieux que d'autres. Par exemple, les fichiers texte sont très bien compressés et aboutissent souvent à un résultat deux fois plus petit. D'autre part, les images telles que les fichiers JPEG ou PNG sont déjà compressées de par leur nature et la seconde compression à l'aide degzip donne peu ou pas de résultats. La compression des fichiers utilise des ressources de serveur, il est donc préférable de ne compresser que les fichiers qui réduiront considérablement sa taille.

Dans ce guide, nous expliquerons comment configurer Nginx installé sur votre serveur Ubuntu 16.04 pour utiliser la compressiongzip afin de réduire la taille du contenu envoyé aux visiteurs du site Web.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin de:

[[step-1 -—- creating-test-files]] == Étape 1 - Création de fichiers de test

Dans cette étape, nous allons créer plusieurs fichiers de test dans le répertoire Nginx par défaut pour la compression du textegzip.

Pour décider quel type de fichier est servi sur le réseau, Nginx n’analyse pas le contenu du fichier, car il ne serait pas assez rapide. Au lieu de cela, il recherche simplement l'extension du fichier pour déterminer sesMIME type, ce qui indique le but du fichier.

En raison de ce comportement, le contenu des fichiers de test n'est pas pertinent. En nommant les fichiers de manière appropriée, nous pouvons persuader Nginx de penser qu'un fichier entièrement vide est une image et l'autre, par exemple, une feuille de style.

Dans notre configuration, Nginx ne compresse pas les très petits fichiers. Nous allons donc créer des fichiers de test d’une taille exacte de 1 kilo-octet. Cela nous permettra de vérifier si Nginx utilise la compression comme il le devrait, compressant un type de fichiers et non les autres.

Créez un fichier de 1 kilo-octet nommétest.html dans le répertoire Nginx par défaut à l'aide detruncate. L’extension indique qu’il s’agit d’une page HTML.

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

Créons quelques autres fichiers de test de la même manière: un fichier imagejpg, une feuille de stylecss et un fichier JavaScriptjs.

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

L'étape suivante consiste à vérifier le comportement de Nginx en ce qui concerne la compression lors d'une nouvelle installation avec les fichiers que nous venons de créer.

[[step-2 -—- checking-the-default-behavior]] == Étape 2 - Vérification du comportement par défaut

Vérifions si le fichier HTML nommétest.html est servi avec compression. La commande demande un fichier à notre serveur Nginx et spécifie qu'il est correct de servir le contenu compressé degzip en utilisant un en-tête HTTP (Accept-Encoding: gzip).

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

En réponse, vous devriez voir plusieurs en-têtes de réponse HTTP:

En-têtes de réponse Nginx

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

Dans la dernière ligne, vous pouvez voir l'en-têteContent-Encoding: gzip. Ceci nous indique que la compressiongzip a été utilisée pour envoyer ce fichier. Cela s'est produit parce que sur Ubuntu 16.04, Nginx a activé automatiquement la compressiongzipaprès l'installation avec ses paramètres par défaut.

Cependant, par défaut, Nginx ne compresse que les fichiers HTML. Tous les autres fichiers d'une nouvelle installation seront servis non compressés. Pour vérifier cela, vous pouvez demander notre image de test nomméetest.jpg de la même manière.

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

Le résultat devrait être légèrement différent qu'avant:

En-têtes de réponse Nginx

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

Il n'y a pas d'en-têteContent-Encoding: gzip dans la sortie, ce qui signifie que le fichier a été servi sans compression.

Vous pouvez répéter le test avec la feuille de style CSS.

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

Encore une fois, il n’ya aucune mention de compression dans la sortie.

En-têtes de réponse Nginx pour le fichier 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

L'étape suivante consiste à configurer Nginx pour servir non seulement les fichiers HTML compressés, mais également les autres formats de fichiers pouvant tirer parti de la compression.

[[step-3 -—- configuring-nginx-39-s-gzip-settings]] == Étape 3 - Configuration des paramètres gzip de Nginx

Pour modifier la configuration de Nginxgzip, ouvrez le fichier de configuration principal de Nginx dansnano ou dans votre éditeur de texte préféré.

sudo nano /etc/nginx/nginx.conf

Trouvez la section des paramètres degzip, qui ressemble à ceci:

/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;
. . .

Vous pouvez voir que par défaut, la compressiongzip est activée par la directivegzip on, mais plusieurs paramètres supplémentaires sont commentés avec le signe de commentaire#. Nous allons apporter plusieurs modifications à cette section:

  • Activez les paramètres supplémentaires en décommentant toutes les lignes commentées (c'est-à-dire en supprimant les# au début de la ligne)

  • Ajoutez la directivegzip_min_length 256;, qui indique à Nginx de ne pas compresser les fichiers de moins de 256 octets. Ce sont de très petits fichiers qui bénéficient à peine de la compression.

  • Ajoutez la directivegzip_types avec des types de fichiers supplémentaires indiquant les polices Web, les icônesico et les images SVG.

Une fois ces modifications appliquées, la section des paramètres devrait ressembler à ceci:

/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;
. . .

Enregistrez et fermez le fichier pour quitter.

Pour activer la nouvelle configuration, rechargez Nginx.

sudo systemctl reload nginx

L'étape suivante consiste à vérifier si les modifications apportées à la configuration ont fonctionné comme prévu.

[[step-4 -—- verifying-the-new-configuration]] == Étape 4 - Vérification de la nouvelle configuration

Nous pouvons tester cela comme nous l'avons fait à l'étape 2, en utilisantcurl sur chacun des fichiers de test et en examinant la sortie pour l'en-têteContent-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

Désormais, seulstest.jpg, qui est un fichier image, doivent rester non compressés. Dans tous les autres exemples, vous devriez pouvoir trouver l'en-têteContent-Encoding: gzip dans la sortie.

Si tel est le cas, vous avez configuré la compressiongzip dans Nginx avec succès!

Conclusion

Changer la configuration de Nginx pour utiliser pleinement la compressiongzip est facile, mais les avantages peuvent être immenses. Non seulement les visiteurs dont la bande passante est limitée recevront le site plus rapidement, mais Google se réjouira également du chargement plus rapide du site. La vitesse gagne du terrain en tant qu'élément important du Web moderne et l'utilisation degzip est un grand pas en avant pour l'améliorer.