We share with you what we have been doing to improve the page loading time of our Blog. If a web page takes too long a time to load, the readers will simply hop on to another site. Making it load quickly also saves the dial-up internet users' money and time. While it is true that the download time depends on the readers' internet connection speed, we can as Blog owners tweak our layout and source code to speed up the page download.
There are online tools that you can use to check the download time of your Blog. We used this Website Speed Test to check the load time of our 3 Blogs. You can enter a maximum of 10 web addresses. It will show you the page size, load time, and average speed per KB. This is what we got:-
Generally, it is best to keep the load time to under 2 seconds, but anything up to 8 seconds is acceptable. These results are therefore satisfactory and our efforts in minimizing the load time have paid off. Although it looks good on record, there were still times when our page took longer than it should to load. As we shall explain, some of these factors are beyond our control.
Here are some of the tips that can improve your site's performance:-
1. Sounds, Videos and Gadgets
It is interesting to include music, videos, flash programs, slideshows, gadgets and special widgets into your Blog. However, we all know that these files take time to load. The first step is therefore to remove those that you really don't need. For instance, rather than to embed all the videos into the sidebar, try creating text links instead. Those who are interested in viewing can click them to view the videos that you have uploaded onto Youtube or other hosts. Also, if you are embedding a background music file, choose one that has a very small file size (e.g., MIDI files instead of WAV files).
2. Images and Pictures
If you have a lot of images in your Blog page, optimize them by reducing the file sizes. In Internet Explorer or Firefox, you can right-click on the picture to view the “Properties”. If the size is above 10KB, or 10000 bytes, it is time to change it. One of the things you can do is to edit the image using photo editing softwares like Picasa and resize or crop the images. In some software where you can select the quality of the image, save them in a Low or Medium quality format, rather than High quality.
From our trials, we found that GIF images (images with .gif extensions) load faster than JPG images (images with .jpg or .jpeg extensions) and have smaller file sizes. GIF images are not as sharp but are appropriate for standard graphics and buttons like those you see on our sidebar. Stick to JPG images for photos as they are clearer. Experiment with your graphics by converting the JPG file to GIF file.
How to do that? If you have photo softwares, simply open the image and save them in the other format. Otherwise, if you are using Windows XP, locate the image in your hard disk and double click on the image. You will be looking at the image in “Windows Picture and Fax Viewer”. There is an icon that looks like a floppy disk at the bottom right corner (shown in the picture below). Click on that. Under the “Save as type”, you can select a different format, like GIF or PNG. This will convert the picture to another format. Now that you have the same picture in 2 different formats, compare the file size. Display the one with the smaller size in your Blog. If you do that for all the images, it should greatly reduce the load time of your web page.
There are also free online image optimizing tools that you can use to reduce the image file size. Try entering the words “online image optimizer” into the search bar and you will find a number of sites that will do the job for you.
There are online tools that you can use to check the download time of your Blog. We used this Website Speed Test to check the load time of our 3 Blogs. You can enter a maximum of 10 web addresses. It will show you the page size, load time, and average speed per KB. This is what we got:-
Generally, it is best to keep the load time to under 2 seconds, but anything up to 8 seconds is acceptable. These results are therefore satisfactory and our efforts in minimizing the load time have paid off. Although it looks good on record, there were still times when our page took longer than it should to load. As we shall explain, some of these factors are beyond our control.
Here are some of the tips that can improve your site's performance:-
1. Sounds, Videos and Gadgets
It is interesting to include music, videos, flash programs, slideshows, gadgets and special widgets into your Blog. However, we all know that these files take time to load. The first step is therefore to remove those that you really don't need. For instance, rather than to embed all the videos into the sidebar, try creating text links instead. Those who are interested in viewing can click them to view the videos that you have uploaded onto Youtube or other hosts. Also, if you are embedding a background music file, choose one that has a very small file size (e.g., MIDI files instead of WAV files).
2. Images and Pictures
If you have a lot of images in your Blog page, optimize them by reducing the file sizes. In Internet Explorer or Firefox, you can right-click on the picture to view the “Properties”. If the size is above 10KB, or 10000 bytes, it is time to change it. One of the things you can do is to edit the image using photo editing softwares like Picasa and resize or crop the images. In some software where you can select the quality of the image, save them in a Low or Medium quality format, rather than High quality.
From our trials, we found that GIF images (images with .gif extensions) load faster than JPG images (images with .jpg or .jpeg extensions) and have smaller file sizes. GIF images are not as sharp but are appropriate for standard graphics and buttons like those you see on our sidebar. Stick to JPG images for photos as they are clearer. Experiment with your graphics by converting the JPG file to GIF file.
How to do that? If you have photo softwares, simply open the image and save them in the other format. Otherwise, if you are using Windows XP, locate the image in your hard disk and double click on the image. You will be looking at the image in “Windows Picture and Fax Viewer”. There is an icon that looks like a floppy disk at the bottom right corner (shown in the picture below). Click on that. Under the “Save as type”, you can select a different format, like GIF or PNG. This will convert the picture to another format. Now that you have the same picture in 2 different formats, compare the file size. Display the one with the smaller size in your Blog. If you do that for all the images, it should greatly reduce the load time of your web page.
There are also free online image optimizing tools that you can use to reduce the image file size. Try entering the words “online image optimizer” into the search bar and you will find a number of sites that will do the job for you.
3. Connection to external servers
Every connection to an external site to retrieve information will add to the download time. If you have noticed, our sidebar has many image links to the Blog directories. When you list your Blog in these directories, it is always good to provide a reciprocal link to their sites. You can either create a text link to them, or an image link as we had done. The problem is that in retrieving all the images from these locations, it will drastically increase the load time of your page.
Let me give you an example to illustrate how you can resolve this problem. When you register your Blog at Blogvillage, you will have a code that looks like this:-
Whenever your page loads, the browser will go to their site to retrieve the image “23251.jpg”. Assuming you are registered with many blog directories, the browser will have to visit each of these sites to retrieve their image buttons. This slows down your Blog download. We believe that these blog directory hosts may not like that too as it will put a strain on their server.
What we can do is to download the image “23251.jpg” onto our hard disk by entering the full image URL in our browser and when the image appears, right-clicking it to save. Next, we upload it onto a free server. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files.
Take note of the image URL and the link in the above example will be changed to this:-
Do that for all the image buttons. It takes a while, but the net result is that your readers will benefit from your work. Be consistent. If you choose one host, stick to that one. The browser will need to contact only one site to retrieve all the images and this should cut down the load time of your web page.
Having said that, there are some external servers which we cannot do away with. For instance, some of these Topsites and Toplists give you a tracking code to track the visitor statistics and rank your site. There will be something like this “tracker.php?do=in” or “button.php?u=” in their image link. If we want our Blog to be ranked, we have no choice but to use their code. On a number of occasions, these sites were down, and our page load times were longer than usual because the browser was unable to retrieve the information from these sites. We try to monitor and temporarily disable the codes for these sites, but this is something which we have to bear with should we want to continue being listed in their directories.
Text links are of course preferable if you want to do away with the images. Should you need to understand the difference in codes between text links and image links, you may refer to the article on Hyperlinks and Image Links.
4. Width and Height tags
Images and tables come in different sizes. If we specify the dimensions in the code, the browser will be able to set aside the space allocated for these images and tables and load the rest of the contents that they have quick access to. If we don't specify the values, the browser will have to load the entire contents of the image or table before moving on to another.
Image codes contain a “src” tag. For example, the link buttons we have on our sidebar have a width of 80 and height of 15. In our codes, we will specify the width and height like this:-
You should do the same for tables. A typical table HTML code with the width setting will look like this:-
width="300">
|
|---|
5. JavaScript and external scripts
Minimize the use of JavaScripts in your Blog. These are the languages that the browser must load and interpret. A complicated script may take time to execute. You can tell a JavaScript code from this line found in the code:-
No comments:
Post a Comment