Optimising your website design

Sean McManus interviews Andy King, author of a book on making faster webpages.

Bandwidth-hungry webpages stuffed full of dancing adverts slowly squeeze their way through dial-up connections. It's the 'world wide wait', as many have come to know the web. Sometimes it's a problem of trying to send too much information at once, and other times it's down to bad website design.

Andy King (pictured, right) is the author of 'Speed Up Your Site: Web Site Optimization', a book that reveals how website designers can make pages that work as quickly as possible.

Why are you interested in website optimisation?

I'm an efficiency nut. I like to see how fast and efficient I can make things. My background is in engineering and design optimisation of structures. Once I discovered the web, web site optimisation was a natural extension of that urge. Also, in my web design work, I saw repeatedly the need for faster web sites.

What do you mean by website optimisation?

I use the term 'web site optimisation' (WSO) in the literal sense: It is the process of optimising web site size and complexity to maximize speed.

You could also lump in server tuning to WSO, but I chose in my book to focus on optimising and compressing the content you deliver. Optimising the content is something most designers and developers can control.

Why does website optimisation matter?

Because there is such a huge need for it now. Speed is so important on the Web. With web site size and complexity growing by leaps and bounds, someone has to be the voice of reason in this forest of flash.

Speed is also a key component of usability. A small increase in speed can make a large difference to bailout rates and abandoned shopping carts.

Isn't it becoming less important as broadband is becoming more widespread?

Broadband is not the panacea everyone makes it out to be. Yes, broadband speeds up downloads, but you know how hard drives seem to fill up, no matter how large we make them? Same with the pipes we download our content over.

As broadband penetration increases, the size of web sites will increase accordingly, making the need for WSO that much greater, especially for multimedia.

The average home page is growing at an alarming rate. In 1996, Yahoo's home page HTML was just under 6K, today it is over 5 times that, just under 30K. That 5-fold size increase outstrips the growth in connection speeds at home (as of January 2003 67.5% are at 56.6Kbps or less).

On average users are seeing slower downloads than they did before, not faster. And Yahoo has a highly optimised (yet link-filled) home page. I recently surveyed the top 10 news sites. They average over 145K each in total page size. That is pretty huge.

Broadband helps you download content faster, but your browser still has to render the page, and that can take time. I have a brief story in the book about a call from a complex table-based site that was slow to display even for their cable modem users (over a minute). Simplicity is the key.

How far is website optimisation a technical problem and far is it a usability issue? It seems that sites that perform slowly often do so because they're full of stuff that visitors don't want anyway (eg, flash intros, lots of adverts, animated gifs).

Yes, good point. Speed is an integral part of usability. No one wants to use a slow web site. I view WSO as a technical component of usability, which is part of the user experience. Slow response times are one of the most frequent complaints in usability studies. The message we should all hear loud and clear is "Don't make me wait!"

You are asking about excess features versus optimisation of page size and complexity. You've got to address all three, you'd be surprised how much fat there is in the typical web page. In the book I talk about stripping your pages down to features that actually help your users, and optimizing what's left over. You've got to trim the excess (while still making money) and optimize the rest.

I like the trend towards text-based ads started by Google. Text ads typically have higher clickthroughs than banner ads, and they don't require more HTTP requests.

What elements of a site have the greatest impact on its download speed?

Graphics and multimedia. The number of objects in your pages.

What basic steps can everyone take now to make their existing sites faster?

Optimise your HTML by removing comments and whitespace. Minimize and combine graphics, and avoid complex navigation and menus. Be especially wary of multiple .js and .css files. It is best to eliminate or combine these files, and embed them in your pages where possible for maximum speed.

Using CSS to lay out your pages (as wired.com and others are now doing) can raise your content-to-markup ratio, and speed up rendering for all connection speeds. Another factor is latency. The more objects you have in your pages, the longer the delay, which can be considerable. WSO can also cut your bandwidth bill by 30% to 60%, whatever the connection speed of your users.

How big a performance increase can we expect from these measures?

You can cut your content by 30% to 50% using optimisation techniques. Eliminating HTTP requests also has a big impact on the overhead of excess server requests. On 25 top sites we found that compression alone could save 37% overall and 75% for text files. You can combine these techniques for even more savings.

What knock-on effect does an increase in speed have on the user experience?

Bang! Your pages pop onto the screen instead of dribbling up in dribs and drabs. It's a completely different experience for the user. Instead of looking at their watches or becoming bored or frustrated they'll be more engaged, more likely to stay longer and return, and more likely to buy more of your products and services.

If I was going to design a site from scratch for optimal speed, what technologies and techniques would I use?

The basics, (X)HTML, CSS, as few graphics as possible, and minimal Javascript. You'd optimize your HTML and minimize your prose. You'd use CSS to lay out your site, and style your text. You'd use modern menus rather than old-style DHTML menus for speed, or no drop-down menus at all and use styled link or list navigation.

You can use SSI, PHP, or JSP to sniff and deliver customized pages (i.e., for older browsers) .css and .js files, without adding extra HTTP requests. That's the approach I've taken with the book companion site.

Related links

• Speed Up Your Site: Web Site Optimization - the book's companion website, including links to several free chapters
• Maintenance tools for webmasters - including HTML and graphics optimisation tools