Exploiter la mise en cache du navigateur

La vitesse de chargement des pages impacte le référencement : Google propose des sites rapides aux internautes. Le cache du navigateur fait réutiliser des ressources aux visiteurs récurrents, c’est une optimisation proposée par PageSpeed Insights.

Le temps de chargement des pages peut être nettement amélioré par la réutilisation des fichiers les composant : le navigateur va stocker ces ressources en cache (local) pour s’en resservir.
Les visiteurs en seconde visite bénéficieront d’un chargement accéléré (pertinent si certaines sections du site sont régulièrement consultées). Les moteurs de recherche ayant fait de la vitesse de navigation leur priorité pour leurs utilisateurs, le poids donnée à l’optimisation du cache navigateur est fort.

pagespeed insights cache navigateur

Qu’est-ce que le cache navigateur ?

A chaque chargement d’une page web, un navigateur doit télécharger l’ensemble des fichiers nécessaires à son affichage. Ce qui inclut le HTML, le CSS, les JavaScript, les images et les polices.

Les sites les plus visités sont souvent les plus lourds : en moyenne, une page pèse 3,32 Mb (au 15/08/2017), chiffre en croissance constante (les images étant responsables de la moitié du poids). Une page web est souvent composée de plus d’une centaine de ressources.

Ce qui soulève deux problèmes :
-ces fichier lourds mettent du temps à charger, un visiteur avec une connexion lente attendra d’autant plus pour obtenir une page web complète
-chaque ressource envoie une requête au serveur. Plus ce dernier a de requêtes à traiter, plus il est lent, impactant le chargement de la page

La mise en cache stocke certaines ressources localement, dans le cache du navigateur (un dossier de l’ordinateur du visiteur). Une première visite sur une page devra charger l’ensemble des ressources et prendra donc un temps maximum, mais les visites suivantes seront accélérées. C’est le cas également de la navigation sur d’autres pages du site, si certaines ressources sont communes à plusieurs pages (voire toutes).

Comment ça fonctionne ?

La mise en cache consiste à indiquer que certaines ressources doivent être mises à jour après une durée définie. Un exemple simple : le logo d’un site change très rarement, déclarer que son téléchargement n’est nécessaire que tous les mois évitera un transfert de données inutiles à l’internaute, et économisera la bande passante de votre serveur.

Comment faire concrètement ?

Tout va se passer dans votre fichier .htaccess, un fichier de configuration du serveur. On y trouve notamment des consignes de redirections d’URLs. Attention avec ce fichier : toute mauvaise syntaxe amènera une erreur serveur (HTTP 503, typiquement) et votre site sera totalement indisponible. Faites donc des sauvegardes du fichier htaccess original.

On y renseigne donc nos paramètres pour chaque type de ressource à mettre en cache. Plusieurs méthodes sont possibles :

Cache-control

La directive définit la durée de mise en cache (en secondes), de telle manière :

  • 1 minute : max-age=60
  • 1 heure : max-age=3600
  • 1 jour : max-age=86400
  • 1 semaine : max-age=604800
  • 1 mois : max-age=2628000
  • 1 an : max-age=31536000

Pour attribuer une directive à plusieurs types de ressources à la fois, renseignez :

<filesMatch “.(jpg|css|png|gif|js)$”>
Header set Cache-Control “max-age=2628000, public”
</filesMatch>

Ainsi, les fichiers images, CSS et JavaScript seront conservés 1 mois en cache du navigateur de l’internaute.

ExpiresByType

Plus explicite à la lecture, la directive ExpiresByType autorise l’usage de plusieurs unités de temps pour définir la période de cache :

  • years
  • months
  • weeks
  • days
  • hours
  • minutes
  • seconds

On déclare : directive + type de ressource + “access” + durée de mise en cache

ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”

Voici un extrait du fichier .htaccess du sites que vous lisez en ce moment-même. Lors de toutes vos prochaines visites pendant 1 an, les images seront chargées à partir du cache local de votre navigateur, vous économisant quelques millisecondes (ou secondes réelles, si vous êtes en 3G).

htaccess-cache-expires

Le gain sur le score de PageSpeed Insights est remarquable : on gagne 15 points (sur 100) grâce à une manipulation assez rapide.

Le cas des steaks

La viande fraîche se conserve maximum 4 jours au réfrigirateur. On peut donc indiquer ce délai d’expiration dès l’achat de steaks chez votre boucher de quartier.

ExpiresByType steak “access plus 4 days”
Header set Cache-Control “max-age=345600, public”

Après expiration du délai, les steaks devront être remplacés.
Mais pendant ces 4 jours, vous aurez des steaks cachés.

[Total : 3    Moyenne : 5/5]
Pour marque-pages : Permaliens.

Les commentaires sont fermés