Comment ajouter des Expires Headers dans WordPress ?

Les Expires Headers sont une composante indissociable du cache. La mise en cache est une technique de performance qui consiste à accélérer le chargement des pages web d’un site en utilisant des ressources préchargées et stockées dans les navigateurs de visiteurs. Actuellement, l’activation du cache est toujours recommandée dans le but d’accélérer la vitesse de chargement d’un site quelle que soit la plateforme de création utilisée.🚀

Vous avez peut-être déjà reçu la recommandation d’ajouter les Expires Headers lorsque vous analysez votre site avec les outils de test de vitesse. 

Objectif

Cet article donne des détails sur l’avantage d’utiliser les Expires Headers sur votre site WordPress. De plus, vous allez également apprendre les différentes méthodes pour ajouter les Expires Headers à WordPress.🤭

Prérequis

Vous devez au préalable :

• Avoir installé WordPress sur votre espace d’hébergement web
• Avoir un accès de niveau administrateur à l’espace d’administration de votre site
• Savoir installer un plugin sur WordPress
• Avoir les coordonnées d’accès FTP aux fichiers de votre site.

Que sont les Expires Headers ?

Pour mieux comprendre le concept des Expires Headers, nous allons revenir sur ce qu’est le cache. Vous devez comprendre cette notion, car les Expires Headers font partie du cache.

Sur le web, le cache fait référence à une technique qui consiste à enregistrer les données d’une page web localement (dans le navigateur web) et à utiliser pour charger rapidement la même page lors de prochaines visites. Cela veut dire que lorsqu’un visiteur arrive pour la première fois votre site, son navigateur web enregistre les données de la page visitée en demandant au serveur les ressources nécessaires.

La prochaine fois, qu’il voudrait visiter la même page, le navigateur chargera la page à partir de ces données enregistrées (cache) sans envoyer à nouveau les mêmes requêtes au serveur. Ce qui réduit le temps de traitement de la demande et accélère le chargement de la page web. Mais quel est le rôle des Expires Headers au cours de ce processus ?

Les Expires Headers interviennent pour fixer la durée pendant laquelle la version du cache doit être maintenue avant de charger une nouvelle version auprès du serveur. Ce sont des scripts contenant des instructions sur la durée d’expiration de fichiers du cache et la nécessité de charger une version actualisée après cette durée.

Par exemple, les Expires Headers peuvent indiquer au navigateur que les images contenues dans le cache doivent être conservées pour une durée d’une année. Le navigateur continuera à charger les mêmes images pour la même page web jusqu’à ce que la durée fixée soit dépassée, après quoi, il demandera une nouvelle version de fichiers auprès du serveur.

Par ailleurs, les Expires Headers peuvent être configurés pour les différentes ressources de la page web. Ce qui permet un contrôle global sur les performances de votre site.

Comment vérifier le fonctionnement des Expires Headers sur votre site ?

Utiliser les outils de test de vitesse

Vous voudrez savoir à présent si les Expires Headers sont ou non configurés sur votre site. Généralement, vous utiliserez les outils de test de vitesse (tel que GTmetrix) pour tester si les Expires Headers fonctionnent. Lorsqu’ils ne sont pas configurés, GTmetrix affichera une recommandation pour les ajouter.

Mais parfois, vous devez parcourir un rapport très complexe pour retrouver cette recommandation parmi tant d’autres. Au lieu de cela, vous pouvez gagner du temps en utilisant un outil prêt à l’emploi avec une configuration minimale. C’est notamment GiftofSpeed.Il suffit de vous rendre sur la page de test et renseigner l’URL de votre site dans la zone correspondante. Ensuite, vous devez cliquer sur le bouton « Test URL » et l’analyse sera automatiquement lancée.

Une fois que le test est terminé, la page de résultat ressemble à celle-ci👇 :Comme vous pouvez le voir, GiftofSpeed donne les détails sur chaque fichier où les Expires Headers sont configurés. Mais le plus important est que vous pouvez savoir quelle est la durée d’expiration du cache avant qu’il soit renouvelé. Vous avez en plus, la méthode utilisée pour contrôler la durée d’expiration du cache.

Sur le rapport ci-dessus👆, vous pouvez remarquer que la méthode qui revient le plus est le cache-control. Cela est en fait normal, car le cache-control est la méthode la plus répandue sur les serveurs web modernes. Cependant, il ne remplace pas les Expires Headers qui constituent une méthode distincte. Vous pouvez même combiner les deux. Donc, selon la configuration de votre site, vous pourriez utiliser le cache-control ou les Expires Headers.

Utiliser un terminal

Si vous avez des compétences techniques nécessaires, vous pouvez plutôt utiliser un terminal SSH. Vous devez alors vous servir des requêtes curl pour vérifier les en-têtes HTTP de votre site. Par exemple, pour les fichiers CSS, la requête curl que vous pouvez utiliser ressemble à celle-ci :

curl -I https://votredomaine.com/wp-includes/css/dist/block-library/style.min.css

Vous devez remplacer, dans la requête, votre propre nom de domaine. La sortie affiche les résultats similaires à ceux-ci👇 :Comme vous pouvez le voir, la durée d’expiration du cache est d’une année pour notre site de test à compter du jour où cette requête a été lancée.

Comment ajouter les Expires Headers dans WordPress ?

Vous connaissez à présent comment procéder pour savoir si les Expires fonctionnent ou non sur votre site. Maintenant, nous allons voir comment les ajouter à un site WordPress. Vous devez noter que la façon dont vous devez procéder dépend du type de serveur que vous utilisez. Donc, comme préalable, vous devez savoir sur quel type de serveur est déployé votre site.

Vous pouvez demander cette information auprès de votre hébergeur. Chez LWS, vous devez simplement accéder à votre compte d’hébergement pour avoir ce détail. Il suffit de vous rendre dans la rubrique « Informations ».

Une fois que vous avez cette information, voyons comment vous devez faire pour ajouter les Expires Headers à votre site.

1. Ajouter les Expires Headers sur les serveurs web Apache

Si vous utilisez le serveur web Apache, vous devez modifier le fichier .htaccess pour ajouter les Expires Headers à votre site WordPress. Vous trouverez ce fichier généralement dans le répertoire racine de votre installation. Il peut être parfois masqué, vous devez alors faire une recherche filtrée pour le trouver.

Pour accéder au fichier .htaccess, vous pouvez utiliser un logiciel client FTP tel que FileZilla. Vous pouvez également utiliser le gestionnaire de fichiers présent dans votre compte d’hébergement.

En utilisant FileZilla, vous devez tout d’abord localiser votre fichier .htaccess dans le répertoire racine de votre site. Ensuite, faites un clic droit et téléchargez une copie. De cette façon, vous pouvez revenir à la version originale si vos modifications ont affecté votre site. Vous devez avoir installé un éditeur de textes (comme Notepad++) pour pouvoir modifier le fichier .htaccess sur votre ordinateur. Dans notre cas, nous allons éditer ce fichier dans Notepad++. Une fois que vous avez téléchargé une copie, faites encore un clic droit et sélectionnez l’option « Afficher/éditer ».

Par la suite, le fichier sera d’abord transféré puis ouvert sur l’éditeur. L’interface ressemble à l’image ci-dessous 👇:Une fois que vous avez ouvert votre fichier .htaccess, insérez ces lignes de codes :

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

Comme vous le remarquez, les images sont configurées ici pour une durée d’un an. Les fichiers JavaScript, CSS et PDF auront une durée d’un mois avant que le navigateur les rechargent à nouveau auprès du serveur.

2. Ajouter les Expires Headers sur les serveurs web Nginx

Si votre site WordPress est déployé sur un serveur web de type Nginx, la manière d’ajouter les Expires Headers dépend de la configuration adoptée par votre serveur. Dans l’éventualité où vous souhaitez modifier le fichier de configuration de votre serveur, vous devez vous adresser à votre hébergeur.

Si vous avez tout de même accès à ce fichier de configuration, vous pouvez utiliser le script suivant pour ajouter les Expires Headers :

location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 30d;
}

Vous devez idéalement adapter la durée du cache en fonction de vos besoins. De même, vous pouvez choisir quel type de fichiers sera concerné par les Expires Headers. Dans le code ci-dessus, nous avons inclus les différents types d’images, les fichiers JavaScript, CSS, HTML et les fichiers PDF.

3. Utiliser une extension pour ajouter les Expires Headers dans WordPress

Les extensions WordPress pour ajouter les Expires Headers sont en général celles que vous pouvez utiliser pour activer le cache sur votre site. Et comme vous le savez, il existe plusieurs plugins de cache WordPress. Cependant, ils ne sont pas tous équipés de la fonctionnalité d’ajout des Expires Headers.

L’utilisation d’une extension dédiée est par ailleurs la méthode la plus facile pour ajouter les Expires Headers à votre site. Et c’est quel que soit le type de serveur sur lequel votre site est déployé. Le plugin le plus performant que vous pouvez utiliser est sans doute WP Rocket. Vous avez également d’autres solutions avec des fonctionnalités gratuites/payantes.

Il s’agit notamment de W3 Total Cache ou encore WP Fastest Cache. Ces plugins activent la mise en cache puis ajoutent automatiquement les Expires Headers à votre site. La configuration est rapide et vous n’avez pas besoin d’appliquer du code. Mais si vous utilisez une extension de cache qui n’inclut pas la fonctionnalité d’ajout des Expires Headers, vous pouvez utiliser le plugin Add Expires Headers.

Pour ce faire, accédez à votre espace d’administration et rendez-vous dans la section « Extensions › ajouter ». Recherchez le plugin « Add Expires Headers ».Après l’installation et l’activation, accédez à la section « Add Expires Headers ».Dans l’interface suivante, activez la réception de notifications de mises à jour ou sautez cette étape en cliquant sur le bouton « Passer ».Vous serez automatiquement redirigé vers une nouvelle interface. Dans l’onglet « Cache settings », vous devez sélectionner tous les fichiers que vous souhaitez inclure dans le cache et déterminez la durée d’expiration dans la section située à droite de l’interface.Vous devez déterminer la durée d’expiration en nombre de jours.

Ajouter les Expires Headers pour les ressources externes

Dans la configuration actuelle de sites web, vous ferez toujours appel à des scripts externes pour le bon fonctionnement de votre site. Vous pouvez également utiliser le plugin Add Expires Headers pour configurer les Expires Headers pour les ressources externes. Cependant, pour bénéficier de cette fonctionnalité, vous devez utiliser la version professionnelle.Comme vous pouvez le voir, la version professionnelle vous permet d’ajouter des Expires Headers pour différents types de ressources externes. Il s’agit notamment de :

• Google Analytics pour tous les scripts que vous ajouterez à votre site pour traquer les visites et avoir des données sur le trafic.
• Google Tag Manager pour toutes les balises que vous utilisez sur votre site.
• Google Fonts si vous utilisez les polices Google sur votre site
• Les scripts jQuery si vous utilisez cette bibliothèque JavaScript et multiplateforme sur votre site.
• Les scripts de Facebook

Alternativement, vous pouvez utiliser des plugins tels que WP Rocket, OMGF pour ajouter les Expires Headers pour les ressources externes.

Conclusion

🥳Toutes nos félicitations d’avoir lu cet article. Les Expires Headers sont une partie essentielle de votre cache. Dans cet article, vous avez appris à quoi, ils peuvent servir et comment vous pouvez les ajouter dans WordPress. En bref, tout dépendra de la configuration de votre serveur. Selon que votre site WordPress est déployé sur le serveur web de type Apache ou Nginx, le processus d’intégration des Expires Headers n’est pas le même. Notre tutoriel vous a donné des détails pour tous les cas possibles. Vous avez maintenant toutes les connaissances nécessaires, il ne vous reste qu’à passer à l’action.

Vous avez des questions concernant les Expires Headers et plus généralement les solutions à mettre en place pour accélérer le temps de chargement de votre site WordPress ? N’hésitez pas à nous contacter via la rubrique Commentaires en bas de page !