Monitoring Client Side Performance for Sites

I want to monitor the client side performance for a page, and I can get the load time of the page by starting a timer in the 开发者_StackOverflowbeginning of the section and also by getting the time of when the onload event happens. However this does not account for the time it takes to request the page from the server. So after searching i've found out that I should use the web timing API. My problem is that while "window.performance" works for chrome, nothing works for firefox including "window.mozPerformance". So does anyone know how I can find the time of when my browser initiates the get request for a page, and finishes receiving the last byte of the page?

You can use something like:

var timing = performance.timing;
var loadtime = timing.loadEventEnd – timing.navigationStart;

This will work for you on: Chrome 6+, IE9+, Firefox 7+, Android 4+

And you can read more in this old (but good) post: http://blog.chromium.org/2010/07/do-you-know-how-slow-your-web-page-is.html

Btw, I would use Chrome DevTools (or firebug on Firefox) to measure my code changes in the 'audit' tab. You can see what is the cost for every change in your JS code and measure it without any adding code. Moreover, if you want to see what are the performance of your site (or web app) over time, you have now an option to check the metrics in google analytics.