[How To] Tirez parti de la mise en cache du navigateur dans WordPress sans plugins

Site Web lent et essayant de l'améliorer? Vous avez probablement vu cet avertissement, mais vous ne savez pas ce que cela signifie ni comment y remédier … mais nous avons ce qu'il vous faut.Pour tirer parti de la mise en cache du navigateur est un moyen de rendre votre site Web plus rapide, mais en demandant au navigateur de stocker ou "cache" les fichiers pendant un certain temps, afin qu'ils n'aient pas à être téléchargés à nouveau lors d'une prochaine visite. Voilà tout cela signifie en bref. Mais restez et lisez tout sur la façon de vous assurer de rendre votre site Web plus rapide en corrigeant cette erreur ou cet avertissement.Essentiellement, si vous souhaitez tirer parti de la mise en cache du navigateur, vous devez spécifier la durée pendant laquelle les navigateurs Web doivent conserver les images, les fichiers CSS et Javascript stockés localement, sur le navigateur client. En utilisant ces spécifications et paramètres, le navigateur de l'utilisateur utilisera moins de données lors de la navigation sur les pages de votre site Web (car il doit télécharger moins de fichiers). Tirer parti de la mise en cache du navigateur WordPress signifie une amélioration de la vitesse de chargement de votre site Web.Si vous manquez de temps, c'est le moyen le plus simple de tirer parti de la mise en cache du navigateur WordPress:

Comment accélérer WordPress à l'aide de la mise en cache du navigateur

  • Téléchargez le plugin qui se trouve ici
  • Accédez au tableau de bord de votre WordPress, puis visitez: Tableau de bord> Plugins> Ajouter un nouveau
  • Recherchez «Leverage Browser Caching» ou cliquez sur Upload Plugin et recherchez le fichier que vous venez de télécharger
  • Cliquez sur Installer maintenant
  • Activez le plugin et vous avez terminé!
  • Vous devriez maintenant tester à nouveau votre site Web pour confirmer que les nouveaux paramètres fonctionnent correctement et que l'avertissement a disparu
  • En mettant en œuvre ces modifications minimales, vous verrez que votre score sur des sites tels que GTMetrix, Pingdom Tools ou Pagespeed Insights augmentera considérablement.En fait, c'est l'un des moyens les plus simples de rendre votre site Web WordPress plus rapide. tout de votre côté et est l'une des tâches hautement prioritaires recommandées par Google pour accélérer le chargement de votre site Web. Il est également recommandé par des sites tels que GTMetrix ou Google Pagespeed Insights pour accélérer votre chargement.

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

    Avant de vous montrer comment mettre en œuvre cela, nous allons d'abord discuter de ce que signifie la mise en cache du navigateur dans WordPress et comment cela fonctionne! (Si vous souhaitez obtenir plus de conseils WordPress, visitez simplement ce lien) .Une fois que nous expliquons comment cela fonctionne, vous pouvez comprendre comment cela aide à accélérer le chargement de vos pages. Essentiellement, lorsque quelqu'un visite une page, le navigateur doit télécharger toutes les ressources du serveur sur ce domaine à partir du serveur. Il s'agit notamment du HTML, du fichier CSS, du JS, du texte, des images et de tout autre élément) afin de charger et d'afficher la page actuelle.Maintenant, plutôt que de tout télécharger à chaque fois que vous visitez une page différente sur le même site, le navigateur utilise ce qu'on appelle un cache Web. Il s'agit d'une fonctionnalité utilisée par les navigateurs pour «stocker temporairement» ou «mettre en cache» les ressources de la page Web sur le stockage local de l'appareil. Ce stockage ou données est appelé «  Web Cache '' ou «  HTTP Cache ''. Jetez un œil à ce diagramme amusant qui explique comment fonctionne la mise en cache Web: Nous pouvons voir ci-dessus, que la première fois que la machine utilisateur (à gauche) demande au serveur (à droite ) pour le fichier images / logo, la demande est interceptée par le mécanisme de mise en cache Web (qui vérifie s'il a une copie de ce fichier). Si ce n'est pas le cas, il le récupère du serveur. Lors de la prochaine visite, au lieu d'aller sur le serveur, il l'obtient de sa propre copie.Ainsi, la beauté de cette fonction est que lorsqu'un utilisateur visite à nouveau le même site ou une page différente sur le même domaine, le navigateur utilisez la copie qui réside actuellement dans le cache temporaire – plutôt que d'avoir à télécharger à nouveau les ressources. Le navigateur ne téléchargera que ce qui est différent.Comme de nombreux sites Web ne subiront que des changements minimes d'une page à l'autre et entre les visites, la réutilisation de la copie de mise en cache a permis à la page de se charger beaucoup plus rapidement.Cela permet également de réduire la consommation de bande passante par votre site Web. serveur et réduit également la charge sur le serveur. Vous avez peut-être également rencontré un avertissement lors de l'optimisation de la vitesse de vos pages.

    Exploitez l'avertissement de mise en cache du navigateur

    Des sites tels que GTMetrix peuvent afficher l'avertissement de mise en cache du navigateur suivant, que vous devrez corriger si vous n'avez pas activé les paramètres ci-dessous.Maintenant, qu'est-ce que cela signifie réellement? Bien que la fonction décrite ci-dessus soit excellente en théorie, en par défaut, la plupart des sites Web "marqueront" le contenu pour expirer après 8 jours ou une courte période de temps. Cela signifie que si un utilisateur visite à nouveau votre domaine après 1 semaine, il devra à nouveau télécharger les ressources.Lorsque nous mettons en place une méthode pour tirer parti de la mise en cache du navigateur, nous demandons en fait au navigateur de prolonger la durée de vie ou la date d'expiration des ressources qui sont téléchargées par nos visiteurs et par conséquent optimisent les performances.En allongeant la durée de vie du cache (ou combien de temps un fichier prend pour vieillir), vous vous assurez que vos visiteurs n'ont pas besoin d'attendre pour télécharger les mêmes choses à chaque fois qu'ils visitent votre site.Cela implique très peu de changements et n'est pas très compliqué à implémenter – et vous trouverez la syntaxe exacte ci-dessous.Ce que fait réellement le changement, c'est de fixer des dates d'expiration du contenu en ajoutant des en-têtes Cache-Control et les en-têtes ETag dans les en-têtes HTTP. L'en-tête Cache-Control déclare la période de mise en cache d'un fichier ou d'un type de fichier particulier. L'ETag est ensuite utilisé pour vérifier toutes les modifications qui existent (ou non) entre les ressources mises en cache et demandées. Le paramètre vous permet généralement de spécifier la période en jours, mois ou années pour stocker les fichiers de mise en cache localement. Bien sûr, si vous prévoyez de changer les ressources de temps en temps, il est conseillé de fixer des dates d'expiration avec une fréquence qui correspond à peu près à la période où vous prévoyez de les changer. Soit dit en passant, si vous cherchez à rendre votre WordPress rapide, il existe quelques plugins comme celui-ci qui peuvent faire une réelle différence de performances en quelques minutes (avec peu ou pas d'effort). Pas prêt à utiliser un plugin pour l'instant? Lisez la suite … Voici les instructions exactes que vous devez effectuer:

  • Accédez au CPanel de votre compte d'hébergement
  • Accédez au dossier racine du site Web
  • Ouvrez le fichier .htaccess avec votre éditeur de fichiers. Si vous ne trouvez pas le fichier, vérifiez si vous pouvez afficher les fichiers masqués (le fichier .htaccess est masqué par défaut)
  • Ajoutez les modifications suivantes au bas du fichier
  • Ajouter des en-têtes d'expiration avec de longs délais d'expiration
  • Ajouter des en-têtes de contrôle de cache
  • En-têtes ETag non définis
  • N'effectuez aucune autre modification
  • Sauvegardez le fichier
  • Relancez le test
  • Pour définir le délai d'expiration des ressources telles que les images et les fichiers CSS, une légère modification de votre fichier .htaccess est nécessaire. Il se trouve à la racine de votre serveur d'hébergement. Vous pouvez modifier les valeurs des en-têtes expirés pour améliorer les performances. Définissez ces valeurs tant que cela a du sens pour votre site – 1 mois est généralement suffisant. #Customize expire la mise en cache – ajustez la période en fonction de vos besoins

    FileETag MTime Size
      AddOutputFilterByType DEFLATE texte / texte brut / texte html / texte xml / application css / application xml / xhtml + application xml / rss + application xml / application javascript / x-javascript
      ExpireActif le
      ExpiresByType text / html "access 600 seconds"
      ExpiresByType application / xhtml + xml "access 600 seconds"
      ExpiresByType text / css "access 1 month"
      ExpiresByType text / javascript "accès 1 mois"
      ExpiresByType text / x-javascript "access 1 month"
      ExpiresByType application / javascript "accès 1 mois"
      ExpiresByType application / x-javascript "accès 1 mois"
      ExpiresByType application / x-shockwave-flash "accès 1 mois"
      ExpiresByType application / pdf "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"

    # Expire la fin de la mise en cache Avec les modifications ci-dessus, nous définissons des actifs qui s'actualisent rapidement, tels que le code HTML de votre page, pour expirer après 600 secondes (c'est parce que le code HTML change généralement plus fréquemment). Nous modifions également des éléments tels que CSS et Javascript pour qu'ils n'expirent qu'une fois par mois (ces fichiers ne changent que si vous modifiez votre modèle ou vos plugins) .Cela signifie que si votre visiteur visite à nouveau la page dans un délai d'un mois, il ne pas besoin de retélécharger vos ressources CSS et JS. Si vous savez que vous effectuez rarement ces types de modifications sur votre site – vous pouvez définir une valeur plus élevée, à 1 an, similaire au jpeg, l'en-tête expire png.C'est le moyen le plus efficace de tirer parti de la mise en cache du navigateur pour WordPress ou d'autres sites Web. qui utilisent un fichier .htaccess.

    Définir les fichiers d'image sur une longue période d'expiration

    Comme vous pouvez également le voir dans notre exemple ci-dessus, nos images ne doivent expirer qu'une fois par an. Parfois, cela peut être trop long, donc un mois est généralement suffisant. Il faut déterminer ce qui a du sens pour votre site Web, ce qui garantit que les médias les plus importants qui prennent le plus de temps à télécharger sont conservés sur la machine des visiteurs et n'auront pas à être téléchargés à nouveau avant l'année prochaine. En raison de ce changement dans votre fichier .htaccess, vous utilisez correctement la mise en cache du navigateur dans WordPress – les images ne sont pas téléchargées à nouveau pendant une année entière, ce qui rend l'expérience d'un client de retour beaucoup plus positive – car il faut moins pour charger chaque page. Les fichiers qui sont mis en cache sont maintenant réutilisés.Après avoir défini les dates d'expiration, il est important de définir également les en-têtes de contrôle du cache corrects afin que le paramètre ci-dessus fonctionne réellement correctement. Il s'agit d'un autre paramètre du fichier .htaccess, que vous pouvez trouver ci-dessous. Le paramètre suivant doit également être ajouté au fichier pour définir les en-têtes de contrôle du cache, comme indiqué ci-dessus. # BEGIN En-têtes de contrôle de cache

    En-tête ajouter Cache-Control "public"

    En-tête ajouter Cache-Control "public"

    En-tête ajouter Cache-Control "privé"

    L'en-tête ajoute Cache-Control "privé, doit revalider"


    Nous avons déjà défini les dates d'expiration, nous n'avons donc pas besoin de les définir à nouveau ici.La dernière chose que nous devons faire est de (dé) définir le paramètre Etags.Essentiellement, cela n'est important que si vous utilisez un CDN pour servir certaines de vos ressources. Les Etags sont des en-têtes qui sont généralement construits à l'aide d'attributs qui les rendent uniques à chaque machine spécifique hébergeant un site (raison technique – il utilise un MD5 généré par le serveur, ce qui le rend unique au serveur qui le génère) .Si un site Web utilise un CDN ou plusieurs serveurs pour servir leurs pages, il n'y a AUCUNE garantie que le même serveur sera utilisé – par conséquent, les balises ne correspondront pas lorsqu'un navigateur récupère le composant d'origine d'un serveur et essaie plus tard de valider ce composant sur un autre serveur. Pour cette raison, il serait préférable de les RÉINITIALISER si vous utilisez plusieurs serveurs ou un CDN pour héberger votre site Web. Cela permet aux en-têtes Cache-control de contrôler réellement la mise en cache plutôt que les ETags. Étant donné que nous avons défini des paramètres pour contrôler la mise en cache via les en-têtes Cache-Control, les ETags ne sont plus nécessaires – nous les désactiverons donc.Ajoutez-les à votre fichier .htaccess pour les désactiver. # Désactiver les ETags

    En-tête non défini ETag

    FileETag None Si vous avez besoin d'en savoir plus sur ce que font les Etags, vous pouvez trouver plus de détails et lire à leur sujet dans cet article: https://en.wikipedia.org/wiki/HTTP_ETagTweaking et jouer avec le fichier .htaccess peut réellement casser votre site. Si vous faites une petite erreur, votre serveur web ne pourra pas l’analyser, commencera à lancer des pages vierges, ou lancera l’erreur 500 et le site sera mort! Donc, si vous êtes opposé à cela, vous pouvez installer un simple plugin qui prend en charge tout cela. Bien sûr, il existe de nombreux autres plugins capables de le faire. La plupart des plugins destinés à accélérer vos pages effectueront la plupart de ces paramètres en arrière-plan. Essentiellement, en plus de gérer tous les paramètres pour tirer parti de la mise en cache du navigateur dans WordPress, ceux-ci pourront effectuer un certain nombre d'autres optimisations de mise en cache, telles que la création de copies temporaires (mise en cache de fichiers), les optimisations de base de données, Memcache et d'autres optimisations qui rendent votre site plus rapide Cela comprendrait des plugins tels que WPRocket, WP Fastest Cache et W3 Total Cache et des plugins de mise en cache premium. Voyons quelques-uns de ces plugins.

    Tirez parti de la mise en cache du navigateur

    C'est le plus simple de tous, il ne fait que corriger la mise en cache du navigateur dans WordPress.

  • Téléchargez le plugin qui se trouve ici.
  • Accédez au tableau de bord de votre WordPress, puis visitez: Tableau de bord> Plugins> Ajouter un nouveau.
  • Recherchez «Leverage Browser Caching» ou cliquez sur Upload Plugin et recherchez le fichier que vous venez de télécharger.
  • Cliquez sur Installer maintenant.
  • Activez le plugin et vous avez terminé!
  • Vous devez maintenant tester à nouveau votre site Web pour confirmer que les nouveaux paramètres fonctionnent correctement et que l'avertissement a disparu.
  • Si vous recherchez un produit qui fait beaucoup plus pour rendre votre site plus rapide, nous vous recommandons fortement de regarder le reste des plugins que nous mentionnons ci-dessous.

    WP Rocket

    C'est l'un des plugins les plus rapides et les plus recommandés pour WordPress qui peut gérer toutes vos optimisations de vitesse en quelques clics. Essentiellement, cela effectue des optimisations de vitesse telles que

    • compression de fichiers statiques (GZip) – pour réduire la taille totale des données à livrer (nous avons un tutoriel complet sur la façon d'activer la compression GZip dans WordPress ici)
    • permet un cache de fichiers (y compris le préchargement du cache) – pour mettre moins de stress sur le serveur (récupérer une copie pré-rendue de chaque page)
    • Optimisation des polices Google – pour vous assurer que les polices plus lourdes sont chargées rapidement),
    • chargement paresseux – de telle sorte que les images ne sont chargées que lorsque l'utilisateur fait défiler vers le bas jusqu'à la section d'une page où l'image est requise
    • Minification et combinaison – réduction de la taille et combinaison de ressources textuelles pour les livrer plus rapidement à l'utilisateur final
    • Différer le chargement JS – de sorte que la page s'affiche rapidement au lieu d'attendre le téléchargement de tous les éléments. C'est quelque chose que nous avons couvert sur CollectiveRay.
    • Intègre et active un CDN – de sorte que vos supports plus lourds soient livrés plus rapidement
    • Prélecture DNS – pour réduire le temps nécessaire pour résoudre la source du contenu tiers

    Tout ce qui précède peut ressembler à du charabia pour quiconque n'est pas impliqué dans les optimisations d'infrastructure, mais en réalité, ce sont toutes les choses que vous devez faire pour accélérer le chargement de votre site Web. La grande chose est qu'avec WP Rocket, vous n'avez pas pour faire le gros du travail et la configuration – tout est fait pour vous! Nous vous recommandons vivement d'essayer ce plugin, qui a été considéré comme le meilleur moyen de rendre votre site Web plus rapide.Visitez WP Rocket Now

    Cache total W3

    C'est l'un des plugins de mise en cache les plus populaires de tous les temps. Il existe depuis assez longtemps et a eu beaucoup de temps pour mûrir très bien afin d'intégrer la plupart des fonctionnalités que l'on attend d'un plugin de mise en cache.Le problème est le suivant. Moi-même, quelqu'un qui utilise WordPress et la conception Web depuis très longtemps, et c'est une expérience tellement frustrante de travailler avec. Le plugin n'est pas simple à configurer et vous devez vraiment le comprendre et bien le connaître pour pouvoir le faire fonctionner correctement.Si vous cherchez un bon moyen de tirer parti de la mise en cache de la navigation dans WordPress à l'aide d'un plugin , nous recommandons fortement WPRocket ci-dessus par opposition à W3Total Cache.Si votre site Web utilise réellement Nginx comme serveur, vous aurez besoin d'un code différent, car Nginx n'a pas de fichier .htaccess. Cependant, il est encore relativement facile de l'implémenter, car il vous suffit d'effectuer quelques modifications dans le fichier conf du serveur.Vous devez ajouter le code ci-dessous à l'intérieur d'un bloc serveur existant dans votre fichier conf. Ce sera généralement dans / etc / nginx / sites-enabled / default server ico Emplacement ~ * . (Jpg | jpeg | png | gif | ico | css | js) $
    expire 90 jours;
    add_header Cache-Control "public, no-transform";
    Comme vous pouvez le déduire du code ci-dessus, nous définissons l'emplacement d'expiration des fichiers image sur 1 an ou 365 jours, tandis que nous configurons les PDF pour qu'ils expirent après 30 jours. Vous pouvez ajouter plus d'extensions de fichiers pour personnaliser l'expiration, ce qui la rend différente pour les autres types de fichiers.Tous les types de fichiers ajoutés seront mis en cache en conséquence. Bien qu'il soit assez facile d'appliquer le paramètre ci-dessus, vous constaterez que même après avoir effectué les modifications ci-dessus, vous continuerez à recevoir ce message dans les outils de test de vitesse du site Web et dans Google Pagespeed Insights, car la plupart des scripts tiers et les services ne spécifient pas de délai d'expiration long – pour diverses raisons différentes. Vous n'avez malheureusement aucun contrôle sur ces scripts, nous vous conseillons donc fortement d'utiliser les scripts MINIMUM tiers possibles. Si vous pouvez vivre sans le script, supprimez-le de votre site Web. En choisissant de l'inclure, il fera glisser le temps de chargement de vos pages vers le bas.C'est un autre avertissement fréquemment affiché par GTMetrix, provenant généralement de scripts tiers. Il s'agit essentiellement du même problème que nous venons de décrire dans la section précédente, où certains scripts ne spécifient ni un en-tête ETag ni un en-tête Last-Modified comme décrit. Malheureusement, vous ne pouvez pas faire grand-chose pour résoudre ce problème, si ces erreurs spécifiques proviennent de domaines hors de votre contrôle tels que Facebook, ou dans le cas de l'image ci-dessous, Sumo – il n'y a donc rien que vous puissiez corriger.Votre seule solution, dans ce cas, serait de supprimer ces scripts de votre domaine complètement si vous voulez être sûr que cet avertissement n'apparaît pas.

    Conclusion

    Ci-dessus, nous vous avons montré un tas de moyens à mettre en œuvre pour vous assurer que vous pouvez tirer parti de la mise en cache du navigateur et vous assurer que le contenu téléchargé est réutilisé à maintes reprises. Assurez-vous que vous l'avez mis en œuvre sur votre site, pour empêcher l'erreur de s'afficher sur les outils qui analysent les mesures de vitesse de votre site. Si vous souhaitez rendre votre site Web plus rapide, nous vous recommandons vivement de consulter notre article: [21 actions] Accélérez WordPress: obtenez un site Web ultra-rapide aujourd'hui – un guide complet.D'un autre côté, si vous pensez que cela dépasse quelque peu vos propres capacités, nous vous recommandons de laisser ce genre de choses entre les mains des PRO. truc fait? Essayez ces concerts les mieux notés sur Fiverr! Cliquez ici pour trouver des experts en optimisation de vitesse WordPress. À propos de l'auteurDavid travaille dans ou autour de l'industrie en ligne / numérique depuis 18 ans. Il possède une vaste expérience dans les industries du logiciel et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et de leurs plateformes numériques disponibles aujourd'hui.

    Pourquoi la mise en cache est-elle importante

    La mise en cache est importante elle donne l’occasion de réduire la charge sur vos serveurs d’hébergement WordPress et de réaliser fonctionner votre site web plus rapidement. Vous devez mettre en place une mise en cache adéquate pour améliorer la vitesse et exploit de votre WordPress. Un localisation web plus rapide améliore l’expérience des fans et encourage à visiter davantage de pages. Cela vous permet également de renforcer l’assurance et le temps que fans passent sur votre boutique sur la toile ou site web. Un condition web plus rapide vous permet d’augmenter le trafic vers votre site web grâce à la recherche organique. Google donne un avantage SEO significatif aux sites internet plus rapides, ce qui vous donne l’opportunité de gagner un premier classement dans les résultats de recherche. Cela étant dit, examinons les plus admirables plugins convenable en cache WordPress que vous pouvez utiliser pour augmenter la vitesse de votre site web.

    vince

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *