Measuring Site Load Times via performance api

Question

I listened to a talk by Steve Souders a few days ago and he mentioned the new performance spec that newer browsers are implementing and it was pretty intriguing. In his speech he mentioned the following example as a means of measuring perceived page load time:

var timing = performance.timing;
var loadtime = timing.loadEventEnd - timing.navigationStart;
alert("Perceived time:"+loadtime);

Clearly this is a basic example, but when trying it on my development environment, I get crazy numbers like -1238981729837 as the answer because loadEventEnd is < 0.

Obviously something is amiss and there are many improvements that can be made to this example to give more information and produce a greater reliability. (I am aware this is only implemented in a few browsers).

So, what are some suggestions on how to use this api to track page load times via Javascript for analysis of my site performance?

Solution 1

I have had no trouble using it, but I haven't tried measuring performance on a local machine- it works fine on a website. It is interesting to look at other sites, to have something to compare your numbers with.

for instance, these are good numbers for the size of the pages and their resources-

http://stackoverflow.com/questions/7606972/measuring-site-load-times-
Friday, September 30, 2011 4:03:52 AM
//
(timestamp:1317369511747)
navigationStart= 0 milliseconds elapsed 

//
fetchStart= 0
domainLookupStart= 0
domainLookupEnd= 0
requestStart= 0
//
responseStart= 359
responseEnd= 359
domLoading= 359
//
unloadEventStart= 375
unloadEventEnd= 375
//
domInteractive= 515
domContentLoadedEventStart= 515
//
domContentLoadedEventEnd= 531
//
domComplete= 2496
loadEventStart= 2496
//
(timestamp:1317369514243)
loadEventEnd= 2496 milliseconds elapsed 

---

http://www.yankeeweb.com/webshop.html
Friday, September 30, 2011 4:22:25 AM
//
(timestamp:1317370911738)
navigationStart= 0 milliseconds elapsed 

//
fetchStart= 0
domainLookupStart= 0
//
domainLookupEnd= 281
connectStart= 281
//
connectEnd= 296
requestStart= 296
//
responseStart= 546
//
responseEnd= 562
domLoading= 562
//
domInteractive= 1264
domContentLoadedEventStart= 1264
domContentLoadedEventEnd= 1264
//
domComplete= 1622
loadEventStart= 1622
//
(timestamp:1317370913360)
loadEventEnd= 1622 milliseconds elapsed 

What you really need are the numbers other people get when visiting your site- you could include it in a form questionaire or mailing, (from firefox 7 and chrome, so far.)

// code run in firefox scratchpad:

(function(){
    if(!window.performance || !performance.timing) return;
    var timestamp, first, hstr, L,

    ptA= ['navigationStart', 'unloadEventStart', 'unloadEventEnd', 'redirectStart',
    'redirectEnd', 'fetchStart', 'domainLookupStart', 'domainLookupEnd', 'connectStart',
    'connectEnd', 'secureConnectionStart', 'requestStart', 'responseStart', 'responseEnd',
    'domLoading', 'domInteractive', 'domContentLoadedEventStart',
    'domContentLoadedEventEnd', 'domComplete', 'loadEventStart',
    'loadEventEnd'].map(function(itm){
        timestamp= performance.timing[itm];
        if(isFinite(timestamp) && timestamp!== 0){
            if(!first) first= timestamp;
            return [itm, timestamp, timestamp-first];
        }
        else return [1, NaN];
    }).filter(function(itm){
        return !isNaN(itm[1]);
    });
    ptA= ptA.sort(function(a, b){
        return a[1]-b[1];
    });
    if(report=== 1) return ptA;
    L= ptA.length-1;
    ptA= ptA.map(function(itm, i){
        if(i> 0 && ptA[i-1][2]!== itm[2]) itm[0]= '//\n'+itm[0];
        if(i=== 0 || i=== L){
            itm[0]= '//\n(timestamp:'+itm[1]+ ')\n'+itm[0];
            itm[2]+= ' milliseconds elapsed \n';
        }
        return itm[0]+'= '+itm[2];
    });
    hstr= '\n'+location.href+'\n'+ new Date().toLocaleString()+'\n';
    return hstr+ptA.join('\n');
})()

Solution 2

You need to measure the loadEventEnd after the onload event has finished or else it will be reported as 0, as never happened. (jquery example for attaching to the onload event)

$(window).load(function(){
 setTimeout(function(){
 window.performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
 var timing = performance.timing || {};
 var parseTime = timing.loadEventEnd - timing.responseEnd;
 console.log('Parsetime: ', parseTime);
 }, 0);
});

Solution 3

Good answer from Ionut Popa.

crazy numbers like -1238981729837 as the answer because loadEventEnd is < 0

loadEventEnd is not less than zero, it is zero.

As the Navigation Timing spec states: 'This attribute must return the time when the load event of the current document is completed. It must return zero when the load event is not fired or is not completed.'

Therefore timing.loadEventEnd - timing.navigationStart will be negative.

FWIW, here's a non-jQuery version:

window.onload = function(){
  setTimeout(function(){
    var t = performance.timing;
    console.log(t.loadEventEnd - t.responseEnd);
  }, 0);
}

Comments

[Ionut Popa]

my last name is not Papa :)

[james emanon]

@Sam -- why not use the attr: domComplete?