Comment tirer parti de la mise en cache du navigateur dans WordPress ?

Publié: 2022-06-25

Dans ce didacticiel, nous apprendrons à tirer parti de la mise en cache du navigateur dans WordPress pour accélérer votre site.

Il existe plusieurs façons d'accélérer les sites Web WordPress en général, mais lors de l'analyse de l'optimisation de la vitesse du site Web, la mise en cache du navigateur est le problème le plus fréquemment découvert.

Vous pouvez utiliser divers outils Internet, notamment Google PageSpeed ​​Insights, GTMetrix et Pingdom, pour suivre et tester la vitesse de votre site Web. Ils vous donnent des résultats précis et vous montrent où votre site Web doit être amélioré. Vous avez peut-être vu l'avertissement "Leverage Browser Caching" lors de l'évaluation de la vitesse du site.

Vous pouvez également lire : Servir des actifs statiques avec une politique de cache efficace

Table des matières

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

La mise en cache est la durée pendant laquelle les navigateurs conservent les ressources pouvant être mises en cache d'un site Web sur leurs systèmes locaux.

Les images, JavaScript, CSS et d'autres ressources en font partie. Les éléments pouvant être mis en cache qui sont enregistrés sur votre ordinateur sont téléchargés à chaque fois que quelqu'un consulte le site Web. Ainsi, il y a une augmentation notable de la vitesse de chargement du site Web. Les gens souhaitent utiliser la mise en cache du navigateur dans WordPress pour cette raison.

Comment fonctionne la mise en cache du navigateur dans WordPress ?

De nombreux processus s'exécutent en arrière-plan chaque fois qu'un utilisateur entre dans un certain domaine.

Votre site WordPress est rendu visible par tout ce qui est communiqué au navigateur de l'utilisateur. Ces éléments de site Web incluent des scripts, des graphiques, des feuilles de style, du contenu, etc. Si nécessaire, ils doivent être transférés du serveur du site Web vers le navigateur de l'utilisateur. Voici les étapes de ce processus :

  1. Une URL est entrée dans le navigateur du visiteur.
  2. Une requête est faite par le navigateur au serveur qui héberge votre site Web (la requête HTTP).
  3. L'utilisateur reçoit les données après qu'elles ont été assemblées par le serveur. Les utilisateurs commencent à ressentir un ralentissement à ce stade. Les gens peuvent minimiser la taille des scripts, optimiser la taille des images et prendre d'autres mesures pour arrêter cette lenteur.
  4. Le navigateur peut enfin afficher le site Web après le transfert des données. Lorsque les utilisateurs accèdent à différentes pages, la procédure est répétée. De faibles performances peuvent être dues au fait que le serveur reçoit simultanément un grand nombre de requêtes. Les gens doivent donc optimiser leurs sites Web afin de maintenir leur vitesse.
Tirez parti de la mise en cache du navigateur dans WordPress

Les navigateurs Web et les logiciels utilisent du contenu mis en cache. Il est momentanément enregistré sur votre disque local. Le terme "Web Cache" ou "HTTP Cache" fait référence à ces données. Le navigateur téléchargera les données de votre ordinateur et téléchargera le contenu du site Web chaque fois que vous visiterez le même site Web.

Vous devez utiliser un outil particulier pour déterminer si votre site Web WordPress utilise efficacement la mise en cache du navigateur.

Différence entre la mise en cache du navigateur et la mise en cache du serveur

Afin de réduire la charge et la latence sur les serveurs Web, la mise en cache Web côté serveur (pour la mise en cache côté serveur, nous recommandons toujours LiteSpeed ​​Cache pour WordPress) implique souvent l'utilisation d'un proxy Web qui stocke les réponses Web des serveurs Web devant lesquels il se trouve. La mise en cache Web côté client peut également inclure la mise en cache basée sur le navigateur, qui enregistre une copie en cache du contenu Web précédemment consulté.

Cette procédure implique l'utilisation du serveur Web pour produire des pages Web en cache pour votre site Web. Les actions susmentionnées sont un exemple de mise en cache de page Web, qui est principalement côté serveur.

Vous pouvez améliorer le système de mise en cache du serveur de différentes manières. Le meilleur choix serait de mettre à jour les en-têtes d'Apache. La prochaine étape serait d'utiliser des plugins WordPress, puis le CDN serait ajouté.

Méthode 1 : Exploiter manuellement la mise en cache du navigateur dans WordPress

Remarque : Cette méthode ne fonctionne qu'avec LiteSpeed ​​Enterprise ou Apache.

En incluant du code dans le fichier .htaccess, vous pouvez exploiter manuellement la mise en cache du navigateur dans WordPress. Pour trois objectifs distincts, vous devez en fait ajouter trois bits de code :

  1. Ajouter des en-têtes d'expiration
  2. Ajouter des en-têtes de contrôle de cache
  3. Désactiver les balises ETag

Vous devez avoir accès aux fichiers de votre site Web afin d'ajouter ce code, ce que vous pouvez accomplir en vous connectant à votre compte d'hébergement ou à CyberPanel.

Accédez à votre tableau de bord CyberPanel

Cliquez sur WordPress -> Liste WordPress dans le menu de gauche

Vous entrerez dans la liste des sites Web WordPress . À partir de là, cliquez sur le titre de votre site WordPress

Ceci est votre CyberPanel WordPress Manager . Cliquez sur Gestionnaire de fichiers.

Dans public_html , vous trouverez . fichier htaccess . Notez que les règles htaccess ne sont prises en charge que par LiteSpeed ​​Enterprise. Il n'est pas pris en charge par OpenLite Speed. Faites un clic droit dessus et cliquez sur CodeMirror

Ajoutez le code suivant à la fin du . htaccess le contenu du fichier en le copiant et en le collant. Ne modifiez pas le fichier d'une autre manière.

 #Customize expires cache start - adjust the period according to your needs <IfModule mod_expires.c> FileETag MTime Size AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript ExpiresActive On ExpiresByType text/html "access 600 seconds" ExpiresByType application/xhtml+xml "access 600 seconds" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/x-javascript "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 application/pdf "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresDefault "access 1 month" </IfModule> #Expires cache end

Le code susmentionné demande au navigateur de fournir une copie en cache des ressources statiques plutôt que d'en télécharger une nouvelle.

Les délais d'actualisation/d'expiration sont également inclus dans les paramètres :

HTML prend 600 secondes.
JavaScript et CSS pendant un mois
Pour les images, un an

Les visiteurs n'auront pas à télécharger des ressources particulières trop fréquemment grâce à leurs dates d'expiration. Si nécessaire, vous pouvez modifier rapidement les délais d'expiration.

Pour établir des politiques de mise en cache du navigateur sur la façon dont une ressource est mise en cache, où elle est mise en cache et l'âge maximum avant l'expiration, nous devons inclure les en-têtes Cache Control. Nous n'avons pas besoin de répéter les délais d'expiration car nous les avons déjà mentionnés plus tôt.

le code suivant, puis collez-le :

 # BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header append Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate" </filesMatch> </IfModule> </IfModule>

Les balises électroniques seront désactivées afin que les navigateurs doivent utiliser les en-têtes d'expiration et le contrôle du cache au lieu de vérifier les fichiers. Voici la clé :

 Turn Etags off <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None

Une fois que vous avez terminé, cliquez sur Enregistrer .

Méthode 2 : Tirer parti de la mise en cache du navigateur dans WordPress à l'aide de plugins

Une seule erreur peut complètement ruiner votre site Web, donc la modification du fichier.htaccess peut être assez dangereuse. Ainsi, vous pouvez utiliser des plugins comme W3 Total Cache si vous ne voulez pas prendre de risques inutiles.

Plugin W3 Total Cache

Voici comment utiliser W3 Total Cache, l'un des meilleurs plugins à cet effet, pour tirer parti de la mise en cache du navigateur.

Entrez votre tableau de bord WordPress

Cliquez sur Plugins -> Ajouter nouveau dans le menu de gauche

Recherchez le cache W3 Total . Maintenant, installez et activez ce plugin

L'onglet Performances apparaîtra dans le menu de gauche. Cliquez sur Performance -> Paramètres généraux dans le menu de gauche

Faites défiler jusqu'au cache du navigateur et assurez-vous qu'il est activé et enregistrez les modifications.

Cliquez maintenant sur Performances -> Cache du navigateur dans le menu de gauche

Sois sûr que

  1. Définir l'en-tête d'expiration
  2. Définir le contrôle du cache
  3. Définir la balise d'entité

sont activés. Enregistrez toutes les modifications.

Plug-in de cache LiteSpeed

CyberPanel donne à chaque utilisateur LiteSpeed ​​Cache par défaut avec chaque déploiement de site WordPress. Si vous n'utilisez pas CyberPanel, vous pouvez le télécharger ici.

En activant simplement la fonctionnalité, le plugin de mise en cache LiteSpeed ​​Cache vous permet d'exploiter la mise en cache du navigateur.

Allez dans votre tableau de bord WordPress

Cliquez sur LiteSpeed ​​Cache -> Cache dans le menu de gauche

Cliquez sur l'onglet Navigateur dans la barre supérieure

Assurez-vous que le cache du navigateur est activé et cliquez sur Enregistrer les modifications

Conclusion

N'oubliez pas que parfois, après l'installation d'un plugin, vous ne remarquerez pas tout de suite les modifications que vous apportez. Le fichier CSS/Stylesheet est responsable de ce retard. Vous ne pourrez pas voir les modifications que vous avez apportées en raison du cache du navigateur que vous avez déjà enregistré sur votre ordinateur. Il est conseillé d'utiliser la fonction Incognito de votre navigateur pour visualiser le site afin de le voir correctement après de multiples modifications. Vous ne consommerez pas de ressources de cache si vous utilisez cette fonction, et vous devriez pouvoir remarquer clairement les changements.

L'approche que vous choisissez pour tirer parti de la mise en cache du navigateur n'est finalement pas pertinente. L'observer en action est la seule chose qui compte. La méthode que vous avez utilisée pour y arriver n'est pas pertinente tant que la mise en cache du navigateur dans WordPress fonctionne comme prévu. Il n'y a pas de bonne ou de mauvaise approche; le résultat sera le même quel que soit votre choix. L'utilisation de la mise en cache du navigateur améliorera les temps de chargement, que vous décidiez d'apporter des modifications au fichier .htaccess ou d'utiliser un plug-in.