Beef Up Firebug in a Jiffy

The next frontier in front-end web development tools is performance measurement and reporting.

At the O’Reilly Velocity Conference Scott Ruthfield, VP of Engineering & Technology at WhitePages.com, gave a talk titled ‘Jiffy: Open Source Performance Measurement and Instrumentation‘ and revealed Jiffy, a web application interface performance measuring and reporting tool. Jiffy captures performance measurements for any specified event at the client’s end, storing them in a database, and reporting on them.

At the same conference Bill Scott, Director of UI Engineering at Netflix, in his presentation ‘Improving Netflix Performance‘, talked about an internal performance monitoring project he’s been working on that included a handy visualization extension for Firebug.

In one of those fortuitous crossing-of-paths that seem to happen so often at conferences, Bill adapted his Firebug extension to use Jiffy performance data resulting in the Jiffy Firebug Extension. This extension is a handy visualization of the performance data provided by the Jiffy JavaScript library, making it viable to use the library in an immediate, stand-alone, single-session mode.

Jiffy client-side measurements are captured using a JavaScript library with a simple API, called Jiffy.js, and posted back to the server via Ajax. Jiffy.js uses a “mark and measure” approach; you mark a start time, give it a name, and then you can measure the elapsed time between the named mark and any event that follows. Although simple, it allows you to add as much performance detail as you need.

The Jiffy extension allows you to create context-relevant performance measures for your web application. For example, you could measure the rendering time of a DOM scripted widget, the time taken to load a 3rd-party component, the responsiveness of your Ajax, and so on. At the point where you want to start measuring you add a mark by calling the mark method and giving the mark a name:

Jiffy.mark("mark_name");

Then, at any other point after that, you can call the measure method:

 
Jiffy.measure("measurement_name", "mark_name");
 

measure will store the elapsed time between the time it's called and the mark. The result is a JSON object that stores all the marks and measurements like this:


 
{
  "PageStart": { et: 2676, m: [
     {et:2676, evt:"load", rt:1213159816044}
   ]},
  "onLoad": { et: 74, m: [
     {et:7,  evt:"carouselcreated", rt:1213159818722},
     {et:67, evt:"finishedonLoad",  rt:1213159818729}
   ]}
}
 
You can get access to this object by calling:
 
Jiffy.getMeasures();

The Firebug extension simply looks for this JSON object and creates a visualization like the one pictured below:

Each section provides the detail for each named mark and all the measurements taken:

The standard behavior of the Jiffy JavaScript library is to use Ajax to post the JSON data back to server for storage. However, you don't have to use Jiffy at all -- you can set the extension to use any library that implements the JSON format used by Jiffy, by changing 3 Firefox properties. This makes the extension an extremely handy visualization tool for your custom-written performance measurement library.
In web applications, a user's perception of interface responsiveness is based on the aggregation of the responsiveness of many smaller interactions with the browser, the network, and the code that drives the interface. Professional front-end developers need an array of tools like the Yahoo! YSlow Firebug extension and the Firebug JavaScript profiler to gain an understanding of how the different elements within their application's front end impact on overall performance. The Jiffy Firebug Extension is yet another tool, but one that places the instrument of measurement closer to the user, providing a clearer picture of the user's experience.