Accueil > optimisation > compression-gzip-htaccess

{ Activer la compression gzip avec htaccess }

Introduction

Accélérer le chargement d'un site grâce à la compression Gzip

La compression est un moyen simple et efficace d'economiser de la bande passante et d'accélérer la vitesse de chargement de votre site.

Le seul inconvénient étant que certains anciens navigateurs ne reconnaissent pas la compression gzip, ce qui pas conséquent est un problème d'accessibilité. Seulement voilà, nous sommes en 2010 (en tous cas au moment où j'écris cet article ^^) et une très forte majorité du traffic web provient de navigateurs modernes. C'est pouquoi je pense qu'on peut aujourd'hui se permettre d'utiliser la compression gzip d'autant plus qu'il n'y pas de raison, dans le fond, que 95% des visiteurs de mon site soit privé d'un chargement rapide uniquement parce que quelque personnes utilisent encore Internet Explorer 4 ou encore une vieille version de Netscape. Donc faîtes places au mode Deflate !

Heu oui.. mais pourquoi on fait ça au juste

Entrons dans le vif du sujet et laissez moi vous expliquer plus en détails pourquoi nous devrions tous utiliser la compression pour nos sites.

Lorsque derrière votre écran vous entrez l'adresse d'un site dans la barre d'adresse de votre navigateur et que vous pressez la touche enter, votre navigateur va effectuer ce qu'on appelle une requête cette requête va initialiser une sorte de conversation entre votre navigateur et le serveur où le site est hébergé.

Voilà à peu de choses près à quoi ressemble cette conversation entre le PC et le serveur :

1. Votre navigateur : Salut, il me faut la page /index.html

2. Le serveur : Ok, bouge pas je vais voir si je le trouve...

3. Le serveur : C'est bon je l'ai trouvée, je t'envoie le fichier.

4. Votre navigateur : Oulà la page pèse 100KB ?! Bon... on attends que ça charge, on attend, ça y est c'est arrivé !

Bien entendu cela se passe de manière un peu plus complexe mais c'est pour que vous saississiez bien le concept.

en image :

requête HTTP

requ

Et alors ? où est le problème ?

Je vous l'accord le système fonctionne mais ç'est pas super efficace ! Dîtes vous bien que 100KB ça représente une belle quantité de texte et franchement (vous me direz si vous êtes d'accord) mais le html c'est tr&`s redondant ! Entre les <div> les <p> etc, les balises sont quasiment toujours les mêmes pour la plupart des pages et on connaît déjà la syntaxe des balises fermantes. On peut aussi relever qu'il est courant d'avoir plusieurs fois les mêmes mots sur un page qui se répète au fil d'un article (ce qui est quasiment tout le temps le cas).

Et c'est précisement là que la compression gzip entre en action !

Si le serveur peut envoyer un fichier compressé au format .zip par exemple (index.html.zip) à la place du classique index.html alors on pourra économiser de la bande passant puisque le poids du fichier se sera vu réduit par la compression. A l'arrivé le navigateur peut décompressé le contenu du .zip et vous l'afficher plus rapidement ! Ce qui est tout à votre avantage !

Reprenons notre exemple du début et voyons à quoi ressemble il ressemble avec, cette fois, la compression serveur activée.

1. Votre navigateur : Salut, il me faut la page /index.html Je prendrai la version compressé si tu l'as.

2. Le serveur : Ok, bouge pas je vais te chercher ça, version compressée tu as dis ? Génial !

3. Le serveur : J'ai trouvé la page que tu cherches, je la compresser et te l'envoi de suite.

4. Votre navigateur : Super la page ne fait que 10KB. Je la décompresser pour la montrer à l'utilisateur.

en image :

requête HTTP compressée

La formule est simple : petit fichier = téléchargement rapide = happy user

Comment ça vous y croyez pas ! ? Regardez :

compression Yahoo

`

Les détails techniques de l'astuce

L'astuce dans l'échange entre le serveur et le navigateur et de savoir si les deux accepte cette technique. Il y deux conditions à cela

Le navigateur doit envoyer une en-tête (header) afin de dire au serveur qu'il accepte les pages compressées : Accept-Encoding : gzip, deflate

Le serveur doit support la compression et avoir le module installé (mod Deflate) : Content-Encoding : gzip

Si le serveur n'envoie pas en retour l'en-tête cela signifie que le fichier n'a pas été compressé (fais défaut sur beaucoup de serveurs). Le Accept-Encoding : gzip, deflate qu'envoie le navigateur au serveur est simplement une en-tête pas une demande ! Pas conséquent si le serveur ne veut pas renvoyer la page compressée alors le navigateur devra faire avec...

Activer la compression serveur !

On y vient ^^ Comment faire pour activer la compression automatique des contenus envoyés par le serveur.

La "bonne nouvelle" c'est qu'on ne peut pas régler cette option dans le navigateur, dans tous les cas il enverra l'en-tête "Accept-encoding : gzip, deflate" Notre rôle consistera donc à configurer le serveur pour qu'il envoie le contenu compressé.

Pour les serveurs Apache, l'activation de la compression gzip est assez simple : insérer le code suivant dans votre fichier .htaccess (si vous n'en avez pas à la racine de votre site, alors créer le

Technique 1

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Technique 2

# compress certain file types by extension:
<Files *.html>
SetOutputFilter DEFLATE
</Files>

Apache possède, en réalité, deux options de compression :

1. Le mod_deflate qui est plus simple à mettre en place et standard

2. Le mod_gzip est plus puissant car permet une "pré-compression" des contenus

Le premier mode (mod_deflate) est rapide est fonctionnel. Vous pouvez utililser le mode gzip si vous pensez que votre site en a vraiment besoin ou que cela apporte un réel plus. Dans tous les cas Apache vérifira si le navigateur a envoyé l'en-tête "Accept-encoding" et envoi la version compressé ou normale du fichier demandé.

Cool ton astuces mais moi je ne peux pas accéder au .htaccess ! Je fais comment ?

Bien sur il existe une autre solution qui permet d'activer la compression gzip pour les pages de son site ! La solution est en PHP et est expliquée plus en détail dans le tutoriel "Activer la compression gzip avec PHP"