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 la 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 vous donnerons quelques 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 le suivant :

Leverage Browser Caching

Tirer parti de l’avertissement Leverage Browser Caching dans Google PageSpeed Insights

Dans la version 5 de Google PageSpeed Insights, ce message a été remplacé par l’avertissement « Diffusez des éléments statiques grâce à des règles de cache efficaces » :

Avertissement Diffusez des éléments statiques grâce à des règles de cache efficaces dans Google PageSpeed Insights

Avertissement Diffusez des éléments statiques grâce à des règles de cache efficaces dans Google PageSpeed Insights

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 les temps de chargement des pages et améliorer les performances. En bref, la mise en cache est le moment où les navigateurs des utilisateurs enregistrent des copies statiques des pages de votre site. 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 sa copie en cache par une version mise à jour.

Si vous voyez l’avertissement Leverage Browser Caching dans les résultats de vos tests 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 la période d’expiration est très courte 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.

🚨Attention ! Leverage Browser Caching🚨 Si en lisant ces mots votre coeur bat la chamade, vous voudrez consulter ce guide pour réparer ce redoutable message⚡️Click to Tweet

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. Voici trois solutions que vous pouvez essayer.

1. Ajouter les en-têtes Cache-Control et Expires

Il existe deux en-têtes relatifs à la mise en cache des navigateurs : Cache-Control et Expires. Un en-tête doit au moins ê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 rafraîchir.

Une façon simple de déterminer si c’est ce qui provoque l’avertissement Leverage Browser Caching est d’examiner les détails donnés pour chaque ressource. Dans Google PageSpeed Insights Version 5, vous verrez plutôt « Aucune » dans la liste des TTL de la mise en cache :

cache TTl pagespeed

Listes des TTL mises en cache dans Google PageSpeed Insights

À 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 :

Ressources listées dans l'avertissement Leverage Browser Caching

Ressources listées dans l’avertissement Leverage Browser Caching

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, assurez-vous de sauvegarder votre site avant de suivre les étapes ci-dessous, car la modification du fichier .htaccess pourrait casser 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 ce qui suit 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 de contrôle de cache dans Apache

Si vous disposez d’un serveur Apache, vous pouvez ajouter le code suivant à votre fichier .htaccess :

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"

Cet extrait 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 les éléments suivants à 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 expirés dans Apache

Vous pouvez ajouter des 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 de vitesse de page imparfait. Cela s’explique par le fait que le délai d’expiration du cache est faible, à peine deux heures. Voici l’ancien avertissement :

Avertissement Leverage Browser Caching pour le script Google Analytics

Avertissement Leverage Browser Caching pour le script Google Analytics

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 :

Google PageSpeed Insights a passé des audits avec la liste des scripts de Google Analytics

Google PageSpeed Insights a passé des audits avec la liste des scripts de Google Analytics

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 la mise en cache du navigateur pour Google Analytics en hébergeant le script localement.

Sachez toutefois que cette méthode n’est pas prise en charge 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ée Complete Analytics Optimization Suite (CAOS) développé par Daan van den Bergh que vous pouvez utiliser :

Extension WordPress CAOS

Extension WordPress CAOS

Vous pouvez télécharger CAOS à partir du répertoire des extensions WordPress ou en la recherchant sous 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 par 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é précédemment.

Pour commencer, installez l’extension, puis entrez votre ID Google Analytics Tracking. L’extension ajoute le code de suivi nécessaire pour Google Analytics sur votre site WordPress, télécharge et enregistre le fichier analytics.js sur votre serveur, et le maintient à jour à l’aide d’un script programmé dans wp_cron().

Nous recommandons également de le régler pour qu’il se charge dans le pied de page :

Réglages de placement du code de suivi de CAOS

Réglages de placement du code de suivi de CAOS

Gardez à l’esprit que le CAOS ne fonctionnera pas avec d’autres extensions WordPress 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 :

Extension WordPress WP Rocket

Extension WordPress WP Rocket

Le module Google Tracking de cette extension vous permet d’héberger localement votre script d’analyse en un clic. Il suffit de basculer l ‘état sous WP-Rocket > Modules.

WP-Rocket et son module sont compatibles avec d’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 de 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 minimiser 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.

Si vous avez déjà mesuré les performances d'un site, il y a de fortes chances que l'avertissement Leverage Browser Caching ne soit pas nouveau pour vous. Mais comment corriger cela pour rendre votre site plus rapide ? Apprenez comment le faire grâce à ce guide détaillé ! 🚀🗿Click to Tweet

Résumé

Bien qu’il ne soit 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 « Diffusez des éléments statiques grâce à des règles de cache efficaces » 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

  1. Ajoutant des en-têtes Cache-Control ou Expires.
  2. Exploitant la mise en cache du navigateur pour Google Analytics.
  3. Minimisant l’utilisation de scripts tiers.

Avez-vous d’autres conseils pour corriger la mise en cache du navigateur à effet de levier ? Faites-le nous savoir dans la section des commentaires ci-dessous !


Si vous avez aimé cet article, alors vous allez adorer la plateforme d’hébergement WordPress de Kinsta. Accélérez votre site Web et obtenez le support 24/7 de notre équipe de vétérans de WordPress. Notre infrastructure propulsée par Google Cloud met l’accent sur la mise à l’échelle automatique, la performance et la sécurité. Laissez-nous vous montrer la différence de Kinsta ! Découvrez nos plans