Josh Bohde

Client Performance Monitoring with Boomerang and CouchDB

A project that that interested me awhile ago, but I only recently got around to trying was Boomerang from Yahoo! It's a Javascript library that calculates the round trip time to load a page from the user's browser, using either cookies or the WebTiming API if it's available.

This project is exciting since it measures the time from when the user navigates away from the page to when the page has loaded, which could be affected by any number of things, such as latency, download speeds, or uncached static files. While there are best practices and tools to help improve client performance (YSlow, Chrome's built-in performance tools, DOM Monster), they aren't able to provide recommendations based upon real users' performance.

This data is can serve as an constant benchmark, which combined with the VCS data, can allow you to detect changes that result in performance regressions. This also opens up the possiblity of doing split tests on website performance.

Here are a few quick test ideas:

Round trip time isn't all that you can measure with Boomerang. It comes with bandwidth, latency, and DNS latency plugins, as well as instructions on how to make more granular timers.

Getting started with Boomerang is pretty easy. For this blog, I wrote a quick node.js app that translated the GET params Boomerang sends into a JSON document and uploads it to CouchDB. The code for this app is available on Github. I went with CouchDB because of the flexibility from it being schemaless, combined with near realtime reports from the incremental map reduce views.

First I grabbed a recent version of Boomerang from the repo, including it in the head. Then, I added the following configuration:

BOOMR.addVar('revision', '{{REVISION}}');
BOOMR.init({
beacon_url: '{{ANALYTICS_SERVER}}',
site_domain: "{{site.full_url}}",
BW: { enabled: false }
});

Here I'm doing a standard Boomerang setup, disabling the bandwidth test because it requires a bit more work, and adding REVISION, a custom Hyde variable, allowing me to keep track of the current git commit.

Here's an example CouchDB view I'm using to monitor this blog.

Map:

function(doc) {
var timestamp = new Date(Date.parse(doc.timestamp)),
time_done = parseInt(doc.t_done);
 
if(timestamp && time_done){
emit([timestamp.getFullYear(), timestamp.getMonth(), timestamp.getDate()],
time_done);
}
}

Reduce: _stats

And some example stats:

{"rows":[
{"key":[2011,4,30],"value":{"sum":68474,"count":24,"min":146,"max":18990,"sumsqr":520080894}}
]}

With this combination of tools, it's easy to generate quick reports and tests. I'm looking forward to using Boomerang for upcoming projects.