Comment réparer facilement l'avertissement de mise en cache du navigateur dans WordPress

Vous pouvez rencontrer différents outils en ligne pour mesurer les performances du site Web. Chacun d'eux analyse la vitesse à laquelle les parties spécifiques de votre site Web fonctionnent. Et parmi les nombreux avertissements courants, il y a souvent l'erreur "Leverage Browser Caching". Cela concerne la mise en cache, en tant que fonctionnalité qui vous permet d'utiliser temporairement l'espace sur les appareils des clients. Ce qui se traduit par un chargement global plus rapide de votre site Web et de ses pages. En d'autres termes, vous pouvez facilement corriger l'avertissement de mise en cache du navigateur dans WordPress pour assurer une meilleure expérience utilisateur à vos visiteurs .

Des moyens sûrs de corriger l'avertissement de mise en cache du navigateur dans WordPress

Il y a deux cas où vous recevrez cet avertissement. Tout d'abord, la mise en cache de votre navigateur n'est pas activée. Deuxièmement, la mise en cache du navigateur n'est pas configurée correctement. Cependant, dans de nombreux outils de performance en ligne, cette erreur se signale aujourd'hui comme "Servir des actifs statiques avec une politique de cache efficace" . Mais, quel que soit l'avertissement que vous recevez, cela signifie que les règles de mise en cache de votre navigateur ne sont pas en place. Si vous n'êtes pas sûr de pouvoir résoudre les problèmes vous-même, des experts chevronnés de WP peuvent toujours vous aider à résoudre ces problèmes. Ou, si vous l'êtes, jetons un coup d'œil à la façon dont vous pouvez corriger l'avertissement « Tirer parti de la mise en cache du navigateur » dans WordPress.

Table des matières:

• Qu'est-ce que la mise en cache du navigateur ?
  • Plugin W3 Total Cache
  • Plug-in CAOSComment
  • Plugin WP Rocket
• Correction de l'avertissement de mise en cache du navigateur avec les plugins
• Corrigez-le manuellement avec du code

Qu'est-ce que la mise en cache du navigateur ?

Avant de poursuivre avec la solution, il est utile de comprendre ce que signifie ce type de mise en cache du navigateur. Il s'agit d'une méthode par laquelle les sites Web stockent localement une copie de leurs pages . Cela leur permet d'améliorer la vitesse de chargement en réduisant le nombre de requêtes entre un navigateur et un serveur. Par conséquent, lors d'une nouvelle visite, le navigateur chargera un site Web plus rapidement sans avoir à se reconnecter au serveur et à demander des ressources supplémentaires.

Les types de fichiers les plus courants mis en cache sont :

• feuilles de style
• images
• logos
• et autres éléments statiques

Comme ils n'ont probablement pas changé depuis la dernière visite, votre site Web se chargera plus rapidement dans les navigateurs des visiteurs. Le problème est que tout ce qui est mis en cache doit avoir une période d'expiration définie . Juste au cas où quelque chose aurait été modifié entre-temps, les visiteurs peuvent charger une version mise à jour d'un site Web.

Correction de l'avertissement de mise en cache du navigateur avec des plugins

Cache total W3

W3 Total Cache fait partie des plugins de mise en cache les plus populaires . Il est livré avec toutes les fonctionnalités que vous pouvez attendre d'un tel plugin. Dans l'ensemble, ce plugin améliore directement le référencement et l'ensemble de l'expérience utilisateur en améliorant les performances de votre site Web. Lorsqu'il est correctement configuré, il peut vous donner environ 10 fois plus de performances générales. Avec plus d'une décennie d'existence, de nombreux développeurs Web, hébergeurs Web et éditeurs font confiance à ce plugin.

Plug-in CAOSComment

Complete Analytics Optimization Suite peut facilement être trouvé dans le référentiel de plugins WordPress. Bien qu'il ne soit pas réputé comme solution de mise en cache générale, ce plugin résout le problème avec Google Analytics . Parfois, si vous utilisez Google Analytics, cela faussera les résultats de PageSpeed ​​Insights et d'outils similaires. Principalement parce que Google a défini un délai d'expiration du cache trop court. Avec le plug-in CAOS, vous pouvez héberger votre hôte analytics.js/gtag.js localement et le maintenir à jour automatiquement.

Plugin WP Rocket

L'un des meilleurs plugins de cache pour WordPress sur cette liste est certainement WP Rocket. Alors que d'autres plugins peuvent être difficiles à configurer, WP Rocket est assez simple. Il est assez convivial pour les débutants et vous permet de tout optimiser sans aucune connaissance préalable. Fondamentalement, il vous suffit de l'installer, de l'activer et il utilisera immédiatement la configuration .htaccess recommandée. C'est, de loin, le moyen le plus simple et le plus rapide de corriger les avertissements de mise en cache du navigateur dans WordPress et de rendre votre site Web aussi convivial que possible.

Corrigez-le manuellement avec du code

Cette méthode nécessite une certaine expérience , ce n'est donc pas une recommandation pour les débutants. Dans la plupart des cas, les plugins feront le travail. Mais si, pour une raison quelconque, vous ne souhaitez pas utiliser de plugins, vous résolvez le problème de mise en cache en ajoutant manuellement du code.

La première étape, avant d'apporter des modifications, consiste à sauvegarder votre site Web.

Les étapes suivantes peuvent être un peu différentes, selon le serveur que vous utilisez.

Si vous utilisez le serveur Apache

En gros, tout commence par l'édition de votre fichier .htaccess . Une fois à l'intérieur, vous devrez ajouter du code pour le contrôle du cache et les en-têtes d'expiration. Cache-control est un ensemble d'instructions sur la façon dont la mise en cache doit être gérée. Tandis que les en-têtes d'expiration décident de la période de conservation des ressources dans le navigateur.

• Tout d'abord, ajoutez le code suivant pour le cache-control :

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

Fondamentalement, cela permet la mise en cache de différents types de fichiers. Et, configurez-les pour qu'ils expirent généralement après le "max-age" en secondes. Après quoi, le navigateur mettra à nouveau à jour l'intégralité du cache.

• Ensuite, vous ajouterez le code qui définira les en-têtes expire :

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access 2 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/png "access 3 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType image/gif "access 2 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/pdf "access 3 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 5 days"
</IfModule>

Ces lignes définissent essentiellement des dates d'expiration différentes pour différents types de fichiers, en fonction de vos besoins.

Si vous utilisez le serveur Nginx

Pour Nginx, vous devrez apporter des modifications au fichier de configuration du serveur pour résoudre les problèmes de mise en cache du navigateur. La seule mise en garde est que vous n'aurez peut-être pas accès au fichier de configuration de votre serveur. Pour cela, vous devrez entrer en contact avec votre hébergeur.

• Mais, une fois que vous avez un accès sécurisé, vous êtes libre d' ajouter des en-têtes cache-control :

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

Tout comme dans Apache, cela définira le délai d'expiration de l'ensemble du cache.

• Et les lignes suivantes définiront les en-têtes d'expiration :

location ~* \.(jpg|jpeg|gif|png|svg)$ { expires 365d; }
location ~* \.(pdf|css|html|js|swf)$ { expires 4d; }

Vous pouvez voir qu'ici, les images ont une période d'expiration plus longue car elles ne changent généralement pas aussi souvent que les autres fichiers.

Bien qu'ils ne vous donnent peut-être pas une bonne image des performances de votre site Web, les outils de performance en ligne peuvent vous orienter dans la bonne direction. Et l'une des méthodes les plus simples pour commencer à apporter des modifications consiste à corriger l'avertissement "Leverage Browser Caching" dans WordPress . Ou, comme aujourd'hui, il est souvent considéré comme "Servir des actifs statiques avec une politique de cache efficace". Cela accélérera le chargement de votre site Web et offrira une meilleure expérience utilisateur aux visiteurs nouveaux et récurrents. Que vous choisissiez des plugins ou que vous vouliez ajouter manuellement le code, cela n'a pas beaucoup d'importance. En général, il est important que votre site Web fonctionne mieux.