Apprenez à accélérer les sites Web à l'aide de Nginx et du module Gzip

Même à une époque où des vitesses Internet importantes sont disponibles dans le monde entier, tous les efforts visant à optimiser les temps de chargement des sites Web sont les bienvenus à bras ouverts.

Dans cet article, nous aborderons une méthode pour augmenter les vitesses de transfert en réduisant la taille des fichiers grâce à la compression. Cette approche apporte un avantage supplémentaire dans la mesure où elle réduit également la quantité de bande passante utilisée dans le processus et le rend moins cher pour le propriétaire du site Web qui paie pour cela.

Pour atteindre l'objectif énoncé dans le paragraphe ci-dessus, nous utiliserons Nginx et son module gzip intégré dans cet article. Comme l'indique la documentation officielle, ce module est un filtre qui compresse les réponses en utilisant la méthode de compression gzip bien connue. Cela garantit que la taille des données transmises sera compressée de moitié, voire plus.

Lecture suggérée : Le guide ultime pour sécuriser, renforcer et améliorer les performances des sites Web Nginx

Au moment où vous atteindrez la fin de cet article, vous aurez encore une autre raison d'envisager d'utiliser Nginx pour servir vos sites Web et vos applications.

Installation du serveur Web Nginx

Nginx est disponible pour toutes les principales distributions modernes. Bien que nous utiliserons une machine virtuelle CentOS 7 (IP 192.168.0.29) pour cet article.

Les instructions fournies ci-dessous fonctionneront également avec peu (voire aucune) de modifications dans d'autres distributions. On suppose que votre VM est une nouvelle installation ; sinon, vous devrez vous assurer qu'aucun autre serveur Web (tel que Apache) n'est en cours d'exécution sur votre ordinateur.

Pour installer Nginx avec ses dépendances requises, utilisez la commande suivante :


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

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

Pour vérifier que l'installation s'est terminée avec succès et que Nginx peut servir des fichiers, démarrez le serveur Web :


systemctl start nginx
systemctl enable nginx

puis ouvrez un navigateur Web et accédez à http://192.168.0.29 (n'oubliez pas de remplacer 192.168.0.29 par l'adresse IP ou le nom d'hôte de votre serveur) . Vous devriez voir la page de bienvenue :

Nous devons garder à l’esprit que certains types de fichiers peuvent être mieux compressés que d’autres. Les fichiers de texte brut (tels que les fichiers HTML, CSS et JavaScript) se compressent très bien tandis que d'autres (.iso fichiers, archives tar et images, pour n'en nommer que quelques-uns) ne le font pas, car ils sont déjà compressés par nature.

Ainsi, il faut s'attendre à ce que la combinaison de Nginx et de gzip nous permette d'augmenter les vitesses de transfert du premier, alors que le second pourrait montrer peu ou pas d'amélioration à tous.

Il est également important de garder à l'esprit que lorsque le module gzip est activé, les fichiers HTML sont TOUJOURS compressés, mais d'autres types de fichiers couramment trouvés dans les sites Web et les applications (à savoir CSS et JavaScript) ne le sont pas.

Test des vitesses du site Web Nginx SANS le module gzip

Pour commencer, téléchargeons un modèle Bootstrap complet, une excellente combinaison de fichiers HTML, CSS et JavaScript.

Après avoir téléchargé le fichier compressé, nous allons le décompresser dans le répertoire racine de notre bloc serveur (rappelez-vous qu'il s'agit de l'équivalent Nginx de la directive DocumentRoot dans une déclaration d'hôte virtuel 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

Vous devriez avoir la structure de répertoires suivante dans /var/www/html/tecmint :


ls -l /var/www/html/tecmint

Allez maintenant sur http://192.168.0.29/tecmint et assurez-vous que la page se charge correctement. La plupart des navigateurs modernes incluent un ensemble d'outils de développement. Dans Firefox, vous pouvez l'ouvrir via le menu Outils → Développeur Web.

Nous sommes particulièrement intéressés par le sous-menu Réseau, qui nous permettra de surveiller toutes les requêtes réseau en cours entre notre ordinateur et le réseau local et Internet.

Lecture suggérée : Installez Mod_Pagespeed pour accélérer les performances de Nginx jusqu'à 10x

Un raccourci pour ouvrir le menu Réseau dans les outils de développement est Ctrl + Shift + Q. Appuyez sur cette combinaison de touches ou utilisez la barre de menu pour l'ouvrir.

Puisque nous souhaitons examiner le transfert de fichiers HTML, CSS et JavaScript, cliquez sur les boutons en bas et actualisez la page. Dans l'écran principal, vous verrez le détail du transfert de tous les fichiers HTML, CSS et JavaScript :

À droite de la colonne Taille (qui affiche les tailles de fichiers individuelles), vous verrez les horaires de transfert individuels. Vous pouvez également double-cliquer sur n'importe quel fichier donné pour voir plus de détails dans l'onglet Timings.

Assurez-vous de prendre note des horaires indiqués dans l'image ci-dessus afin de pouvoir les comparer avec le même transfert une fois que nous aurons activé le module gzip.

Activation et configuration du module gzip dans Nginx

Pour activer et configurer le module gzip, ouvrez /etc/nginx/nginx.conf, localisez le bloc du serveur principal comme indiqué dans l'image ci-dessous et ajoutez ou modifiez ce qui suit lignes (n'oubliez pas le point-virgule à la fin sinon Nginx renverra un message d'erreur en redémarrant plus tard !)


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

La directive gzip active ou désactive le module gzip, tandis que gzip_types est utilisé pour lister tous les types MIME que le module doit gérer.

Pour en savoir plus sur les types MIME et afficher les types disponibles, accédez à Basics_of_HTTP_MIME_types.

Test des vitesses du site Web Nginx avec le module de compression Gzip

Une fois que nous avons terminé les étapes ci-dessus, redémarrons Nginx et rechargeons la page en appuyant sur Ctrl + F5 (encore une fois, cela fonctionne dans Firefox, donc si vous utilisez un autre navigateur consultez d'abord la documentation correspondante) pour remplacer le cache et observons les temps de transfert :


systemctl restart nginx

L'onglet Demandes réseau présente des améliorations significatives. Comparez les timings pour constater par vous-même, en gardant à l'esprit qu'il s'agit des transferts entre notre ordinateur et le 192.168.0.29 (les transferts entre les serveurs Google et les CDN sont hors de notre portée) :

Par exemple, considérons les exemples de transfert de fichiers suivants avant/après l'activation de gzip. Les timings sont donnés en millisecondes :

index.html (représenté par /tecmint/ en haut de la liste) : 15/4
Creative.min.css : 18 / 8
jquery.min.js : 17/7

Cela ne vous fait-il pas aimer encore plus Nginx ? En ce qui me concerne, c'est le cas !

Lecture suggérée : 5 conseils pour améliorer les performances de votre serveur Web Apache

Résumé

Dans cet article, nous avons démontré que vous pouvez utiliser le module gzip de Nginx pour accélérer les transferts de fichiers. La documentation officielle du module gzip répertorie d'autres directives de configuration que vous souhaiterez peut-être consulter.

De plus, le site Web Mozilla Developer Network contient une entrée sur le moniteur réseau qui explique comment utiliser cet outil pour comprendre ce qui se passe dans les coulisses d'une requête réseau.

Comme toujours, n'hésitez pas à utiliser le formulaire de commentaires ci-dessous si vous avez des questions sur cet article. Nous sommes toujours impatients de vous entendre !