Le site Web est lent et tente de l'améliorer? Vous avez probablement vu cet avertissement, mais vous ne savez pas ce que cela signifie ou comment le résoudre ... mais nous sommes là pour vous. 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 de «mettre en cache» les fichiers pendant un certain temps, afin qu'ils n'aient pas à être téléchargés à nouveau lors d'une visite ultérieure. C'est tout ce que 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 less 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 réparer l'avertissement WordPress de mise en cache du navigateur de levier
- Téléchargez le plugin qui peut être trouvé ici
- Accédez au tableau de bord de votre WordPress, puis visitez: Tableau de bord> Plugins> Ajouter nouveau
- Recherchez «Tirer parti de la mise en cache du navigateur» ou cliquez sur Télécharger le plug-in, choisissez le fichier que vous avez téléchargé et cliquez sur Installer maintenant
- Activez le plugin
- Testez à 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 minimes, 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.
Cela implique très peu d'efforts de votre part 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?
Vous pouvez tirer parti de la mise en cache du navigateur en définissant une date d'expiration longue sur le contenu statique de votre site Web. Cela permet aux navigateurs de «tirer parti» de la mise en cache et de réutiliser ces fichiers encore et encore, sans avoir à les télécharger. En mettant ces fichiers en cache, ils n'ont pas besoin d'être téléchargés à nouveau, de sorte que votre site Web est plus rapide à charger.
Avant de vous montrer comment mettre en œuvre cela, nous allons d'abord discuter de ce que signifie tirer parti de la mise en cache du navigateur dans WordPress et de son fonctionnement!
Une fois que nous avons expliqué comment cela fonctionne, vous pouvez comprendre comment cela aide à accélérez le chargement de vos pages.
Essentiellement, lorsque quelqu'un visite une page, le navigateur doit télécharger tous les serveurs de ressources de ce domaine à partir du serveur. Ceux-ci incluent HTML, fichier CSS, JS, texte, images et tout autre élément) afin de charger et d'afficher la page actuelle.
Désormais, plutôt que de tout télécharger encore et encore 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 ces données s'appellent ' Cache Web' ou 'Cache HTTP'.
Jetez un œil à ce diagramme amusant qui explique le fonctionnement de la mise en cache Web:
Nous pouvons voir ci-dessus, que la première fois que la machine utilisateur (à gauche) demande au serveur (à droite) 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 sur le serveur. Lors de la prochaine visite, au lieu d'aller sur le serveur, il l'obtient à partir 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 utilisera la copie qui réside actuellement dans le cache temporaire - plutôt que d'avoir à télécharger toutes les ressources. à nouveau. Le navigateur ne téléchargera que tout ce qui est différent.
Étant donné que de nombreux sites Web n'auront que des modifications 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 serveur Web 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.
Avertissement Pagespeed pour tirer parti de la mise en cache du navigateur
Des sites tels que GTMetrix ou Pagespeed Insights peuvent afficher les éléments suivants tirer parti de la mise en cache du navigateur avertissement, que vous devrez corriger si vous n'avez pas activé les paramètres ci-dessous.
mais c'était en fait l'avertissement affiché dans une ancienne version de Pagespeed Insights. Le nouvel avertissement ressemble un peu à ceci:
Servez des actifs statiques avec une politique de cache efficace
Maintenant, qu'est-ce que cela signifie réellement?
Bien que la fonction décrite ci-dessus soit excellente en théorie, par défaut, la plupart des sites Web "marqueront" le contenu pour qu'il expire après 8 jours ou une courte période de temps. Cela signifie que si un utilisateur visite à nouveau votre domaine après une 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 au navigateur de prolonger la durée de vie ou la date d'expiration des ressources téléchargées par nos visiteurs et par conséquent d'optimiser les performances.
En prolongeant la durée de vie du cache (ou combien de temps un fichier prend pour devenir vieux), 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é à mettre en œuvre - et vous trouverez la syntaxe exacte ci-dessous.
Ce que le changement fait réellement, c'est définir les dates d'expiration du contenu en ajoutant En-têtes de contrôle du cache et 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 les changements 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 définir des dates d'expiration avec une fréquence qui correspond à peu près à la période pendant laquelle vous prévoyez de les changer.
Incidemment, si vous cherchez à rendre votre WordPress rapide, il existe quelques plugins tels que ici ce qui peut faire une réelle différence de performance en quelques minutes (avec peu ou pas d'effort).
Vous n'êtes pas prêt à utiliser un plugin pour le moment? Continuer à lire...
Si vous souhaitez rendre votre site Web plus rapide, nous vous recommandons vivement de consulter notre article: [25 actions] Accélérez WordPress: obtenez un site Web ultra-rapide aujourd'hui - Un guide complet.
1. Utilisation du fichier .htaccess
Voici les instructions exactes dont vous avez besoin pour 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 cachés (le fichier .htaccess est caché 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 du cache
- Supprimer les en-têtes ETag
- N'effectuez aucune autre modification
- Enregistrer le fichier
- Relancez le test
Pour définir le délai d'expiration des ressources telles que les images et les fichiers CSS, il faut une légère modification de votre fichier .htaccess. Cela se trouve à la racine de votre serveur d'hébergement. Vous pouvez modifier les valeurs des en-têtes d'expiration 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 le démarrage de la mise en cache - ajustez la période en fonction de vos besoins FileETag MTime Taille 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 "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" ExpiresByType application / javascript "accès 1 mois" ExpiresByType application / x-javascript "accès 1 mois" application ExpiresByType / x-shockwave-flash "accès 1 mois" application ExpiresByType / 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
Vous pensez que vous n'êtes pas à l'aise de faire ces changements vous-même?
Si vous n'êtes pas sûr de faire un tel changement, vous pouvez choisir de le faire via un concert bon marché sur Fiverr.
Trouvez les meilleurs concerts d'optimisation de la vitesse de votre site Web sur Fiverr
Avec les modifications ci-dessus, nous définissons des éléments qui s'actualisent rapidement, tels que le code HTML de votre page, pour qu'ils expirent au bout de 600 secondes (car le HTML change généralement plus fréquemment). Nous modifions également des éléments tels que le CSS et le Javascript pour qu'ils n'expirent qu'une fois par mois (ces fichiers ne changent que si vous apportez des modifications à votre modèle ou à vos plugins).
Cela signifie que si votre visiteur visite à nouveau la page dans un délai d'un mois, il n'a 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 la valeur plus élevée, à 1 an, similaire à l'en-tête jpeg, png expires.
C'est le moyen le plus efficace d'exploiter la mise en cache du navigateur pour WordPress ou d'autres sites Web utilisant un fichier .htaccess.
Définir les fichiers image sur une longue durée d'expiration
Comme vous pouvez également le voir dans notre exemple ci-dessus, nos images n'expirent 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.
Cela garantit que le plus grand média qui prend le plus de temps à télécharger est conservé sur la machine des visiteurs et ne devra pas être téléchargé à 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 se téléchargent pas à nouveau pendant une année entière.
Cela rend l'expérience d'un client fidèle beaucoup plus positive - car il faut less pour charger chaque page. Les fichiers 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 Cache-Control corrects de sorte que le paramètre ci-dessus fonctionne correctement. Il s'agit d'un autre paramètre du fichier .htaccess, que vous pouvez trouver ci-dessous.
Ajouter des en-têtes de contrôle du cache
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 du cache
En-tête ajouter Cache-Control "public" En-tête ajouter Cache-Control "public" En-tête ajouter Cache-Control "private" Header append Cache-Control "private, must-revalidate"
Nous avons déjà défini les dates d'expiration afin de ne pas avoir à le redéfinir ici.
Annuler la définition des en-têtes ETag pour les sites multi-serveurs ou les CDN
La dernière chose que nous devons faire est de (dé) définir le paramètre Etags.
Essentiellement, ceci 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 pour le 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 obtient 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 ANNULER si vous utilisez plusieurs serveurs ou un CDN pour héberger votre site Web. Cela permet aux en-têtes de contrôle du cache de contrôler réellement la mise en cache plutôt que les ETags. Étant donné que nous avons mis 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 ceci à votre fichier .htaccess pour les annuler.
# Disable ETags
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag NoneSi vous avez besoin d'en savoir plus sur ce que font les Etags, vous pouvez trouver plus de détails et les lire dans cet article: https://en.wikipedia.org/wiki/HTTP_ETag
2. Utilisation de plugins
Ajuster et jouer avec le fichier .htaccess peut en fait casser votre site. Si vous faites une petite erreur, votre serveur Web ne pourra pas l'analyser, il commencera à lancer pages blanches, ou lancez l'erreur 500 et le site sera mort !
Donc, si vous êtes opposé à cela, vous pouvez installer un simple plugin qui se charge de gérer 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 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 dans l'ensemble. .
Ceux-ci incluraient des plugins tels que Fusée WP, WP Cache le plus rapide, et W3 Total Cache et plugins de mise en cache premium.
Voyons quelques-uns de ces plugins.
Plugin par Rinku Yadav
C'est le plus simple de tous, il ne fait que corriger la mise en cache du navigateur de levier dans WordPress.
- Téléchargez le plugin qui peut être trouvé ici.
- Accédez au tableau de bord de votre WordPress, puis visitez: Tableau de bord> Plugins> Ajouter 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 vivement de regarder le reste des plugins que nous mentionnons ci-dessous.
WP Rocket
C'est l'un des plugins WordPress les plus rapides et les plus recommandés, capable de 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 comment activer la compression GZip dans WordPress ici)
- permet un cache de fichiers (y compris le préchargement du cache) - à mettre less stress sur le serveur (récupération d'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 jusqu'à la section d'une page où l'image est requise
- Minification et combinaison - réduire la taille et combiner les éléments textuels 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 actifs. 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érécupération DNS - pour réduire le temps nécessaire pour résoudre la source du contenu tiers
Tout ce qui précède peut sembler du charabia à quiconque n'est pas impliqué dans l'optimisation des infrastructures, mais en réalité, ce sont tout ce que vous devez faire pour accélérer le chargement de votre site Web.
Ce qui est génial, c'est qu'avec WP Rocket, vous n'avez pas à 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.
W3 Total Cache
C'est l'un des (en fait, presque toutes) plugins de mise en cache populaires jamais. Il existe depuis assez longtemps et a eu beaucoup de temps pour mûrir très bien pour intégrer la plupart des fonctionnalités attendues d'un plugin de mise en cache.
Le problème est le suivant. Moi-même, quelqu'un qui travaille avec 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 à mettre en place et vous devez vraiment le comprendre et bien le connaître pour pouvoir le faire fonctionner correctement.
Si vous recherchez un bon moyen d'exploiter la mise en cache de navigation dans WordPress à l'aide d'un plugin, nous vous recommandons vivement WPRocket ci-dessus par opposition à W3Total Cache.
3. Tirez parti de la mise en cache du navigateur dans Nginx
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 de configuration du serveur.
Vous devez ajouter le code ci-dessous à l'intérieur d'un bloc serveur existant dans votre fichier de configuration. Ce sera généralement dans /etc/nginx/sites-enabled/default
serveur {écoute 80; nom_serveur localhost; location / {root / usr / share / nginx / html; index index.html index.htm; } emplacement ~ * \. (jpg | jpeg | png | gif | ico | css | js) $ {expire 365d; } location ~ * \. (pdf) $ {expire 30j; }}
Ajouter des en-têtes de contrôle du cache pour Nginx
location ~ * \. (jpg | jpeg | png | gif | ico | css | js) $ {expire 90d; add_header Cache-Control "public, sans transformation"; }
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 définissons l'expiration des fichiers PDF après 30 jours. Vous pouvez ajouter plus d'extensions de fichier 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.
4. Comment mettre en cache des ressources tierces
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 de site Web et Google Pagespeed Insights.
En effet, la plupart des scripts et services tiers ne spécifient pas un long délai d'expiration - pour diverses raisons.
Vous n'avez malheureusement aucun contrôle sur ces scripts, nous vous conseillons donc fortement d'utiliser les scripts tiers MINIMUM 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.
5. Spécifiez un validateur de cache
Ceci est un autre avertissement fréquemment affiché par GTMetrix, provenant généralement de scripts tiers. Essentiellement, c'est le 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 qui sont 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 complètement ces scripts de votre domaine si vous voulez être sûr que cet avertissement n'apparaît pas.
Foire aux Questions
Comment résolvez-vous la mise en cache du navigateur à effet de levier?
Le moyen le plus simple de tirer parti de la mise en cache du navigateur consiste à installer un plug-in qui vous permet de spécifier la durée de vie de la mise en cache de différents types de contenu statique. Une méthode alternative mais simple consiste à spécifier l'heure de mise en cache dans le fichier .htaccess de votre site Web. Nous avons des instructions détaillées sur la façon de procéder ici.
Comment activer le cache dans WordPress?
Pour activer le cache dans WordPress, vous pouvez simplement installer un plugin qui active plusieurs niveaux de cache, y compris un cache au niveau du serveur, un cache au niveau de la page et un cache au niveau du navigateur. Notre plugin de choix recommandé pour cela est WP-Rocket, mais il existe plusieurs choix alternatifs que nous mentionnons dans cet article qui rendront également votre site Web plus rapide.
Comment tirer parti de la mise en cache du navigateur pour les scripts tiers?
Vous ne pouvez pas modifier la valeur de mise en cache du navigateur pour les scripts tiers tels que Facebook ou Google Analytics, car ils sont définis au niveau du serveur et vous n'avez aucun contrôle sur eux. Votre meilleure option, dans ce cas, est d'utiliser le moins possible de ces scripts
Conclusion
Ci-dessus, nous vous avons montré un certain nombre de façons de mettre en œuvre pour vous assurer que vous êtes en mesure de tirer parti de la mise en cache du navigateur et de vous assurer que le contenu téléchargé est réutilisé encore et encore. Assurez-vous que vous avez mis en œuvre cela sur votre site, pour empêcher l'erreur d'apparaître sur les outils qui analysent les métriques de vitesse de votre site.
Si vous pensez que cela dépasse quelque peu vos propres capacités, nous vous recommandons de laisser ce truc entre les mains des PRO et d'installer un plugin tel que WP Rocket pour vous assurer de tirer le maximum d'avantages de cela et de nombreuses autres actions pour faire votre le site Web se charge plus rapidement.
Visitez WP Rocket pour rendre votre site Web plus rapide aujourd'hui
Veuillez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!
Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.
et beaucoup plus ...