Le cache navigateur
La mise en cache du navigateur vous permet d'accélérer votre site Web pour les visiteurs qui consultent plusieurs pages, ou qui le visitent plusieurs fois, en stockant les fichiers localement dans le navigateur de l'utilisateur.
De cette manière, la quantité de données que le navigateur de l'utilisateur doit télécharger, ainsi que le nombre de requêtes HTTP sont réduits. Pour une explication plus approfondie, voyez notre article de blog
NOTE : La mise en cache du navigateur ne peut être appliquée qu'aux fichiers provenant de votre propre domaine et NON à ceux provenant de tiers - Facebook, Google, etc.
Comment fonctionne la mise en cache du navigateur
Une bonne explication est fournie par GTMetrix :
La mise en cache du navigateur fonctionne en marquant certaines pages, ou parties de pages, comme devant être mises à jour à des intervalles différents. Le logo de votre site web, par exemple, ne changera probablement pas d'un jour à l'autre. En mettant en cache l'image de ce logo, nous pouvons indiquer au navigateur de l'utilisateur de ne télécharger cette image qu'une fois par semaine. Chaque visite de l'utilisateur au cours de la semaine ne nécessitera pas un nouveau téléchargement de l'image du logo.
En demandant au navigateur de stocker ces fichiers et de ne pas les télécharger lorsque l'utilisateur revient, le serveur web fait gagner du temps à l'utilisateur et économise la bande passante du serveur web.
Comment WP Rocket applique la mise en cache du navigateur
Pour activer la mise en cache du navigateur avec WP Rocket, tout ce que vous avez à faire est de l'installer et de l'activer. WP Rocket définira des longueurs d'expiration sur certains types de fichiers et modifiera votre fichier .htaccess avec ces règles :
# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on
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 4 months"
ExpiresByType audio/ogg "access plus 4 months"
ExpiresByType video/mp4 "access plus 4 months"
ExpiresByType video/webm "access plus 4 months"
ExpiresByType image/avif "access plus 4 months"
ExpiresByType image/avif-sequence "access plus 4 months"
# 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 4 months"
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>
HTML et max-age
WP Rocket applique une longue durée de mise en cache du navigateur sur les types de fichiers statiques comme CSS, JS, images etc.
Pour le document HTML lui-même, nous définissons un expires de 0 seconde. Cela garantit que le navigateur vérifiera auprès du serveur qu'il dispose de la dernière version de la page avant de la servir à partir du cache du navigateur. Si le fichier sur le serveur n'a pas changé, seuls les en-têtes (quelques octets d'information) sont échangés et la page est servie à partir du cache du navigateur. Si le fichier sur le serveur a changé, la nouvelle page sera téléchargée et stockée dans le cache du navigateur.
Nous adoptons cette approche pour garantir que tous les visiteurs voient immédiatement votre contenu le plus récent.
La règle d'expiration de 0 seconde se traduit par cache-control:max-age=0. Si cela interfère avec une autre couche de cache que vous utilisez, vous pouvez supprimer cette règle spécifique.
Dépannage des avertissements "Exploiter la mise en cache du navigateur" et "Politique de cache efficace"
Les avertissements de la politique de cache efficace
Vous avez peut-être utilisé GTMetrix, Pingdom Tools ou PageSpeed Insights pour vérifier les performances de votre site web et vu une recommandation concernant "Tirer parti de la mise en cache du navigateur", "Ajouter des en-têtes Expires" ou "Servir des actifs statiques avec une politique de cache efficace."
- Cliquez ensuite sur le message pour le développer et afficher la liste des fichiers signalés.
- Les fichiers listés sont-ils hébergés sur votre domaine ? Si les fichiers sont externes, c'est-à-dire qu'ils ne sont pas servis par votre propre domaine, vous ne pouvez pas les optimiser.
- Votre site utilise-t-il un fichier htaccess? Comme décrit ci-dessus, WP Rocket ajoute des règles de mise en cache du navigateur dans le fichier htaccess. Vérifiez avec votre hébergeur pour voir si :
- Votre site utilise un fichier htaccess. Si c'est le cas, vérifiez le fichier pour vous assurer que le bloc de règles ci-dessus est présent
- Mod_expires est activé
- La durée de vie du TTL du cache est-elle nulle ?
Cela signifie généralement que le module de serveur nécessaire n'est pas du tout activé. Parlez-en à votre hébergeur. Si votre serveur est Apache/LiteSpeed, demandez-lui d'activer le module mod_expires. Si vous utilisez un serveur NGINX ou IIS, suivez ces étapes ou parlez-en à votre hébergeur.
- Utilisez-vous Cloudflare?
- Utilisez-vous une autre couche de cache telle que Varnish ou autre?
Vous trouverez plus d'informations à ce sujet dans notre document :
Gestion des ressources externes
Si les fichiers référencés sont hébergés sur votre domaine, vérifiez les points suivants :
Il se peut qu'un paramètre de Cloudflare soit à l'origine de l'annulation de nos règles. Connectez-vous à Cloudflare et accédez à : Caching > ; Browser cache expiration pour vérifier cela. Nous recommandons une valeur de 1 an pour éviter les avertissements dans GT Metrix etc...
Il se peut que les règles définies dans cette configuration aient priorité sur les nôtres. Demandez à votre hébergeur si c'est le cas.
Administrateurs du serveur
Si vous gérez votre propre serveur, voici quelques conseils sur ce dont vous avez besoin pour appliquer la mise en cache du navigateur. Notez que nous ne pouvons pas vous aider à modifier la configuration de votre serveur. Nous fournissons ces informations à titre de ressource utile :)
Sur Apache/LiteSpeed
Assurez-vous que le module d'expiration d'Apache/LiteSpeed ( mod_expires) est activé :
http://httpd.apache.org/docs/current/mod/mod_expires.html
En ligne de commande :
$ sudo a2enmod expires
Puis redémarrez Apache :
sudo /etc/init.d/apache2 restart
Sur le serveur Windows (IIS)
Si vous utilisez un serveur Windows (IIS), vous n'avez pas de fichier .htaccess dans lequel les règles de mise en cache du navigateur sont définies. Dans ce cas, vous pouvez utiliser quelque chose comme l'outil suivant pour créer les règles correctes pour votre fichier de configuration web : Converting Apache .htaccess rules to IIS web.config using IIS Manager for Azure Websites" pour créer les règles correspondant à votre fichier web.config .
Ou suivez ce guide pour appliquer la mise en cache du navigateur sur votre serveur :
http://blog.janjonas.net/2011-08-21/microsoft-iis-7-enable-client-side-browser-caching-static-content-web-config
Sur NGINX
Si vous utilisez Nginx, vous pouvez ajouter la règle suivante :
location ~* \.(css|js|ico|gif|jpe?g|png|svg|eot|otf|woff|woff2|ttf|ogg|webp)$ {
expires max ;
}
Redémarrez NGINX avec cette commande
$ service nginx restart