Rectifier l’avertissement de mise en cache du navigateur
Google PageSpeed Insights est un outil précieux parmi d’autres pour évaluer les performances d’un site web. Néanmoins, certaines de ses recommandations, notamment l’avertissement « Leverage Browser Caching » (exploiter la mise en cache du navigateur), peuvent sembler complexes pour les propriétaires de sites peu expérimentés.
En analysant de plus près, la notion de mise en cache n’est pas si difficile à comprendre. En apportant quelques ajustements, il est possible d’implémenter cette bonne pratique de développement sur votre site, ce qui aura pour effet de réduire les temps de chargement et d’améliorer votre score sur PageSpeed.
I. Définition de l’avertissement Leverage Browser Caching ou exploitation de la mise en cache du navigateur
L’avertissement « Leverage Browser Caching » est l’un des nombreux « diagnostics » utilisés par Google PageSpeed pour vous suggérer d’améliorer votre score. Dans la version 5 de Google PageSpeed Insights, cet avertissement a été remplacé par l’avertissement « Servez des ressources statiques avec une politique de cache efficace ». Bien que le libellé et l’apparence aient changé, la solution à ces avertissements reste la même.
Google recommande d’utiliser la mise en cache du navigateur pour réduire le temps de chargement des pages et améliorer les performances. En résumé, la mise en cache permet aux navigateurs des utilisateurs de stocker des copies statiques des pages de votre site. Ainsi, lors des visites ultérieures, le contenu peut être chargé plus rapidement car le navigateur n’a pas besoin de contacter le serveur de votre site pour accéder aux ressources demandées. Cependant, chaque ressource mise en cache doit avoir une période d’expiration définie. Cela permet aux navigateurs de savoir quand le contenu de votre site est devenu obsolète, afin de remplacer la copie en cache par une version mise à jour.
Si vous constatez l’avertissement « Leverage Browser Caching » dans les résultats de votre test de performance, cela signifie probablement l’une des deux choses suivantes :
- Les en-têtes Cache-Control ou Expires sont absents du serveur de votre site ou d’un tiers.
- Les en-têtes nécessaires sont présents, mais le délai d’expiration est très court, ce qui limite leur impact sur les performances.
Les solutions à cet avertissement consistent à résoudre l’un ou les deux de ces problèmes.
II. Différentes techniques pour rectifier la mise en cache du navigateur dans WordPress
2.1. Minimiser l’utilisation de scripts tiers
Il est possible que l’inclusion du script Google Analytics peut entraîner des problèmes pour votre score sur Google PageSpeed Insights, car il est hébergé sur les serveurs de Google, ce qui signifie que vous n’avez pas le contrôle sur la mise en cache. Cela s’applique également à d’autres scénarios impliquant des tiers. Si vous gérez une entreprise via votre site web WordPress, il est probable que vous exécutiez d’autres scripts tiers pour le suivi des conversions, les tests A/B, etc.
Ces scripts peuvent être des pixels de conversion pour Facebook, Crazy Egg, Hotjar, ou d’autres outils similaires. Malheureusement, à moins que vous ne trouviez un moyen d’héberger ces scripts localement, il est difficile de prendre le contrôle de leur mise en cache. Une option pour les utilisateurs du pixel Facebook est d’utiliser un autre plugin tel que WP-Rocket. Idéalement, pour améliorer votre score sur Google PageSpeed, il est recommandé de minimiser l’utilisation de scripts tiers. Il peut être utile de réaliser un audit de votre site et de supprimer les scripts qui ne sont pas essentiels à son fonctionnement.
2.2. Insérer des en-têtes Cache-Control et Expires
Pour ajouter les en-têtes Cache-Control et Expires à votre site web, suivez les étapes suivantes :
-
- Accédez aux fichiers de configuration de votre serveur, tels que le fichier .htaccess pour Apache ou le fichier de configuration correspondant pour Nginx.
- Recherchez la section de configuration relative aux en-têtes HTTP.
- Ajoutez les lignes suivantes pour définir les en-têtes Cache-Control et Expires :
- Pour Apache :
- <IfModule mod_headers.c>
- <FilesMatch « \.(jpg|jpeg|png|gif|ico|css|js)$ »>
- Header set Cache-Control « max-age=86400, public »
- Header set Expires « Sun, 19 Jun 2023 23:59:59 GMT »
- </FilesMatch>
- </IfModule>
- Pour Nginx :
- location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
- expires 1d;
- add_header Cache-Control « public »;
- }
- Pour Apache :
Vous pouvez ajuster les extensions de fichiers selon vos besoins. Ces exemples indiquent aux navigateurs de mettre en cache les fichiers spécifiés, tels que les images, icônes, feuilles de style et scripts JavaScript, pendant une journée (86400 secondes). Vous pouvez modifier ces valeurs selon vos préférences.
-
- Enregistrez les modifications et redémarrez votre serveur web pour que les changements prennent effet.
Après avoir ajouté ces en-têtes, les navigateurs des utilisateurs mettront en cache les ressources concernées, ce qui permettra de les recharger à partir du cache plutôt que de les télécharger à chaque visite. Cela améliorera les performances de votre site web.
2.3. Utilisation du script Google Analytics
L’utilisation du script Google Analytics peut entraîner des problèmes liés à l’avertissement « Leverage Browser Caching » sur Google PageSpeed Insights, car le script est hébergé sur les serveurs de Google, ce qui signifie que vous n’avez pas un contrôle direct sur la mise en cache. Cependant, il existe une solution pour améliorer la mise en cache du script Google Analytics. Vous pouvez utiliser une version locale du script au lieu de celui hébergé sur les serveurs de Google. Voici les étapes générales pour le faire :
-
- Téléchargez la version locale du script Google Analytics à partir du site officiel de Google Analytics ou utilisez une bibliothèque tierce qui fournit une version locale du script.
- Placez le fichier du script Google Analytics sur votre propre serveur.
- Modifiez le code de votre site web pour référencer la version locale du script plutôt que celle hébergée par Google. Vous devrez remplacer l’URL du script par le chemin local vers le fichier que vous avez téléchargé.
- Une fois que vous avez mis en place la version locale du script, vous pouvez ajouter des en-têtes Cache-Control et Expires pour contrôler la mise en cache du script. Vous pouvez suivre les étapes mentionnées précédemment pour ajouter ces en-têtes à votre serveur.
En utilisant une version locale du script Google Analytics et en configurant correctement les en-têtes de mise en cache, vous pouvez améliorer la performance et éviter l’avertissement « Leverage Browser Caching » pour Google Analytics sur Google PageSpeed Insights.
Ce qu’il faut retenir de l’avertissement de mise en cache du navigateur dans WordPress
En conclusion, rectifier l’avertissement de mise en cache du navigateur dans WordPress, tel que l’avertissement « Leverage Browser Caching » sur Google PageSpeed Insights, est crucial pour améliorer les performances de votre site web. Cela permet de réduire les temps de chargement et d’offrir une meilleure expérience utilisateur. Pour résoudre cet avertissement, vous pouvez prendre plusieurs mesures. Tout d’abord, minimiser l’utilisation de scripts tiers, tels que Google Analytics et d’autres outils de suivi, en les hébergeant localement si possible. Réalisez un audit de votre site et supprimez les scripts qui ne sont pas essentiels. Ensuite, ajoutez les en-têtes Cache-Control et Expires à votre site web en modifiant les fichiers de configuration de votre serveur. Ces en-têtes indiquent aux navigateurs de mettre en cache les ressources spécifiques de votre site, telles que les images, les feuilles de style et les scripts JavaScript, pour une période déterminée. Grâce à cela, les navigateurs peuvent charger ces ressources directement depuis le cache plutôt que de les télécharger à chaque visite, ce qui se traduit par une amélioration des performances.
Pour le script Google Analytics, utilisez une version locale du script et configurez les en-têtes de mise en cache pour contrôler sa mise en cache. En appliquant ces techniques, vous pourrez rectifier l’avertissement de mise en cache du navigateur dans WordPress et améliorer significativement les performances de votre site web, offrant ainsi une expérience utilisateur optimale.
