Optimiser son site (sous Ubuntu et ailleurs...) : Compresser avec gzip

Notes aux grincheux de service : la manipulation exposée dans ce billet fonctionne évidemment ailleurs que sous Ubuntu (en fait partout où Apache2 est installable), néanmoins elle a été testée et mise en place sous Ubuntu et fonctionne telle quelle avec l'installation d'Apache2 par défaut sur cette distribution.

Après avoir appliqué la règle 3 en ajoutant et configurant l'entête Expires, passons à la règle 4 du Livre High Performances Web Sites (ou des recommandations de performances Yahoo!) en compressant avec gzip les données transmises par le serveur web, ici Apache2. Comme son nom le suggère, cette règle vise à limiter au maximum le poids des contenus distribués en réduisant de près de 70% la taille des fichiers textes. Cela permet d'accélérer le premier chargement du site avant la mise en cache par le navigateur. Pour cela, on peut configurer Apache2 pour utiliser le mod_deflate qui va se charger de compresser ce qui peut l'être pour un sur coût CPU faible.

La première étape consiste à activer ce module ainsi que le module headers avec a2enmod et à recharger Apache pour prendre en compte ce nouveau module :

$ sudo a2enmod deflate
$ sudo a2enmod headers
$ sudo /etc/init.d/apache2 reload

Le module headers est nécessaire pour envoyer des entêtes spécifiques aux proxy caches de manière à ne pas envoyer de documents compressés à certains navigateurs buggés mais populaires...

La configuration par défaut, stockée dans le fichier /etc/apache2/mods-available/deflate.conf, fait en sorte de compresser les fichiers texte brut, HTML et XML ce qui est déjà bien, mais on peut aller plus loin en traitant tout ce qui est texte. Il est en effet inutile de compresser les images (JPG, PNG, GIF, ...), les PDF et bien d'autres types de fichier qui sont déjà compressés par nature. J'utilise la configuration suivante dans /etc/apache2/conf.d/deflate pour compresser en plus les feuilles de style et les scripts Javascript tout évitant certains bugs connus de quelques navigateurs.

 AddOutputFilterByType DEFLATE text/plain text/css application/x-javascript text/xml text/html
 
# gestion des navigateurs buggés
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 
# gestion des proxy caches
Header  append Vary User-Agent

Pour faire prendre en compte cette configuration, il ne reste plus qu'à recharger Apache et le tour est joué.

» Commentaires

- Quels impacts (#67025) par WhilelM le 18 Août 2008 à 10:40
Ca a l'air intéressant comme paramétrage mais quels sont les impacts au niveau performance ? Qu'est-ce qui est gagné et qu'est-ce qui est perdu ?
- Type MIME pour JavaScript? (#67026) par Florent V. le 18 Août 2008 à 10:41
Hello,

Le media type pour JavaScript ne serait-il pas plutôt "text/javascript"? Bien que ce media type ne soit pas enregistré auprès de l’IANA, il est compris par tous les navigateurs, ce qui n’est pas le cas de "application/x-javascript" (bien que ce dernier pose rarement problème).

Quoi qu’il en soit, il faudrait rajouter "text/javascript" à la liste des media types pris en compte. Ainsi, les fichiers .js peuvent être servis en "text/javascript" ou "application/x-javascript", et seront compressés dans les deux cas.

On pourrait aussi rajouter "application/xhtml+xml", tant qu’à faire.
- Performances et type Mime (#67027) par Damien le 18 Août 2008 à 10:53
@WhilelM : sur le serveur ça change assez peu de chose, la compression GZip de petits fichiers est très rapide (il suffit de tester avec gzip en ligne de commande) et j'imagine que c'est mis en cache par le module Apache pour éviter de toujours faire le même traitement. Ensuite ça diminue généralement la taille de 70%, ce qui est loin d'être négligeable !

@Florent V. : quand je regarde les entêtes, les Javascripts sont servis avec le type Mime "application/x-javascript" mais effectivement ça mange pas de pain de rajouter d'autres types dans la liste.
- de la part du grincheux (#67039) par Aguillem le 20 Août 2008 à 13:06
C'est marrant quand même comme on peut pas faire une remarque (qui n'a rien de désobligeant) sans passer pour un grincheux.
Je n'ai jamais critiqué ce que tu faisais, mais souligné l'amalgame fréquemment fait dans les blogs (même si ce n'est en fait pas vraiment ton cas).
Après peut etre que tes commentaires ne sont ouverts que pour recevoir des éloges et pas de remarques/critiques....
- Les commentaires... (#67040) par Damien le 20 Août 2008 à 13:52
@Aguillem : les commentaires sont ouverts pour apporter des choses constructives sur le sujet du billet. Dire et redire et reredire [et ...] de 20 manières différentes et en plus long ce que je dis déjà dans le billet ça n'apporte pas grand chose d'où la fermeture des commentaires d'ailleurs. Et les commentaires ne sont pas là pour recevoir des éloges (même si ça fait toujours plaisir ;)) sinon je les aurai purement et simplement supprimé...

Ensuite, tu remarqueras que j'ai quand même tenu compte de ton commentaire en "modérant" d'une certaine manière le titre, et par l'ajout de la note de manière visible. Quant à l'expression "aux grincheux" c'est une façon de parler de l'aspect répétitif et insistant; elle ne t'était pas spécifiquement destinée (d'où le pluriel) et même plutôt moins à toi qu'à d'autres qui ne font que répéter ton commentaire sans rien apporter sur le fond.
- Ca marche ? (#67090) par Nicoinatendu le 01 Septembre 2008 à 23:16
Bonjour,
merci pour ce post, je viens de l'appliquer sur mon serveur. Mais comment savoir que cela fonctionne ? Que regarder pour vérifier que la compression ce fait bien ? Je ne vois rien de lier a cela dans les log d'apache.

Par avance merci

- Pour vérifier (#67092) par Damien le 02 Septembre 2008 à 09:10
tu peux utiliser l'extension LiveHTTP Headers ou Firebug dans Firefox. Dans Firefubg, tu vas sur l'onglet Net et tu vérifies que dans les entêtes de réponses tu as une ligne du genre :
Content-Encoding: gzip
- Pour vérifier (#67095) par Nicoinatendu le 02 Septembre 2008 à 23:31
@Damien : Merci pour ces precisions. Tres pratique ce FireBug !

» Trackback

Aucun trackback

Les trackacks sont désactivés

Flux RSS des billets

Flux RSS des billets

Rechercher sur pwet.fr

À retenir

Derniers commentaires

Archives

Nuage de tags

Bioutifoul photos

Quelques liens

Licence d'utilisation

Contenu sous Licence Creative Commons By-Sa

Sauf mentions spécifiques, les billets et les photos publiés sur ce site sont placés sous la licence Creative Commons by-sa.

Pour toute utilisation dépassant le cadre de cette licence, merci de me contacter par e-mail.

Login