When you track your website with Matomo or any other analytics solution, you need to embed a JavaScript file in order to track page views, events, clicks, and more. At InnoCraft, it is our daily business to help Matomo (Piwik) users to make the most out of their Matomo. We often see similar problems of websites loading unnecessarily slower because the tracking file is not loaded as fast as it should be. There are many ways you can improve the performance but avoiding the most important mistakes will help you to not lose revenue and conversions because of this today. Below you find a few steps that will boost the loading of your Matomo JavaScript tracking file.
Cache matomo.js (or piwik.js)
The most important step is to make sure to configure your server in a way so the matomo.js JavaScript tracker file will be cached once it has been loaded and not requested again on subsequent page views. Learn more about browser caching.
Enable GZIP
We recommend enabling GZIP as it reduces the size the user needs to load when the matomo.js file is requested. For the standard Matomo tracker, this will reduce the size from about 60KB to 20KB.
Preload DNS
Often a Matomo is hosted on a different domain and when the browser loads the JavaScript tracker file, it needs to first perform a DNS lookup to find the IP address for this domain. By adding the below snipped for your Matomo domain, it can boost the performance of loading the tracker file by 10ms to 50ms.
<link rel="dns-prefetch" href="//example.innocraft.cloud">If you are using Matomo for WordPress (and not Matomo On-Premise or Matomo Cloud), then this step is not needed because Matomo would be loaded from the same domain as your website.
Preload resource
To boost the loading of the Matomo tracking file, you can add the following HTML into the header of your website:
<link rel="preload" href="https://yourpiwikdomain.com/matomo.js" onload="embedTracker()" type="script" crossorigin>In Chrome, Opera, and soon in more browsers this will load the JavaScript tracker file without blocking the “onload” event. As a result, as soon as you embed the tracking code, the JavaScript tracker might be already loaded. How “preloading” affects your website always depends and maybe you rather want to preload more important resources than the tracking code, but it is an option to consider. If you load your JavaScript tracker file in the <head> of your website, this should not be needed.
If you are using our Matomo for WordPress plugin you can follow this FAQ to locate the path to your JS tracker file.
Advanced options
If you want to go even further, you can think about serving the JavaScript tracking file via a CDN, merging the JavaScript tracker file content with your other JavaScript files, making use of service workers (and even track data offline), and more. Feel free to get in touch with us if you have any questions.
More performance improvements
Read our first blog in the series at Different ways of embedding the Matomo tracking code for faster website performance
