Bonnes pratiques pour accélérer votre site web

Le 22 juillet 2011

Le temps de chargement d’un site est un aspect important à ne pas laisser de coté lors du développement. 80% du temps de réponse du navigateur est passé sur le front-end, il se doit d’être optimisé. En effet un visiteur qui doit attendre sagement 2 minutes que le site se charge, je n’en connais pas (même les retraités passent leur chemin), de plus Google a annoncé officiellement qu’il tenait compte dans son algorithme de positionnement de la rapidité des sites. Cet article vous permettra de gagner de précieuses secondes au chargement ou bien une meilleure note au test webpagetest.org. Voici comment améliorer significativement le temps de chargement des pages de votre site en quelques points.

Optimiser la page et les médias

Il semble évident qu’un page HTML plus légère s’affichera plus vite qu’une autre plus lourde. Mais il faut tenir compte également des médias (images, flash…) surtout s’ils sont trop nombreux et non optimisés. Ils augmenteront énormément ce temps de chargement. Il n’est rare de voir des sites qui utilisent un image de taille fond d’écran pour l’afficher en vignette ! Pour cela rien ne vaut l’outil en ligne smushit qui donne de très bons résultats et d’afficher les médias dans la taille adaptée. il faut se rappeler que 40 à 60% des visiteurs de votre site arrivent avec un cache navigateur vide, il devront tout charger.

Réduire les requêtes HTTP

Après avoir réduit le poids reste la quantité, moins vous avez d’éléments, plus vite le navigateur va les charger. Avec le couple d’extension Firebug et Page Speed vous pouvez vous en rendre compte assez facilement. Le but est de minimiser le nombre d’élément à charger afin de réduire les requêtes HTTP (i.e les demandes faites du navigateur client au serveur). Il existe pour cela beaucoup de techniques :

  • Les Sprites CSS sont la excellente méthode pour réduire le nombre d’images. Combinez vos images de fond en une seule image et utiliser les propriétés CSS background-image et background-position pour afficher la portion d’image désirée.
  • Combiner tous les fichiers CSS en un seul fichier
  • Combiner tous les fichiers JS en un seul fichier

Afin de ne pas avoir à modifier tous vos fichiers voici des ressources qui peuvent être utiles :

  • minify-js : Script PHP pour optimiser et combiner vos fichiers JS
  • minify-css : Script PHP pour optimiser et combiner vos fichiers CSS
  • WP-Minify : Extensions WordPress qui combine vos fichiers CSS, JS et optimise le code HTML.
  • Accélérer l’affichage du site à l’aide de la mise en cache

    La mise en cache consiste à conserver une copie locale ou distante de certains éléments déjà affichés afin d’éviter de les télécharger ou les reconstituer. Le cache peut se situer sur le serveur (cache serveur) ou dans le navigateur (cache client).

    Cache navigateur

    Le navigateur peut garder des fichiers afin d’éviter de les charger à chaque visite du site. Il convient pour cela de modifier les entêtes suivant ces 2 cas de figure :
    Pour les composants statiques (images, flash…) : à l’aide de l’entête expire repousser la date de chargement d’un ressource. Par exemple cette ligne permettra de laisser votre ressource dans le cache navigateur pendant quelques années :
    [html light= »true »]Expires: Thu, 15 Apr 2015 20:00:00 GMT[/html] Pour les composants dynamiques : l’utilisation de l’entête Cache-Control pour définir la date de mise à jour du composant au navigateur
    [html light= »true »]Cache-Control: max-age=3600, must-revalidate[/html]

    Vous pouvez également ajouter les lignes suivantes à votre fichier .htaccess (exemple de Léo) afin de définir un temps d’actualisation propre à chaque type de fichier :

    [html light= »true »] ExpiresActive On
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 year"
    ExpiresByType audio/mpeg "access plus 1 year"
    [/html]

    Cache serveur

    Vous pouvez compresser le contenu d’une page ou d’un fichier à l’aide de la compression GZip ou Deflate. En effet la compression réduit le temps de réponse en réduisant la taille de la réponse HTTP. GZip est le module de compression des versions d’Apache 1.3 et les suivantes (module mod_gzip) tandis que les versions 2 d’Apache et les suivantes se basent sur Deflate (module mod_deflate).

    Pour activer la compression vous devez configurez votre serveur sous Apache en fonction de sa version. Voici un exemple pour un serveur avec une d’Apache 2.0 qui compresse les fichiers HTML, PHP, TXT, XML, JS et CSS :

    [html light= »true »] <IfModule mod_deflate.c>
    <FilesMatch "\.(html|php|txt|xml|js|css)$">
    SetOutputFilter DEFLATE
    </FilesMatch>
    </IfModule>
    [/html]

    Avec les points listés ci-dessus vous pourrez significativement améliorer la rapidité de votre site. Si vous voulez pousser encore plus loin voici des ressources qui vous permettront d’en connaître un rayon sur l’optimisation !

    Plus d’informations


Envie de discuter de cet article ? Envoyer un message sur Twitter ou envoyez-moi un e-mail. Si cet article vous a plu, n'hésitez pas à le partager sur Twitter ou Facebook.

6 Commentaires sur "Bonnes pratiques pour accélérer votre site web"

  • freak0
    22 juillet 2011 (10:01)

    Pour Apache, il y a aussi un module créé par big G qui permet d’appliquer un ensemble de techniques de compressions et d’optimisations. Faites une recherche c’est facile à mettre en œuvre et on gagne tout de suite de précieuses secondes sans effort.

  • freak0
    22 juillet 2011 (10:05)

    J’ai retrouvé le lien : http://code.google.com/p/modpagespeed/

  • Samir
    22 juillet 2011 (11:25)

    En effet, PageSpeed de GG est vachement pratique pour accélerer l’affichage des pages … surtout que Matt Cuts a dit récemment sur une vidéo que Panda privilégiait le temps de réponse au nombre de liens pointant vers le site.

  • David
    22 juillet 2011 (16:09)

    Merci freak0, en effet le mod_pagespeed optimise automatiquement les ressources d’une page web (html + médias) Cela fait gagner encore un peu de temps de chargement. Après faut-il encore avoir la possibilité de charger le mod Apache.

    Samir, effectivement Google en a marre des déchets du web, donc plus ça va aller plus il sera exigeant. Mais bon, nous le sommes bien nous aussi !

  • Chabichou
    1 octobre 2012 (12:59)

    Ah je ne connaissais pas le site webpagetest.org, merci pour l’astuce !
    Je pense que le critère de la rapidité du site va prendre un poids prépondérant à l’avenir, dans les mises à jour successives de l’algorithme de Google.
    Raison de plus pour travailler sur ce facteur !
    Pour des conseils spécifiques sur Joomla, voir par ici