Vous avez lancé un test dans GTmetrix, et voilà le résultat en rouge: «Add Expires Headers». Un grand classique. Le site est sous WordPress, l’hébergement sur Apache, et l’outil de test de vitesse vous demande de configurer la mise en cache navigateur via le fichier .htaccess.

L’erreur n’est pas critique, mais elle est agaçante. Sans les en-têtes Expires, le navigateur recharge les images, le CSS et les scripts depuis le serveur à chaque visite. Encore et encore. Même si rien n’a changé. La vitesse chute, les utilisateurs attendent, Google dégrade votre référencement.

Vous pouvez corriger cela en cinq minutes. Deux méthodes: manuellement, en ajoutant du code dans le.htaccess, ou avec une extension en deux clics. Voici les deux, avec le code prêt à l’emploi et les réglages.

💡 Aperçu rapide:

• Comprendre comment les en-têtes Expires et Cache-Control gèrent le cache du navigateur
• Ajouter un code prêt à l’emploi dans le.htaccess: copier, coller, vérifier
• Installer l’extension AEH Speed Optimization en une minute si vous ne voulez pas toucher au code
• Configurer des durées de cache optimales pour les images, le CSS, le JS et les polices

Comment fonctionnent les en-têtes Expires

Quand un visiteur arrive sur un site, le navigateur charge des dizaines de fichiers: la page HTML, les styles CSS, le JavaScript, les polices, les icônes, les images. Chaque fichier est une requête HTTP distincte vers le serveur. Plus il y a de requêtes, plus le temps de chargement s’allonge.

L’en-tête Expires indique au navigateur: «ce fichier ne change pas, mets-le en cache et ne me le redemande pas avant telle date». Lors des visites suivantes, le navigateur récupère les fichiers depuis le cache local au lieu de les redemander au serveur. Résultat: des dizaines de requêtes en moins et un chargement rapide.

L’équivalent moderne est l’en-tête Cache-Control avec la directive max-age. Il définit la durée de vie du cache en secondes, et non une date précise, et il est aujourd’hui considéré comme prioritaire. Nous recommandons de configurer les deux en-têtes simultanément: Expires pour les anciens navigateurs et les proxies, Cache-Control pour tout ce qui est moderne. Les deux s’écrivent dans le même bloc du.htaccess.

Méthode 1: du code dans le.htaccess

Le chemin le plus direct consiste à ajouter les règles de cache directement dans le fichier de configuration Apache. Le fichier .htaccess se trouve à la racine du site (au même endroit que wp-config.php). Si vous ne le voyez pas, activez l’affichage des fichiers cachés dans votre client FTP ou le gestionnaire de fichiers de votre hébergement.

Avant de le modifier, téléchargez une copie du fichier sur votre ordinateur. Une erreur de syntaxe dans le.htaccess peut planter le site avec une erreur 500; une sauvegarde vous permet de revenir en arrière en une seconde.

Ouvrez le .htaccess dans un éditeur et ajoutez le bloc suivant avant # BEGIN WordPress:

1
    # Browser caching: Expires and Cache-Control headers
2
<IfModule mod_expires.c>
3
    ExpiresActive On
4
 
5
    # Images
6
    ExpiresByType image/jpg "access plus 1 year"
7
    ExpiresByType image/jpeg "access plus 1 year"
8
    ExpiresByType image/gif "access plus 1 year"
9
    ExpiresByType image/png "access plus 1 year"
10
    ExpiresByType image/webp "access plus 1 year"
11
    ExpiresByType image/avif "access plus 1 year"
12
    ExpiresByType image/svg+xml "access plus 1 year"
13
    ExpiresByType image/x-icon "access plus 1 year"
14
 
15
    # CSS and JavaScript
16
    ExpiresByType text/css "access plus 1 month"
17
    ExpiresByType application/javascript "access plus 1 month"
18
 
19
    # Fonts
20
    ExpiresByType font/woff2 "access plus 1 year"
21
    ExpiresByType font/woff "access plus 1 year"
22
 
23
    # PDF and other documents
24
    ExpiresByType application/pdf "access plus 1 month"
25
 
26
    # Default
27
    ExpiresDefault "access plus 2 days"
28
</IfModule>
29
 
30
    # Cache-Control headers for modern browsers
31
<IfModule mod_headers.c>
32
    &lt;FilesMatch &quot;\.(jpg|jpeg|png|gif|webp|avif|svg|ico|woff2|woff)$&quot;&gt;
33
        Header set Cache-Control "max-age=31536000, public"
34
    </FilesMatch>
35
    &lt;FilesMatch &quot;\.(css|js)$&quot;&gt;
36
        Header set Cache-Control "max-age=2592000, public"
37
    </FilesMatch>
38
</IfModule>

Voici ce qui se passe. Le premier bloc <IfModule mod_expires.c> active le module Expires et définit les durées de conservation pour chaque type de fichier. Un an pour les images et les polices, elles ne changent presque jamais. Un mois pour le CSS et le JavaScript, ils sont mis à jour périodiquement.

Le second bloc <IfModule mod_headers.c> ajoute le Cache-Control moderne avec les mêmes durées, mais en secondes: 31536000 = un an, 2592000 = un mois.

Important: les modules mod_expires et mod_headers doivent être activés sur le serveur. Sur la plupart des hébergements Apache, ils sont actifs par défaut: le support les active lors de la configuration initiale. Si la mise en cache ne fonctionne pas après la sauvegarde, écrivez au support de votre hébergement: «activez mod_expires et mod_headers».

Après avoir collé le code, enregistrez le fichier et remettez-le à la racine du site. Ouvrez le site dans un navigateur, allez dans les DevTools (F12) → Network → actualisez la page. Cliquez sur n’importe quel fichier CSS ou JS, dans l’onglet Headers vous devriez voir Expires et Cache-Control avec des valeurs non nulles.

Relancez GTmetrix, l’erreur devrait avoir disparu.

Méthode 2: l’extension AEH Speed Optimization

Si vous ne voulez pas modifier le.htaccess manuellement, il existe une extension. Elle s’appelait simplement Add Expires Headers, aujourd’hui elle a évolué en AEH Speed Optimization. En plus des en-têtes de cache, elle peut faire de la minification CSS, du lazy loading d’images et de la compression.

Étapes d’installation:

• Extensions → Ajouter, dans la recherche tapez «AEH Speed Optimization»

• Cliquez sur Installer, puis sur Activer

• Allez dans Réglages → AEH Speed Optimization

• Dans l’onglet Cache Settings, cochez les types de fichiers et définissez les durées de conservation en jours

• Cliquez sur Envoyer

L’extension écrira elle-même les règles dans le.htaccess, vous n’avez pas besoin d’écrire une seule ligne de code. Pour la plupart des sites, la version gratuite est suffisante. La version Pro ajoute la compression Gzip, la mise en cache des ressources externes (polices Google, scripts CDN) et des types de fichiers personnalisés.

🔗 AEH Speed Optimization sur WordPress.org

Si vous avez déjà une extension de cache comme W3 Total Cache ou WP Rocket, vous n’avez pas besoin d’une extension Expires séparée. Toute extension de cache sérieuse peut ajouter automatiquement les en-têtes Expires et Cache-Control dans le.htaccess. Allez dans les paramètres de votre extension et vérifiez que l’onglet Browser Cache est actif.

Quelle durée de cache définir

Il n’y a pas de réponse universelle, la durée dépend de la fréquence à laquelle vous modifiez un type de fichier donné.

Règle générale: plus le fichier est stable, plus la durée est longue. Pour les images, un an est la norme. Pour le CSS et le JS, un mois est un compromis raisonnable entre vitesse et fraîcheur.

Si vous développez activement le site et que les styles changent chaque semaine, réglez le CSS sur une semaine, pas un mois. Quand vous avez terminé les modifications, repassez à un mois.

⁉️🤔 Questions fréquentes

J’ai ajouté le code dans le.htaccess mais GTmetrix affiche toujours l’erreur. Pourquoi?

La raison la plus courante est que les modules mod_expires ou mod_headers ne sont pas activés sur le serveur. Écrivez au support de votre hébergement en demandant l’activation de ces deux modules. Deuxième raison: vous avez inséré le code après # BEGIN WordPress, et non avant. WordPress écrase tout ce qui se trouve après son marqueur. Troisièmement, une extension de cache (W3 Total Cache, WP Rocket) gère déjà le.htaccess et a remplacé vos règles par les siennes. Dans ce cas, configurez le Browser Cache directement dans l’extension elle-même, pas manuellement.

Quelle est la différence entre Expires et Cache-Control?

Expires définit une date et une heure précises («valide jusqu’au 15 juin 2027»). Cache-Control avec la directive max-age définit une durée en secondes à partir du moment de la requête («valide pendant 31536000 secondes»). Cache-Control est plus flexible et a la priorité: si les deux sont définis, le navigateur suit Cache-Control. Nous recommandons d’écrire les deux pour une compatibilité maximale avec les anciens et les nouveaux clients.

Le site est sous Nginx, le.htaccess ne fonctionne pas. Que faire?

Le fichier .htaccess est une configuration Apache. Nginx l’ignore. Pour Nginx, les règles de cache s’ajoutent dans la section server du fichier de configuration du site avec la directive expires. Si vous êtes sous Nginx (hébergements comme Kinsta, Cloudways), utilisez l’extension AEH Speed Optimization: elle fonctionne sur n’importe quel serveur web car elle gère les en-têtes via PHP, et non via la configuration serveur.

Dois-je configurer Expires si j’utilise déjà un CDN?

Oui. Un CDN (Cloudflare, BunnyCDN) met en cache le contenu sur ses serveurs dans le monde entier, mais le cache du navigateur est une couche distincte. Des en-têtes Expires et Cache-Control correctement configurés réduisent les requêtes même vers le CDN: le navigateur ne sollicite pas du tout le réseau pour un fichier si sa copie locale est encore fraîche. Les deux couches de cache, CDN + navigateur, fonctionnent ensemble, elles ne se remplacent pas.

L’extension AEH Speed Optimization entre-t-elle en conflit avec mon extension de cache?

Cela peut arriver si les deux essaient d’écrire des règles dans le.htaccess. Avant d’installer AEH Speed Optimization, désactivez le Browser Cache dans votre extension de cache principale, ou inversement, conservez une seule extension qui gère à la fois le cache de page et le cache navigateur. WP Rocket et W3 Total Cache peuvent tout faire de manière native, une extension Expires séparée n’est pas nécessaire avec eux.

Faut-il configurer Expires manuellement ou une extension suffit-elle?

Si vous travaillez en confiance avec un FTP et que vous n’avez pas peur d’un éditeur de code, la configuration manuelle via le.htaccess offre un contrôle total et n’ajoute pas d’extension supplémentaire dans l’administration. Le code ci-dessus: copiez, collez, et la question est réglée.

Pour tous les autres, l’extension AEH Speed Optimization résout le problème sans risque de faute de frappe dans la configuration. De plus, elle propose la minification et le lazy loading, qui accélèrent également le site.

L’essentiel est de ne pas laisser l’erreur GTmetrix en l’état. Cinq minutes pour configurer les en-têtes Expires donnent un gain de vitesse notable, et la vitesse, c’est à la fois l’expérience utilisateur et le référencement.