Boomerang Howto #2:
Measure perceived performance of content loaded dynamically

See use case #2 for a description of this requirement.

This document attempts to load some content using XHR and measures the time it took to load that content using boomerang. This is how you do it:

1. Copy boomerang.js and the images/ directory into your document root
2. Add the code below to your page, somewhere before your XHR calls.

<script src="boomerang.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
		user_ip: "<user's ip address>",
		beacon_url: "http://yoursite.com/path/to/beacon.php",
		autorun: false
	});
</script>

Next fetch your content. Right before the call to fetch content, call var timer = BOOMR.requestStart("page-name"). In the callback function where the content has been fetched, call the timer.loaded() method. This measures and beacons back the response time. I use YUI 3 in the code below, but you could use anything you like.

YUI().use("io-base", function(Y) {
    var uri = "dynamic-content.txt";
    var timer;

    function complete(id, o) {
        var html = o.responseText;
	document.getElementById("dynamic-content").innerHTML = html;
	if(timer) timer.loaded();	// Tell boomerang to measure time and fire a beacon
    };

    Y.on('io:complete', complete);

    timer = BOOMR.requestStart("my-timer");	// Start measuring download time
    var request = Y.io(uri);
});
 

The latest code and docs is available on github.com/SOASTA/boomerang