Mise en cache du navigateur

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 ça fonctionne ?

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 tirer profit de la mise en cache navigateur avec WP Rocket

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
# 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 1 month"
ExpiresByType image/png                 "access plus 1 month"
ExpiresByType image/jpeg                "access plus 1 month"
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 application/x-font-ttf    "access plus 1 month"
ExpiresByType font/opentype             "access plus 1 month"
ExpiresByType application/x-font-woff   "access plus 1 month"
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><br>

Problèmes possibles

Sur Apache

Si un problème survient avec cela sur votre serveur Apache, assurez vous que les modules d’expirations d’Apache (  mod_expires) sont activés. Vous pouvez le faire en contactant votre fournisseur d’hébergement. Regardez cette explication sur comment activer les mod_expires - http://www.absolutelytech.com/2010/08/02/howto-enable-or-disable-modules-in-apache/

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 ceci http://www.htaccesstowebconfig.com/ pour créer les règles correspondant à votre fichier de configuration web.

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)$ {
    expires max; 
}

Redémarrez Nginx après avec cette commande

$ service nginx restart