The Need for Speed

By Mike Oostdyk | Sep 03, 2010

Let’s take a step back in time, back to the halcyon days of the Sega Genesis and NHL ’94, a.k.a. the best sports game in the history of mankind. As I improved my skills at this game during my youth, I gradually realized that the greatest success resulted from using the players with the most speed. Getting from point A to point B quicker than the other guy gave me all the opening I needed to unleash a well-placed slap shot or a wicked one-timer. I recall many a fine effort by the great Buffalo Sabre winger Alexander Mogilny as he helped me trample my opponents with his rating of 99 in speed. Other attributes such as strength, agility, and shot accuracy were fine in their own way, but as they say (or do they?) you can’t hip-check what you can’t catch.

Fast forward to today and the wonderful world wide web we love so dearly. Here again I would argue that of all the characteristics of a successful website, speed is the most important in order to retain visitors. Even some of the uglier sites on the web such as Drudge Report and Craigslist experience massive traffic thanks to their priority on speed. And of course the big kids on the block consider it of paramount importance: Google now factors site speed into its search rankings, and Facebook has made significant enhancements to its PHP and Javascript code that greatly increase their execution times.

There are plenty of suggestions I could provide for increasing a website’s speed, but I want to mention three in particular that target different parts of a website or web application.

  1. Database indexing – This is something that should be considered foundational when learning to program databases, especially SQL-based relational databases, but for some reason it is not stressed as often as it should be. I know it took me a couple of years after learning SQL to appreciate the incredible performance gains that result from proper indexing. In short, creating an index on a database table tells the database to keep a version of that table sorted by a particular column. So if I have a table with a “name” and “date” column, I might want to create an index for each of those columns if my application ever searches or sorts that table by name or date. Creating an index may slow an application slightly when adding or updating a record, but can vastly improve performance when retrieving a record. Most applications concentrate far more on retrieving records, so this is a very worthy trade-off. Some newer frameworks such as Google App Engine even require that every database query can be handled by an index, and it will attempt to create indexes automatically based on your code. For applications running on MySQL and the like, these may still need to be created manually.
  2. Caching files with Expires headers – While indexes can help speed up a website on the server side, proper usage of file caching can greatly speed things up on the browser side. Typically a website should cache files that don’t need to be updated regularly, such as images, CSS, and Javascript files. “Caching” a file simply means that the browser will store that file on the user’s hard drive, so that each time it is requested it loads instantly rather than downloading again from the web server. The website developer can set something called an “Expires header” for each type of file, indicating how long it should be stored before the browser requests a newer copy from the web server. And just in case one of these files needs to be forcefully updated from the server side, I personally use the nifty trick of adding a timestamp to the query string of that file, which forces the browser to treat it as if it were a new file.
  3. Image optimization – Most developers know the benefit of making image files as small as possible, but there are a couple of tools that make this ridiculously simple. SpriteMe is a simple tool that analyzes all the images on a web page and suggests how they could be combined into sprites. It also indicates the CSS changes necessary to implement the new sprite. Just be careful that you are not actually increasing the total file size of your images by too much even while you are reducing the amount of images. Another great application for optimizing images is the brilliantly titled ImageOptim, a Mac-only app that allows you to drag and drop images into the program, immediately minimizing their file size by incorporating various open source tools specific to the PNG, JPG, and GIF formats.

Bottom Line: Optimizing a website for speed is a multi-faceted process that has become more and more important, and these tips are but a few of the many available to developers these days. Don’t be satisfied until your sites are as fast as Alexander Mogilny.

Show 2 comments.

2 responses to “The Need for Speed”

Leave a Reply

Your email address will not be published. Required fields are marked *