3+1 Ways to Make Your Website Load Faster

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.

Compress Images

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

Compress JavaScripts

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.

JavaScripts : Revisited

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 :
Arrow Try to merge as many multiple smaller js files as possible into a single large js file.
Arrow 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.
Arrow Deepak from Blogger Hacked has created a JavaScript to load other JavaScripts asynchronously. You can give that a try.

Bonus Tip

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.

This post was written as a part of Daily Blog Tips : Blog Project Three

49 Responses to 3+1 Ways to Make Your Website Load Faster

  1. purchase settlements October 24, 2011 at 11:28 pm #

    Great tips I didn’t think to check the javascript. I just thought if i added a caching plugin it would fix it.

Trackbacks/Pingbacks

  1. University Update - Firefox - 3+1 Ways to Make Your Website Load Faster - July 8, 2007

    [...] Link to Article firefox 3+1 Ways to Make Your Website Load Faster » Posted at Not Just Another [...]

  2. Listikalz VI - Rewarding Listikal.com’s Regular Readers - July 8, 2007

    [...] 3+1 Ways To Make Your Website Load Faster(Pallab) – Pallab has a great tutorial on getting your website sped up. [...]

  3. Blog Project Three List | Romantic Ideas: Romance Tracker - July 9, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  4. Blog Project Three: Final List - July 9, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  5. Dailyblogtips contest entries » Hello Ashok! - July 9, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  6. Blog Project Three: The Results | Kyle's Cove dot Com - July 9, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  7. Blog Project Three Final List! | My Brain Dumper! - July 9, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  8. Johan; thinking out loud. - July 9, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  9. Blog Project Three: 114 Blogs Participated - July 9, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  10. DailyBlogTips Blog Writing Project Three Entries | Web Business Blog - July 10, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  11. Blog Project Three : My Top 5 » Not Just Another Blog - July 10, 2007

    [...] in the project. The full list of participants is available here. You can read my submission here. After going through the rest of the entries I have finally come up with my Top 5 list. Here is [...]

  12. Blog Project Three : My Favorites | techdeep.in - July 10, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  13. Top Results from the 3 Blog Project - July 12, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  14. Madhur Kapoor’s Blog » DailyBlogTips Blog Project Three - July 12, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  15. Blog 3 Project » What Would Dad Say - July 13, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  16. Blog 3 Project » What Would Dad Say - July 13, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  17. My top three : 60 IN 3 - July 14, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  18. The Best Of The Blog Project Three Contest - July 15, 2007

    [...] your WordPress blog more Search Engine friendly 3+1 Ways to Make Your Website Load Faster 3 really simple ways to speed up your blog Top 3 Mistakes of Rookie Web Designers [...]

  19. 3 From Every Tree: My Favorite Blog Project Entries | Adam Pieniazek - July 16, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  20. Blog Project Three Has Some Winners - July 17, 2007

    [...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]

  21. 50th birthday invitations - December 12, 2011

    Sites we Like…

    [...] Every once in a while we choose blogs that we read. Listed below are the latest sites that we choose [...]…

Leave a Reply

More in The Web (56 of 79 articles)