Add page render time and first paint time


first of all, thank you! Piwik is really great.

Piwik would be even greater if it could report the time it takes to render each pages. It already use window.performance.timing for the Average Generation Time, so the render time could also be reported.

The first paint time would be another usefull metric (but maybe too close to Avg. Generation Time).

Average Generation Time is an interesting metric, but not enough to really see how fast or slow the page is.
I don’t know how the load of piwik itself would skew the results.

ps: I saw that somebody proposed this 6 years ago, but I think that now that window.performance.timing is widely available Piwik could manage it.



To give you a brief difference of the metrics, Piwik use for the Generation time:

window.performance.timing.responseEnd - window.performance.timing.requestStart

which on this page is 229 milliseconds.

Load time would be
window.performance.timing.loadEventEnd - window.performance.timing.responseEnd

which on this page is 2359 milliseconds (because of blocking scripts and styles).
Piwik doesn’t report the most useful metric to know the speed of the page.

I couldn’t find any easy and cross-browser technique to get first paint time (Chrome/Opera has chrome.loadTimes()).

Same here…
I need to measure the loadend-event and send to piwik.

My approach is to add an event listener “load” to the window and then get the timing object:
var timing = window.performance.timing;
pageLoadEventEndValue = timing.loadEventEnd - timing.navigationStart;
I use a custom dimension to send this value to piwik.

Event sequence: