Which loads faster?

I’m pleased as punch to announce whichloadsfaster.com, an open-source web performance tool where pages compete head-to-head in your browser to see who’s fastest!

It started as an off-hand remark by my buddy, Ricardo: “You should make a tool that can load two web pages side by side so you can see which one loads faster.” I backpedaled a little at first, the way an overworked programmer does when someone suggests sticking another iron in the fire: “Um, I don’t know if that would really work out without writing a browser plugin.” This, of course, meant something more like, “Dude, I’m lazy, and that sounds like a lot of work just to make another toy for our sales and marketing guys.”

Ricardo had me though, it would be cool to load two pages side-by-side and see the differences in real time. Dan, one of the aforementioned sales and marketing guys, was grinning next to us, enthused in an infectious way we hadn’t seen nearly enough of since the arrival of his newborn. “Ok guys,” I entreated, “maybe we can do it with iframes. I’ve been having a lot of fun with jQuery lately, so let me play around with it and see what I come up with.”

It was a lot of fun to see two pages race against each other! Performance testing can be rather bland—staring at waterfalls, repeating tests—but watching a competition seems to be one of those things that humans are hard-wired to enjoy, and it tickled me like Elmo to think that I could take something I’m passionate about—web performance—and make it a bit more appealing!

Don’t get me wrong, there are many good tools for web performance testing (notably, the open source webpagetest.org and showslow.com, which I will be working to integrate), but there are a few areas where I think whichloadsfaster adds some wicked weapons to the web performance warchest:

1. Competition. Since it’s easy to pit pages against each other, it becomes natural to check the performance of your most (and least) favorite sites, adding to the argument that speed is a competitive advantage.
2. Testing in real time, while you watch. This has a big impact factor because a “real” test holds your attention.
3. Support for many browsers (IE 8/7/6, Firefox 3.0+, Chrome, Safari, most of mobile WebKit). Because of the detailed and invasive nature of performance testing, most performance tools are browser-specific. We make the tradeoff of collecting fewer events for the convenience of running the tool in every browser with no install.
4. Finally, there is a sharing link that developers can send out to run on their friends’ browsers. This feature is something I hope to develop further by adding a beacon API to automatically retrieve the results (see below).

Moving forward, I would like to improve whichloadsfaster in three major areas:

1. Automation of test results. The plan is to make a beacon API and a couple of example servers to collect the data (php, rails, django). This way, developers can just send out the link and sit back and see their performance results roll in across different locations and browsers. Fully automated testing would be as simple as causing a remote test machine to load the URL you want with your desired browser. This could be done with selenium or a similar library, or possibly even built into whichloadsfaster (have to work around caching issues).
2. User perception testing. Since we’re right in front of the user, we can ask them which page appeared to load faster and get a better handle on that ephemeral but most important metric, time to first interaction. I’m really excited about this one!
3. Integration with other tools. I plan to add a link to compare your pages on webpagetest.org using the video film strip feature, and also to test the individual pages in the waterfall tool. Since this project is about spreading the web performance gospel, I’m open to linking to any useful performance tool.

A call for help

The one problem that really bugs me is that whichloadsfaster doesn’t play well with sites that try to break out of the iframe. This includes major sites that users want to compare, like myspace, twitter and nytimes.com. It’s a terrible user experience to type in one of these and watch it unexpectedly take over the screen. I’m completely sympathetic with using framebusting to avoid clickjacking attacks, but I truly think this project is a legitimate reason to frame a site, and I want to create an excellent user experience (I mean, have you noticed the keyboard shortcuts?).

I’ve successfully tested a framebuster-buster that prevents sites from breaking out, but one of the side effects is that it also prevents outgoing links. In the end, the users should at least know what is going on and why the site can’t be compared. I’ll continue to work on this, but if you or a developer you know has expertise in this area, I would love suggestions and advice via email or the github issue.

Thanks for your feedback and involvement. Here’s to making the web just work for everybody on the planet!

Homemade iPad Case

A few days ago I popped into the Pasadena Apple Store to look at iPad cases. I had thought that my requirements were fairly simple: a landscape slipcase with easy iPad insertion/removal that can itself be easily moved in and out of my bag. Everything at the store, however, seemed bulky, expensive and inelegant.

His spidey sense tingling at my obvious indecision (or perhaps just tickled by his curly beard), an impetuously precocious Apple employee approached. His admonition, however, was not one I expected: “now, nobody from Apple is telling you this, but if I were you, I’d go to etsy and buy a handmade case instead.” Cue my white liberal guilt.¹ Being thus rendered unable to feel good about buying yet another petroleum-derived consumer product made by underpaid workers in the third world, I decided to make my own case.

To be fair, the case is made from vegetarian leather, which is still petroleum-derived², but I rescued the material from a doomed college project ³ so I think it technically constitutes recycling.

The inside of the case is made from car headliner fabric. You know, the kind that you used to get yelled at for picking off the roof of your parents’ Plymouth Volare? No? Was that just me?

The entire case is made from two pieces of fabric, folded onto itself in various ways. All edges had to be folded over twice because the veggie leather is backed with fuzzy white stuff which doesn’t look good when it’s exposed. The exact dimensions are a closely guarded secret ⁴.

Seams were sewn on a Singer 301a that belonged to my late grandmother. I’m afraid I have a long way to go in learning how to use it properly, but I hope my attempt would have made her proud.

Using scotch tape along the seams really helped the machine glide along without bunching the material. The tape can be removed afterward by carefully pulling perpendicular to the seam, otherwise you end up with a bunch of small tape pieces that must be pulled out from under the thread by hand.

The finished case works nicely for propping the iPad up while typing on the train.

I enjoyed this project immensely. It was a real kick to make something I’ve never attempted before from materials that were lying around. Hope you enjoyed it too!

More pictures and comments can be found at this project’s flickr set →.

Oh, and to my bearded muse in the bright turquoise t-shirt, if you’re reading this and still haven’t made up your mind about your own case, I’ll totally make you one of these.