Comment tirer parti de la mise en cache du navigateur dans WordPress (avec vidéo)
Publié: 2021-02-22
Dernière mise à jour - 8 juillet 2021
Si vous possédez ou gérez un site Web WordPress, vous souhaiterez constamment améliorer son apparence et son fonctionnement. Cependant, plus vous utilisez de plugins, de constructeurs de pages et d'éléments de contenu, plus votre site Web est lent.
Et un site Web à chargement lent est un gros désagrément pour les visiteurs, quelle que soit la qualité de votre site Web ou l'importance de son travail.
C'est pourquoi la gestion d'un site Web WordPress nécessite que vous utilisiez toutes les mesures de performance du site Web que vous pouvez trouver. Et une mesure importante à prendre consiste à tirer parti de la mise en cache du navigateur.
Dans cet article, vous apprendrez ce que cela signifie et comment vous pouvez tirer parti de la mise en cache du navigateur dans WordPress.
Qu'est-ce que la mise en cache du navigateur ?
Chaque fois qu'un utilisateur accède à votre site Web, des ressources telles que des images, JavaScript, CSS et autres doivent être téléchargées sur son ordinateur à partir du serveur. Cela signifie que l'utilisateur doit charger à plusieurs reprises les mêmes ressources entre les pages suivantes et les visites du site.
Entrez : mise en cache.
La mise en cache indique la période pendant laquelle les navigateurs stockent localement les ressources pouvant être mises en cache disponibles sur le site Web. Lorsqu'un utilisateur demande la page Web, les informations sont instantanément extraites de son ordinateur.
De cette façon, vous pouvez tirer parti de la mise en cache du navigateur dans WordPress pour fournir des performances de site Web plus rapides.
Vous pouvez utiliser des outils tels que Google PageSpeed Insights et GTmetrix pour tester si votre site Web exploite déjà la mise en cache du navigateur.
Collez simplement l'URL de votre site Web dans le champ fourni et cliquez sur "Analyser". L'outil fournira à votre site Web un score, entre 0 et 100 dans le cas de PageSpeed et une note alphabétique dans le cas de GTmetrix.
L'outil vous fournira également des suggestions pour améliorer les performances de votre site Web. Une suggestion courante consiste à opter pour la mise en cache du navigateur dans WordPress. Si vous obtenez cette suggestion, voici deux façons de le faire.
Exploiter manuellement la mise en cache du navigateur dans WordPress
Vous pouvez exploiter manuellement la mise en cache du navigateur dans WordPress en ajoutant un peu de code au fichier .htaccess. En fait, vous devez ajouter trois morceaux de code à trois fins différentes :
- Ajouter des en-têtes d'expiration
- Ajouter des en-têtes de contrôle de cache
- Désactiver les balises ETag
Pour ajouter ce code, vous devez accéder aux fichiers de votre site Web, ce que vous pouvez faire en vous connectant à votre compte d'hébergement ou à cPanel. Vous devez accéder au gestionnaire de fichiers et à l'option "Activer les fichiers cachés" dans les paramètres du site Web.
Vous trouverez alors le fichier .htaccess dans le dossier public_html. Cliquez avec le bouton droit sur le fichier et modifiez-le pour ajouter le code fourni ci-dessous.
1. Ajoutez le code de mise en cache du navigateur
Copiez le code ci-dessous et collez-le à la fin du contenu du fichier .htaccess. N'apportez aucune autre modification au fichier.
#Customize expires cache start - ajustez la période en fonction de vos besoins <IfModule mod_expires.c> Taille de FileETag MTime AddOutputFilterByType DEFLATE texte/texte brut/html texte/xml texte/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript ExpireActif le ExpiresByType text/html "accès 600 secondes" ExpiresByType application/xhtml+xml "accès 600 secondes" ExpiresByType text/css "accès 1 mois" ExpiresByType text/javascript "accès 1 mois" ExpiresByType text/x-javascript "accès 1 mois" Application ExpiresByType/javascript "accès 1 mois" Application ExpiresByType/x-javascript "accès 1 mois" Application ExpiresByType/x-shockwave-flash "accès 1 mois" Application/pdf ExpiresByType "accès 1 mois" ExpiresByType image/x-icon "accès 1 an" ExpiresByType image/jpg "accès 1 an" ExpiresByType image/jpeg "accès 1 an" ExpiresByType image/png "accès 1 an" ExpiresByType image/gif "accès 1 an" ExpiresDefault "accès 1 mois" </IfModule> #Expire la fin du cache
Le code ci-dessus indique au navigateur de servir une version en cache de la page au lieu de télécharger une nouvelle version.
Les paramètres incluent également les délais d'actualisation/d'expiration suivants :
- 600 secondes pour HTML
- CSS et JavaScript d'un mois
- Un an pour les images
Ces périodes d'expiration garantissent que les visiteurs n'ont pas à télécharger certaines ressources trop souvent. Cependant, vous pouvez facilement modifier les délais d'expiration si vous en avez besoin.
2. Ajouter des en-têtes de contrôle de cache (Apache)
Nous devons ajouter des en-têtes Cache Control pour spécifier les politiques de mise en cache du navigateur concernant la façon dont une ressource est mise en cache, où elle est mise en cache et l'âge maximum avant l'expiration. Cependant, nous avons déjà spécifié les délais d'expiration ci-dessus, nous n'avons donc pas besoin de les répéter ici.
Copiez et collez le code suivant :
# 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>
3. Désactivez les Etags
Nous désactiverons les balises électroniques pour obliger les navigateurs à s'appuyer sur le contrôle du cache et expirer les en-têtes au lieu de valider les fichiers. Voici le code :
<IfModule mod_headers.c> En-tête non défini ETag </IfModule> FileETag Aucun
Mise en cache du navigateur pour le serveur NGINX
Vous ne pourrez pas localiser le fichier .htaccess si votre site Web utilise NGINX. Dans ce cas, dirigez-vous vers /etc/nginx/sites-enabled/default et collez le code ci-dessous :
serveur { écouter 80 ; nom_serveur localhost ; emplacement / { racine /usr/share/nginx/html ; index index.html index.htm; } emplacement ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expire 365j ; } emplacement ~* \.(pdf)$ { expire 30j ; } } Ajouter des en-têtes de contrôle de cache (NGINX) emplacement ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expire 90j ; add_header Cache-Control "public, sans transformation" ; }
Après avoir modifié NGINX, enregistrez le fichier pour tirer parti de la mise en cache du navigateur sur le serveur NGINX.
Tirez parti de la mise en cache du navigateur dans WordPress à l'aide de plugins
La modification du fichier .htaccess peut en effet être assez risquée, car une seule erreur peut casser tout votre site Web. Donc, si vous ne voulez pas de risques inutiles, vous pouvez utiliser des plugins comme W3 Total Cache et WP Fastest Cache .
Voici comment vous pouvez tirer parti de la mise en cache du navigateur à l'aide du plugin W3 Total Cache, l'un des meilleurs pour le travail.
Après avoir installé le plugin, rendez-vous sur sa page de paramètres. Ici, assurez-vous que le cache du navigateur est activé. Ensuite, dirigez-vous vers les paramètres de cache du navigateur dans la barre latérale. Et assurez-vous que l'en-tête d'expiration, l'en-tête de contrôle du cache et les options de définition d'e-tag sont activés.
Enregistrez les paramètres si vous avez apporté des modifications.
Avec cela, vous avez réussi à tirer parti de la mise en cache du navigateur sur votre site Web WordPress. Vous pouvez vous assurer qu'il est activé en utilisant à nouveau l'outil Insights ou GTmetrix.
Si vous préférez une version vidéo, regardez la vidéo ci-dessous :
Lecture complémentaire :
- Meilleurs plugins gratuits d'optimisation de base de données WordPress en 2021
- Comment activer la compression GZIP sur un site WordPress ?