Pentagramme

Website Optimisation: Part 2

by Keefe Tang

unobtrusive javascript

Seperation of functionality from structure & presentation. A lot of web developers have not begun to appreciate this new paradigm. Javascript were once used for relatively simple tasks like form validation or animation, now it is responsible for some site’s core functionality.

Unobtrusive javascript means to provide graceful degradation so that websites works even with javascript disabled. Nowadays more viewers surf the web with javascript disabled, thanks to NoScript. It speeds up browsing speed and increase security by blocking third party scripts, not to mention saving bandwidth1.

reduce http requests

When it comes to http requests, it is not a matter of speed but rather about the limited number of simultaneous connection. You see usually, browsers can handle up to two simultaneous http requests, in other words the more files you have the browser to download the slower the loading time becomes because no matter how fast of a connection you have, your browser still will only process two at a time.

The easiest way to reduce http requests is to combine files of the same type into one file. This can be applied to your css, javascript and image. css & javascript can be easily combined by hand, all you need to do is copy and paste everything into one big file. As for images, there is a great guide by A List Apart.

This can also be achieved by reducing the number of objects in the content of your page. This becomes more of a judgement call for web masters. If your page usually have a lot of objects embedded try splitting them into a number of pages, this provides better viewing experience while reducing the amount of object that needs to be request by the browser. If it is a blog, try reducing the number of articles per page, if most post have lots of objects there is no shame in showing one post per page.

gzip

Gzip what ever you can. This saves bandwidth for both you and the viewers. Everything from text files to fonts can be gziped and serve if you properly define the file type. You can manually Gzip every file before serving or you can use Apache mod_deflate to automatically compress and serve with the correct file type.

To manually gzip your files just run gzip [filename] and you will get your new compressed file with a .gz extension. Before you serve them you need to tell Apache what type of file is it and that the file is compressed before it serves to your viewers by defining it in your .htaccess file.

By adding AddType [filetype] [fileextension] will tell Apache what type of file the compressed files are and by adding AddEncoding gzip [fileextension] will tell Apache that the file is compressed using Gzip. After that all you need to do is link them from your html document like you link them uncompressed.

To automatically serve your files compressed by Apache just add AddOutputFilterByType DEFLATE [filetype] into your .htaccess file. Once Apache see that line of code, it will serve all files that is of the type you specified compressed.

images

Using image is the easiest way to show what we web developer wants the viewers to see, but every image file is an object for the web browser to load. Images are normally big in comparison to your text files, even if you combine the image file used in your css, you would still end up with a relatively large file. There are several ways that you can make your visitor’s experience much more pleasant.

Optimise Image

Optimising your image will reduce the size of your image while retaining your image quality. All imaging software outputs inefficient images that wastes valuable bandwidth, sometimes a few hundreds of kilobytes. This means that viewers would be wasting their time downloading needless information of the image and imagine if you serve ten images, those kilobytes can shoot up to a few megabytes.

There are a lot of free image optimisation services available on the internet, the most popular one is Smush.it. There are also tools that you can use locally like pngcrush & jpegtran.

Width & Height

Have you ever been to a website where they have a lot of images but the page is jumping all around as you read the content? That is because the page’s images have no width & height specified. Not only is this annoying it also slows down rendering speed.

When you specify the width & height on the <img> element, your html document will allocate the space before the images are loaded thus saving some rendering time instead of having to reallocate the space when the images are loaded.

By adding the width & height will also allow readers that is reading your content to be able to do so without disturbance. Unless you have experienced it yourself, you have no idea how annoying it is to read a paragraph half way and have to scroll down a little because the loaded image reflowed the document.

background image

Most websites use background images for their background, it provides much more flexibility than displaying a dull, one colour background—though that is not true anymore with css 3 but it is still not widely supported. While your visitor loads a sometimes huge background image, visitors will look at your website without the background image for a short period of time and one annoying thing is that the background image sometimes is the same colour as your text, rendering it impossible to read without the background image.

That is why web developers need to always specify a background colour that closely resembles your background image. Sometimes when you have a bad web hosting service the image might not even load and that can greatly affect the viewers experience in your website.

For me I prefer to let css handle all my rendering. There is abolutely no images used to render every part of this website. With css 3, everything gradient to animation can be done using css 3.

bye bye ie 6

This is not a new topic, my site for one is not supporting ie 6. For personal website, this hardly can be a difficult choice but when it comes to cooperate websites, it can be particularly difficult. As much as we like to ignore ie 6, it is likely here to stay for some time, but bare in mind that a number of large website like MobileMe has already taken the first step to drop support for that archaic browser, the trend is inevitable.

I cannot begin expressing my discomfort—I know I’m sugarcoating it—with ie 6. The lack of support for developers to perform any decent css selection means that you can’t target any element without ID or class. There is also rendering bugs that have haunt developers for years and force developer to produce ugly hacks that is easily broken.

Only by forcing ie 6 to upgrade, will we see the end of it.

source

The article series is sourced from various articles including, Website Optimisation Measure by Kroc Camen, Website Optimisation Measure series articles by Jens Meiert, Optimizing openSpaceBook by Ryan Doherty, Exceptional Performance by Exceptional Performance team from Yahoo and 14 Rules for Faster-Loading Web Sites by Steve Souders.


  1. This is especially appreciated by people living in Australia, since bandwidth there is expensive.