Le temps de chargement d'un site est un aspect important à ne pas laisser de côté lors du développement. 80 % du temps de réponse du navigateur est passé sur le front-end, il se doit d'être optimisé. Un visiteur qui doit attendre 2 minutes que le site se charge, je n'en connais pas — 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.
Optimiser la page et les médias
Il semble évident qu'une 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. Il n'est pas rare de voir des sites qui utilisent une 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. Il faut se rappeler que 40 à 60 % des visiteurs de votre site arrivent avec un cache navigateur vide — ils 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'extensions Firebug et Page Speed vous pouvez vous en rendre compte assez facilement. Le but est de minimiser le nombre d'éléments à charger afin de réduire les requêtes HTTP. Il existe pour cela beaucoup de techniques :
- Les Sprites CSS sont une excellente méthode pour réduire le nombre d'images. Combinez vos images de fond en une seule image et utilisez 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
Des ressources utiles pour automatiser :
- minify-js : Script PHP pour optimiser et combiner vos fichiers JS
- minify-css : Script PHP pour optimiser et combiner vos fichiers CSS
- WP-Minify : Extension 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.
Cache navigateur
Le navigateur peut garder des fichiers afin d'éviter de les charger à chaque visite du site. Pour les composants statiques (images, flash…), à l'aide de l'entête expire, repoussez la date de chargement d'une ressource. Par exemple :
Expires: Thu, 15 Apr 2015 20:00:00 GMT
Pour les composants dynamiques, l'utilisation de l'entête Cache-Control définit la date de mise à jour :
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. GZip est le module de compression des versions d'Apache 1.3 et les suivantes (mod_gzip) tandis que les versions 2 d'Apache et les suivantes se basent sur Deflate (mod_deflate). Voici un exemple pour 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>