3+1 Ways to Make Your Website Load Faster
Slow websites are rough; slow data transfers are also a drag. One of the biggest problems with setting up a new laptop is bringing your old data over. And when you’re cruisin’ with the new PC, you may even be able to reuse your old laptop computer with a laptop parts service. Cheap laptop batteries, keyboards and laptop hard drives are available, too!
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 :
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.
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 :
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
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.
Enjoyed this article?
Subscribe to Full Feed RSS to get instant updates
You can also Subscribe to my E-mail newsletter and stay updated
SpeedBit Video Accelerator - Load Streaming Videos Faster...
Ten More Things You Can Do With IrfanView...
OpenDNS - Faster and Smarter...
Ten Things You Can Do With IrfanView...
5 Alternate Ways to Browse Flickr...
TemplateWorld - Website Template For Everyone...
Blog Project Three : My Top 5...
Judge in UK Asks What is a Website...
Dreamtemplate - Quality Template Repository...
Boxed Art - Premium Templates...
Related posts brought to you by Yet Another Related Posts Plugin.
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/
Yea . nice tips there pallab.
One surprising thing though .. FF ? really ?? hmm
Nice post. Optimizing images is always needed. They tend to take up lot of time to load.
Aman wrote
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.
[...] Link to Article firefox 3+1 Ways to Make Your Website Load Faster » Posted at Not Just Another [...]
[...] 3+1 Ways To Make Your Website Load Faster(Pallab) - Pallab has a great tutorial on getting your website sped up. [...]
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.
The “Save for Web and Devices” module of PS generally does quite a good job at compressing images if you select proper settings.
Nice post… good luck to you in the contest.
Thanks David.
Hey cool post. Good luck to you too. Gotta compress CSS.
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…
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
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.
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 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 [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 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 [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
[...] 3+1 Ways to Make Your Website Load Faster by Pallab [...]
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.
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.