Web Performance Daybook Volume 2

Chapter 30. Losing Your Head with PhantomJS and confess.js

James Pearce

We yearn for powerful and reliable ways to judge the performance and user experience of web applications. But for many years, we’ve had to rely on a variety of approximate techniques to do so: protocol-level synthesis and measurement, cranky browser automation, fragile event scripting—all accompanied with a hunch that we’re still not quite capturing the behavior of real users using real browsers.

Enter one of this year’s most interesting open source projects: PhantomJS (http://phantomjs.org/). Thanks to Ariya Hidayat (http://ariya.ofilabs.com/), there’s a valuable new tool for every web developer’s toolbox, providing a headless, yet fully-featured, WebKit browser that can easily be launched off the command line, and then scripted and manipulated with JavaScript.

I’ve used PhantomJS to underpin confess.js (https://github.com/jamesgpearce/confess), a small library that makes it easy to analyze web pages and apps for various purposes. It currently has two main functions: to provide simple page performance profiles, and to generate app cache manifests. Let’s take them for a quick spin.

Performance Summaries

Once installed, the simplest thing to do with confess.js is generate a simple performance profile of a given page. Using the PhantomJS browser, the URL is loaded, its timings taken, and a summary output emitted—all with one single command:

$> phantomjs confess.js http://calendar.perfplanet.com/2011/ performance

Here, ...