Home > Articles > Webmaster resources > Speed optimisation

Optimising your website design

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

Photo of Andy King 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


© Sean McManus. All rights reserved.

Visit www.sean.co.uk for free chapters from Sean's coding books (including Mission Python, Scratch Programming in Easy Steps and Coder Academy) and more!

Discover my latest books

100 Top Tips: Microsoft Excel

100 Top Tips: Microsoft Excel

Power up your Microsoft Excel skills with this powerful pocket-sized book of tips that will save you time and help you learn more from your spreadsheets.

Scratch Programming in Easy Steps

Scratch Programming IES

This book, now fully updated for Scratch 3, will take you from the basics of the Scratch language into the depths of its more advanced features. A great way to start programming.

Mission Python book

Mission Python

Code a space adventure game in this Python programming book published by No Starch Press.

Cool Scratch Projects in Easy Steps book

Cool Scratch Projects in Easy Steps

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Set up your Raspberry Pi, then learn how to use the Linux command line, Scratch, Python, Sonic Pi, Minecraft and electronics projects with it.



In this entertaining techno-thriller for adults, Sean McManus takes a slice through the music industry: from the boardroom to the stage; from the studio to the record fair.

Scratch and Raspberry Pi resources

Scratch cat with balloons invites you to visit my Scratch resources

Sean's Scratch Resources

Tips, tutorials and free book chapters for Scratch, a coding language widely used in schools.

Four LEDs on a breadboard connected to a Raspberry Pi

Sean's Raspberry Pi Resources

Tutorials and guides for the Raspberry Pi, a budget computer perfect for learning to program.

Walking astronaut from Mission Python book Top | Search | Help | Privacy | Access Keys | Contact me
Home | Blog | Copywriting Services | Books | Free book chapters | Articles | Music | Photos | Games | Shop | About