Measuring JS Performance using HTML5's performance and performance.timing object

Question

I am measuring my website's performance on the basis of performance object provided by HTML5 and I want to know that what is going wrong with my application, I also want to log these performance object of other end users in my local database so that I have information from theirs sides, but I am not quite familiar with what every property means, like what could be the reason of delay in connectStart, connectEnd ... I have created a map as per my knowledge but I need input from community for this ... this would be quite helpful for other people to know aswell

var issueList = {
    'connectStart':         'Network issue',
    'connectEnd':           'Server is not responding fast with SSL handshake',
    'domainLookupStart':    'Network issue',
    'domainLookupEnd':      'Network issue',
    'fetchStart':           'Slow browser',
    'redirectStart':        'Network issue',
    'redirectEnd':          'Busy server',
    'requestStart':         'Network issue',
    'responseStart':        'Server is slow',
    'domLoading':           'Low internet bandwidth',
    'unloadEventStart':     'Slow browser',
    'unloadEventEnd':       'Slow browser, browser processes are too heavy',
    'navigationStart':      'Slow browser',
    'responseEnd':          'Network issue',
    'domInteractive':       'Browser issue',
    'domContentLoadedEventStart':   'Network issue',
    'domContentLoadedEventEnd':     'Network issue',
    'domComplete':          'Too much DOM manipulation',
    'loadEventStart':       'Unknown',
    'loadEventEnd':         'Low JS performance, either not optimized JS or browser is slow'
};

Sequence of the process is shown in this image for information

I have also created a JSFiddle for this

Same way, I also want to measure performance of AJAX request in my webpage and I am thinking of using readyState of AJAX Requests So I want to know what could be the reason there for taking time between every state change

State  Description                     Reason
0      The request is not initialized  Slow JS execution
1      The request has been set up     Slow JS execution
2      The request has been sent       Slow Netowkr Connection
3      The request is in process       Slow Server response
4      The request is complete         Slow server processing

The reason behind I want to do this is because, Sometimes we got a complaint that our application is being a bit slow, So in those cases we can read that user's performance object and also read overall performance object. we can also read various performance objects while peak use of our application and other times aswell and want to measure that which part of the application is taking longer time to load . at the same time it is a product which is going to evolve with a time so for future reference I can also use this data as benchmark. so my only focus is understanding this object completely

Also, Do let me know if there are other ways(If I am taking long route)...

Catricecatrina

have a look at .html5rocks.com/en/tutorials/webperformance/basics – Nelsen

kaaes.github.io/timing – Nelsen

Answer 1

I also want to log these performance object of other end users in my local database

Let's start with this aspect. You don't need to reinvent this all yourself. Your time is much better spent actually improving your site, rather than creating your own monitoring solution.

Google Analytics actually tracks the timing object for you, so you can just check it there. New Relic also does this, and is more developer focused, tracking server-side things as well. There are probably 100 others you could pick from.

but I am not quite familiar with what every property means

The canonical definition for these is the W3C recommendation: https://www.w3.org/TR/navigation-timing/

I have created a map as per my knowledge but I need input from community for this

I suggest not creating such a map, at least in the way you've defined it so far. Each event means something specific. Assuming that a redirect has anything to do with a network issue or busy server makes no sense. Sure, a slow redirect could be due to these items... but it could be due to 100 other things or maybe even intended. Also consider that network conditions widely vary around the world. In short, the definitions as-is are the best.

If you have a specific question about the meaning, and if the W3C spec isn't clear enough for you, I recommend asking a specific question about a specific item you are confused by.

Earthquake

The reason behind I want to do this is because, Sometimes we got a complaint that our application is being a bit slow, So in those cases we can read that user's performance object and also read overall performance object. we can also read various performance objects while peak use of our application and other times aswell and want to measure that which part of the application is taking longer time to load . at the same time it is a product which is going to evolve with a time so for future reference I can also use this data as benchmark. so my only focus is understanding this object completely – Catricecatrina

@ParagBhayani Yes, it's good to look at your application performance... but there's no reason to log that performance yourself. On the contrary, if you use an existing well-tested system, you will get to spend time fixing your app, and know that everything was logged correctly. You'll also be able to more easily analyze in aggregate. – Earthquake

Still I am thinking that I am not getting answer what I am looking for, Thanks for the help anyway :) – Catricecatrina

@ParagBhayani What answer are you looking for? – Earthquake

I want to create a issue list based on stats of performance object... So using performance object i can find problem for any page, any user on any site from any location, and also log them in my database for benchmarking... Also same i want to know for ajax request performance measurement – Catricecatrina

@ParagBhayani What do you mean by an issues list though? The measurements in the performance object provide a context but do not indicate a specific problem. Furthermore, generalizing each performance metric will certainly lead you astray. I don't understand what it is you are trying to do, specifically. How do you plan to use this information? Someone calls you, says they have a problem, and you pull up performance times for their session? The tools I already mentioned track this for you. – Earthquake

I looked at relic but didn't get it properly... I need to understand it more clearly... To know that whether it provides me proper information or not... The reason I need using performance object is because it is related to my current task, and i need to achieve it using it only... But i will look about it and let you know whether i get i perfectly or not... Thanks for your invaluable efforts and time... – Catricecatrina

@ParagBhayani What specifically is your current task? Some more context would be helpful in pointing you to a useful solution. – Earthquake