Year 1 - UE 05 - Digital Analytics

This course content could not have been make without Lukas Winkler, in fact, I, Ronan Chardonneau wrote the questions and Lukas answered them. I just rephrased some of the answers to better understand them. All credits come back to him so as the Matomo team from their great documentation available at https://matomo.org/blog/2017/04/important-performance-optimizations-load-piwik-javascript-tracker-faster/.

As you may know, search engines are taking into account the loading time of a web page in order to rank them within their results. So having a tracking code which will load as fast as possible is important, if you don't pay attention to it right now, one SEO guy may knock at your door one... so better having already a clear idea of what it is.

As you can see from above there are two requests which are sent to your server when Matomo is fired:

• A JavaScript file, in charge of collecting the data from the browser.
• A PHP request in charge of sending all those data to the Matomo database.

How could I make the JavaScript tracking code load faster?

Use cache

I am not 100% sure of what I am saying here below.

Cache is about storing the matomo.js within the browser of the visitor or serving the cache version of the server in order for it to not have to download it the next time when it visits the website. This feature has to be set on your server. Here is for example the information about it for web server running on Apache https://httpd.apache.org/docs/2.4/en/caching.html.You can also add this plugin to Matomo https://plugins.matomo.org/DeviceDetectorCache, when the Matomo tracker is loaded it is checking every user agent against a list of hundreds of rules (https://devicedetector.lw1.at/detected-devices) in order to detect the device. As it takes quite a lot of time this checking can be cached with this plugin.

Use Gzip

In fact, there are high chances that your server is using it but always better to double check, just go within your browser, find out matomo.js and check if the resource is using gzip:

Gzip (GNU zip) is an open source algorithm for file compression used on web server to make resources less heavy. If Gzip is not installed on your web server then you need to install it in order to make your resources faster to load. Here is one source of information that you can get information from: https://knackforge.com/blog/karalmax/how-enable-gzip-compression-apache.html

Preload the DNS

Preloading the DNS is only useful if your Matomo is hosted on a different domain and that you would like the data to be collected in priority compared to other elements of the page.

Here is the line of code that the Matomo documentation recommend to insert on your pages:

<link rel="dns-prefetch" href="//example.innocraft.cloud">

Though using this line of code makes sense only if your tracker is not high enough even the pages, so to say in the body or the footer, but as most of us are putting it within the head, preloading the DNS won't make much a difference.

Preload the JavaScript

Matomo's documentation recommend the following line of code:

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

though it will send the request faster, it won't make the code load faster. This one is only here to send the request to collect the data before other elements of the page and so as preloading the DNS, high chances that it won't make any difference if your legacy tracker is in the head.

Using a CDN

Using a CDN means that the matomo.js tracker will be hosted on a server which is located as near as possible from the visitor, as a result the loading time of the resource will be significantly improved. The bad news is that most of CDN providers belong to GAFAM or hosted on GAFAM infrastructure so not good for privacy.

Embedding the tracker after the load event

Please refer to https://matomo.org/blog/2017/04/different-ways-embedding-piwik-tracking-code-faster-website-performance/

It consists in rewriting the Matomo code like this:

var _paq = _paq || [];
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);

function embedTrackingCode() {
   var u="https://your.piwik.domain/";
   _paq.push(["setTrackerUrl", u+"piwik.php"]);
   _paq.push(["setSiteId", "1"]);

   var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
   g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);   
}

if (window.addEventListener) {
    window.addEventListener("load", embedTrackingCode, false);
} else if (window.attachEvent) {
    window.attachEvent("onload",embedTrackingCode);
} else {
    embedTrackingCode();
}

Delaying the tracker

Please refer to https://matomo.org/blog/2017/04/different-ways-embedding-piwik-tracking-code-faster-website-performance/

It consists in rewriting the Matomo code like this:

setTimeout(function () {
    embedTrackingCode();
}, 5);

Merging the JavaScript tracker file content with your other JavaScript files

There are plugins out there which can make this work for you.

How could I make the PHP request load faster?

One easy way consists in installing the Queued Tracking plugin. This plugin is in fact storing all the requests within a database (Redis or MySQL) and will then send them to Matomo, once the server will have less requests. So to say that's a plugin which is mainly use for websites receiving a lot of traffic. Though on those website, this plugin will definitely make a difference in terms of loading time. Here is a full training content dedicated to it.

Not using any of those two scripts and importing the log instead

Of course if you would like to use Matomo by not having to load any scripts at all, you can always use the log import feature: https://fr.matomo.org/docs/log-analytics-tool-how-to/