Si vous avez déjà testé votre site WordPress via Google PageSpeed Insights ou Pingdom alors vous avez probablement vu ce grand avertissement jaune Leverage Browser Caching. Et c’est probablement pour ça que vous avez atterri sur cet article. Aujourd’hui, nous allons nous plonger dans ce que signifie cet avertissement, comment il vous affecte et quelles sont vos options en ce qui concerne votre site WordPress.

Qu’est-ce que l’avertissement Leverage Browser Caching ?

L’avertissement Leverage Browser Caching, comme illustré ci-dessous dans la capture d’écran, se réfère à la mise en cache de votre navigateur. Chaque fois que vous visitez un site Web, il télécharge des ressources telles que HTML, CSS, JavaScript et des images dans le cache local de votre navigateur. De cette façon, il n’a pas besoin de les récupérer à chaque chargement de page. L’avertissement lui-même est renvoyé lorsque votre serveur Web, ou un serveur tiers, n’a pas les en-têtes de cache HTTP corrects implémentés. Ou les en-têtes peuvent exister, mais le temps de cache est trop court.

Définir une date d'expiration ou un âge dans les en-têtes HTTP

Définir une date d’expiration ou un âge dans les en-têtes HTTP

Vous pouvez également voir cet avertissement dans le nouvel outil de test de vitesse de sites Web « think with Google« , qui est optimisé par Google PageSpeed Insights. Cela a été conçu pour être plus un outil de marketing par Google, mais cela a eu pour résultat que beaucoup de clients maintenant simplement transmettre ces erreurs à leurs webmasters. Laissant les développeurs et les concepteurs de sites WordPress à la recherche de moyens de le réparer rapidement pour apaiser leurs clients.

Test de vitesse Think with Google

Test de vitesse Think with Google

Comme nous parlons de Google Pagespeed Insights, assurez-vous de jeter un oeil à ce guide détaillé -> Comment obtenir la note de 100/100 dans Google PageSpeed Insights avec WordPress.

Correction de l’avertissement Leverage Browser Caching dans WordPress

Quand il s’agit de corriger l’avertissement Leverage Browser Caching, il existe plusieurs scénarios différents qui sont généralement rencontrés par les utilisateurs de WordPress. Évidemment, le plus courant est que votre serveur web n’est pas correctement configuré. Le deuxième est que le script de Google Analytics nous donne l’avertissement. Et le troisième est que d’autres scripts tiers renvoient l’avertissement. Voyez quelles sont vos options ci-dessous.

1. Leverage Browser Caching sur le serveur

La première et la plus fréquente raison pour laquelle l’avertissement Leverage Browser Caching est déclenché est que votre serveur Web n’a pas les en-têtes appropriés en place. Dans la capture d’écran ci-dessous dans Google PageSpeed Insights, vous verrez que la raison est qu’une expiration n’est pas spécifiée. Quand il s’agit de mise en cache il y a deux méthodes primaires qui sont utilisées, les en-têtes Cache-Control et Expires. 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 précis où la ressource n’est plus valide.

Tirer parti de l'avertissement de mise en cache du navigateur dans Google PageSpeed Insights

Tirer parti de l’avertissement de mise en cache du navigateur dans Google PageSpeed Insights

Voyons maintenant comment ajouter ces en-têtes à votre serveur web. Note : Vous n’avez pas nécessairement besoin d’ajouter les deux en-têtes, car c’est un peu redondant. Cache-Control est plus récent et généralement la méthode recommandée, cependant, certains outils de performance Web comme GTmetrix vérifient toujours les en-têtes Expires. Ce sont tous des exemples, vous pouvez changer les types de fichiers, les dates d’expiration, etc. en fonction de vos besoins.

Important ! L’édition de votre fichier de configuration Nginx ou Apache .htaccess pourrait casser votre site si elle n’est pas faite correctement. Si vous n’êtes pas à l’aise de le faire, veuillez d’abord vérifier auprès de votre hébergeur ou développeur.

Ajout de l’en-tête Cache-Control dans Nginx

Vous pouvez ajouter des en-têtes Cache-Control dans Nginx en ajoutant ce qui suit à l’emplacement ou au bloc du serveur de votre configuration de serveur.

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
 expires 30d;
 add_header Cache-Control "public, no-transform";
}

Alors, qu’est-ce que le code ci-dessus fait exactement ? Fondamentalement, il indique au serveur que ces types de fichiers ne vont pas changer pendant au moins un mois. Ainsi, au lieu d’avoir à télécharger la ressource à chaque fois, il la met en cache sur votre ordinateur. De cette façon, il est plus rapide pour les prochaines visites.

Ajout d’en-têtes Expires dans Nginx

Vous pouvez ajouter des en-têtes Expires dans Nginx en ajoutant ce qui suit à votre bloc serveur. Dans cet exemple, vous pouvez voir comment spécifier différents temps d’expiration en fonction des types de fichiers.

    location ~*  \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 2d;
    }

Ajout d’en-têtes Cache-Control dans Apache

Vous pouvez ajouter des en-têtes Cache-Control dans Apache en ajoutant ce qui suit à votre fichier .htaccess. Des bribes de code peuvent être ajoutées en haut ou en bas du fichier (avant # BEGIN WordPress ou après # END WordPress).

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

Ajout d’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 ##

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"

## EXPIRES HEADER CACHING ##

Si vous êtes un client Kinsta, vous n’avez pas à vous soucier d’ajouter ces en-têtes. Ceux-ci sont déjà en place sur tous nos serveurs Nginx. Et n’oubliez pas que si vous utilisez un fournisseur CDN comme KeyCDN, ces en-têtes sont très probablement déjà définis sur vos ressources.

Vous pouvez vérifier vos en-têtes dans le panneau réseau de Chrome DevTools ou simplement retester votre site WordPress via Google PageSpeed Insights pour vous assurer que l’avertissement a disparu.

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités
En-têtes de mise en cache HTTP

En-têtes de mise en cache HTTP

2. Leverage Browser Caching et Google Analytics

Le deuxième avertissement Leverage Browser Caching le plus courant vient en fait de Google Analytics. C’est un peu ironique, car c’est le script de Google. Le problème est qu’ils fixent un temps de cache bas de 2 heures sur leur ressource, comme le montre la capture d’écran ci-dessous. Ils le font très probablement parce que si, pour une raison quelconque, ils modifient quelque chose, ils veulent que tous les utilisateurs obtiennent les changements le plus rapidement possible.  Cependant, il existe un moyen de contourner ce problème, et c’est d’héberger le script Google Analytics sur votre propre serveur. Sachez toutefois que cette fonctionnalité n’est pas prise en charge par Google.

Mise en cache de Google Analytics

Mise en cache de Google Analytics

Il existe un petit plugin gratuit appelé Complete Analytics Optimization Suite, créé et développé par Daan van den Bergh, qui vous permet d’héberger Google Analytics localement sur votre site WordPress.

Plugin CAOS

Plugin CAOS

Vous pouvez télécharger Complete Analytics Optimization Suite à partir du référentiel WordPress ou en le recherchant sous « Ajouter » extensions dans votre tableau de bord WordPress. Le plugin vous permet d’héberger votre fichier JavaScript Google Analytics (analytics.js) localement et de le mettre à jour en utilisant wp_cron(). D’autres fonctionnalités incluent la possibilité d’anonymiser facilement l’adresse IP de vos visiteurs, de définir un taux de rebond ajusté, et l’emplacement du script (en-tête ou pied de page).

Un autre avantage de l’hébergement local de votre script Google Analytics est que vous réduisez vos requêtes HTTP externes vers Google de 2 à 1 et vous avez maintenant le contrôle total sur la mise en cache du fichier. Cela signifie que vous pouvez utiliser les en-têtes de cache comme nous vous l’avons montré ci-dessus.

Installez simplement le plugin, entrez votre identifiant de suivi Google Analytics, et le plugin ajoute le code de suivi nécessaire pour Google Analytics à votre site Web WordPress, télécharge et enregistre le fichier analytics.js sur votre serveur et le maintient à jour en utilisant un script planifié dans wp_cron(). Nous recommandons également de le régler pour qu’il se charge dans le pied de page. Remarque : Ce plugin ne fonctionne pas avec les autres plugins WordPress de Google Analytics.

Paramètres d'analyse hébergés localement

Paramètres d’analyse hébergés localement

3. Qu’en est-il des scripts d’autres tierces parties ?

Si vous exploitez une entreprise sur votre site Web WordPress, il est fort probable que vous ayez des scripts tiers supplémentaires pour suivre les conversions, les tests A/B, etc. Cela peut inclure des scripts tels que des pixels de conversion Facebook, Twitter, CrazyEgg, Hotjar, etc. Malheureusement, comme vous ne pouvez pas les héberger localement, il n’y a pas grand-chose à faire car vous n’avez pas le contrôle sur la mise en cache de ces actifs tiers. Mais pour de nombreux petits sites et blogueurs, vous pouvez très probablement vous débarrasser de cet avertissement Leverage Browser Caching en suivant les recommandations ci-dessus.

Leverage Browser Caching pour les scripts tiers

Leverage Browser Caching pour les scripts tiers

Résumé

Vous avez certainement quelques options à votre disposition lorsque vous essayez de corriger cet ennuyeux avertissement Leverage Browser Caching sur votre site WordPress. Pour la plupart des gens, vous pouvez probablement éclaircir tout cela. N’oubliez pas que ces outils de performance Web doivent être utilisés à titre indicatif. Nous ne recommandons pas trop d’être obsédé par les scores de tests. Mais en corrigeant les avertissements, vous obtiendrez généralement un site Web WordPress plus rapide à la fin.

Avez-vous d’autres conseils à propos de la correction de l’avertissement Leverage Browser Caching ? Si oui, n’hésitez pas à nous faire part de vos commentaires ci-dessous.