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.
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
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.