Nothing annoys a visitor more than a slow loading website. With the proliferation of broadband, most of us have become used to websites loading within a few seconds. Many webmasters spend hours trying to optimize their website for search engines but forget to optimize their website for human beings. In this article I would touch upon three (plus one) basic steps involved in making your website load faster. I have not discussed solutions that involve installing new software on your webserver or making other modifications to the system.

This is the simplest yet often overlooked step. Proper compression can often reduce file size by 50% or even more without any perceptible quality loss. I use Irfanview (Freeware) for this purpose. I had covered this topic in one of my previous articles (Ten Things You Can Do With IrfanView). Here is a short guide to compressing images in IrfanView :
JPEG/GIF Images : Open the Image and press “S” (or select “Save as” from File menu) to bring up the Save as dialogue box. Check the �Show Options Dialogue� check box. Set the appropriate quality level and save the image. A value between 65 and 70 generally does a job.
PNG Images : Once again while saving bring up the “Options dialog”. Tick the option to “Use PNGOUT Plugin”. The default settings work quite well, however it can be time consuming. If you are in a hurry limit the maximum number of passes.

The biggest advantage of Irfanview is that it supports batch operations, so you can compress hundreds of files at a go. Although IrfanView works well with normal images it doesn�t work with animated GIF files. For animated GIF files you can use Spinwave GIF Cruncher. However you will not be able to download the most optimized versions of your images unless you are a Spinwave member. Alternatively you can give GifWorks a try . The “Reduce Colors” option reduces the colour palette thereby reducing the image size.

Selecting the right image format also helps. JPEG works better with photographs and images without text. In such cases using PNG is recommended. Use GIF when you need transparent background or animation. GIF and PNG are also recommended for simple diagrams.

Believe it or not Javascripts are often the biggest contributor to the page load time. I have come across websites using more than a dozen Javascripts. This adds a significant amount of bloat. The solution here is to compress the js files and reduce their size. There are several online services available that would do that job. I would recommend Dojo’s Shrinksafe (another implementation based on Dojo Toolkit is available here) and Packer Js Compressor. However these services dont always work perfectly. Sometimes you would need to manually debug the output file. And do not forget to backup the original file as you may need it later.

Even after compressing the js files the problem is only half solved. There are still two major issues you need to deal with. The first drawback of having multiple js files is the large overhead time. Every time the browser comes across an external file it has to send a request to the server and call upon the file. If the number of external js files is large this can cause a significant amount of delay. The situation is made worse by the fact that browsers load JavaScript files sequentially (i.e. one after another). Matt Dibb found that even on his high speed connection Firefox took 3.5 seconds to load all the JavaScripts used by Digg.com Unfortunately there is no easy and full proof solution to this problem. Here are three things that you can try :
Try to merge as many multiple smaller js files as possible into a single large js file.
Move non-essential js files (eg. tracking js used by web metrics services) to the bottom of the page (near the end of ), so that they are loaded after the main content.
Deepak from Blogger Hacked has created a JavaScript to load other JavaScripts asynchronously. You can give that a try.

This is a really simple trick. The trick is to always specify the dimensions (height and width) of images. This lets the browser know exactly how much space needs to be reserved for the concerned image file. This inturn makes the page load more smoothly thus creating the impression that it�s being rendered faster. It also eliminates another annoying phenomenon � auto-scrolling of text as images above it are loaded by the browser.

These were rather generic suggestions which should reduce the page load time of most websites. There are a few more options you can try like cleaning up your css code or reducing the number of unneccesary buttons/widgets on every page. If you are still not satisfied feel free to digg deeper and diagnose problems specific to your website. The best tool to identify the speed breakers is Firebug extension for Firefox. Firebug displays exactly how a webpage is loaded and how much time is spent in downloading each object. If you do not have Firefox installed you can use Octogate Site Timer. However, Firebug is a lot simple to decipher and is highly recommended.

Did this article help you in reducing your website’s page load time? Do leave you comments/suggestions/criticisms.

Popularity: 14% [?]

Share This Article :

 Email This Post

Related posts brought to you by Yet Another Related Posts Plugin.