Reload Page

This page is instrumented using Episodes, a framework for timing web pages that works for Web 2.0 applications. Episodes is implemented using JavaScript events, making it easier for the data to be consumed by web metrics test agents, web development tools, and browsers, in addition to the web page itself. This example page demonstrates how Episodes works. The implementation is a proof-of-concept, but should work in most browsers.

Here are the episodes for this page. Use the reload link at the top to see the total load time.

Adding Episodes to Your Page

Episodes measure multiple actions in a page such as retrieving the first byte of the HTML document, loading an external script, and lazy-loading an image. Episodes are timed based on marks and measures. For example, measuring how long it takes to load "prototype.js" is done like this:

<script>
window.postMessage("EPISODES:mark:before_prototype", "http://stevesouders.com");
</script>

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>

<script>
window.postMessage("EPISODES:measure:prototype.js:before_prototype", "http://stevesouders.com");
</script>

This approach of using marks and measures supports Web 2.0 apps, unlike current instrumentation frameworks that rely on the onload event. You can look at this page's source to see all the episodes in this page. As seen in the example above, Episodes is implemented using JavaScript events. This is a flexible architecture that allows multiple listeners to consume the timing information. It also means that the developer inserting episodes can work independently from those consuming the epsidoes.

Episodes uses window.postMessage to trigger events in Firefox 3 and Internet Explorer 8. This means that instrumenting episodes in these browsers does not require downloading any additional JavaScript functionality because window.postMessage is built into the browser. For browsers that don't support window.postMessage a custom event is used. This does require additional JavaScript functions, but many sites already embed timing frameworks in their pages, so this would not add any more weight to their pages and would likely be lighter weight.

Collecting Episode Information

Collecting episode timing information is done by using an event listener. In Firefox this is done using addEventListener. (Internet Explorer uses attachEvent.)

<script>
window.addEventListener("message", handleEpisodeResults, false);
</script>

Instead of drawing the episodes in the page, as is done above, most developers would send the episodic timing information back to their servers using a beacon. If you fire up a packet sniffer you'll see a beacon being sent from this page with a URL that looks something like this:

If you install the Firebug add-on you can view the episodes in Firebug.