Basic Optimisation
So you've decided to speed your site up? Great. It's a part of designing websites that most people tend to skip. First off, a word of warning: once you start to optimise, it's hard to stop. It often becomes an obsession. But that's okay, you'll be a far better designer afterwards.
The faster your page, the more work you put into it, and further to that, the more work it shows you put into it.
This page was last updated on 2012-08-21
Why?
The reasons that optimisation has become such an integral part of good web-design is because readers have become more impatient, and the Internet is really slow. The majority of your audience will be on 56k modems for a considerable time to come. If a page is taking too long to download, many readers will 'bail out' and press the stop button.
From various tests, the accepted average number of seconds you, as a web designer get, is 10 seconds. That's ten seconds to get your entire page loaded, and only about 3 or 4 to get your page to start taking shape. This limit means your page, along with any graphics and other multimedia, cannot total more than 30 or 40 kilobytes. At times, you're going to have to make a decision on speed over prettiness.
Getting into a mindset
Look at your page. At least half of it can be completely trashed, or at least replaced. The rest must be sharpened. What you really need to do is just be ruthless on what you need to get rid of. Don't be thinking about what you may be losing, think about everything you're gaining.
If you've been using a WYSIWYG editor, your pages will undoubtedly be bigger than they need to be. This is one of the reasons that you should use a text-editor — you can create much sharper code when you are working directly with it.
Get rid of this first
There are things that you'll find all over slow websites that simply serve no purpose at all. You've seen those 'get Internet Explorer' and 'get Netscape' graphics before, and in fairness, how many people don't have one of those two browsers? Very few people, so those two animations are hugely wasteful.
Really, most of the images you're using are probably un-needed. If you're using graphics or an image map for navigation, you should try a text-based navigation bar and see how that works out.
Any image rollovers and animations can be replaced with static images or link rollovers. Any banner ads you have should be re-thought. Are they really pulling in the cash? Probably not, so do the right thing and dump them.
JavaScript news tickers and applets may look good, but they are usually big files. Taking one of them off your page and replacing it by a few well-chosen text links will noticeably improve your site's performance.
Ordering your page
Stylesheets, layers, image maps. These are all elements where their location on your page is very important.
First, your stylesheet. The best way to include your stylesheet is to link it to your documents. This means that it is downloaded once, and is then used for the rest of your site without being loaded again. This is also the reason that using one stylesheet is more beneficial than using several separate ones. Just put them all together and add a few classes. Don't know how? Check out our Stylesheets section.
Layers
should be put at the bottom of your HTML code. This is because old browsers
have to skip over all this code anyway, as they don't understand it. Therefore,
you should leave it at the end so they don't have to wait to get something on
their screens.
Image Maps can be put at the bottom of the code too. Just make sure that the image that is calling for it is not on-screen for a long time without being usable. If so, put the map code closer to the image.
Progressive Downloading
Progressive downloading is rarely something you can work into an existing design. It has to be implemented while you're designing the look of your site, and is always a factor of the design you should be very aware of. Re-design if you need to, because progressive downloading is an excellent aid in making your website appear to be fast, and speed will be a key factor in judging websites for the foreseeable future.
So how does progressive downloading work? It really hinges on your ability to give your readers something to hold their interest while the rest of your page is loading in the background. Your navigation bar, so they can plan ahead to where else on your site they want to see; some of the body text; a background image; just something.
If your page is made up of one big table, you should split it up into many smaller tables. As everyone should know, tables only appear once the entire thing has been downloaded. This page could have been one long table, but instead each 'row' is actually a table of it's own, which means that once one is downloaded it can be displayed.
So long as it looks like there's something going on, it will encourage your reader to wait around for the finished page. Of course, this still has to appear relatively quickly, but having your page load progressively buys you some time.
Shorter page, shorter wait-time
Seems obvious. You can't optimise content. You optimise layout and design, you edit content. But editing should not be done at a cost of stuff to read. Text is pretty efficient — reams of text can fit into the same filesize as a single small graphic. When you are writing, don't be worried about writing too much and creating a large page, instead write everything you need and then look at your page. If it is really long, don't be afraid to chop it into 2 or 3 separate pages, with links onto the next page at the bottom of each, so long as this doesn't obstruct the flow of the article too much.
Why here?
Stuff like videos and background music should not make a regular appearance on a page. If the user has made a conscious decision to get that multimedia effect (i.e. "Click here to hear the music") then that's fine, but don't incur a long download on someone when they may not need or even want it at all.
The problem is even bigger if you are embedding Flash or Shockwave movies. Don't put these anywhere but on pages where users have clicked to, knowing that it would contain multimedia content. The whole 'download flash now' thing takes ages. Sure, it's a relatively short download, but all that time your page is left in the background without being used. Nasty.
