Ajouter les en-têtes Expires

Comment ajouter les en-têtes Expires au fichier .htaccess ?

Est-ce que GTmetrix ou Pingdom affiche l’erreur « Ajouter des en-têtes expires » ?

Qu’est-ce que l’en-tête Expires ?

Quelles sont les étapes pour ajouter des en-têtes expirés à .htaccess ?

Quel est le bon moment pour l’expiration des fichiers et du cache ?

Expliqué de manière compréhensible comment ajouter les en-têtes Expires au fichier .htaccess.

L’un des messages d’erreur les plus courants lors du test du site Web sur Pingdom ou GTmetrix est : Ajouter des en-têtes Expires.

Le message d’erreur vous invite à augmenter le temps passé sur les fichiers (images, HTML, CSS et JavaScript) qui restent dans le cache de votre site. La mise en cache a un impact direct sur le temps de chargement de votre site web. La vitesse du site Web est une optimisation SEO très importante. Google considère la vitesse du site Web comme un facteur de classement important. Les opérateurs de sites web qui n’ont pas optimisé la vitesse de chargement de leur site web n’obtiendront pas un bon classement dans les résultats de recherche sur Google à l’époque du « mobile first ». Les sites Web qui ne sont pas optimisés pour les appareils mobiles en 2019 et qui n’ont pas de temps de chargement rapides se trouveront difficilement dans les premiers rangs des moteurs de recherche.

Lorsqu’un utilisateur visite votre site Web sur le Web, le navigateur télécharge automatiquement une série de fichiers. Chacun de ces fichiers a une date d’expiration et reste dans le cache pendant un certain temps. Si l’utilisateur décide de revisiter d’autres pages de votre site Web ou de votre site Web, tous les fichiers n’ont pas besoin d’être rechargés. Si le délai d’expiration des fichiers est trop court, l’erreur « Ajouter des en-têtes expires » apparaîtra.

Comment fonctionne l’en-tête Expires ?

Les en-têtes expirés donnent au navigateur la commande de télécharger et d’enregistrer ces fichiers. La raison en est de réduire la quantité d’envoi et de réception entre l’ordinateur et le serveur (c’est-à-dire le site web) et d’utiliser les données stockées dans le cache.

Par conséquent, le chargement d’un site Web nouvellement consulté prend un peu plus de temps que lorsqu’il est appelé à plusieurs reprises. Selon le site Web, il existe différents fichiers tels que HTML, CSS, JavaScripts, graphiques, images, PDF et d’autres fichiers qui font partie des fonctionnalités du site Web et doivent être chargés.

Ainsi, chaque fois qu’un nouvel utilisateur visite votre site web, tous ces fichiers sont demandés au serveur. Chaque requête (pour chaque fichier individuel) nécessite un temps de chargement différent en fonction de l’accueil du fichier. Cependant, lorsque certains fichiers sont placés en mémoire, le nombre de requêtes diminue. Cela accélérera le chargement du site Web.

# Combien de temps les données doivent-elles rester dans le cache du navigateur ?

Pour empêcher les utilisateurs de télécharger à nouveau des fichiers partagés, une date d’expiration doit être définie pour ces fichiers. La date d’expiration définie indique au navigateur le fichier à demander au serveur et le fichier à demander au cache.

Quels fichiers sont mis en cache ?

La première étape consiste à déterminer quels fichiers sont mis à jour fréquemment et lesquels sont mis à jour rarement.

Fichiers rarement mis à jour :
Photos
Vidéos
Audio
Le favicon
Webfonts, polices

Fichiers mis à jour plus fréquemment :
Javascript et CSS
SMS

Comment ajouter des en-têtes Expires au fichier .htaccess pour éviter l’erreur « ajouter des en-têtes expires ».

Ajoutez l’en-tête Expires au fichier .htaccess :
Le fichier .htaccess est souvent un fichier caché dans votre répertoire racine. Assurez-vous d’effectuer une sauvegarde de ce fichier avant d’apporter des modifications. En cas de problème, vous pouvez restaurer le fichier enregistré.

1. Téléchargez votre fichier .htaccess. Si le fichier est masqué, activez l’option Afficher les fichiers masqués dans votre FTP.

2. Ouvrez votre fichier .htaccess dans un éditeur (Bloc-notes ou Bloc-notes ++) et ajoutez votre code avec les dates d’expiration. Celui-ci peut être déterminé individuellement en fonction de vos besoins.

Par exemple, nous utilisons le code suivant, vous êtes invités à le copier et à l’utiliser adapté à votre .htaccess :

# Expires headers (for better cache control)
<ifmodule mod_expires.c>
        ExpiresActive on
        # Perhaps better to whitelist expires rules? Perhaps.
        ExpiresDefault                              "access plus 1 month"
        # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
        ExpiresByType text/cache-manifest           "access plus 0 seconds"
        # Your document html
        ExpiresByType text/html                     "access plus 0 seconds"
        # Data
        ExpiresByType text/xml                      "access plus 0 seconds"
        ExpiresByType application/xml               "access plus 0 seconds"
        ExpiresByType application/json              "access plus 0 seconds"
        # Feed
        ExpiresByType application/rss+xml           "access plus 1 hour"
        ExpiresByType application/atom+xml          "access plus 1 hour"
        # Favicon (cannot be renamed)
        ExpiresByType image/x-icon                  "access plus 1 week"
        # Media: images, video, audio
        ExpiresByType image/gif                     "access plus 4 months"
        ExpiresByType image/png                     "access plus 4 months"
        ExpiresByType image/jpeg                    "access plus 4 months"
        ExpiresByType image/webp                    "access plus 4 months"
        ExpiresByType video/ogg                     "access plus 1 month"
        ExpiresByType audio/ogg                     "access plus 1 month"
        ExpiresByType video/mp4                     "access plus 1 month"
        ExpiresByType video/webm                    "access plus 1 month"
        # HTC files  (css3pie)
        ExpiresByType text/x-component              "access plus 1 month"
        # Webfonts
        ExpiresByType font/ttf                      "access plus 4 months"
        ExpiresByType font/otf                      "access plus 4 months"
        ExpiresByType font/woff                     "access plus 4 months"
        ExpiresByType font/woff2                    "access plus 4 months"
        ExpiresByType image/svg+xml                 "access plus 1 month"
        ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
        # CSS and JavaScript
        ExpiresByType text/css                      "access plus 1 year"
        ExpiresByType application/javascript        "access plus 1 year"
</ifmodule>
## EXPIRES END

Une brève explication à ce sujet :

< La requête IfModule mod_expires.c> vérifie si le module serveur nécessaire est installé.

ExpiresActive On active le module de votre site Web, suivi des informations sur les types de fichiers à mettre en cache et pendant quelle période. Le délai est précisé sous la forme « à partir du dernier accès pour la période X », dans l’exemple « accès plus 1 semaines », c’est-à-dire « à partir de l’accès pendant une semaine ». Une fois la période définie expirée, le fichier dans le cache du navigateur sera remplacé par la version actuelle de votre site Web.

Assurez-vous que le temps est toujours défini au pluriel, c’est-à-dire qu’il y a un « s » à la fin (semaines, mois, …). Vous pouvez savoir quelles valeurs sont possibles en tant que spécification temporelle dans la documentation officielle du serveur web Apache : http://httpd.apache.org/docs/2.0/mod/mod_expires.html#AltSyn

3. Après avoir apporté les modifications au fichier .htaccess, n’oubliez pas de l’enregistrer et de le télécharger à nouveau dans le répertoire racine de votre site Web, à moins que vous n’ayez effectué une modification directe sur le serveur.

Combien de temps faut-il fixer le délai d’expiration des fichiers ?

La durée du cache peut être définie en années, mois, semaines, jours, heures et même secondes.

La date d’expiration de chaque fichier doit être définie en fonction de la durée d’utilisation/demande.

La date d’expiration des images peut être fixée à environ un an, car elles ne sont généralement pas modifiées et le chargement des images prend la plupart du temps.

HTML, CSS et JavaScript sont plus susceptibles d’être mis à jour régulièrement. La date d’expiration peut être définie sur un mois ou moins.