Votre site Web est lent à charger ? La vitesse de la page est un aspect important de l’expérience utilisateur. Le temps qu’il faut pour que la page demandée se charge dans le navigateur de votre utilisateur affecte énormément s’il reste sur votre site, par exemple, pour conclure une vente.
Le temps de chargement de la page dépend de nombreux facteurs – la mise en cache du navigateur en fait partie. Dans ce didacticiel, nous verrons comment corriger la « mise en cache du navigateur » dans WordPress, qui est une astuce d’optimisation des performances bien connue recommandée par de nombreux outils d’analyse de la vitesse des pages.
Tout d’abord, nous allons explorer ce qu’est la mise en cache du navigateur et comment elle peut aider à accélérer votre site Web. Ensuite, nous verrons comment évaluer si un site WordPress a besoin de la mise en cache du navigateur. Enfin, nous examinerons différentes manières de corriger la 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 ?
Un cache est un espace de stockage temporaire. Lorsqu’un visiteur demande une page sur votre site Web, votre serveur rassemble les informations nécessaires dans la base de données, les organise dans un document HTML et les transmet 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 suivantes. Un cache peut être présent sur le serveur ou sur l’appareil du visiteur.
Dans le cache du serveur, vous pouvez stocker les résultats des requêtes de la base de données et/ou la réponse HTML statique pour la page demandée.
La mise en cache du navigateur consiste à utiliser un 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 de temps spécifiée.
Les visites ultérieures d’une page obligent le navigateur à télécharger les mêmes ressources encore et encore, à chaque fois que l’utilisateur demande la page. Étant donné que ces ressources statiques constituent une partie importante de la charge utile d’un site WordPress, la mise en cache du navigateur réduit les temps de chargement des pages.
Avez-vous besoin de la mise en cache du navigateur ?
Un audit de 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 constatez qu’une partie importante de votre page Web est constituée de fichiers statiques, vous devriez explorer la mise en cache du navigateur pour améliorer la vitesse de la page.
Un moyen plus simple de déterminer si vous avez besoin de la mise en cache du navigateur consiste à utiliser un outil de test de vitesse de page tel que GTmetrix. Entrez simplement l’URL de votre site Web pour commencer un test détaillé. Les résultats du test vous montreront comment vous pouvez accélérer votre site Web. Comme vous pouvez le remarquer, une recommandation courante dans la section des résultats consiste à tirer parti de la mise en cache du navigateur.
Alternativement, vous pouvez utiliser Réfléchissez avec Google, un outil de test de vitesse de page mobile pour évaluer votre site Web sur des appareils mobiles. Une recommandation clé de cet outil est de tirer parti de la mise en cache du navigateur pour votre site Web.
Aperçu de la vitesse de page, un autre outil de Google pour tester la vitesse des pages de votre site Web, peut vous suggérer de créer une politique de cache efficace pour améliorer la vitesse des pages. La mise en cache du navigateur constitue une partie importante d’une politique de cache efficace.
Correction de la mise en cache du navigateur dans WordPress sans plugin
Si vous ne souhaitez pas utiliser de plug-in, vous pouvez modifier les paramètres de votre serveur Web pour tirer parti de la mise en cache du navigateur. Si vous le faites, votre serveur Web demandera au navigateur du visiteur d’enregistrer certaines ressources dans le cache du navigateur. Le navigateur stockera ces fichiers localement pendant une période de temps spécifique et les utilisera lors des visites de pages suivantes.
Le processus de configuration de votre serveur Web pour demander aux navigateurs de vos visiteurs de démarrer la mise en cache varie d’un serveur à l’autre. Dans cet article, nous verrons 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 :
- Ajout d’en-têtes Expires – Ces en-têtes indiquent au navigateur quand demander une nouvelle version d’une ressource au serveur.
- Modification des en-têtes Cache-Control – Vous pouvez utiliser ces en-têtes pour définir vos politiques liées au cache.
- Définition des en-têtes des balises d’entité (ETags) – Vous pouvez identifier si une ressource sur votre serveur a changé par rapport au fichier local.
Correction de la mise en cache du navigateur dans Apache
1. Créez ou recherchez le fichier .htaccess
Sur un serveur Apache, vous pouvez définir tous les paramètres nécessaires dans le fichier .htaccess. Ces fichiers vous permettent de configurer manuellement les paramètres Apache. Ce sont des fichiers en texte brut qui stockent les paramètres Apache et définissent les autorisations et les configurations pour le répertoire dans lequel ils résident.
Si vous placez un fichier .htaccess dans le répertoire racine de votre site Web, il s’appliquera à toutes les pages de votre site Web. Vous pouvez également placer un autre fichier .htaccess dans l’un de vos sous-répertoires pour définir des autorisations spécifiques uniquement à cet emplacement. Notez que les fichiers .htaccess de niveau inférieur remplacent les paramètres des fichiers .htaccess dans les répertoires parents.
Si vous disposez d’un accès terminal à votre 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 de votre dossier racine).
Sinon, si vous utilisez le gestionnaire de fichiers dans cPanel, accédez à l’emplacement requis et créez un fichier .htaccess.
Si vous avez déjà un fichier .htaccess, vous pouvez simplement y 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 le Expire les en-têtes caractéristique. Ajoutez la ligne suivante au fichier :
ExpiresActive On
Ensuite, vous pouvez définir l’heure pour différents types de fichiers texte à l’aide de la syntaxe ci-dessous :
ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month"
Pour définir une date d’expiration pour les images, utilisez le image taper à la place de text suivi d’une barre oblique et de l’extension de l’image.
ExpiresByType image/jpeg "access 1 month" ExpiresByType image/svg "access 1 month"
Pour définir l’heure d’expiration des demandes, utilisez le application type de fichier et spécifiez l’extension de fichier.
ExpiresByType application/pdf "access 1 month"
Pour couvrir tout autre fichier qui n’a pas été couvert par des paramètres spécifiques, utilisez le ExpiresDefault mot-clé:
ExpiresDefault "access 1 month"
3. Définir une politique de cache
Ensuite, vous devez définir votre politique de cache à l’aide des paramètres Cache-Control.
Il y a trois parties principales d’une politique de cache :
- comment une ressource est mise en cache
- l’emplacement de la mise en cache
- l’âge de la ressource avant son expiration
Un cache public indique au navigateur que les ressources peuvent être mises en cache n’importe où, tandis qu’un cache privé permet le stockage uniquement sur l’appareil du client.
Par exemple, la page de profil d’un utilisateur connecté doit être mise en cache uniquement sur l’appareil du client.
D’un autre côté, la page d’accueil d’un blog peut également être mise en cache sur un CDN. Vous pouvez définir une politique de cache public en ajoutant la règle suivante :
<IfModule mod_headers.c> Header set Cache-Control "public" </IfModule>
Vous pouvez également spécifier différentes politiques pour différents types de fichiers en ajoutant les filtres suivants au module d’en-têtes :
<ifModule mod_headers.c> <filesMatch ".(ico|jpeg|jpg|png)$"> Header set Cache-Control "public" </filesMatch> <filesMatch ".(php)$"> Header set Cache-Control "private" </filesMatch> </ifModule>
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 du client.
Vous pouvez également ajouter un paramètre Expire à chaque filesMatch régner. Vous devez définir le délai d’expiration en secondes. Par exemple, le définir sur zéro nécessite que le navigateur demande le fichier à chaque chargement de la page :
Header set Expires 0
4. Désactiver les balises d’entité dans Apache
Enfin, vous devez désactiver balises d’entité en utilisant le code suivant :
FileETag None
La désactivation des ETags oblige le navigateur à s’appuyer sur votre politique de cache et à éviter de revalider les fichiers à chaque chargement d’une page.
Enregistrez le fichier .htaccess et redémarrez Apache pour que les modifications prennent effet.
Correction de la mise en cache du navigateur dans Nginx
Dans Nginx, vous pouvez trouver le fichier de configuration nginx.conf à l’emplacement /etc/nginx/sites-enabled/default.
Vous pouvez ajouter un en-tête Expires à des types de fichiers spécifiques à l’aide du code ci-dessous :
location ~* .(ico|jpeg|jpg|png)$ {
expires 30d;
}
Vous pouvez également ajouter un en-tête Cache-Control au même bloc de code :
location ~* .(ico|jpeg|jpg|png)$ {
expires 30d;
add_header Cache-Control "public";
}
Enregistrez le fichier de configuration et redémarrez Nginx pour que les modifications prennent effet.
Correction de la mise en cache du navigateur avec un plugin
Si vous utilisez un plugin de mise en cache WordPress, il peut déjà prendre en charge la mise en cache du navigateur.
Explorons maintenant comment corriger la mise en cache du navigateur avec quelques plugins de mise en cache populaires.
1. Cache LiteSpeed
Cache LiteSpeed est un plugin de mise en cache qui vous permet de corriger la mise en cache du navigateur en activant simplement la fonctionnalité. Installez et activez le plugin et dirigez-vous vers les paramètres de cache. Naviguez vers le Navigateur onglet et activez le Cache du navigateur option.
De plus, vous pouvez définir l’heure d’expiration. Notez, cependant, que ce paramètre s’appliquera à tous les fichiers mis en cache sur votre site Web.
2. Cache le plus rapide de WP
Cache le plus rapide de WP est un autre plugin de mise en cache pour WordPress avec des options de personnalisation simples. Sa 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, comme indiqué ci-dessus.
3. Cache total W3
Cache total W3 est également un plugin de mise en cache WordPress populaire. Il vous permet de personnaliser une bonne gamme d’options de mise en cache. Une fois que vous l’avez installé, rendez-vous sur le Cache du navigateur section 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 catégorie, vous pouvez définir des en-têtes d’expiration, des durées de vie d’expiration et des ETags.
Emballer
Dans ce didacticiel, nous avons exploré l’importance de la vitesse de la page et pourquoi vous pourriez vouloir corriger la mise en cache du navigateur dans WordPress.
Nous avons couvert les outils d’évaluation de la vitesse des pages qui vous indiquent si votre site WordPress a besoin de la mise en cache du navigateur. Ensuite, nous avons discuté de la façon dont vous pouvez configurer votre serveur Web pour activer la mise en cache du navigateur sans utiliser de plug-in. Enfin, nous avons examiné trois plugins populaires qui vous permettent de corriger la mise en cache du navigateur dans WordPress.
Des questions sur la façon de corriger la mise en cache du navigateur dans WordPress ? Si tel est le cas, veuillez demander dans les commentaires ci-dessous.
