Optimization 101

Now that broadband is the norm, designers and developers often interpret the extra bandwidth as a licence to create complex layouts, heavy graphics and as many interactive elements as possible.

The truth is that we should all be designing and developing as though we were still restricted by a 56kbps dial up service.

As smart phones have become more popular there has been a massive increase in the consumption of internet content through channels with restricted bandwidth. This channel will always be available to users on ever more simplified devices.

Not so long ago the only way to view the internet was via a desktop computer. Now you can access the internet on ever more simple devices such as netbooks and smart phones. Who can say what will happen next? Maybe the older ‘Feature Phone’ technology will be used as a way of connecting other household appliances such as refrigerators or microwave ovens to the internet. Whatever happens you can be sure that low-bandwidth internet consumption is not going to go away overnight.

Rather than design and develop separate sites for devices with different bandwidths, it’s much better to offer the same experience to all of your users regardless of the bandwidth they have available.

With all that in mind here are a few tips to help you optimize your site for lower bandwidth consumption.


Images

Images are a good place to start because it’s a safe bet that, unless you operate a largely text-only site, a fair chunk of you bandwidth consumption is down to images.

Formats

If you’re using photos and subtle textures then JPEG is currently the only real answer – just try to remember that you can compress a JPEG down from its maximum setting on most images without losing quality.

For other images it gets a little more tricky but it essentially comes down to GIF or PNG.

We tend to prefer to use PNG24. Some people will suggest that you should use progressive PNG8 but we find this takes more time to produce than it’s worth. Use CSS to add in GIF replacements for Internet Explorer 6 – They won’t give you the alpha transparency that you’ll be able to get from your PNG24 but it is IE6 we’re talking about here!

You may be tempted to use the AlphaImageLoader CSS property to force IE6 to render PNG graphics – DON’T! The AlphaImageLoader freezes rendering every time it’s invoked, doesn’t draw from cache and doesn’t even allow you to position your image within an element – it’s unpractical and processor intensive. If you’re going for optimization then the AlphaImageLoader is completely out of the question.

Compression

Photoshop does not fully compress images – there is almost always more you can shave off. Try using Smush.It for an extra squeeze.

Usage

If you’re using good CSS then you won’t need a spacer GIF for any reason.

Check where you are using images. If your images form a part of your content (as an illustration, for example) then by all means put it in the HTML as an <img> tag. If it’s part of the ornamentation or doesn’t directly relate to the content then it should be a CSS background image.

Another thing to consider is how much of an image you really need. How much is hidden by other elements? How much should be replace with a CSS background colour?


HTML

Keep your HTML as simple and clean as possible. Although that’s fairly obvious it’s surprising how many times we find cluttered, messy HTML.

Eliminate excessive HTML and strip it down to just what you need to make it work – If you’re using good CSS you should be able to get rid of quite a lot of unnecessary HTML.

Finally, remove anything that you can to other files – CSS and JavaScript are the prime candidates for this.


The Page

It may seem odd to talk about the ‘Page’ after we’ve already looked at images and HTML but the ‘Page’ we’re talking about here is the final constructed entity that sits on your webserver and gets sent to your users every time they request it.

The first thing has already been mentioned here – take out anything you can put into an external file.

You can call in your CSS with a <style> tag within the <head> element.

Put your JavaScript at the bottom of the page – that way it won’t hold up anything else loading.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s