Développement, annonces, mises à jour, insolite : le Blog.

Accueil / Blog / Développement / Compression Gzip ou Deflate

ven.		Compression Gzip ou Deflate  Catégorie : Développement.  Tags : Performances, Web.
23	/01
	09

"Précédemment dans la série des performances sur le Web" : je vous avais expliqué comment stocker vos composants dans le cache navigateur de vos visiteurs et comment définir une date d’expiration dans le lointain ou proche futur. Cette règle d’optimisation était très importante et permettait d’économiser beaucoup de ressources et de temps de chargement. Passons à la règle numéro 4, toute aussi importante : compresser les composants avec Gzip (ou Deflate).

Compresser vos composants a pour effet de diminuer les temps de réponse aux requêtes HTTP que font vos visiteurs. Autrement dit, moins un composant pèse lourd et plus vite il sera acheminé à travers les tuyaux du réseau jusqu’aux ordinateurs des internautes, ce qui est logique. On pourra alors, de la même façon que nous le faisons avec Photoshop, SmushIt ou autre pour nos images, compresser via le serveur tout ce qui est à base de texte (et uniquement, j’y reviendrai). Par exemple, pourquoi ne pas compresser vos pages HTML, vos feuilles de style CSS, vos fichiers JavaScript, XML, TXT et/ou JSON avant de les envoyer au client ? Ceci peut être d’autant plus intéressant que ces fichiers ont pu être alourdis lorsque vous les avez tous regroupés afin de faire moins de requêtes HTTP comme je vous l’avais suggéré et vivement conseillé.

Ceux qui on lu au moins mon billet précédent concernant la mise en cache navigateur des composants me diront "pourquoi compresser les CSS, fichiers JS et autres pour réduire les temps de réponse alors qu’à partir de leur second accès sur le site, les visiteurs auront un cache plein et ces fichiers seront renvoyés par leur disque dur et non plus par le réseau ?". Eh bien la réponse réside plus ou moins dans la question, il s’agit d’accélérer le chargement des pages lors d’une première visite et donc d’un accès fait avec un cache vide ; ceci se justifie encore une fois du fait que les fichiers sont regroupés et donc potentiellement plus lourds car certaines directives (CSS, JS, ...) sont inutilisées sur certaines pages mais bien présentes dans ces fichiers.

Ok, alors comment je fais pour compresser mes composants ? C’est très simple, depuis l’arrivée du protocole HTTP 1.1 et depuis Internet Explorer 4, presque tous les navigateurs sont capables de décompresser un contenu renvoyé compressé par le serveur ; ne vous préoccupez pas de ceux qui n’en sont pas capables, le même contenu leur sera alors automatiquement renvoyé non-compressé pour qu’il n’y ait aucun risque d’incompatibilité. Concrètement, vous configurez votre serveur Apache (pour ceux qui ne me suivent pas régulièrement, je ne fais état sur ce Blog que d’Apache étant le seul que je connais) via httpd.conf ou .htaccess (à la racine) pour qu’il compresse les fichiers souhaités avant de les renvoyer à vos visiteurs qui les décompresseront ensuite avant de les lire (et les stocker dans leur cache navigateur), le tout d’une manière totalement transparente et automatique. Sachez que les résultats de cette méthode sont visibles dès les premières secondes après sa mise en place et que son efficacité permet de réduire - d’après Yahoo - les temps de réponse d’environ 70%, pour une seule ligne de code !

La syntaxe à adopter est différente selon la version d’Apache que vous utilisez. En effet, Apache 1.3+ se sert du module mod_gzip (à télécharger sur cette page, aide à l’installation et à l’utilisation sur cette page) tandis qu’Apache 2+ intègre par défaut le module mod_deflate qui est très simple à utiliser. Si vous ne savez pas lequel choisir, vous pouvez toujours essayer le code suivant : <IfModule mod_deflate.c>
<FilesMatch "\.(html|php|txt|xml|js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule> qui fait un test de présence pour mod_deflate avant de compresser uniquement vos fichiers HTML, PHP, TXT, XML, JS et CSS. Vous pourrez ensuite vérifier si ce snippet a fonctionné grâce au sous-menu "Components" de YSlow. Ces quelques lignes de code donnent exactement le même résultat que celle-ci qui est toutefois plus propre (se servant des mime-type) : AddOutputFilterByType DEFLATE text/html text/xml application/xhtml+xml text/plain application/javascript text/css Une dernière chose, n’essayez pas de compresser via Gzip/Deflate vos images, PDF ou autre qui sont des fichiers déjà compressés lors de leur production logicielle. Les risques sont de consommer des ressources processeur de votre serveur pour rien (eh oui, compresser c’est nécessaire, très bien, mais pas gratuit ni magique) voire d’augmenter leur poids.

Des questions ?

0 commentaire.

Billet lu 0 fois.   Écrit par : Sebastien P.

< Billet précédent | Haut de la page | Billet suivant >

Le module de commentaires est temporairement désactivé.
Merci de votre compréhension.