La mise en cache est l’un des moyens les plus efficaces pour que votre site Web se charge plus rapidement pour vos visiteurs. Toutefois, pour des résultats optimaux, votre site doit indiquer aux navigateurs le contenu exact qu’ils doivent mettre en cache. Souvent, les plugins de mise en cache ne vous donnent pas le contrôle total de ces paramètres, c’est donc à vous de les configurer manuellement. Si vous n’exploitez pas correctement la mise en cache du navigateur sur votre site Web, vous pouvez recevoir l’erreur « Specify a Cache Validator » lorsque vous exécutez votre site Web à l’aide d’outils de performance.
Heureusement, WordPress permet d’activer facilement la mise en cache du navigateur. Il suffit d’apporter quelques modifications à votre fichier .htaccess . Dans cet article, nous allons vous expliquer ce qu’est la mise en cache du navigateur, comment vérifier que votre site Web l’utilise correctement et comment la configurer. Mettons-nous au travail !
Introduction à la mise en cache du navigateur
Idéalement, lorsqu’une personne visite votre site Web, son navigateur enregistre localement une partie de son contenu afin de ne pas avoir à le recharger lors des visites suivantes. Cette pratique est connue sous le nom de « mise en cache du navigateur ». Voici pourquoi il est bon de la mettre en œuvre sur votre site Web :
- Elle réduit les temps de chargement. Moins l’utilisateur a de ressources à charger, plus le rendu de votre site est rapide.
- Le taux de rebond peut être réduit. Il existe une corrélation directe entre les temps de chargement et les taux de rebond. Plus le premier est élevé, plus le risque que les visiteurs abandonnent votre site est grand.
- Il réduit la quantité de travail que votre serveur doit effectuer. Comme les visiteurs réguliers n’ont pas besoin de charger le contenu de votre serveur, celui-ci n’a pas à travailler aussi dur pour suivre le trafic.
Il est important de comprendre que, dans la plupart des cas, vous ne souhaitez pas que les navigateurs mettent en cache l’intégralité de vos sites Web. De nombreux sites comportent désormais beaucoup de contenu interactif qui se met constamment à jour. Cela signifie que si les utilisateurs mettent en cache des pages entières, ils risquent de ne pas voir les modifications apportées à celles-ci.
Dans ces conditions, vous devez être pointilleux sur le contenu que vous demandez aux navigateurs de mettre en cache. Par exemple, les images, les logos et les feuilles de style en cascade (CSS) ne changent pas souvent. Vous pouvez donc simplement indiquer aux navigateurs de les mettre en cache et de spécifier une durée. Idéalement, la configuration de la mise en cache de votre site Web devrait faire des distinctions entre les types de fichiers qui sont (ou ne sont pas) régulièrement mis à jour. Ainsi, les utilisateurs n’auront pas à vider leur cache manuellement pour voir les modifications que vous avez apportées à votre site.
Comment vérifier que votre site WordPress utilise correctement la mise en cache du navigateur ?
Lorsque nous parlons d’exploiter la mise en cache de WordPress, nous faisons référence à la configuration de votre site Web pour que les navigateurs sachent quel contenu ils doivent stocker localement, et pour combien de temps. Le moyen le plus simple de savoir si un site exploite correctement la mise en cache du navigateur est d’utiliser un outil tel que Google PageSpeed Insights, qui analyse ce paramètre et d’autres. Pour commencer, saisissez l’URL de votre site Web et cliquez sur le bouton Analyser :
PageSpeed Insights évaluera l’optimisation de votre site Web sur les mobiles et les ordinateurs de bureau. Pour chaque « version » de votre site, vous obtiendrez un score individuel allant de 0 à 100, ainsi que des suggestions sur la manière de l’améliorer. L’un des principaux facteurs pris en compte par PageSpeed Insights pour calculer votre score est l’utilisation éventuelle de la mise en cache du navigateur par votre site Web :
Si vous configurez votre site WordPress correctement, vous ne verrez pas le message ci-dessus et vous devriez obtenir un score PageSpeed Insights décent. Gardez à l’esprit que Divi est optimisé sous plusieurs aspects pour vous fournir un score PageSpeed Insights décent dès le départ. Cependant, il existe de nombreuses façons d’améliorer les performances de votre site Web, et les découvrir est un moyen fantastique d’investir votre temps.
Comment configurer manuellement la mise en cache du navigateur WordPress (en 2 étapes)
Dans le passé, nous avons parlé des plugins de mise en cache et des meilleures options. Ces types d’outils sont excellents si vous ne voulez pas vous embêter avec la configuration de votre site WordPress. Cependant, si cela ne vous dérange pas d’ajouter quelques lignes de code à l’un de vos fichiers de base, vous pouvez obtenir un niveau de contrôle beaucoup plus important sur la configuration de la mise en cache de votre navigateur. Avant de procéder, vous devriez avoir une sauvegarde récente de votre site Web, juste au cas où !
Étape 1 : Accéder à votre site Web via FTP
Dans la section suivante, vous devrez accéder à votre fichier .htaccess et le modifier. La meilleure façon de le faire est d’utiliser le protocole de transfert de fichiers (FTP), via un client dédié. Nous avons un faible pour FileZilla car il offre de nombreuses fonctionnalités et est assez simple à utiliser.
Pour commencer, installez le client et exécutez-le. Vous verrez quatre champs vides en haut de l’écran, indiquant Hôte, Nom d’utilisateur, Mot de passe et Port:
Vous aurez besoin d’un ensemble spécifique d’informations d’identification FTP pour vous connecter à votre site Web en utilisant ce protocole. Dans la plupart des cas, vous devriez les avoir reçus par courriel lorsque vous vous êtes inscrit auprès de votre fournisseur d’hébergement. Cependant, vous devriez également pouvoir les trouver sur votre tableau de bord d’hébergement ou via le panneau de contrôle (cPanel).
Une fois que vous avez vos informations d’identification, entrez-les et cliquez sur le bouton Quickconnect . FileZilla établira une connexion à votre site Web, et un ou plusieurs dossiers devraient apparaître dans la partie inférieure droite de votre écran. L’un d’entre eux devrait être le dossier racine de votre WordPress (également appelé www, public_html, ou nommé d’après votre site Web), où résident tous ses fichiers :
Une fois que vous avez ouvert le répertoire, passez à l’étape numéro deux !
Étape n°2 : Modifier votre fichier .htaccess
le fichier.htaccess est un fichier principal de WordPress qui indique à votre serveur comment il doit servir les fichiers et les pages. Par exemple, si vous utilisez de jolis permaliens, le fichier .htaccess contiendra des instructions sur la façon de les gérer. Vous pouvez également configurer le fichier pour bloquer l’accès à des pages spécifiques pour certaines IP, et bien plus encore.
Dans ce cas, nous allons utiliser le fichier .htaccess pour indiquer à votre serveur les fichiers à mettre en cache. Pour ce faire, recherchez le fichier .htaccess dans votre répertoire racine . Faites un clic droit dessus et choisissez l’option Afficher/Modifier . Cela ouvrira le fichier à l’aide de votre éditeur de texte local, ce qui vous permettra d’y apporter des modifications :
Avant d’ajouter un nouveau code à votre fichier .htaccess , faites défiler le texte jusqu’à ce que vous trouviez la ligne # END WordPress. Dans la plupart des cas (y compris celui-ci), vous souhaitez ajouter du nouveau code au fichier avant cette ligne. Voici un exemple d’une configuration simple de mise en cache du navigateur que vous pouvez mettre en œuvre immédiatement :
ExpiresActive On ExpiresByType image/jpg "accès 1 an" ExpiresByType image/jpeg "accès 1 an" ExpiresByType image/gif " accès 1 an " ExpiresByType image/png " accès 1 an "
Si vous gérez un blog WordPress, par exemple, il y a de fortes chances que vous ne modifiiez pas régulièrement les images de vos articles ou le logo de votre site. Dans ce cas, nous pouvons stocker ces fichiers dans le cache du navigateur de vos visiteurs pendant un long moment – disons un an. Dans le code ci-dessus, nous couvrons tous les types d’images les plus populaires en un seul coup. La première moitié de chaque ligne indique le type de fichier auquel nous avons affaire, et la seconde fixe une date d’expiration pour celui-ci :
ExpiresByType image/jpg "accès 1 an"
Bien sûr, tout le contenu ne doit pas être mis en cache pendant un an, et nous pouvons donc jouer avec cette valeur. Dans cet exemple, nous avons ajouté des instructions pour la mise en cache des fichiers HTML, CSS et JavaScript :
ExpiresActive On ExpiresByType image/jpg "accès 1 an" ExpiresByType image/jpeg " accès 1 an " ExpiresByType image/gif " accès 1 an " ExpiresByType image/png " droit d'accès 1 an " ExpiresByType text/css " accès 1 semaine " ExpiresByType text/html " accès 1 mois " ExpiresByType text/x-javascript "accès 1 semaine"
Ici, nous définissons notre contenu HTML pour qu’il soit mis à jour après un mois à partir de la première fois que les visiteurs y accèdent, ce qui est un délai raisonnable. Les fichiers CSS et JavaScript, en revanche, ont tendance à varier plus souvent lorsque vous utilisez des thèmes complexes tels que Divi, ou plusieurs plugins. Dans cette optique, nous avons fixé la date d’expiration de leur cache à une semaine après leur accès.
En mettant en œuvre ces règles dans votre fichier .htaccess , vous disposerez d’une base solide pour la mise en cache du navigateur. Couvrons nos bases en ajoutant des instructions pour d’autres types de fichiers :
ExpiresActive On ExpiresByType image/jpg "accès 1 an" ExpiresByType image/jpeg "accès 1 an" ExpiresByType image/gif " accès 1 an " ExpiresByType image/png " droit d'accès 1 an " ExpiresByType text/css " accès 1 semaine " ExpiresByType text/html " accès 1 mois " ExpiresByType text/x-javascript " accès 1 semaine " ExpiresDefault "accès 1 mois"
La ligne commençant par ExpiresDefault définit une durée de cache par défaut d’un mois pour tous vos fichiers. Cependant, vous pouvez y déroger en ajoutant des instructions de mise en cache pour des types de fichiers particuliers. Il s’agit ici d’attraper les autres types de fichiers qui pourraient ne pas justifier de règles individuelles, afin d’améliorer encore plus les temps de chargement de votre site Web.
Maintenant, n’oubliez pas d’enregistrer les modifications apportées à votre fichier WordPress .htaccess et fermez votre éditeur de texte. FileZilla vous demandera si vous voulez remplacer le fichier .htaccess de votre serveur par la nouvelle version, ce à quoi vous devrez répondre : « Oui ». Maintenant, allez-y et testez votre site Web en utilisant PageSpeed Insights une fois de plus – la suggestion d’optimisation de la mise en cache du navigateur devrait disparaître !
Conclusion
L’activation d’un plugin de mise en cache pour votre site Web est facile. Cependant, il ne vous donne souvent pas le contrôle total sur le type de contenu qu’il stocke sur les ordinateurs de vos utilisateurs, ou pour combien de temps. L’approche manuelle vous permet d’adapter votre configuration de mise en cache au contenu de votre site Web, et elle n’est pas difficile à mettre en œuvre.
Pour configurer manuellement la mise en cache du navigateur, il suffit d’apporter quelques modifications à votre fichier .htaccess via FTP. Si vous n’avez pas peur d’un peu de code, vous devriez être en mesure de le configurer rapidement. Ensuite, vous pouvez tester votre site Web à l’aide de Google PageSpeed Insights pour voir s’il exploite correctement la mise en cache du navigateur.
Vous avez des questions sur la façon de configurer manuellement la mise en cache du navigateur WordPress ? Parlons-en dans la section des commentaires ci-dessous !
