Envoyer des fichiers gzipés avec Nginx sans recompilation
Dans la longue série des billets que je fais sur l’optimisation de la vitesse de chargement et d’envoi d’un site web, j’en suis arrivé à faire plusieurs billets sur Nginx. Par ailleurs, j’ai découvert récemment (via Lionel) le webware GTmetrix, qui permet de faire rapidement un état des lieux des performances de son site, grâce auquel j’ai pu me rendre compte qu’il ne me restait pas grand chose à améliorer à part l’encodage des fichiers en gzip. Cet encodage permet de réduire grandement la quantité d’information envoyée au client (car celle-ci est compressée), et notamment pour les fichiers textes (comme les feuilles de style et fichiers javascripts), pour lesquels on atteint facilement des réduction de 70%.
Cela m’a étonné, car je croyais l’avoir mis en place via l’installation de Nginx, mais à l’évidence, ça ne fonctionnait pas.

Après quelques vérifications, j’ai vu qu’effectivement, même si la configuration de mon Nginx indiquait qu’il fallait fournir le contenu en gzip, cette étape ne fonctionnait pas. J’ai fait d’autres recherches, qui m’ont permit de conclure que j’avais oublié d’inclure l’option gzip lors de la compilation de Nginx (oui parce que je l’ai compilé moi-même : la version proposée par mon OS étant à mon goût trop vieille – car désormais non supportée par Nginx…). Bref : a la compilation, j’ai oublié l’étape permettant à Nginx de prendre les fichiers, et de les convertir en gzip.
Cela dit, une bonne chose est que la version que j’ai installé permet, si on met dans la configuration d’un site la ligne :
gzip_static on;
…de vérifier à chaque envoi s’il existe une version gzippée du fichier, et si oui, de l’envoyer à la place du fichier demandé.
Sauf que : il me fallait désormais prendre les différents fichiers textes non gzippés. J’ai un instant crû qu’un tar -czvf suffirait, mais je me suis retrouvé avec des headers pas bons. En utilisant la commande gzip, j’ai obtenu des résultats bien meilleurs. Du coup, j’ai pris quelques minutes pour créer un script convertissant en gzip tous les fichiers CSS et JavaScript d’un dossier et de ses sous-dossiers :
#!/bin/bash
#User Variables
DIR1=/var/www/monsite1/;
DIR2=/var/www/monsite2/;
FIND=find;
GZIP=/bin/gzip;
for d in "$DIR1 $DIR2"
do
for i in `$FIND $d -name "*.css" -o -name "*.js"`;
do
$GZIP -c $i > $i.gz;
done;
done;
Notez plusieurs choses dans ce script :
On trouve l’intégralité des fichiers avec extension css ou js via la commande find :
find path/ -name "*.css" -o -name "*.js"
On les convertit en laissant l’original via la commande gzip customisée :
gzip -c style.css > style.css.gz
Voilà ! Normalement, cette technique permettra d’économiser encore un peu de bande passante. Après, mettez ce script dans une tâche CRON pour qu’elle s’exécute assez régulièrement (au cas où vous mettriez à jour des fichiers CSS). Et enfin, en ce qui concerne la compatibilité avec les différents navigateurs, j’ai testé sous Chrome 4, Firefox 4, Opera 10.50 et IE7 (out ça sur Windows XP), et ça fonctionnait sans problème. J’ai bien conscience que peut-être, il y a encore des personnes sous IE5 ou IE6, mais elles commencent sérieusement à m’énerver. Donc je ne vérifie pas pour ces configurations. POINT.
Edit : Pour ceux qui viendraient me dire qu’il y a toujours le mod_deflate de Apache, je leur répondrais que je suis au courant, mais que chez moi Apache ne traite pas les CSS et les JS, donc cette solution n’était pas envisageable ici.
Vous serez peut-être intéressé :
Un commentaire à Envoyer des fichiers gzipés avec Nginx sans recompilation
Laisser un commentaire
- 28 April 2013HTC 8X : le test(7) Comments
- 27 April 2013Thailande 3 : Bangkok, la capitale !(0) Comments
- 27 April 2013Thailande 2 : Ayutthaya, ancienne capitale du Siam(0) Comments
- 27 April 2013Thailande 1 : La Rivière Kwai et les Cascades d'Erawan(4) Comments
- 27 April 2013Parsing de XML en Java : les élements DOM et la génération en String(2) Comments
- 26 April 2013Un journée pour voir quelques Châteaux de la Loire(1) Comments
- 26 April 2013Châteaux de la Loire : 1 - Le Château de Cheverny(0) Comments
- 26 April 2013Châteaux de la Loire : 2 - Le Château de Blois(1) Comments
- 26 April 2013Châteaux de la Loire : 3 - Le Château de Chambord(0) Comments
- 22 April 2013Chrome est capable d'enregistrer vos données bancaires(3) Comments
[...] pas mal de chose que l’on fait très vite quand on a un peu la main sur la plateforme : compression gzip, code 304 not modified, bref, des petites choses de base, mais pas forcément disponibles quand on [...]