Le développement web utilise de plus en plus de librairies JavaScript pour agrémenter l'expérience d'un site web mais qui vient inmanquablement avec l'inconvénient d'augmenter considérablement le volume de l'information à télécharger. Bien qu'on puisse utilise YUI Compressor pour réduire la taille des fichiers, on peut aussi tirer avantage de sa combinaison avec GZip (GNU Zip) au niveau du serveur web pour automatiser la compression HTTP des types de contenus textes (HTML, CSS, JavaScript, etc).
L'objectif avec GZip est de faire en sorte que le serveur compresse l'information à envoyer au client (fureteur) et celui-ci est normalement en mesure d'accepter et d'interpréter le contenu en le dézippant, tout cela de façon transparente pour l'utilisateur. Ça permet entre autre d'augmenter la vitesse de téléchargement puisque les fichiers sont plus petits et donc de réduire la bande passante utilisée.
Avec Firefox, on peut voir s'il est configuré pour accepter du contenu compressé en entrant about:config dans la barre d'adresse et en recherchant la clé network.http.accept-encoding. S'il est activé (par défaut avec les fureteurs récents), il devrait avoir la valeur gzip,deflate. Certains fureteurs plus vieux n'ont pas cette capacité, par exemple ceux basés sur Mozilla 4.
Pour ajouter la compression sur un serveur Apache, il faudra utiliser le module mod_deflate. Son activation repose principalement sur ceci dans le fichier httpd.conf :
- Ajouter le chargement du module :
LoadModule deflate_module modules/mod_deflate.so - Ajouter les lignes suivantes (de façon globale ou dans le vhost qui doit l'utiliser) :
Activer le filtre :
SetOutputFilter DEFLATE
Spécifier les types à compresser (ne pas oublier d'ajouter JavaScript!) :
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript - Apache recommande la configuration suivante pour gérer les exceptions de certains types de fureteurs. Pour s'assurer que tout fonctionne normalement, n'oubliez pas de tester dans un environnement de développement avant de le mettre en production!
# Insert filter
SetOutputFilter DEFLATE
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
- Sur la page d'accueil de jQuery, ils annoncent que leur librairie ne pèse que 19 kb. Remarquez à côté que les termes "Minified and Gzipped" sont ajoutés.
- Le fichier original de la version 1.3.2 a un poids non compressé de 117 kb.
- En compressant le fichier (minified) avec la dernière version du YUI Compressor, on obtient un résultat de 56 kb, soit le même que celui offert en téléchargement sur le site de jQuery. C'est son poids réel occupé sur le disque et c'est lui qui sera mis en ligne dans notre projet.
- Durant le transfert, si GZip est activé, on note grâce à Firebug et son onglet Net, que le fichier zippé n'a nécessité que 20 kb de téléchargement par le client, soit 65% de moins que la version réduite et 5 fois plus petite que l'originale.
