Exploiter la mise en cache du navigateur

Exploiter la mise en cache du navigateur

Dans le cadre de l’amélioration de la vitesse de chargement de notre site, nous allons nous occuper d’une erreur qui s’affiche toujours au premier test de votre site : « Exploiter la mise en cache du navigateur »

Bien que le titre de l’erreur semble anodin, mais la correction n’est pas intuitive.

La proposition de résolution du problème par Google Page Insights ne nous aide pas beaucoup puisqu’elle ne propose pas du code à ajouter ou une action très claire à faire.

Si on va dans le détail de l’erreur de « la mise en cache du navigateur », on va voir que plusieurs ressources (tel que des images ou des fichiers de style .css) affichent « délai d’expiration non spécifié ».

Ce qui veut dire que cette ressource ne possède pas une limite de mise en cache dans le navigateur et du coup cette ressources (image ou autre) va donc se charger à chaque visite du site.

Spécifier une date d’expiration ne va pas pour autant améliorer la vitesse de chargement de votre site pour la première fois, mais va permettre à un utilisateur qui va revenir sur le site et bien charger les images (ou les ressources) depuis le cache lui faisant gagner par mal de temps.

Il faudra être conscient que la mise en cache de ces ressources ne va expirer qu’à la date indiquée.

Il ne faut pas donc mettre une date d’expiration lointaine pour des ressources qui ont tendances à changer.

Nous allons mettre comme date d’expirations du cache un mois.

Ceci est valable pour :

  • des images .gif .png .jpg .jpeg et .ico
  • les fichier .css
  • les fichiers javascript

Voila ce qu’on doit mettre dans le fichier .htaccess

Attention, comme d’habitude le fait de toucher le fichier .htaccess peut s’avérer dangereux et peux remettre en cause tout le site, il faudra faire une sauvegarde avant de le modifier et tester après modification dans un navigateur connecté en mode privée le bon fonctionnement du site.

# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

A2592000 correspond à un mois (60*60*24*30=2592000)

Editez dans WordPress le fichier .htaccess

Si vous refaite un test de performances avec Google Page Insights vous allez remarquer que l’erreur « Exploiter la mise en cache du navigateur » à disparu et que vous avez gagné quelques points dans la course à l’accélération de l’affichage de votre site.