Comment réparer la mise en cache du navigateur à effet de levier dans WordPress en 2021

Comment réparer la mise en cache du navigateur à effet de levier dans WordPress

Introduction

Votre site Web se charge-t-il lentement? Cherchez-vous une solution efficace pour résoudre l'avertissement de mise en cache du navigateur dans WordPress ? La vitesse des pages est un aspect essentiel de l'expérience utilisateur. Dans cet article, je partagerai des points de base pour avancer sur la façon de réparer la mise en cache du navigateur à effet de levier dans WordPress. Donc, si vous êtes également confronté à ce problème, vous devez lire le message complet pour une meilleure compréhension.

Le temps mis pour charger la page demandée dans le navigateur de l'utilisateur influence grandement le fait que l'utilisateur reste lui-même sur votre site, par exemple pour conclure une vente. Le temps de chargement des pages dépend de plusieurs facteurs : le cache du navigateur en fait partie.

Nous allons d'abord explorer ce qu'est la mise en cache du navigateur et comment elle peut aider à accélérer votre site Web. Nous verrons donc comment évaluer si un site WordPress a besoin de la mise en cache du navigateur. Enfin, nous examinerons plusieurs façons de résoudre l'avertissement de mise en cache du navigateur dans WordPress, avec et sans l'utilisation d'un plugin.

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

Le cache est un espace de stockage temporaire. Lorsqu'un visiteur demande une page sur votre site Web, le serveur collecte les informations nécessaires à partir de la base de données, les organise dans un document HTML et les fournit au navigateur. Le navigateur analyse ce document et télécharge toutes les ressources pertinentes pour afficher la page.

La mise en cache est le processus de stockage d'une partie de la charge utile de la page dans un cache pour accélérer le chargement des pages à l'avenir. Le cache peut être présent sur le serveur ou l'appareil du visiteur.

Dans le cache du serveur, vous pouvez stocker les requêtes de la base de données et la réponse HTML statique pour la page demandée.

La mise en cache du navigateur est le processus d'utilisation du stockage temporaire sur l'appareil du visiteur pour stocker des ressources telles que des feuilles de style, des scripts et des images pendant une période spécifiée.

Les visites ultérieures sur une page amènent le navigateur à télécharger les mêmes ressources à plusieurs reprises, chaque fois que l'utilisateur demande la page. Étant donné que ces ressources statiques constituent une quantité importante de charge utile pour un site WordPress, la mise en cache du navigateur réduit les temps de chargement des pages.

La mise en cache du navigateur est-elle requise ?

Une vérification du site Web sur la distribution de la taille des ressources de votre charge utile révèle généralement la taille de vos ressources et le nombre de requêtes qu'un navigateur doit envoyer pour les télécharger avant d'afficher votre page. Si vous remarquez qu'une partie importante de votre page Web est constituée de fichiers statiques, vous devriez envisager de mettre votre navigateur en cache pour améliorer la vitesse de la page.

Un moyen plus naturel de déterminer si la mise en cache du navigateur est nécessaire consiste à utiliser un outil de test de vitesse de page tel que GTmetrix. Entrez simplement l'URL de votre site Web pour lancer un test détaillé. Les résultats du test vous montreront comment accélérer votre site Web. Comme vous pouvez le constater, un avertissement courant dans la section des résultats concerne la mise en cache du navigateur.

Alternativement, vous pouvez utiliser Think with Google, un outil de test de vitesse de page pour évaluer votre site Web sur les appareils mobiles. Une recommandation clé de cet outil est de tirer parti de la mise en cache du navigateur pour votre site Web.

PageSpeed ​​​​Insights, un autre outil de Google pour tester la vitesse de la page de votre site Web, peut vous suggérer de créer une politique de cache efficace pour améliorer la vitesse de la page. La mise en cache du navigateur est un élément important d'une politique de cache efficace.

Résoudre l'avertissement de mise en cache du navigateur dans WordPress sans plugins

Si vous ne souhaitez pas utiliser de plug-in, vous pouvez modifier les paramètres du serveur Web pour corriger la mise en cache du navigateur. Dans ce cas, le serveur Web demandera au navigateur du visiteur d'enregistrer des ressources spécifiques dans le cache du navigateur. Le navigateur stockera ces fichiers localement pendant une certaine période et les utilisera lors de visites ultérieures sur la page.

La configuration du serveur Web pour demander aux navigateurs des visiteurs de démarrer la mise en cache varie d'un serveur à l'autre. Dans cet article, nous vous montrerons comment activer la mise en cache du navigateur sur les deux serveurs Web les plus populaires : Apache et Nginx.

Vous pouvez corriger la mise en cache du navigateur en suivant ces étapes :

1. Ajout d'en-têtes Expires : ces en-têtes indiquent au navigateur quand demander une nouvelle version d'une ressource au serveur.
2. Modifier les en-têtes de vérification du cache : vous pouvez utiliser ces en-têtes pour définir les critères de cache.
3. Le paramétrage des en-têtes entity-tags (ETags) : il est possible d'identifier si une ressource sur le serveur a changé par rapport au fichier local.

Corrigez la mise en cache du navigateur dans Apache

1. Créez ou modifiez le fichier .htaccess

Sur un serveur Apache, vous pouvez définir tous les paramètres nécessaires dans le fichier .htaccess. Ce fichier vous permet de configurer manuellement les paramètres d'Apache. Il s'agit d'un simple fichier texte qui stocke les paramètres Apache et définit les autorisations et les configurations pour le répertoire dans lequel il réside.

Lire la suite : Liste de contrôle SEO sur la page : 10 conseils d'optimisation exploitables pour un meilleur classement

Si vous placez un fichier .htaccess dans le répertoire principal de votre site Web, ses règles seront appliquées à toutes les pages de votre site. Vous pouvez également placer un autre fichier .htaccess dans l'un de vos sous-répertoires pour définir des autorisations spécifiques pour cet emplacement uniquement. Notez que les fichiers .htaccess de niveau inférieur remplacent les paramètres des fichiers .htaccess dans les répertoires racine.

Si vous disposez d'un accès terminal au serveur, vous pouvez vous connecter à distance pour créer un fichier .htaccess à l'emplacement approprié (pour les règles de mise en cache du navigateur au niveau du site, il doit s'agir du dossier racine).

Alternativement, si vous utilisez le gestionnaire de fichiers cPanel, déplacez-vous à l'emplacement requis et créez un fichier .htaccess .

Si vous avez déjà un fichier .htaccess , vous pouvez simplement ajouter les nouvelles règles de mise en cache du navigateur.

2. Ajouter des en-têtes d'expiration

Le premier paramètre dans le fichier .htaccess est d'activer la fonction d'expiration des en-têtes. Ajoutez la ligne suivante au fichier :

ExpireActif le

Après cela, vous pouvez définir la période pour différents fichiers texte en utilisant la syntaxe ci-dessous :

Texte ExpiresByType / CSS "accès 1 mois"

Texte ExpiresByType / HTML "accès 1 mois"

Pour définir un délai d'expiration pour les images, utilisez plutôt une image au lieu d'une barre oblique et une extension d'image.

Image ExpiresByType / jpeg "accès 1 mois"

ExpiresByType image / svg « accès 1 mois »

Pour définir la date limite de candidature, utilisez application et spécifiez l'extension de fichier.

Application ExpiresByType / pdf « accès 1 mois »

Pour tous les autres fichiers non couverts par un paramètre spécifique, utilisez la définition ExpiresDefault :

ExpireDéfaut "accès 1 mois".

3. Définir une politique de cache

Ensuite, vous devez définir les critères de cache à l'aide des paramètres de vérification du cache.

Il existe trois parties principales d'une politique de cache :

• comment une ressource est mise en cache
• l'emplacement de la mise en cache
• le temps avant l'expiration de la ressource

Un cache public indique au navigateur que les ressources peuvent être mises en cache n'importe où. En revanche, un cache privé permet le stockage uniquement sur le périphérique client.

Par exemple, la page de profil d'un utilisateur connecté ne doit être mise en cache que sur l'appareil client.

Inversement, la page d'accueil d'un blog peut également être mise en cache sur un CDN. Vous pouvez configurer une règle de cache public en ajoutant la règle suivante :

<IfModule mod_headers.c>

Ensemble d'en-têtes de contrôle de cache public

</ SiModule>

Vous pouvez également spécifier différents critères pour différents types de fichiers en ajoutant les filtres suivants au module d'en-tête :

<ifModule mod_headers.c>

<filesMatch "\. (ico | jpeg | jpg | png) $”>

Ensemble d'en-têtes de contrôle de cache public

</ FilesMatch>

<filesMatch "\. (php) $”>

Ensemble d'en-têtes de contrôle de cache privé

</ FilesMatch>

</ SiModule>

Le code ci-dessus spécifie que le navigateur peut stocker des fichiers image n'importe où, mais les fichiers PHP doivent être stockés sur l'appareil client.

Vous pouvez également ajouter une configuration Expire à chaque règle de correspondance de fichier. Le délai d'expiration doit être défini en secondes. En le mettant à zéro, le navigateur doit demander le fichier à chaque chargement de la page :

Jeu d'en-tête Expire 0

4. Désactiver les balises d'entité dans Apache

Enfin, il faut désactiver les Entity Tags à l'aide du code suivant :

FileETag Aucun

La désactivation de l'ETag oblige le navigateur à s'appuyer sur des critères de cache et à éviter de revalider les fichiers à chaque fois qu'une page est chargée.

Enregistrez le fichier .htaccess et redémarrez Apache pour que les modifications prennent effet.

Résoudre le problème de mise en cache du navigateur dans Nginx

Dans Nginx, vous pouvez trouver le fichier de configuration nginx.conf à l'emplacement /etc/nginx/site-enabled/default.

Vous pouvez ajouter un en-tête Expires à des types de fichiers spécifiques à l'aide du code suivant :

emplacement ~ * \. (ico | jpeg | jpg | png) $ {

expire 30j ;

}

Vous pouvez également ajouter un en-tête Cache-Control au même bloc de code :

emplacement ~ * \. (ico | jpeg | jpg | png) $ {

expire 30j ;

add_header Cache-Control "public" ;

}

Enregistrez le fichier de configuration et redémarrez Nginx pour que les modifications prennent effet.

Résolvez le levier du cache du navigateur avec un plugin

Si vous utilisez un plugin de mise en cache pour WordPress, il peut déjà prendre en charge la mise en cache du navigateur.

Voyons maintenant comment résoudre l'effet de levier de la mise en cache du navigateur avec certains des plugins de cache les plus célèbres.

1. Fusée WP

WP Rocket est l'un des plugins les plus rapides et les plus recommandés pour WordPress qui peut gérer toutes les optimisations de vitesse en quelques clics. WP Rocket vous permet non seulement de résoudre l'effet de levier de la mise en cache du navigateur, mais vous permettra d'optimiser votre site en utilisant diverses techniques telles que :

• compression de fichiers statiques (GZip) - pour réduire la taille totale des données (lisez l'article complet sur la façon d'activer la compression GZip dans WordPress )
• activer le cache de fichiers (y compris le préchargement du cache) - pour mettre moins de stress sur le serveur (et récupérer une copie pré-scannée de chaque page)
• Optimisation des polices Google - pour s'assurer que les polices plus massives sont chargées rapidement,
• Chargement paresseux - de sorte que les images ne soient facturées que lorsque l'utilisateur fait défiler jusqu'à la section d'une page où l'image est requise
• Minification et combinaison - réduction de la taille et de la combinaison des ressources textuelles pour les livrer plus rapidement à l'utilisateur final
• Reportez le chargement de JS - afin que la page s'affiche rapidement au lieu d'attendre le téléchargement de toutes les ressources.
• Intégrez et activez un réseau CDN - afin que les images plus lourdes soient livrées plus rapidement
• Préchargement DNS - pour réduire le temps nécessaire pour résoudre l'origine du contenu tiers

Tout cela peut sembler incompréhensible à quiconque n'est pas directement impliqué dans l'optimisation d'un site Web. Cependant, en réalité, ce sont toutes des mesures que vous devrez prendre si vous souhaitez accélérer WordPress.

Nous vous recommandons fortement de lire notre revue WP Rocket,

2. Cache LiteSpeed

LiteSpeed ​​​​Cache est un plugin de mise en cache qui vous permet de résoudre l'effet de levier de la mise en cache du navigateur en activant simplement la fonction. Installez et activez le plugin et allez dans les paramètres du cache. Passez à l' onglet Navigateur et autorisez l' option Cache du navigateur .

Il est également possible de régler l'heure d'expiration. Notez cependant que ce paramètre s'applique à tous les fichiers mis en cache sur le site Web.

3. Cache le plus rapide de WP

WP Fastest Cache est un autre plugin de cache WordPress avec des options de personnalisation simples. La version gratuite vous permet d'activer la mise en cache du navigateur. Accédez à la page des paramètres et cochez la case pour la mise en cache du navigateur.

4. Cache total W3

W3 Total Cache est un autre plugin de cache de navigateur largement utilisé. Il vous permet de personnaliser une large gamme d'options de mise en cache. Une fois installé, accédez à la section Cache Browser sur la page des paramètres.

Ce plugin vous permet de définir des autorisations pour un certain nombre de catégories de fichiers, telles que les images, les scripts et les feuilles de style. Pour chaque groupe, vous pouvez définir les en-têtes Expires, les durées de vie Expires et les ETags.

Questions fréquemment posées

Conclusion

Dans cet article, nous avons exploré l'importance de la vitesse des pages et pourquoi vous devriez corriger la mise en cache du navigateur dans WordPress. Nous avons vu des outils de test de vitesse qui indiquent si votre site WordPress a besoin d'une mise en cache du navigateur. Ensuite, nous avons expliqué comment configurer les différents serveurs Web pour activer la mise en cache du navigateur sans utiliser de plugin. Enfin, nous avons examiné trois plugins populaires qui vous permettent de corriger la mise en cache du navigateur dans WordPress.