Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Jul 6, 2007

Digg This Story

Faster Web Page Load Time

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

Faster Web Page Load Time

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.

Faster Web Page Load Time

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.

Search World-Wide-Web

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

<a href="http://blogvillage.gotop100.com/in.php?ref=496" target="_blank"><img src="http://blogvillage.gotop100.com/lists/blogvillage/custombanners/23251.jpg" border="0" width="150" height="25"></a>


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

<a href="http://blogvillage.gotop100.com/in.php?ref=496" target="_blank"><img src="http://i154.photobucket.com/albums/s255/ownlblog/templates/blogvillage.jpg" border="0" width="150" height="25"></a>


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

<img src="Image URL" border="0" width="80" height="15">


You should do the same for tables. A typical table HTML code with the width setting will look like this:-

<table border="1" width="300">
<tr>
<td>
Table contents
</td>
</tr>
</table>


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

<script type="text/javascript">


Statcounters and Ad servers like Google Ads use scripts. We noticed that if these sites were slow in delivering the information, our page loads were affected. There are also third party widgets and gadgets you put onto your Blog that use scripts to activate the contents. Monitor them. If you find that they are causing a delay in your page download, consider removing them or switching to other providers.

6. HTML clean up

For those who know HTML codes well enough, you may go into your template code and remove the whitespaces. These are the extra lines or spaces between the codes. You may compact the code, but not so much as to make it difficult to read and edit the code in future.

There are also the empty tags that you can remove. These are often caused by people using wysiwyg (what you see is what you get) editors to write their codes. After some editing, you may have meaningless opening and closing tags like these with nothing in between:-

<div> </div>
<font> </font>
<b> </b>
<i> </i>


It is alright to remove these unwanted tags since they don't do anything when there are no words in between the tags. However, do that only if you are familiar with HTML codes.

7. Simplicity in design

Many of the fast loading sites are simple in design, with no frills whatsoever. Consider adapting these into your Blog. Among all the templates, we find the Minima template one of the simplest. The others which contain background images are slower because the browser has to access separate servers to extract the images.

8. Links check

Bad links are links that, when clicked, point you to an invalid or non-existent site. Some people have blogrolls through link exchanges. A site may be working fine at the start when you exchange links. Months later, that site may be removed and the link turns into a bad link. It is prudent to check these links once in a while to ensure that they continue to be valid.

9. Contents spread

After you have done all you could, and you still find the page load time a little long, try displaying only 1 post on your main page. Login and go to Settings->Formatting. In the first option, change it to “Show 1 post” on the main page. By default, it displays 7 posts on the main page. If your articles are long, it will take quite a while to load all of them. Consider reducing it to 1 or 2 articles to reduce the load time. Otherwise, consciously write shorter articles, or split them into parts.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

14 comments:

Lady Skye Fyre said...

What an absolute gem you are to give us such help. Right away I went in to see how fast my sites were. I've worried about that and voila, you come into my life this morning! Thanks again.

BlogmasterPg said...

My congratulation!Finally you solved the only problem of your Blog: the time to load a page! Bye and see you again from Italy!

Get Degree Online said...

My problem is my blog load fine with Mozilla Firefox but when trying to load with Internet Explorer It offers to save a file like this: get-degree-online.blogspotfile(1)
and don't load the page. What can I do except changing my entire templates? What HTML change will solve it ?

bizwhiz said...

Hi Get Degree Online

I can only venture a guess, that in some IE security settings, script interactions are disabled and prompt appears. You can test with different security settings in your IE to see if that were the case.

captain1821 said...

DO NOT HOST YOUR IMAGES TO GOOGLEPAGES!

I just got this message:

"The bandwidth or page view limit for this site has been exceeded."

Most of the pic at my blog http://paid-mails.blogspot.com/ do not load plus I have to contact a lot of admins that run my banner ads :(

bizwhiz said...

Hi captain1821

Sorry to hear that. Every free host on the net has a cap on its bandwidth. Whether it is Flickr, Photobucket, Ripway or any other, there is a limit on how much storage space or bandwidth is allowed. If your site has a high traffic, you might want to consider switching to an unlimited bandwidth paid account. Otherwise, scout around for the best available free service other than Google.

We are facing bandwidth problems too and are continually looking out for good sites that we can use and recommend. Will let you know if we come across one.

Feng's Blog said...

it looks great,thank u very much

The E Home Maker said...

is there a way to widen the blog posts section?its too narrow n ppl will need to scroll too much to go to the end of the page.

g9ine said...

Very helpful. Thank you.

Roger said...

Your blog has helped me so much !!!Thank you!! I am posting this link!!

Batman said...

wow - what an awesome source of knowledge for a "newbie" blogger such as myself. you fully deserve your page rankings.

thank you very much for your efforts!

DigitalGroup said...

Its very nice to have basic information on blogs.

Have a look at mine

Your Only Destination for Everything

http://busypoint.blogspot.com

techniqueal techie said...

I've been incredibly conscious of my web site load time. These tips, especially the management of images helped a great deal. Thanks!

AumJa24 said...

Thank you so much