Google PageSpeed Insights est l’un des nombreux outils utiles pour mesurer les performances d’un site web. Cependant, certaines de ses suggestions, comme l’avertissement « Leverage Browser Caching », peuvent être déroutantes pour les propriétaires de sites inexpérimentés.
Quand on le décompose, la mise en cache n’est pas si difficile à comprendre. Avec quelques ajustements, vous pouvez mettre en œuvre cette meilleure pratique de développement sur votre site pour réduire les temps de chargement et améliorer votre score PageSpeed.
Dans cet article, nous allons commencer par une introduction à l’avertissement Leverage Browser Caching. Ensuite, nous partagerons plusieurs conseils pour résoudre ce problème sur votre site WordPress.
Allons-y !
Qu’est-ce que l’avertissement Leverage Browser Caching ?
Afin de comprendre l’avertissement Leverage Browser Caching, il est utile de connaître un peu le fonctionnement de Google PageSpeed Insights. Si vous êtes nouveau sur la plateforme, nous vous recommandons de lire notre guide complet, Google PageSpeed Insights : Obtenir un score de 100/100 avec WordPress.
L’avertissement Leverage Browser Caching est l’un des nombreux « diagnostics » que Google PageSpeed utilise pour vous suggérer d’améliorer votre score, comme celui-ci :
Dans la version 5 de Google PageSpeed Insights, ce message a été remplacé par l’avertissement « Servez des ressources statiques avec une politique de cache efficace » :
Malgré le changement de langue et d’apparence, la solution à ces avertissements est la même.
Google suggère d’utiliser la mise en cache du navigateur pour réduire le temps de chargement des pages et améliorer les performances. En bref, la mise en cache consiste pour les navigateurs des utilisateurs à enregistrer des copies statiques des pages de votre site. Ensuite, lors des visites suivantes, ce contenu peut être rechargé 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 a besoin d’une période d’expiration déterminée. Celle-ci indique aux navigateurs quand le contenu de votre site est devenu obsolète, afin qu’ils puissent remplacer la copie en cache par une version mise à jour.
Si vous voyez l’avertissement « Leverage Browser Caching » dans vos résultats de 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 de celui d’un tiers.
- Les en-têtes nécessaires sont présents, mais le délai d’expiration est très court et n’a donc pas beaucoup d’impact sur les performances.
Les solutions à cet avertissement consistent à régler l’un de ces problèmes ou les deux.
Comment corriger l’avertissement Leverage Browser Caching dans WordPress (3 méthodes)
Il y a plusieurs façons de corriger l’avertissement Leverage Browser Caching dans WordPress, selon la cause de l’erreur. Voici trois solutions que vous pouvez essayer.
1. Ajouter des en-têtes Cache-Control et Expires
Il existe deux en-têtes liés à la mise en cache des navigateurs : Cache-Control et Expires. Au moins un de ces en-têtes doit être présent pour permettre la mise en cache du navigateur pour votre site, car c’est ainsi que les navigateurs déterminent combien de temps ils doivent conserver les ressources avant de les actualiser.
Une façon simple de déterminer si c’est ce qui provoque l’avertissement Leverage Browser Caching est de regarder les détails donnés pour chaque ressource. Dans Google PageSpeed Insights Version 5, vous verrez plutôt « Aucun » dans la rubrique Cache TTL :
À titre de référence pratique, les versions précédentes de Google PageSpeed Insights affichaient un message « expiration non spécifiée » lorsque les en-têtes étaient manquants :
Alors que l’en-tête Cache-Control active la mise en cache côté client et définit l’âge maximum d’une ressource, l’en-tête Expires est utilisé pour spécifier un moment où la ressource n’est plus valide.
Il n’est pas forcément nécessaire d’ajouter les deux, car cela peut être redondant. Cache-Control est plus récent et est généralement la méthode recommandée. Cependant, certains outils de performance web, comme GTmetrix, vérifient toujours les en-têtes Expires.
Si vous êtes hébergé chez Kinsta, vous n’avez pas à vous soucier de la mise en place de ces en-têtes. Tous nos serveurs Nginx les incluent déjà. Ceux qui utilisent un Content Delivery Network (CDN) devraient également avoir déjà ces en-têtes appliqués.
Si vous utilisez un autre fournisseur d’hébergement, veillez à sauvegarder votre site avant de suivre les étapes ci-dessous, car la modification du fichier .htaccess pourrait endommager votre site si vous ne faites pas attention.
Comment ajouter des en-têtes de contrôle de cache dans Nginx
Pour ajouter des en-têtes Cache-Control dans Nginx, vous pouvez ajouter les éléments suivants au fichier de configuration de votre serveur :
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Cela indique à votre serveur que les types de fichiers spécifiés ne vont pas changer pendant au moins 30 jours. Il conservera les fichiers concernés pendant cette période avant de les actualiser.
Comment ajouter des en-têtes Cache-Control dans Apache
Si vous disposez d’un serveur Apache, vous pouvez ajouter le code suivant dans votre fichier .htaccess :
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>
Cet extrait de code doit être ajouté avant « #BEGIN WordPress » ou après « #END WordPress ». Dans ce cas, le cache est réglé pour expirer après 84 600 secondes.
Comment ajouter des en-têtes Expires dans Nginx
Vous pouvez ajouter les en-têtes Expires dans Nginx en ajoutant ce qui suit à votre bloc serveur. Dans cet exemple, vous pouvez voir comment spécifier différentes durées d’expiration en fonction des types de fichiers :
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Comment ajouter des en-têtes Expires dans Apache
Vous pouvez ajouter les en-têtes Expires dans Apache en ajoutant ce qui suit à votre fichier .htaccess :
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##Vous pouvez ensuite vérifier vos en-têtes en passant à nouveau votre site sur Google PageSpeed Insights et en vérifiant si l’avertissement persiste.
2. Leverage Browser Caching pour Google Analytics
Ironiquement, Google Analytics est parfois la cause de l’avertissement Leverage Browser Caching et d’un score PageSpeed imparfait. Cela s’explique par le fait que le délai d’expiration du cache est faible, à peine deux heures. C’était l’ancien avertissement :
Dans la version 5 de PageSpeed Insights, ce problème ne donne plus lieu à un avertissement, mais Google Analytics pourrait toujours être listé comme une ressource non optimisée :
Vous ne pourrez pas changer cela avec les en-têtes Cache-Control ou Expires car la ressource n’est pas sur votre serveur. Cependant, il existe un moyen de tirer parti de Leverage Browser Caching pour Google Analytics en hébergeant le script localement.
Sachez toutefois que cette méthode n’est pas supportée par Google.
Exploiter la mise en cache du navigateur pour Google Analytics Complete Analytics Optimization Suite
Si vous voulez résoudre le problème ci-dessus, il existe une extension gratuite appelé Complete Analytics Optimization Suite (CAOS) développé par Daan van den Bergh que vous pouvez utiliser :
Vous pouvez télécharger CAOS depuis le répertoire des extensions WordPress ou en le recherchant dans Extensions > Ajouter dans votre tableau de bord WordPress.
L’hébergement local de votre script d’analyse présente d’autres avantages, notamment celui de réduire de deux à une le nombre de requêtes HTTP externes adressées à Google et de vous permettre de contrôler totalement la mise en cache du fichier. Cela signifie que vous pouvez utiliser les en-têtes du cache comme nous vous l’avons montré plus tôt.
Pour commencer, installez l’extension, puis saisissez votre ID de suivi Google Analytics. L’extension ajoute le code de suivi nécessaire pour Google Analytics à votre site WordPress, télécharge et enregistre le fichier analytics.js sur votre serveur, et le maintient à jour à l’aide d’un script planifié dans wp_cron().
Nous vous recommandons également de le régler pour qu’il se charge dans le pied de page :
Gardez à l’esprit que le CAOS ne fonctionnera pas avec d’autres plugins WordPress de Google Analytics.
Leverage Browser Caching pour Google Analytics avec WP-Rocket
Vous pouvez également utiliser l’extension WordPress de mise en cache WP-Rocket pour atteindre le même objectif :
Le module Google Tracking de cette extension vous permet d’héberger votre script d’analyse en local en un clic. Il suffit de basculer l’état dans WP-Rocket > Modules.
WP-Rocket et son module sont compatibles avec les autres extensions de Google Analytics. C’est un outil de premier choix, dont le prix des licences commence à 49 $ par an.
3. Minimisez votre utilisation de scripts tiers
Parfois, le script Google Analytics peut causer des problèmes pour votre score Google PageSpeed Insights parce qu’il est hébergé sur le serveur de Google, donc vous n’avez pas le contrôle du cache.
Il en va de même pour les autres scénarios de tierces parties. Si vous gérez une entreprise via votre site web WordPress, il est fort probable que vous ayez d’autres scripts tiers en cours d’exécution pour suivre les conversions, les tests A/B, etc.
Il peut s’agir de scripts tels que les pixels de conversion Facebook, Crazy Egg, Hotjar et autres. Malheureusement, à moins que vous ne trouviez un moyen d’héberger ces scripts localement, il n’y a pas grand-chose que vous puissiez faire pour en prendre le contrôle.
Une option pour les utilisateurs de Facebook Pixel est d’utiliser encore un autre module WP-Rocket. L’idéal est de réduire au minimum l’utilisation de scripts tiers si vous souhaitez améliorer votre score Google PageSpeed. Il peut donc être utile de procéder à un audit de votre site et de supprimer les scripts qui ne sont pas nécessaires à son fonctionnement.
Résumé
Bien qu’il ne constitue pas une mesure définitive des performances de votre site, Google PageSpeed Insights reste un bon indicateur de son fonctionnement. Améliorer votre score en résolvant les avertissements indiqués sous la rubrique « Servez des RESSOURCES statiques avec une politique de cache efficace » peut contribuer à rendre votre site web plus rapide et plus utilisable par les visiteurs.
Si vous voyez cet avertissement dans Google PageSpeed Insights, vous pouvez le résoudre en
- Ajoutant des en-têtes Cache-Control ou Expires.
- Exploitant la mise en cache du navigateur pour Google Analytics.
- Minimisant l’utilisation de scripts tiers.
Avez-vous d’autres conseils pour corriger la mise en cache du navigateur par effet de levier ? Faites-le nous savoir dans la section des commentaires ci-dessous !
Jon est le directeur de l'exploitation chez Kinsta et est impliqué quotidiennement avec les équipes de promotion, de service à la clientèle et de support technique de Kinsta. Jon est un père de famille. Quand il ne pianote pas fébrilement sur les touches de son ordinateur portable, il est généralement en train d'aider l'un de ses enfants à corriger un vélo ou de configurer Netflix pour un enfant d'âge préscolaire impatient.
Laisser un commentaire