Maintenant que vous avez vu comment alléger les pages de votre site, nous allons voir comment optimiser le téléchargement de ces pages par le navigateur.
Maîtrisez la mise en cache
La mise en cache est le processus de stockage de données dans un cache, une zone de stockage de données temporaire et rapide, pour que celles-ci soient retrouvées plus rapidement et facilement par la suite.
Vous pouvez y stocker ce que vous voulez :
images ;
ressources CSS et JS ;
même vos pages HTML.
Il existe plusieurs types de cache. Le fait de mettre en cache des informations peut être fait à plusieurs niveau de votre site web. Dans ce chapitre, nous verrons en détail le cache navigateur, qui est le plus rapide à mettre en place et qui convient pour la majorité des sites Internet.
Comment fonctionne le cache navigateur ?
Lorsqu'un visiteur de votre site consulte une page pour la première fois, le cache navigateur est vide. Son navigateur va donc télécharger les éléments de la page et les sauvegarder dans un espace temporaire.
La prochaine fois qu’il visitera cette même page, son navigateur n’aura pas à retélécharger toutes les informations. Ceci permet donc un gain de temps significatif pour charger la page !
Voici les autres types de cache que vous pourriez mettre en place :
le cache au niveau de votre base de donnée. Si votre application ou votre site web effectuent beaucoup de requêtes vers une base de données, il peut être pertinent d’installer un cache de requête pour les informations qui ne changent pas souvent ! Ceci implique de stocker le résultat de certaines requêtes pour diminuer l’utilisation de la base de données et gagner en performance ;
le cache au niveau de votre application : vous pouvez également installer un cache au niveau de votre serveur, par exemple en utilisant nginx ou varnish.
Dans tous les cas, n’oubliez pas : il ne faut mettre en cache que des informations qui ne changent pas souvent !
Paramétrez le cache navigateur
Pour avertir le navigateur des fichiers à mettre en cache et de la durée de celui-ci, vous allez paramétrer les en-têtes HTTP de vos ressources :
l'en-tête Cache-Control définit l'âge maximum d'une ressource (en secondes), c’est-à-dire la durée maximum pendant laquelle cette ressource est valable ;
l'en-tête Expires est utilisée pour spécifier un moment précis (une date) où la ressource n'est plus valide.
Pourquoi utiliser les deux méthodes ?
Oui, elles sont complémentaires, car certains anciens navigateurs ne comprennent pas l'en-tête Cache-Control.
Exemple
Prenons à nouveau pour exemple un serveur Apache, qui est la technologie la plus utilisée chez les hébergeurs. Le paramétrage de ce cache va se situer dans votre fichier .htaccess. Voici ci-dessous le code à ajouter :
Code à ajouter pour l'en-tête Cache-Control
# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|swf|css|gz)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\.(js)$">
Header set Cache-Control "max-age=2592000, private"
</FilesMatch>
<filesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, public"
</filesMatch>
# Enleve le cache pour les ressources dynamiques
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
# END Cache-Control HeadersCode à ajouter pour l'en-tête Expires
# BEGIN Expires Headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
# END Expires HeadersTestez votre paramétrage
Il est indispensable que vous testiez le paramétrage de votre cache ! En effet, suivant les particularités de votre site ou application web, il est possible que certaines ressources changent plus souvent que d’autres.
Vous pouvez utiliser un site tel que celui-ci : cache checker. Il vous permettra de vérifier, pour chaque ressource, si le cache est bien paramétré, et combien de temps elle doit rester en cache.
Vous vérifiez ensuite que ces ressources ne sont pas mises à jour plus souvent que la durée de leur cache.
Cela vous permettra d’adapter la durée du cache par rapport à la mise à jour de vos ressources !
En bref
Un cache est un espace de stockage de données temporaire, permettant de réafficher ces données plus rapidement.
La mise en cache navigateur permet d’accélérer le temps de chargement de vos pages pour vos visiteurs lorsqu’ils reviennent sur votre site.
Adaptez la durée du cache par rapport à la mise à jour de vos ressources !
Maintenant que vous savez paramétrer le cache navigateur, découvrez, dans le prochain chapitre, comment accélérer encore plus votre site web, grâce à la mise en place d’un CDN !
