La vitesse de chargement d’un site web est devenue primordiale ces dernières années. Il est donc, très intéressant du point de vue du visiteur de votre site et de votre positionnement dans les moteurs de recherches de répondre efficacement à ce besoin.
Or, la récupération des ressources sur le web est à la fois lente et coûteuse parce que chaque fois qu’un utilisateur consulte une page de votre site, le navigateur télécharge le code HTML, CSS, JS, les images, les polices et tout autre élément requis pour que la page s’affiche correctement.
Ce téléchargement peut nécessiter plusieurs allers et retours entre le client (navigateur) et le serveur d’hébergement, ce qui retarde le traitement et peut bloquer le rendu du contenu de la page web.
C’est quoi le Leverage browser caching ?
Le Leverage browser caching est un principe d’optimisation de chargement des sites web qui se base sur le système du cache dans les navigateurs web. Il permet d’indiquer au navigateur de l’utilisateur quels fichiers peuvent être enregistrés dans son cache afin que la prochaine fois que le fichier soit demandé, il n’a pas besoin d’être de nouveau téléchargé. Cette technique est efficace parce qu’elle réduit le nombre de requêtes effectuées par le navigateur au serveur distant.
Il est à rappeler que le cache d’un navigateur est un système analogue à une mémoire tampon qui stocke les données demandées suite à une visite d’une page web. Ces données sont téléchargées lors de la première visite du site puis récupérées à toute visite ultérieure (tant que l’internaute n’a pas bien sûr vider le cache de son navigateur) ce qui permet d’éviter le besoin d’envoi d’une requête pour charger ces fichiers depuis le serveur via Internet.. La récupération des fichiers à partir du cache en mémoire est évidemment agile (infra-millisecondes).
Comment réparer le Leverage browser caching ?
Lorsqu’on observe un ralentissement dans un site web, on effectue généralement un test de performance du site via l’un des outils gratuits de test de performance tels que : Gtmetrix, Pingdom, Google PageSpeed Insights.
Ces outils testent votre site suivant un certain nombre de critères de performance. Parmi ces critères, il existe le critère de Leverage browser caching qui est généralement oublié par les webmasters.
Afin de corriger le Leverage browser caching et obtenir une évaluation de 100% sur ce critère, il suffit d’appliquer l’une des solutions suivantes :
- Soit mettre le code approprié dans le fichier .htaccess
- Soit installer et configurer un plugin de cache dans votre CMS
1ère méthode : Réparer le Leverage browser caching via le fichier .htaccess
Pour résoudre le problème de Leverage browser caching, il suffit d’ajouter le code ci-dessous dans le fichier .htaccess se trouvant à la racine de votre site :
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg « access plus 1 year »
ExpiresByType image/gif « access plus 1 year »
ExpiresByType image/png « access plus 1 year »
ExpiresByType image/webp « access plus 1 year »
ExpiresByType image/svg+xml « access plus 1 year »
ExpiresByType image/x-icon « access plus 1 year »
# Video
ExpiresByType video/mp4 « access plus 1 year »
ExpiresByType video/mpeg « access plus 1 year »
# CSS, JavaScript
ExpiresByType text/css « access plus 1 month »
ExpiresByType text/javascript « access plus 1 month »
ExpiresByType application/javascript « access plus 1 month »
# Others
ExpiresByType application/pdf « access plus 1 year »
ExpiresByType application/x-shockwave-flash « access plus 1 year »
</IfModule>
Comme c’est indiqué dans ce code, la mise en cache au niveau du navigateur dépend du type du média : Généralement, on paramètre le cache des images, vidéos et les fichiers pdf pour s’expirer après une longue période (ici une année) car ces fichiers se modifie peu. Par contre, la récupération des fichiers CSS et JS est paramétrée pour être faite dans un mois car ces fichiers sont susceptibles d’être modifiés souvent surtout si le site est nouvellement mis en ligne.
2ème méthode : Réparer le Leverage browser caching via un plugin de cache
Les CMS tels que WordPress, Joomla, Drupal, Typo, … sont basés sur plusieurs fichiers CSS et JS en plus des images qui peuvent être utilisés selon la thématique. Ils nécessitent donc un travail d’optimisation de performance parfois plus qu’un développement spécifique. Pour faciliter cette tâche, la communauté du CMS a développé des extensions permettant d’appliquer les meilleurs pratiques d’optimisation de performance tels que la minification, le Leverage browser caching, la compression des images, …
Dans le cas du CMS WordPress, la majorité des plugins connus de gestion de performance sont basés sur le principe de cache que ce soit dans le serveur ou chez le client. Parmi les plugins les plus populaires pour « Leverage browser caching » dans WordPress, on peut citer : WP Fastest Cache et W3 Total Cache qui sont gratuits et WP Rocket qui est payant.
