Using Web Timing API To Measure Page Performance
How to Measure Web Performance
In terms of web performance measurement, there have been two options for web development teams today:
1. Use a third party web performance measurement service.
Typical web performance measurement services run real browsers at different geographic locations, extract performance data from these real browsers and report such data. This is a very nice solution as it is non-intrusive(no code change required, no overhead) and it can perform continuous monitoring. There are many vendors provide such a service. Some of them are free and some of them are charged. The well known charged ones include Gomez and Keynote Systems. Both of their products are really well done. At Yottaa, we see the need to provide a best of class free offering that can match the commercial ones. We think it would be very useful to make this offering available to anyone open on the web, without pricing concerns or contract issues. So we also developed our own web performance measuring and analysis service at www.yottaa.com. It is in beta release now and we are going to continuously enhance it.
2. Using Javascript Do-It-Yourself:
The typical code to measure performance using Javascript look like the following:
<html>
<head>
<script type="text/javascript">
var start = (new Date).getTime();
</script>
</head>
<body>
<!-- in the very end of the page --> ....
<script type="text/javascript">
var pageLoad = (new Date).getTime() - start;
</script>
</body>
</html>
There are several problems for this JavaScript DIY approach. It is intrusive (code change required). Beyond page code changes, it still building some reporting mechanism. So it requires a lot of work. Further, more importantly, browsers do not provide performance measurement support for JavaScript at all. The metrics one can measure using this approach are very limited. To put it in another way, there aren’t much you can measure using JavaScript. The code above is a hack. This hack injects low resolution JavaScript timestamps, which slows down the pages for end users, introduces an observer effect, and provides inaccurate results which can drive the wrong behavior.
Until now.
The community recognized the importance of web performance measurement. W3C has been working on a Web Timing API for browsers. Browsers are implementing this web timing API so that developers can accurately measure web site performance using JavaScript directly in their own code. The first browser to support Web Timing API is Microsoft Internet Explorer 9. Kudos to the IE9 team for leading the wave here!
Note added on Oct 18 2010:Google Chrome and FireFox are both adding support for Web Timing API as well. See details in the end of this post.
Measuring Web Performance on IE9
Internet Explorer 9 Beta contains a prototype implementation of the Web Timings NavigationTiming interface called window.msPerformance.timing. This interface captures key timing information about the load of the root document with sub-millisecond accuracy, which is immediately available from the DOM once the page had loaded.
window.msPerformance.timing
interface MSPerformanceTiming{
readonly attribute unsigned longlong navigationStart;
readonly attribute unsigned longlong fetchStart;
readonly attribute unsigned longlong unloadStart;
readonly attribute unsigned longlong unloadEnd;
readonly attribute unsigned longlong domainLookupStart;
readonly attribute unsigned longlong domainLookupEnd;
readonly attribute unsigned longlong connectStart;
readonly attribute unsigned longlong connectEnd;
readonly attribute unsigned longlong requestStart;
readonly attribute unsigned longlong requestEnd;
readonly attribute unsigned longlong responseStart;
readonly attribute unsigned longlong responseEnd;
readonly attribute unsigned longlong domLoading;
readonly attribute unsigned longlong domInteractive;
readonly attribute unsigned longlong domContentLoaded;
readonly attribute unsigned longlong domComplete;
readonly attribute unsigned longlong loadStart;
readonly attribute unsigned longlong loadEnd;
readonly attribute unsigned longlong firstPaint;
readonly attribute unsigned longlong fullyLoaded;
}
For the first time, web developers can accurately understand how long it takes to load their page on their customer?s machines. They have access to when the end-user starts navigation (navigationStart), the network latency related to loading the page (responseEnd - fetchStart), and the elapsed time to load the page within the browser.
Code Example of Using msPerformance
The msPerformance object has three properties that hold timing information:
navigation: this object contains information such as the type of navigation and additional network activity that occurred on the page to help describe the overall navigation experience.timing? this object holds timing data.timingMeasures: this object enables query for the elapsed time taken in important time phases of loading the document.
Those objects hold a lot of performance data. The following is a simple code example of how to use them:
if (window.msPerformance != null) {
var perfObj = window.msPerformance, timingObj=perfObj.timing;
var navStart = timingObj.navigationStart;
var navStartTime = new Date(timingObj.navigationStart);
var loadEnd = timingObj.loadEventEnd;
var loadEndTime = new Date(timingObj.loadEventEnd);
//navigation time
var navigation = perfObj.timingMeasures.navigation;
//manually calculating page load time.
var caculatedPageLoad= loadEndTime - navStartTime;
//page load time from timingMeasure
var timingMeasureLoad=perfObj.timingMeasures.fullyLoaded
//....
}
Another example is to serialize these timings and send them to the server for further processing. With JSON, this would look something like this:
JSON.Stringify(window.msPerformance);
Note: IRhetoric reported some issues with JSON serialization. But there are easy workarounds available.
Note added on Oct 19 2010: Great news. It turns out that Chrome and FireFox are both adding support for Web Timing API. This is great news for the web developer community! Starting from Chrome 6, Web Timing is supported via window.webkitPerformance(see Chrome blog). FireFox’s support for Web Timing is also under way. -Thanks Steve for pointing this out!
