Accéder au contenu principal

La compression HTTP pour accélérer vos sites

Avec les récents changements et déclarations de Google autour de la prise en compte de la performance des sites comme un éventuel futur critère de pertinence des sites, les problématiques d'optimisation vont (re)devenir d'actualité.

Un des moyens très rapide pour optimiser sensiblement les performances de son site web consiste à compresser le flux de données qui transite entre votre serveur et le navigateur Internet de vos visiteurs.

D'abord, si vous ne l'avez pas encore lu (soyons honnête : c'est sans doute le cas), je vous invite à lire mon précédent billet sur l'analyse des performances d'un site web pour avoir une description simplifiée des échanges HTTP entre un client et un serveur.

La compression HTTP,  un quick-win de l'optimisation des performances


En qualité, une des méthodes pour prioriser des actions d'améliorations consiste à les placer sur une matrice impact/effort. L'impact, c'est ce que vous allez gagner à mettre en œuvre l'amélioration. L'effort, c'est le prix à payer pour le faire (en temps et/ou en argent).

Cette matrice permet d'identifier de manière simple les quick-wins, ces améliorations qui ne demandent pas un investissement lourd mais produisent un résultat immédiat et conséquent.

La compression des flux HTTP s'inscrit complètement dans ce cadre : rapide à mettre en place (voir lpus bas), elle permet d'obtenir un gain considérable en temps de chargement.

Transférer moins plus gagner du temps


Rappelez-vous (maintenant vous l'avez lu j'espère !), un des leviers d'actions les plus logiques consiste à envoyer moins de données du serveur au client, qui mettra donc moins de temps à récupérer et afficher le contenu de vos pages.

Pour ça nous allons simplement compresser les données qui sont envoyées par votre serveur. Aucun élément de page ne sera perdu ni altéré, il s'agit simplement d'en réduire la taille par un traitement avant l'envoi (côté serveur) et de les remettre dans leurs état initial à l'arrivée (par le navigateur web).

Implémentation


Si vous avez un serveur Apache 2 avec le mod_deflate activé, ajoutez simplement cette ligne à votre fichier .htaccess ou bien créez ce fichier à la racine de votre site si vous n'en n'avez pas encore :

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript application/xhtml+xml application/xml application/rss+xml application/atom_xml
</ifmodule>

Ce code a pour effet de compresser tous les contenus de type texte, javascript, xml et rss. Ce n'est pas besoin d'appliquer une compression aux images, celles-ci sont normalement déjà compressées (jpeg, png, etc.)

Pour vérifier la prise en compte de cette modification, utilisez des outils d'analyse de requêtes HTTP, ou encore les extensions indispensables YSlow ou Google Page Speed.

Démo

Quelques dizaines de Ko gagnés sur un site relativement simple, avec une simple ligne ajoutée dans un htaccess.



Ça serait dommage de passer à côté !

Compatiblité

Sachez que tous les navigateurs récents acceptent l'encodage des flux HTTP. Si vous n'avez pas le choix et devez absolument assurer une compatibilité avec des navigateurs plus anciens, vous pourrez ajouter les lignes suivantes à votre htaccess.

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html


Enfin, si votre hébergement n'accepte pas le mod_deflate, jetez un oeil du côté du mod_gzip. Cette compression moins forte est implémentée sur Apache dans sa version 1.

S'il n'accepte aucun des deux, il vous restera peut-être la possibilité de compresser via php / zlib, solution dont nous reparlerons peut-être une prochaine fois.

Commentaires

  1. Vos astuces sont vraiment excellentes et rare qu'on trouve de tels conseils aussi ciblés et surtout efficaces sur le web! Merci!

    Sinon, je voudrai bien savoir s'il y a moyen d'appliquer ces améliorations sur les blogs hébergés par Blogger, comme le votre ou les miens... surtout avec les fichiers .htaccess et le reste.

    Merci encore pour votre excellent travaille :)

    RépondreSupprimer
  2. Merci pour ton message.
    Malheureusement ce qui fait la souplesse de Blogger est aussi sa faiblesse, a savoir pas d'optimisation côté serveur possible.
    En revanche je t'invite a consulter mon blog dédié a blogger, tu pourras y trouver des conseils d'optimisation spécifiques a la plateforme : http://pourblogger.blogspot.com

    RépondreSupprimer
  3. article intéressent, même si j'arrive en retard.

    RépondreSupprimer

Enregistrer un commentaire

Posts les plus consultés de ce blog

Les outils d'analyse de requêtes HTTP

L'analyse des échanges HTTP entre navigateur et serveur web est un bon moyen de détection des opérations les plus consommatrices en temps, soit celles qui impactent le plus le temps de chargement global d'une page. Tour d'horizon des outils gratuits existants : Outils en ligne D'une utilisation simple et rapide, ces outils proposent une vision synthétique des échanges à travers une chronologie précise des opérations, ainsi que le détail des requêtes et réponses HTTP. Toutefois, ils ne proposent généralement pas les mêmes options qu'un navigateur, notamment en terme de gestion de cache. site-perf.com Pingdom tools L'analyse de ce blog par Pingdom tools Plugins navigateurs Ces outils s'intègrent à votre navigateur, ce qui vous permet de simuler exactement les situations de configurations de vos visiteurs. Firefox Le compagnon idéal est l'extension livehttpheaders , outil de capture des requêtes et réponses HTTP Firebug propose également une analyse complè

Optimiser son site en maitrisant sa mise en cache

Précédemment dans notre quête de la performance, nous avions vu qu'à l'aide de quelques consignes données à notre serveur, nous pouvons alléger la quantité de données reçues par nos visiteurs sans les altérer. Poursuivons le raisonnement. Plutôt que d'alléger les données, posons-nous la question : mon visiteur a t-il vraiment besoin de recevoir cette donnée ? Le principe du cache navigateur est de stocker sur le disque dur du visiteur les composants de pages (images, scripts, page HTML), pour ne pas avoir à les recharger plus tard.