Instant Fix WordPress Leverage Browser Caching (étape par étape)
Publié: 2021-07-08Mise en cache du navigateur WordPress (correction facile et instantanée)
Table des matières
Si vous voulez comprendre complètement comment réparer la mise en cache du navigateur dans WordPress, restez avec nous jusqu'à la fin car nous avons beaucoup à partager.
Qui n'aime pas avoir une vitesse de chargement ultra rapide ?
Mais d'une manière ou d'une autre, vous avez découvert que "l'utilisation de la mise en cache du navigateur" empêche votre site Web de se charger rapidement.
Pourtant, nous sommes là pour cela avec une solution.
Il s'agit de l'erreur la plus courante rencontrée par la majorité des utilisateurs dans Google PageSpeed Insights.
Et si votre objectif est d'atteindre plus de 90 scores dans Google PageSpeed Insights, vous devez résoudre ce problème.
Vous devez savoir que la vitesse de la page est plus importante que jamais pour un classement élevé sur les SERP de Google, ainsi que pour offrir une BONNE expérience utilisateur.
Cet article vous expliquera ce que WordPress tire parti de la mise en cache du navigateur et comment réparer la mise en cache du navigateur dans WordPress.
ALORS, creusons simplement.
Peu d'informations sur l'utilisation de la mise en cache du navigateur WordPress
Pour faire simple, tirer parti de la mise en cache du navigateur accélère le chargement des pages en réduisant les requêtes HTTP et en améliorant le temps de réponse du serveur.
MAINTENANT, qu'entendons-nous par mise en cache ?
La durée pendant laquelle les navigateurs stockent localement les ressources pouvant être mises en cache disponibles sur un site Web est appelée mise en cache.
Qu'est-ce qui est inclus là-dedans ?
Cela inclut les images, CSS, JavaScript et autres.
Lorsque quelqu'un visite le site Web, les ressources pouvant être mises en cache qui ont été enregistrées sur votre appareil sont téléchargées à nouveau.
La vitesse de chargement du site est ainsi visiblement améliorée. C'est la raison pour laquelle les gens veulent tirer parti de la mise en cache du navigateur dans WordPress.
Qu'est-ce qu'une véritable plate-forme qui affiche des données et des solutions réelles ?
Vous pouvez essayer Think with Google pour vérifier l'état de votre site s'il se charge rapidement ou si le chargement complet prend quelques secondes.
Cet outil vous donnera toutes les solutions pour optimiser votre site Web afin de le charger rapidement, avec un rapport complet.
Un autre outil légitime que vous pouvez utiliser est PageSpeed Insights de Google pour tester la vitesse des pages de votre site Web.
Il vous recommandera de développer une politique de cache puissante pour augmenter la vitesse des pages.
Comment tirer parti de la mise en cache du navigateur
Si vous possédez ou exploitez un site Web, vous devez être informé que la mise en cache du serveur fait référence au mécanisme par lequel votre site Web produit des pages Web mises en cache.
C'est côté serveur; la mise en cache du navigateur se produit lorsque les utilisateurs accèdent au site Web via leur navigateur.
C'est exactement le contraire de l'énoncé précédent.
De plus, lorsque vous utilisez la mise en cache du navigateur, vous indiquez à votre serveur combien de temps les ressources doivent être stockées dans les navigateurs de vos visiteurs.
Afin de tirer parti de la mise en cache du navigateur, vous devrez généralement identifier les en-têtes HTTP pour spécifier les délais d'expiration corrects pour différents types de fichiers sur votre site Web.
Si vous souhaitez entrer le code manuellement ou utiliser un plugin WordPress, cela dépendra si votre serveur Web est Nginx ou Apache.
MAINTENANT, passons aux méthodes pour tirer parti de la mise en cache du navigateur dans WordPress, avec et sans plugin.
Comment réparer la mise en cache du navigateur à effet de levier sur WordPress sans plugin ?
Beaucoup de gens ne préfèrent pas un plugin WordPress pour résoudre ce problème.
Vous pouvez utiliser la mise en cache du navigateur en modifiant les paramètres de votre serveur Web.
Votre serveur Web demandera alors au navigateur du visiteur d'enregistrer ces ressources dans le cache du navigateur si vous le faites.
Ces fichiers seront stockés localement par le navigateur pendant une période de temps définie et utilisés pour les visites de pages ultérieures.
La procédure pour demander à votre serveur Web de commencer à mettre en cache les navigateurs de vos visiteurs varie d'un serveur à l'autre.
Apache et Nginx sont les serveurs Web les plus populaires.
Commençons à corriger étape par étape la mise en cache du navigateur dans WordPress sur les deux serveurs.
1. WordPress utilise la mise en cache du navigateur avec (Apache)
De nombreux services d'hébergement partagé utilisent Apache, donc si votre site a un fichier.htaccess, vous devrez suivre les instructions du code Apache.
Voici comment vous pouvez utiliser du code personnalisé pour tirer parti de la mise en cache du navigateur sur votre serveur Apache.
Une fois que vous avez confirmé que votre serveur fonctionne sur Apache, vous pouvez passer à l'étape suivante.
1. Pour accéder à votre serveur, connectez-vous à CPanel ou utilisez un client FTP.
2. Trouvez votre fichier .htaccess maintenant.
Étant donné que le fichier.htaccess peut être caché par défaut, vous devrez peut-être afficher les fichiers cachés (dotfiles).
Votre fichier .htaccess devrait ressembler à l'image ci-dessous.
Vous devez comprendre que vous pouvez soit le modifier directement sur le serveur, soit l'importer et l'ouvrir dans un éditeur de texte.
De plus, vous disposez de nombreux choix pour déterminer les règles de mise en cache du navigateur, telles que :
En-têtes d'expiration ou en-têtes Cache-Control.
Regardons les deux.
1. En-têtes de contrôle du cache :
Vous devrez ajouter l'extrait de code suivant en haut de votre fichier.htaccess après l'avoir ouvert :
copiez ce code:
# En-têtes de contrôle de cache BEGIN
<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
En-tête ajouter Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
En-tête ajouter Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
En-tête ajouter Cache-Control "privé"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
En-tête ajouter Cache-Control "privé, doit revalider"
</filesMatch>
</IfModule>
</IfModule>
2. En-têtes d'expiration :
Ces en-têtes Expire peuvent être ajoutés en haut de votre fichier.htaccess, un peu comme l'en-tête Cache-Control.
Regardez le format du code :
## EXPIRE LA MISE EN CACHE ##
<IfModule mod_expires.c>
ExpireActif le
ExpiresByType image/jpg "accès 1 an"
ExpiresByType image/jpeg "accès 1 an"
Image/gif ExpiresByType "accès 1 an"
ExpiresByType image/png "accès 1 an"
ExpiresByType text/css "accès 1 mois"
ExpiresByType text/html "accès 1 mois"
Application/pdf ExpiresByType "accès 1 mois"
ExpiresByType text/x-javascript "accès 1 mois"
Application ExpiresByType/x-shockwave-flash "accès 1 mois"
Image ExpiresByType/x-icon "accès 1 an"
ExpireDéfaut "accès 1 mois"
</IfModule>
## EXPIRE LA MISE EN CACHE ##
Vous pouvez facilement consulter ces en-têtes à partir des DevTools de Chrome une fois que vous les avez définis sur votre serveur.
Accédez simplement à l'onglet Réseau, sélectionnez un actif et recherchez le formulaire d'en-tête que vous avez ajouté, tel que Cache-Control, Expires ou les deux.
2. Désactivez les balises d'entité :
Enfin, vous devez utiliser le code suivant pour désactiver les balises d'entité :
FileETag Aucun
Lorsque vous désactivez les ETags, le navigateur peut utiliser votre politique de cache au lieu de revalider les fichiers à chaque chargement de page.
Pour que les modifications prennent effet, enregistrez le fichier.htaccess et redémarrez Apache.
WordPress tire parti de la mise en cache du navigateur à l'aide de (Nginx)
Nginx est un serveur Web gratuit et open source utilisé par plus de 500 millions de sites Web.
Vous disposez de quelques options pour définir les délais d'expiration de la mise en cache sur les composants statiques et dynamiques de votre site Web, tout comme avec Apache.
1. En-têtes "Cache-Control" (Nginx)
Dans votre bloc de serveur, qui est généralement situé à
/etc/nginx/site-enabled/default,
ajouter ce fragment suivant.
emplacement ~* \.(png|jpg|jpeg|gif)$ {
expire 365j ;
add_header Cache-Control « public, sans transformation » ;
}
emplacement ~* \.(js|css|pdf|html|swf)$ {
expire 30j ;
add_header Cache-Control « public, sans transformation » ;
}
2. En-têtes "Expire" (Nginx)
Insérez le code suivant dans votre bloc de serveur situé à :
/etc/nginx/site-enabled/default/
emplacement ~* \.(jpg|jpeg|gif|png)$ {
expire 365j ;
}
emplacement ~* \.(pdf|css|html|js|swf)$ {
expire 30j ;
}
Comment réparer la mise en cache du navigateur à effet de levier sur WordPress avec le plugin ?
Si vous souhaitez contourner les étapes de codage les plus complexes, vous pouvez utiliser certains des bons plugins WordPress pour tirer parti de la mise en cache du navigateur.
1. Cache le plus rapide de WP :
Cache le plus rapide de WP
WP Fastest Cache est un autre plugin de mise en cache WordPress avec des options de personnalisation faciles.
Vous pouvez autoriser la mise en cache du navigateur dans l'édition gratuite. Comme indiqué ci-dessus, accédez à la page des paramètres et cochez la case de mise en cache du navigateur.
2. Cache LiteSpeed :
Cache LiteSpeed
LiteSpeed Cache est un plug-in de mise en cache qui vous permet de tirer parti de la mise en cache du navigateur en l'activant simplement.
Accédez aux paramètres de cache après avoir installé et activé le plugin. Accédez à l'onglet Navigateur et activez la fonction Cache du navigateur.
Vous pouvez également spécifier une date d'expiration.
Cependant, ce paramètre s'appliquera à tous les fichiers mis en cache sur votre site.
Conclusion:
L'utilisation de la mise en cache du navigateur peut vous aider à améliorer votre score de test de performance Web.
Si vous voyez cet avertissement dans Google PageSpeed Insights, vous pouvez le résoudre en :
- Ajout des en-têtes Cache-Control ou Expires.
- Tirer parti de la mise en cache du navigateur pour Google Analytics.
- Minimiser votre utilisation de scripts tiers.
Avez-vous d'autres suggestions pour résoudre le problème de mise en cache du navigateur ? Partagez vos idées dans la section des commentaires ci-dessous!