The Right Tool…

Sci-fi, comics, humor, photos…it's all fair game.

January 16th, 2008 by Kelson. Posted in Web Design and tagged for scripting, webdev

I’ve been reading High Performance Web Sites and started thinking about how to apply the guidelines to my own sites (not to mention stuff for work). A lot of them are things I already do: minimize external resources, use compression & cache control, etc. Others are a bit out of reach for a personal site, like using a content delivery network. It got me looking at the way I use scripts, and reminded me of a change I made about a year and a half ago.

Way back when, I put a simple app on my Flash site: a team-name generator for teams of speedsters. It randomly generated a name from two lists, and provided a button to generate another one. I originally wrote it in PHP.

The funny thing was that it was the most-hit page on the site, because people would sit there and hit the button to generate a new name half a dozen times before moving on. And because it was a sever-side script, that meant not just another HTTP hit, but re-downloading the entire web page with only 2 words being different.

Eventually I realized it was much better suited to a client-side app. I rewrote the whole thing in JavaScript, using DOM functions to replace the name on the current page instead of reloading. I left the hooks to the PHP in place, so that it would still work for clients with JavaScript disabled.

It was much faster — practically instantaneous, in fact.
It used a lot less bandwidth — 40 KB (5 KB × 8 ) vs. 6 KB (5 KB + 1 KB) for a typical 8-name* scenario.
Traffic stats more accurately reflected the page’s popularity, as it dropped from #1 to around #30–50.

* Based on a drop from 32,000 hits/month in July 2006 to 4,000 hits/month in September, with the rest of the site staying about the same, it seems people were hitting reload 7 times.