Bonnes pratiques pour accélérer votre site web

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 :

Expires: Thu, 15 Apr 2015 20:00:00 GMT

Pour les composants dynamiques : l’utilisation de l’entête Cache-Control pour définir la date de mise à jour du composant au navigateur

Cache-Control: max-age=3600, must-revalidate

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 :

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"

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 :

<IfModule mod_deflate.c>
<FilesMatch "\.(html|php|txt|xml|js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

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

• Les meilleures pratiques en matière de performance Web selon Google
• Extension Page Speed : à utiliser sans modération
• Les 35 bonnes pratiques en matière de performance Web selon Yahoo!
• un excellent tutoriel sur l’utilisation du cache de Mark Nottingham
• Un article d’Olivier Duffez pour webrankinfo qui synthétise bien les bonnes pratiques

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.