Designing for Speed

Speed is everything. Especially in the ultra competitive, information rich web environment where users are overloaded and are willing to allocate only so much time to your site. So, design for speedy websites. Speed of download of pages, speed of access to information, speed of execution of commerce, etc.. Speed speed speed! If you've got a high traffic or an e-commerce site, speed is especially important. So, notwithstanding Marion Jones' steroids, here are 10 tips to help your sites load like they're on steroids.

1. Keep it simple
In many ways, Google has mastered this...speed of execution in their business as well as sites. Lets face it, the Classic Google homepage in all its bareness is the Mario Andretti of the web. Fast and furious. Its easy to over-complicate things and get carried away with too many bells and whistles. An analogy I like to use with my designers, male and female alike, is the 'less is more' fashion analogy where you remove one accessory item before you leave the house. This can be applied to sites as well.

2. Optimize your code
Aim for a page size of 50-70KB including a full load of all code, images, and apps. There are several tools online that can help you calculate the size of your pages. High speed internet connections are commonplace today but depending on your target audience and their access point, be it dial-up hotel room access, T1-3 office connection, or mobile access, you will know their likely connection speed and can determine how long it takes to load a page.

3. Optimize your rich media files
Rich media files like Flash, video, images, etc., although key, can be death to page load if used incorrectly. Over-accessorizing a page with gratuitous images, for example, can be noisy as well as add unnecessary bytes to a page. Try preloading files so they are cached and load faster. It always kills me when I see these so-called design agencies with their all flash sites. Not only does that date them, it is clunky.

4. Minimize use of tables
Table based designs and too many nested tables add code to a page. Try using more CSS to layout your pages instead and use divs instead of tables where possible.

5. Use server side includes
Once SSI files like .asp and .php includes are called from the server, they are cached and, therefore, load faster on subsequent requests. SSIs also have the added benefit of facilitating easier and faster site updates.

6. Do use Ajax
Loading new pages slows you down especially if your page sizes are not up to snuff. Decrease calls to the server for page requests by using nifty web 2.0 technologies such as Ajax. Ajax uses javscripting which is client side scripting. Gmail and Google Maps are popular examples of Ajax implementations. Be sure to keep your js files external as they are cached by the browser. Too many scripts, however, and positioning in the context of the code (top or bottom) impact page loading performance.

7. Use Web 2.0 widgets/badges/gadgets wisely
Certain widgets have been known to slow down page loads. Flash widgets are expecially prone to this as are image serving widgets. Test them out before loading up.

8. Test test test
Do the old heuristic evaluation. Get out your stop watch, clear your cache, and type your website address into the address field of your browser and see how long it takes. Try it a few times and at different times of the day. For peak times when there are more people trying to access your site, load time is especially important. Depending on the purpose of your site, target audience, and who you ask, aim for a 3-5 second load time. Again, there are online tools for timing your site load.

9. Get fast servers
Make sure you have fast, dedicated servers. No need to expound on this hopefully.

10. Other
Here are some other guidelines from Yahoo as well: http://developer.yahoo.com/performance/rules.html.