Page load time with JavaScript

It is pretty much the only way in legacy browsers to measure times. But for the rescue, most browsers do implement the window.performance object which offers a very, very accurate way of getting times.

A typical window.performance.timing output:

connectEnd 1351036536696
connectStart 1351036536696
domComplete 1351036538277
domContentLoadedEventEnd 1351036538146
domContentLoadedEventStart 1351036538119
domInteractive 1351036538042
domLoading 1351036537552
domainLookupEnd 1351036536694
domainLookupStart 1351036536694
fetchStart 1351036536696
loadEventEnd 1351036538295
loadEventStart 1351036538277
navigationStart 1351036536696

..which is not even the full list.


If you're just debugging page load time on your local machine, Firefox's Firebug, the Chrome Developer Tools, and IE's F12 Developer Tools expose the latest page load timings.

For getting the page load times of visitors to your site out in the real world, you'll want to use Real User Monitoring (aka RUM) page load metrics. I would recommend looking into the NavigationTiming spec. This spec, supported in IE9+, FF7+ and Chrome6+, exposes page load timings (eg DNS, TCP connect, request, response and DOM timings) through the browser's DOM. This can allow you to get millisecond-accurate page load timings for every visitor that comes to your site in a modern browser.

It exposes all of these metrics on the timeline: enter image description here

Now that these metrics are exposed, there are several ways you could consume them.

For a DIY solution, Boomerang is a third party library that uses NavigationTiming in modern browsers to ping this data back to your datacenter. For older browsers, it has some cool tricks that monitor page-to-page navigations within your site to determine how long page loads take.

If you're not interested in figuring all of the Boomerang stuff out, there are several other service providers that use NavigationTiming (and similar) data to report page load performance data, such as web.dev, Google Analytics, New Relic, Pingdom, Speedcurve and Speedrank.