Vous venez de faire passer votre site WordPress sur un outil de test de vitesse et on vous dit que vous devez « Ajouter des Expires headers » pour votre site WordPress ?
Les Expires headers vous permettent de tirer parti de la mise en cache du navigateur, ce qui vous permet d’accélérer le temps de chargement de votre site. En outre, ils font également partie des recommandations de YSlow en matière de performances, ce qui signifie qu’ils affecteront votre « score » de performances dans des outils comme GTmetrix.
Dans cet article, nous allons expliquer ce que sont les Expires headers et comment ils affectent votre site. Ensuite, nous vous montrerons comment ajouter des Expires headers dans WordPress, étape par étape, à l’aide de quelques méthodes différentes.
Mais d’abord, nous devons faire un rapide détour pour aborder un autre sujet : la mise en cache des navigateurs.
Qu’est-ce que la mise en cache du navigateur ?
Avant de pouvoir parler des Expires headers, nous devons d’abord vous présenter le concept de mise en cache du navigateur. C’est important car les Expires headers vous aident à contrôler et à mettre en œuvre la mise en cache du navigateur – donc si vous ne comprenez pas la mise en cache du navigateur, vous ne pouvez pas comprendre les Expires headers.
En bref, la mise en cache du navigateur permet à votre site d’indiquer au navigateur d’un visiteur d’enregistrer certains fichiers sur son ordinateur local et de charger ces fichiers locallement pour les visites suivantes, plutôt que de les télécharger à partir de votre serveur à chaque chargement de page.
En éliminant la nécessité de télécharger le fichier à chaque fois, vous pouvez accélérer les temps de chargement de votre site et réduire l’utilisation de la bande passante.
Prenons un exemple : l’image du logo de votre site. Votre logo est le même sur chaque page, il n’est donc pas logique de forcer les navigateurs des visiteurs à télécharger à nouveau le même fichier de logo à chaque chargement de page. Avec la mise en cache du navigateur, vous pourriez plutôt stocker ce fichier de logo sur les ordinateurs locaux des visiteurs. Un visiteur aurait toujours besoin de télécharger l’image de votre logo lors de sa première visite. Mais pour les pages suivantes, le fichier serait chargé à partir de la mémoire cache de son navigateur local.
Que sont les Expires headers ?
Les Expires headers permettent de dire au navigateur web d’un visiteur s’il doit charger une ressource donnée depuis le cache du navigateur local (comme nous l’avons vu plus haut) ou s’il doit télécharger une nouvelle version depuis le serveur web.
Plus précisément, cela vous permet de fixer une durée pour la version en cache des différents types de fichiers avant que ce fichier « expire » et que le navigateur doive le télécharger à nouveau à partir du serveur.
Voyons un exemple…
Supposons que vous vouliez contrôler le comportement de la mémoire cache du navigateur pour les fichiers images PNG sur votre site. Si vous définissez les Expires headers pour les fichiers PNG à un mois, cela signifie que le navigateur d’un visiteur :
- Chargera la version déjà téléchargée à partir du cache pendant un mois après le premier accès/téléchargement.
- Téléchargera à nouveau ce fichier à partir du serveur après un mois.
Vous pouvez définir différents Expires headers pour différents types de fichiers, ce qui vous donne un contrôle granulaire sur la mise en cache du navigateur de votre site.
Expires headers vs cache-control
Si l’utilisation des Expires headers est une façon de contrôler la mise en cache du navigateur sur WordPress, ce n’est pas la seule. Il existe également une autre technique appelée cache-control.
Le cache-control est une technique plus moderne et offre un peu plus de souplesse pour contrôler le comportement de la mise en cache. C’est pourquoi de nombreux sites utilisent aujourd’hui le cache-control, dont Kinsta avec sa configuration Nginx personnalisée.
Cependant, les Expires headers offrent toujours tout ce dont la plupart des sites ont besoin, et constituent donc une bonne option pour la mise en cache du navigateur. Vous pouvez également utiliser les deux, bien que vos en-têtes de cache-control soient prioritaires dans la plupart des cas. Si vous utilisez les deux, assurez-vous de définir les mêmes valeurs de temps dans chacun d’entre eux.
Si vous souhaitez en savoir plus sur la mise en œuvre du cache-control sur WordPress, consultez notre guide sur la manière de tirer parti du cache du navigateur dans WordPress.
Comment corriger ajouter des « Expires headers » dans WordPress
Maintenant, passons à la partie pratique et nous vous montrerons comment configurer les Expires headers dans WordPress.
Mais d’abord, nous avons de bonnes nouvelles. Si vous êtes hébergé chez Kinsta, vous n’avez pas à vous soucier de la mise en place des Expires headers car nous le faisons automatiquement pour vous. Nous pré-configurons nos serveurs et notre réseau intégré de diffusion de contenu (CDN) pour exploiter la mise en cache des navigateurs, de sorte que vous n’avez rien à faire.
Si vous êtes hébergé ailleurs, vous pouvez ajouter des Expires headers pour votre site WordPress. Vous pouvez le faire soit en utilisant votre propre code au niveau du serveur (Nginx ou Apache), soit en utilisant des extensions WordPress.
Comment ajouter des Expires headers avec .htaccess sur le serveur web Apache
Si votre hébergeur utilise le serveur web Apache, vous pouvez ajouter des Expires headers à l’aide du fichier .htaccess, qui se trouve dans le répertoire racine de votre serveur (le même répertoire qui contient le fichier wp-config.php).
Voici ce que vous devez faire :
- Connectez-vous à votre serveur en utilisant le FTP dans votre client FTP préféré
- Localisez le fichier .htaccess dans le répertoire racine
- Téléchargez une copie de sauvegarde du fichier .htaccess sur votre ordinateur local. Ainsi, en cas de problème, vous pourrez téléverser à nouveau votre copie de sauvegarde pour résoudre les éventuels problèmes.
- Ajoutez le code ci-dessous en haut du fichier
## 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>
## EXPIRES HEADER CACHING ##Bien que les valeurs par défaut devraient fonctionner correctement pour la plupart des sites, vous pouvez ajuster les périodes de temps pour différents types de fichiers dans le code en fonction de vos besoins.
Comment ajouter des Expires headers avec un fichier de configuration sur le serveur Web Nginx
Si votre hébergeur utilise le serveur web Nginx, vous pouvez contrôler les Expires headers en modifiant le fichier de configuration de votre serveur. La façon dont vous modifiez ce fichier dépend de votre hébergeur – vous pouvez contacter le support de votre hébergeur si vous avez besoin d’aide.
Kinsta utilise le serveur web Nginx – mais souvenez-vous que nous configurons déjà les choses pour vous, donc vous n’avez pas besoin d’ajouter de code vous-même.
Voici le code que vous devez utiliser :
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Vous pouvez ajuster les délais d’expiration pour différents types de fichiers selon vos besoins.
Comment ajouter des Expires headers avec une extension WordPress
Si vous ne vous sentez pas à l’aise pour ajouter vous-même le code des Expires headers, vous pouvez également trouver des extensions WordPress qui peuvent faire le travail à votre place. Certaines de ces extensions ajoutent des Expires headers, tandis que d’autres utilisent le contrôle du cache. Dans les deux cas, le résultat final est que votre site WordPress peut bénéficier de la mise en cache du navigateur.
Une solution consiste à utiliser une extension de mise en cache si votre hébergeur n’a pas encore mis en œuvre la mise en cache pour vous. Une excellente option est WP Rocket, qui est entièrement compatible avec Kinsta. Dès que vous activez l’extension WP Rocket, elle active automatiquement la mise en cache du navigateur pour vous – il n’est pas nécessaire de configurer d’autres réglages.
Voici d’autres extensions de mise en cache qui peuvent vous aider à mettre en œuvre les Expires headers et/ou la mise en cache du navigateur :
Si vous avez déjà trié la mise en cache et que vous souhaitez simplement une extension plus ciblée, deux bonnes extensions gratuites sont disponibles :
L’extension Leverage Browser Caching n’a pas de réglages – il suffit de l’activer et elle commence immédiatement à fonctionner.
L’extension Add Expires headers vous permet de contrôler les Expires headers pour différents types de fichiers – vous pouvez faire ces choix dans la nouvelle zone Add Expires headers de votre tableau de bord WordPress :
Comment vérifier si les Expires headers fonctionnent
Pour tester si vos Expires headers sont correctement configurés, vous pouvez utiliser cet outil gratuit de GiftOfSpeed. Une fois que vous aurez saisi l’URL de votre site, l’outil vous dira deux choses :
- La durée du cache pour tous les fichiers de votre site.
- Le type de cache (il devrait indiquer Expires headers puisque c’est la méthode que vous avez utilisée, mais vous pourriez aussi voir cache-control selon la configuration de votre site).
Vous pouvez également faire passer votre site par n’importe quel outil de test de vitesse que vous utilisez (par exemple GTmetrix) et vérifier si vous voyez toujours le message « Add Expires headers ».
Comment tester les Expires headers avec le terminal
Si vous préférez tester les Expires headers avec une option plus technique, vous pouvez faire une requête curl dans le terminal pour une ressource statique sur votre site, et inspecter directement les en-têtes HTTP. Par exemple, si votre règle de contrôle d’expiration ou de cache couvre les fichiers CSS, vous pouvez faire une requête curl comme celle ci-dessous.
curl -I https://kinstalife.com/wp-includes/css/dist/block-library/style.min.cssDans notre cas, la requête curl pour leu fichier style.min.css fournit la réponse ci-dessous.
HTTP/2 200
server: nginx
date: Wed, 27 Jan 2021 01:11:05 GMT
content-type: text/css; charset=UTF-8
content-length: 51433
last-modified: Tue, 12 Jan 2021 20:17:48 GMT
vary: Accept-Encoding
etag: "5ffe03ec-c8e9"
expires: Thu, 31 Dec 2037 23:55:55 GMT
cache-control: max-age=315360000
access-control-allow-origin: *
accept-ranges: bytes
x-edge-location-klb: HaIXowU1oNczJ391oDE9zVvZ7279840b5d30a89472f57253756b3e63Comme vous pouvez le voir, la réponse comprend des en-tête expire et cache-control. Plus précisément, l’en-tête cache-control indique un max-age de 315360000 secondes, ce qui indique un délai d’expiration d’un an.
Comment ajouter des Expires headers pour les scripts externes
Les méthodes que nous vous avons montrées ci-dessus vous permettront de contrôler les Expires headers de tous les fichiers sur le serveur de votre site WordPress. Cependant, ces méthodes ne vous permettent pas de contrôler les Expires headers des scripts tiers que vous pourriez charger, tels que les polices Google, Google Analytics, etc.
Pour cette raison, certains outils de test de vitesse peuvent encore signaler ce problème potentiel même si vous avez déjà mis en œuvre les Expires headers via les méthodes ci-dessus.
Voici quelques solutions pour les scripts tiers courants…
Comment ajouter des Expire headers aux polices Google
De nombreux sites WordPress s’appuient sur Google Fonts pour leurs polices personnalisées. Cela implique généralement le chargement des polices à partir du CDN de Google, ce qui signifie que vous ne pourrez pas définir les Expires headers via la configuration de votre serveur.
Une solution simple consiste à héberger localement les fichiers de police, au lieu de se fier au CDN de Google. Pour cela, vous pouvez utiliser l’extension gratuite Optimize My Google Fonts (OMGF) sur WordPress.org.
Vous pouvez également consulter notre guide complet sur l’hébergement local des polices dans WordPress pour en savoir plus sur les avantages et les inconvénients de cette approche.
Comment ajouter des Expires headers à Google Analytics
Si vous constatez des problèmes liés à la mise en cache du navigateur et à Google Analytics, vous pouvez également envisager d’héberger localement le script de Google Analytics, comme nous vous l’avons montré avec les polices Google.
Voici quelques extensions WordPress qui permettent d’y parvenir facilement :
- CAOS (Complete Analytics Optimization Suite)
- Perfmatters
- WP Rocket avec son module Google Tracking inclus.
Résumé
Pour résumer, les Expires headers vous aident à contrôler le comportement de la mise en cache du navigateur pour les différents types de fichiers sur votre site WordPress.
Aujourd’hui, de nombreux sites utilisent les en-têtes cache-control au lieu des Expires headers, car cache-control est une option plus moderne qui offre plus de flexibilité. Cependant, les Expires headers fonctionnent toujours bien pour la plupart des sites et vous pouvez également utiliser les Expires headers et le cache-control en même temps.
En outre, certains outils de test de vitesse réduiront le score de votre site si vous n’implémentez pas les Expires headers, ce qui pourrait être votre principale motivation pour mettre en place cette tactique.
Si vous hébergez votre site WordPress chez Kinsta, vous n’avez pas à vous soucier des Expires headers car nous nous occupons de tout pour vous. Cependant, si votre site est hébergé ailleurs, vous pouvez ajouter des Expires headers à WordPress en utilisant les extraits de code que nous avons fournis ou l’une des extensions que nous avons présentées.
