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. Ashok July 8, 2007 at 5:57 pm #

    Nice tips, it is really helpful for web developers to develop site which loads fast, as still there are many people using dial up to access net.

    Came to know abt this post from daily blog tips. Here is my entry

    http://www.helloashok.com/contest/three-reasons-why-i-like-contest/152/

  2. Aman July 8, 2007 at 6:21 pm #

    Yea . nice tips there pallab.
    One surprising thing though .. FF ? really ?? hmm

  3. Nirmal July 8, 2007 at 6:29 pm #

    Nice post. Optimizing images is always needed. They tend to take up lot of time to load.

  4. Pallab July 8, 2007 at 6:41 pm #

    Aman wrote

    One surprising thing though .. FF ? really ?? hmm

    The correct acronym for Firefox is Fx and not FF.
    And well Firebug is really awesome.
    And regarding my preference of Browsers : I want to use Firefox but it’s extremely stupid interface keeps putting me off. My ideal browser at the moment would be Maxthon with Gecko rendering engine or Opera with an API.

  5. Jake July 8, 2007 at 9:37 pm #

    One thing I will note is that even if you don’t prefer to use a compressor for images, some image editors save smaller images than others. For instance, Photoshop’s .PNG images are often noticeably larger than those created with the GIMP.

  6. Pallab July 9, 2007 at 5:12 am #

    The “Save for Web and Devices” module of PS generally does quite a good job at compressing images if you select proper settings.

  7. David Culpepper July 9, 2007 at 8:20 am #

    Nice post… good luck to you in the contest.

  8. Pallab July 9, 2007 at 12:42 pm #

    Thanks David.

  9. Shankar Ganesh July 9, 2007 at 12:49 pm #

    Hey cool post. Good luck to you too. Gotta compress CSS.

  10. Mario Andrade July 9, 2007 at 4:33 pm #

    Compressing everything might end up giving you problems in the future.

    Some CSS compression envolves removing spaces between words so save bytes but what if you need to edit that css file? Can you imagine the kind of mess you’ll find?

    Same with javascript, html, etc…

  11. Pallab July 9, 2007 at 5:00 pm #

    Some CSS compression envolves removing spaces between words so save bytes but what if you need to edit that css file? Can you imagine the kind of mess you’ll find?

    The files generated by cleancss using standard settings are readable, but the files become harder to read as compression level is increased.

    Thats why I recommenced taking a backup. You should always have a copy of the original file (non-optimized) on your harddisk.

  12. apurvajk December 11, 2007 at 8:17 am #

    Yes these tips are excellent. The biggest problem is size of the file and images or flash. It takes lot of time while loading the page. I think if we make dynamic pages then the speed increases but still other files should have less size so that they can be downloaded faster.

  13. zuborg October 8, 2008 at 11:48 pm #

    I would also recommend to use this online free tool – http://Site-Perf.com/

    It measure loading speed of page and it’s requisites (images/js/css) like browsers do and shows nice detailed chart – so you can easily spot bottlenecks.
    It’s very detailed and accurate, supports a lot of features like Keep-Alive and HTTP-compression.

    Also useful feature is that this tool can measure quality of internet link of your server.

  14. tweakwindows November 7, 2008 at 7:54 pm #

    Finally found got a good article to make my site faster.Thanks man.

  15. Blakely July 9, 2009 at 8:36 pm #

    Thank you SO much for posting this! I am a designer and my programmer is insisting that going from graphic areas to flat color boxes is the only way for us to achieve a fast enough load time on our site. It is so frustrating as a designer to make something you feel looks great and have something as lame as load time be the reason it never gets to live on the web.

    Thank you!!

    • Pallab July 9, 2009 at 9:55 pm #

      Thanks for the positive feedback. I am glad that you find my article useful.

  16. Christopher Roberts August 28, 2009 at 11:21 pm #

    Brilliant tips, thanks ;)
    .-= Christopher Roberts´s last blog ..The Technology Behind Food =-.

    • Pallab August 28, 2009 at 11:41 pm #

      Thanks for your kind words.

  17. Mustang Technologies September 23, 2009 at 11:23 am #

    Hi Pallab

    Great tips for compressing images for faster website loading. I am looking forward to implementing these in future. Web developers and Website designers need to understand this and pay more attention to the fact that only creating eye catchy websites is of no use if it take 10 times more time to load. People will just shut it down much before seeing the website. I hope you all guys agree with me.

  18. S.Pradeep Kumar October 24, 2009 at 7:13 pm #

    Nice tips Pallab.. improving blog’s loading speed also improves the traffic.. and thus good rank !

    I also wrote one article regarding improving blog’s loading speed..

    http://www.hellboundbloggers.com/blogging/tips-to-improve-your-blogs-loading-speed
    .-= S.Pradeep Kumar´s last blog ..Movies Based On Robotics And Machines =-.

  19. Diana Caswell November 29, 2009 at 1:49 pm #

    very cool info thanks!

  20. Diana Caswell November 29, 2009 at 1:51 pm #

    Nice info I hope to tips on making videos hosted on your own site load faster.

  21. James August 26, 2010 at 3:08 pm #

    Thank you, this will help me greatly!

  22. Mircea September 12, 2010 at 4:59 pm #

    Thanks for this great information .

  23. sell textbooks April 14, 2011 at 6:56 pm #

    Thanks for the info, I had this problem on a friends site thanks, this should help

  24. pozycjonowanie stron cennik Katowice October 22, 2011 at 2:22 pm #

    Ha ha? I was just browsing around and took a look at these remarks. I can t believe there s still this much fascination. Thanks for writing about this.

  25. p90x October 24, 2011 at 9:50 am #

    Some great tips on getting a sluggish site to load faster. I use Photoshop and save an image for web and it seems to be a lot smaller in file size as well as retains the quality. Thanks again for the tips.

    - Robert

  26. 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 [...]…

More in The Web (56 of 79 articles)