Introduction
L’optimisation du chargement d’un site web passe entre-autres par la mise en cache navigateur des ressources, telles que les scripts, les images et les polices.
Dans cet article, nous allons voir comment mettre en cache les ressources de Matomo Analytics chargées par le navigateur du visiteur. Nous nous limiterons aux fonctionnalités de la version gratuite auto-hébergée de Matomo, qui suffit pour suivre les visites sur un site internet de taille petite à moyenne.
En implémentant la solution indiquée, les outils d’optimisation web tels que Google PageSpeed Insights et GTMetrix n’afficheront plus la recommandation Leverage Browser Caching pour tout ce qui concerne les ressources de Matomo et Matomo Tag Manager.
Note : le code a été testé avec Matomo Analytics 4.3.1 sur un environnement Apache 2.4 chez l’hébergeur o2switch. N’oubliez pas de toujours faire une sauvegarde avant de modifier les fichiers de votre site !
Garder le contrôle sur le cache
Les risques de la mise en cache
On parle fréquemment de mise en cache des ressources de nos jours. Certains hébergeurs la pratiquent directement sans configuration requise de la part du webmaster, et il existe des plugins pour la plupart des CMS.
A cause de cela on a tendance à l’oublier, mais la mise en place d’un cache navigateur pour les ressources d’un site internet n’est pas une chose triviale. On a vite fait de se retrouver avec :
- Des visiteurs qui voient des images obsolètes, qui ont été remplacées récemment mais ont gardé la même URL
- Des visiteurs qui exécutent des anciennes versions de scripts sur des pages qui ont changé, cassant complètement l’affichage
- Des visiteurs non-authentifiés qui affichent des contenus qui ne sont disponibles normalement qu’aux utilisateurs authentifiés
S’il est envisageable de demander à une personne de recharger la page en vidant son cache navigateur ou en mode navigation privée, ça l’est beaucoup moins quand il s’agit de centaines de visiteurs.
Bonnes pratiques de mise en cache
Avant de coder tête baissée, voici quelques bonnes pratiques pour éviter les problèmes, et garder le contrôle sur la mise en cache des ressources.
✔︎ Lorsqu’une ressource cachable est modifiée, son URL doit changer afin de refléter la modification. Cela peut se faire en ajoutant un numéro de version (script.js?ver=1.0), un timestamp de la date de dernière modification (script.js?date=1627385001) ou un hash du contenu (script-a456bcd0.js). L’important est de forcer le navigateur a retélécharger la ressource.
✔︎ Une ressource cachable dont l’URL ne peut être changée ne doit pas être modifiée après sa mise en ligne. Par exemple, une ressource cachable dont l’URL est simplement script.js ne doit pas changer.
✔︎ Inclure l’entête Vary dans la réponse du serveur pour les ressources variant selon les entêtes de requête. En général, il s’agit des entêtes Accept et User-Agent. Par exemple, comme expliqué dans l’article sur la diffusion d’images WEBP dans Apache, il ne faut pas qu’un proxy-cache serve une image au format WEBP quand seule une image JPEG est supportée par le navigateur.
✔︎ Le contenu variant en fonction de l’authentification d’un visiteur ne doit pas être mis en cache. Ce contenu resterait disponible sur la machine même après une déconnexion, ce qui poserait un problème de vie privée si une personne non-autorisée y avait physiquement accès.
✔︎ Utiliser des durées de mise en cache courtes si les pratiques précédentes ne peuvent être appliquées. En désespoir de cause, mieux vaut éviter la casse (servir du contenu obsolète), même si les outils d’optimisation nous recommandent d’utiliser des durées plus longues. Si on sait qu’un contenu change à intervalle régulier, utiliser une durée de mise en cache inférieure.
Mise en cache du tracker Matomo et du Tag Manager
Configuration Apache côté Matomo
Matomo Analytics propose de base un tracker et un tag manager. Chacun dispose de ses propres URLs.
Les URLs du tracker à mettre en cache sont les suivantes :
- /matomo.js : le script du tracker chargé dans le navigateur du visiteur
- /piwik.js : l’ancien script du tracker chargé dans le navigateur, à l’époque où Matomo s’appelait encore Piwik
L’URL du tag manager à mettre en cache est la suivante :
- /js/container_IDENTIFIANT.js : le script du conteneur tag manager chargé dans le navigateur, qui peut optionnellement inclure le script du tracker (l’identifiant est celui du conteneur dans le backoffice Matomo)
Il existe des URLs dont la mise en cache doit être interdite :
- /js/container_IDENTIFIANT_preview.js : script du conteneur tag manager chargé dans le navigateur quand le conteneur est en mode prévisualisation débogage
- /matomo.php : la page appelée lors du tracking sur le navigateur du visiteur, soit via une balise d’image, soit un appel AJAX
- /piwik.php : l’ancienne page appelée lors du tracking sur le navigateur, à l’époque où Matomo s’appelait Piwik
A partir de cette liste on peut écrire le code suivant, à insérer dans un fichier .htaccess à la racine de Matomo :
# BEGIN Cache tracker et tag manager
FileETag MTime Size
<IfModule mod_headers.c>
# Cache du tracker et des conteneurs tag manager
<If "%{REQUEST_URI} =~ m#^/js/container_.*\.js$#">
Header set Cache-Control "max-age=31536000, public, must-revalidate"
</If>
<If "%{REQUEST_URI} =~ m#^/(matomo|piwik)\.js$#">
Header set Cache-Control "max-age=31536000, public, must-revalidate"
</If>
# Pas de cache si :
# - Conteneur en mode preview
# - Requête au tracker PHP
<If "%{REQUEST_URI} =~ m#^/js/container_.*_preview\.js$#">
Header set Cache-Control "private, no-cache, no-store"
</If>
<If "%{REQUEST_URI} =~ m#^/(matomo|piwik)\.php$#">
Header set Cache-Control "private, no-cache, no-store"
</If>
</IfModule>
# END Cache tracker et tag managerModification du code de suivi côté site web
Selon les bonnes pratiques que l’on a listé précédemment, nous devons revoir notre inclusion de Matomo Analytics sur le site tracké. En effet, en cas de mise à jour de Matomo, il est nécessaire que le navigateur retélécharge le script de tracker mis à jour. Nous pouvons donc inclure le numéro de version de Matomo (ici 4.3.1) dans le code de tracking inséré sur le site :
<!-- Matomo -->
<script type="text/javascript">
var _paq = window._paq = window._paq || [];
/* [...] */
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js?ver=4.3.1'; s.parentNode.insertBefore(g,s);
/* [...] */
</script>
<!-- End Matomo Code -->Si c’est le tag manager qui est utilisé, il faudra faire de même. On utilisera pour ce dernier la version du conteneur (ici 20) plutôt que la version de Matomo.
<!-- Matomo Tag Manager -->
<script type="text/javascript">
var _mtm = window._mtm = window._mtm || [];
/* [...] */
var d=document,
g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src='https://matomo.example.com/js/container_IDENTIFIANT.js?ver=20'; s.parentNode.insertBefore(g,s);
/* [...] */
</script>
<!-- End Matomo Tag Manager -->Il ne faudra pas oublier de mettre à jour le code de tracking à chaque mise à jour de Matomo et/ou du conteneur tag manager !
Conclusion
Voila, PageSpeed Insights ne devrait plus réclamer la mise en cache des ressources de Matomo Analytics sur votre site web. Il faudra mettre régulièrement à jour les numéros de version de Matomo et des conteneurs dans les codes de suivi, sans quoi les visiteurs risquent de se retrouver avec des scripts obsolètes, et vous des statistiques incorrectes.
Pour aller plus loin, un article sur la compression des scripts de tracking Matomo Analytics est disponible.
Vous pouvez également me contacter si vous avez besoin d’un coup de pouce pour votre site web.
Bon code à vous, à la prochaine !
Références
Matomo Blog – Optimisations pour charger les scripts de tracking plus rapidement
Mozilla Developers – La mise en cache
Mozilla Developers – Le header Vary
Matomo Developers – Guide du tracking Javascript
Matomo Developers – Inclusion du Tag Manager
