Le cache navigateur

Dans cette documentation

La mise en cache du navigateur vous permet d’accélérer votre site en stockant des fichiers localement dans le navigateur de l’utilisateur.

De cette manière, la quantité de données que l’utilisateur doit charger, ainsi que le nombre de requêtes HTTP sont réduites.

NOTE : Le cache navigateur ne s'applique que pour les fichiers servis depuis votre propre domaine, et non depuis des domaines tiers - Facebook, Google, etc

Comment le cache navigateur fonctionne-t-il ?

Voici une bonne explication donnée par GTMetrix :

"La mise en cache du navigateur fonctionne en marquant certaines pages, ou parties de pages, comme étant nécessaires pour être téléchargées à différents intervalles. Votre logo sur votre site, par exemple, n’est pas susceptible de changer quotidiennement. En mettant l’image du logo en cache, on peut signifier au navigateur de l’utilisateur de ne télécharger cette image qu’une fois par semaine. Il n’aura pas besoin de le faire à chaque visite que cet utilisateur fera sur votre site durant cette semaine.

Le serveur indique au navigateur de garder ces fichiers en mémoire et ne pas les télécharger quand il revient sur le site, ainsi les utilisateurs gagnent du temps et de la bande passante."

Comment WP Rocket exploite-t-il la mise en cache du navigateur ?

Pour activer la mise en cache navigateur avec WP Rocket, il vous suffit simplement de l’installer et de l’activer. C’est là que la magie opère. WP Rocket va régler des date d’expirations 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 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>

Résoudre la recommandation "leverage browser caching"

Vous avez probablement utilisé GTMetrix, Pingdom Tools ou PageSpeed Insights pour vérifier les performances de votre site et vous avez vu les recommandations sur “Leverage browser caching”, "Add Expires headers" ou "Diffusez des éléments statiques grâce à des règles de cache efficaces"

  1. Pingdom ne fournit pas la liste des fichiers spécifiques qui sont pointés du doigt, donc si c'est ce que vous avez utilisé, relancez le test en utilisant GTMetrix ou PageSpeed.
  2. Cliquez ensuite sur le message pour le développer et afficher la liste des fichiers qui sont pointés. 
  3. Les fichiers listés sont-ils hébergés sur votre domaine ?
    4. Si les fichiers sont externes, c'est-à-dire non servis depuis votre propre domaine, vous ne pouvez pas les optimiser.

    Vous pouvez en savoir plus à ce sujet dans notre doc :  Gérer les ressources externes

    Si les fichiers référencés sont hébergés sur votre domaine, vérifiez les points suivants :

  4. Votre site utilise-t-il un fichier htaccess ? 
    5. Comme décrit ci-dessus, WP Rocket ajoute les règles de mise en cache navigateur dans le fichier htaccess.  Vérifiez auprès de votre hébergeur si :
    • Votre site utilise bien un fichier htaccess. Si c’est bien le cas, vérifiez ce fichier pour voir si les blocs de règles y sont bien présents
    • Mod_expires est bien activé
  5. Utilisez-vous Cloudflare ? 

    6. Un réglages dans Cloudflare pourrait outrepasser nos règles. Connectez-vous à votre compte Cloudflare et rendez-vous à :  Caching > Browser cache expiration pour vérifier ceci. Nous recommandons une valeur de 1 an pour éviter les avertissements dans GT Metrix etc...

  6. Utilisez-vous un autre niveau de cache tel que Varnish ou autre ? 

    7. Les règlages dans cette configuration pourraient l'emporter sur les nôtres. Demandez à votre hôte si c'est le cas.

Infos pour les admins serveur

Si vous utilisez votre propre serveur, voici quelques conseils sur ce dont vous avez besoin pour appliquer au mieux la mise en cache navigateur. Notez que nous ne pouvons pas prendre en charge les modifications apportées à votre configuration de serveur. Nous fournissons ces informations comme des ressources utiles :)

Sur Apache/LiteSpeed

Si un problème survient avec cela sur votre serveur Apache/LiteSpeed, assurez vous que les modules d’expirations d’Apache/LiteSpeed (  mod_expires) sont activés. Vous pouvez le faire en contactant votre fournisseur d’hébergement. Regardez cette explication sur comment activer le mod_expires : http://httpd.apache.org/docs/current/mod/mod_expires.html

Dans la ligne de commande :  

$ sudo a2enmod expires

Puis redémarrez Apache : 

$ sudo /etc/init.d/apache2 restart

 Sur un serveur Windows (IIS)

Si vous utilisez un serveur Windows (IIS), vous n’avez pas de fichier htaccess, là où les règles de mise en cache du navigateur sont définies. Dans ce cas là, vous pouvez utiliser ce tutoriel " 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 . 

Sur Nginx

Si vous utilisez  Nginx, vous utiliser le code suivant :  

location ~* \.(css|js|ico|gif|jpe?g|png|svg|eot|otf|woff|woff2|ttf|ogg|webp)$ {
	expires max; 
}

Redémarrez Nginx après avec cette commande 

$ service nginx restart
Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.