Comment optimiser le chargement du tracker de Piwik ?

En ajoutant des éléments sur votre site, celui-ci devient plus lourd et donc plus lent à charger. Pour éviter que vos visiteurs ne quittent le site avant que celui-ci ne soit totalement chargé, nous allons voir comment optimiser le chargement d’un des éléments de votre site, à savoir celui du script Piwik.

Mise en cache du contenu

La première chose a faire, c’est d’utiliser la fonction de cache du navigateur de vos utilisateurs. Chaque navigateur est équipé d’un système de cache, c’est une fonction qui permet au navigateur de garder en mémoire des fichiers d’un site web pour pouvoir charger ces mêmes pages plus vite lors de votre prochaine connexion. Pour activer cela il existe plusieurs techniques, la plus simple est de rajouter ces quelques lignes dans votre fichier .htaccess sur votre serveur (WordPress le fait pas défaut, pas besoin de manipulations).

### Applique une en-tête Cache-Control à index.html
< Files index.html>
Header append Cache-Control "public, must-revalidate"
< /Files>

Activer le GZIP

La deuxième chose à faire sur votre serveur est d’activer le module GZIP, souvent pré installé sur les serveurs, il ne reste plus qu’à l’activer. Ce module permet de compresser les fichiers pour les envoyer sur la machine de vos utilisateurs qui les décompressera une fois arrivée, le chargement est donc plus rapide et les fichiers sont plus légers. Pour activer le GZIP sur votre site internet, ajoutez ces lignes dans votre .htaccess :

(Ce code est générique, vous n’avez pas forcément besoin de l’adapter à votre site)

< ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.* 
mod_gzip_item_include handler ^cgi-script$
< /ifModule>

Preload DNS

La troisième partie de ce tutoriel d’optimisation de votre site web consiste à précharger les informations sur les noms de domaines distants que vous utiliserez sur votre page, par exemple, typographie ou script. Pour précharger les DNS (le chemin d’accès à ces ressources) il vous suffit d’ajouter une ligne pointant vers le nom de domaine du site hébergeant la ressource demandée.

Dans notre cas, nous allons précharger le serveur de notre installation de Piwik pour optimiser le chargement du fichier piwik.js.
Copiez cette ligne dans le head de votre site internet :

< link rel="dns-prefetch" href="//instance-de-mon-piwik.fr">

Preload resource

La quatrième et dernière partie de ce tutoriel consiste à précharger les fichiers avant la fin du chargement de la page, en clair, le script est téléchargé avant les autres éléments de la page, et donc ne freine pas l’affichage du contenu. Pour précharger le script de Piwik, copiez-collez cette ligne dans le head de votre site internet :

< link rel="preload" href="https://piwik.mon-domaine.com/piwik.js" onload="embedTracker()" type="script" crossorigin>

Pour aller encore plus loin :

Pour optimiser encore plus le temps de chargement de vos ressources, vous pouvez utiliser un CDN (Content Delivery Network, un serveur de contenu). Vous pouvez héberger votre script sur ce CDN et l’appeler sur chacune de vos pages ou encore fusionner le script de suivi de Piwik à un autre script que vous utilisez sur votre serveur pour n’avoir qu’un seul fichier à télécharger !