TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment résoudre le problème de mise en cache du navigateur dans WordPress ?

6

L’outil Google PageSpeed ​​Insights est l’un des moyens de mesurer la vitesse de votre site WordPress. Généralement, le score de vitesse de Google est différent de celui d’autres outils de mesure de vitesse populaires tels que Pingdom ou Gtmetrix. Mais il est recommandé de garder une trace du score de Google car cela peut avoir un impact direct sur le classement des résultats de recherche.

Lors de la vérification de votre site sur Google PageSpeed, vous verrez des problèmes fréquents tels que l’optimisation des images, l’utilisation de la mise en cache du navigateur, l’activation de la compression, etc. Dans nos articles précédents, nous avons expliqué comment résoudre les problèmes d’activation de la compression et d’ optimisation des images. Dans cet article, nous verrons comment résoudre le problème de mise en cache du navigateur dans WordPress.

Qu’est-ce que l’utilisation de la mise en cache du navigateur ?

Expliquons-nous avec un exemple. Ouvrez un navigateur Web comme Google Chrome et effacez l’historique de navigation. Ouvrez maintenant n’importe quel site Web et vous verrez que la page se charge lentement. Lorsque vous naviguez sur différentes pages sur le même site, vous remarquerez que les pages se chargent plus rapidement que la première fois. Voici ce qui se passera sur le navigateur :

Comment résoudre le problème de mise en cache du navigateur dans WordPress ?

  • Le navigateur récupère toutes les ressources statiques telles que les images, les styles, les scripts, etc. du serveur Web lors du premier chargement du site.
  • Lorsque la mise en cache du navigateur est activée sur le site pour les ressources statiques, le navigateur suivra les instructions du serveur reçues via les en-têtes HTTP.
  • Le navigateur stockera les ressources statiques sur le stockage local avec la date d’expiration ou l’âge maximum reçu du serveur.
  • Les ressources statiques sont extraites du stockage local du navigateur lorsque la page suivante est chargée.
  • Si la mise en cache du navigateur n’est pas activée sur le site (l’heure d’expiration n’est pas définie), le navigateur récupère les fichiers à chaque chargement. Cela augmentera le temps de chargement de la page ainsi que la charge sur le serveur.
  • Le délai d’expiration doit être spécifié pour chaque type de fichier comme png, jpg, css. js, etc.

Si vous ne définissez pas le délai d’expiration pour les images et autres fichiers statiques, l’outil Google PageSpeed ​​Insights affichera cela comme un problème de haute priorité dans la catégorie « Devrait corriger » ou « Optimisations possibles ».

Comment résoudre le problème de mise en cache du navigateur dans WordPress ?

Tirer parti du problème de mise en cache du navigateur dans Google PageSpeed

Vous pouvez voir les informations entre parenthèses à côté des URL des images comme « expiration non spécifiée ».

Comment résoudre le problème de mise en cache du navigateur dans WordPress ?

Il existe deux façons simples de résoudre le problème de mise en cache du navigateur :

  • Sans plugin en modifiant le fichier .htaccess
  • Utilisation du plugin W3 Total Cache

1 sans plug-in

Connectez-vous à votre client FTP et ouvrez le fichier .htaccess situé sur le répertoire racine de votre site. Reportez-vous à notre article pour en savoir plus sur la façon de modifier le fichier .htaccess dans WordPress. Ajoutez les directives ci-dessous à la fin du fichier :

## EXPIRES 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 text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule> ## CACHE CONTROL ## <filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch>

Le premier bloc est pour l’expiration du cache et le second est pour le contrôle du cache. Toutes les extensions de fichiers générales sont incluses dans la directive, vous pouvez également en inclure plus si nécessaire pour votre site.

Si vous n’avez pas d’accès FTP, il existe des plugins pour éditer le fichier .htaccess directement depuis le panneau d’administration. Par exemple, le plugin Yoast SEO offre une option d’éditeur de fichier pour éditer le fichier .htaccess à partir du panneau d’administration.

2 Utilisation du cache total W3

Heureusement, WordPress a des plugins pour résoudre tous les problèmes. Afin de résoudre le problème de mise en cache de la navigation sur votre site WordPress, nous vous recommandons d’utiliser le plugin W3TC. W3TC est le plugin de mise en cache populaire disponible gratuitement sur le référentiel de plugins WordPress avec de nombreuses options supplémentaires.

Comment résoudre le problème de mise en cache du navigateur dans WordPress ?

Plugin WordPress W3 Total Cache

Installez le plugin et activez-le. Accédez à la section « Performances > Cache du navigateur » et activez toutes les options liées à la mise en cache du navigateur dans les sections Général, CSS et JS, HTML et XML, Médias et autres fichiers.

Comment résoudre le problème de mise en cache du navigateur dans WordPress ?

Activer la mise en cache du navigateur dans le plugin W3TC

Vous pouvez laisser la case « Expire la durée de vie de l’en-tête » avec les valeurs par défaut pré-remplies en secondes. Si vous le souhaitez, modifiez avec vos propres valeurs dans les sections "CSS & JS", "HTML & XML" et "Média et autres fichiers".

  • 31536000 pour 1 mois
  • 604800 pour 1 semaine
  • 86400 pour 1 jour
  • 3600 pour 1 heure

Dans la mesure où nous avons testé 1 heure pour HTML et XML et 1 mois pour les autres fichiers, cela fonctionne bien pour Google PageSpeed.

Le plugin W3T Totoal Cache ajoute essentiellement les directives dans le fichier .htaccess comme expliqué dans la première méthode. Ouvrez votre fichier .htaccess et vous verrez le long ensemble de directives ajoutées par le plugin W3TC. Toutes les directives relatives à la mise en cache du navigateur sont affichées entre la section "# BEGIN W3TC Browser Cache" à "# END W3TC Browser Cache".

Revenez dans Google PageSpeed ​​Insights

Une fois que vous avez ajouté manuellement le code dans le fichier .htaccess ou activé la mise en cache du navigateur de tous les types d’objets dans W3TC, commencez par purger toute votre mise en cache. Revenez ensuite à l’outil Google PageSpeed ​​Insights et vérifiez la page. Très probablement, le problème aurait dû être résolu ou déplacé vers la priorité inférieure sous « Envisager la correction » comme indiqué ci-dessous. Le nouvel outil PageSpeed ​​affichera toujours les problèmes dans la section « Optimisations possibles » avec le score global amélioré.

Dans notre exemple, le problème persiste en raison des annonces AdSense et des fichiers de polices.

Comment résoudre le problème de mise en cache du navigateur dans WordPress ?

Tirer parti de la priorité des problèmes de mise en cache du navigateur réduite

Ce que vous ne pouvez pas faire avec la mise en cache du navigateur

Maintenant que vous savez comment résoudre le problème de mise en cache du navigateur dans votre site WordPress. Mais dans la plupart des cas, cela ne suffit pas car cela ne fonctionnera que pour les ressources statiques chargées à partir de votre propre domaine. En réalité, la page peut contenir de nombreuses autres ressources externes qui ne peuvent pas être mises en cache sur le navigateur. Vous trouverez ci-dessous quelques-unes des ressources externes populaires pouvant entraîner un problème de mise en cache du navigateur :

  • Script de code de suivi Google Analytics
  • Script de code d’annonce Google AdSense (comme illustré dans l’exemple ci-dessus)
  • Certains fichiers de polices
  • Images Gravatar sur la biographie et les commentaires de l’auteur
  • Images chargées avec des plugins sociaux

Si la vitesse du site est le facteur le plus important pour vous, utilisez les ressources externes avec précaution sur votre site. Vous pouvez éventuellement désactiver toutes les ressources externes, à l’exception des ressources importantes telles que Google Analytics pour améliorer le score de vitesse de la page.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails