Monitor load time performance with Piwik

Yesterday I came across this great article about Browser Monitoring at Github and how they use the Navigation Timing API to monitor page performance.

As I use Piwik to analyze and monitor the traffic on my site I thought about a way to combine both to monitor the load time of my site. After some testing, I came up with the following solution.

First of all we define a function to get the load time using the Navigation Timing API:

function getPerfTiming() {
if ( !('performance' in window) || !('timing' in window.performance) || !('navigation' in window.performance)) {
return false;
} else {
var timing = window.performance.timing,
now = new Date().getTime(),
start = timing.navigationStart,

loadTime = (now - start) + "ms";

return {
loadTime: loadTime

Use Piwik to save results

Next we need to change the Piwik code used on the site. We need to define a custom variable before calling piwikTracker.trackPageView().

Using the function from above this looks like the following:

if (getPerfTiming()) {
1, // slot ID - up to 5 custom variables can be used
"loadTime", // name of the custom variable
getPerfTiming().loadTime, // value of the custom variable
"page" // scope - page means it gets send on every page load

Monitor results on your Piwik instance

After logging into your Piwik instance, you can go to Visitors -> Custom Variables to all the variables you defined with piwikTracker.setCustomVariable
Custom Variables in piwik

I implemented this today on my site and I am already really curious how the load time will differ for the users. To monitor other performance aspects like first paint, you can use additional custom variables if you like.

Like what you read? Buy me a coffee!

Share on Twitter
Back to top