How to Improve Blog Load Appearance with Slow-Loading Widgets

If you are the owner of a blog that incorporates any slow loading widget then you have probably experienced the seemingly unavoidable effects: the post section loads first, but the background of the post section or sidebar doesn't fill in until everything in your blog's sidebar finishes loading. Or, a slow widget in your sidebar prevents everything else below it from loading until it is done loading. I began experiencing this difficulty myself after I added several widgets to Inkweaver Review's sidebar.

Fortunately I have now developed a technique which eliminates this formerly unpleasant effect. Basically, the internet browser can't finish drawing a page element until everything inside that page element has finished loading. In this case, with the sidebar, the slow loading widget stops the sidebar from being drawn correctly until after the widget has loaded. My solution to this problem is to add code so that the widget loads at the bottom of my blog and then is moved up to its proper position in the sidebar. This can be accomplished in three easy steps.

First add a new HTML/Javascript page element at the bottom of your blog. Place the following code in the new page element:

<div id='cut1'>
//Insert code between here...

//...and here.
</div>

<script type='text/javascript'>
/* <![CDATA[ */

document.getElementById('paste1').innerHTML = document.getElementById('cut1').innerHTML;
document.getElementById('cut1').innerHTML = '';

/* ]]> */
</script>

Second, copy the code for your widget from its place in the sidebar and place the widget code inside the <div> tag, between the two comments.

Lastly, delete the widget code from your sidebar and replace it with the following code:

<div id='paste1'>
</div>

Repeat this process for every widget in your blog's sidebar, but remember that for the second widget you must change the identifying names 'cut1' and 'paste1' to 'cut2' and 'paste2', and so on for every additional widget.

This new code will operate in the following manner. Your blog's post area and sidebar will load extremely fast, because the sidebar starts out with no widgets in it. After that the blog widgets will start to load. As each widget is loaded, the code copies it up to your sidebar, then erases the copy at the bottom of the page. The important thing is that the browser will not have to wait until the widgets load to complete drawing the post area of your blog.

Hopefully this tutorial will help you to improve the load appearance of your blog or web page. If you appreciated this tutorial, then please link back to it from your blog so that others can benefit as well. If you have an difficulty with any of the steps feel free to ask a question in the comments. I will answer it as quickly as possible.

Your Rating:
Inkweaver Review 2008-09-30T09:04:00-05:00

9 replies so far. What are your thoughts?

DustinM said...

That is... Really clever!!! Thanks!

NathanKP said...

Thanks! I hope that the technique can be of use to you.

NathanKP

Praveen said...

Thats a great idea. But it takes me more time because i have many widgets. So copying and pasting is a difficult job. Anyway i have tried it. Any shortcut method for it?
http://www.praveenweb.blogspot.com

NathanKP said...

There is nothing preventing you from putting five or six widgets in one <div></div> set. This will speed things up for you, but it will take longer until the widgets appear.

NathanKP

Anonymous said...

What about widgets like Polls, they don't have visible code.

Daniel.James said...

Very interesting but I have my own solution. Move the offending widget down the page in Google Blogger. I have used the recent post widget with unpleasant outcome. It takes ages to load compared with static navigation and expands when fully loaded. When it expands it moves the other widgets down which looks unprofessional and annoying in my opinion.

Now when you view my site you do not see the loading "recent posts". I have done various tests and believe I have an extremely fast loading site.

I like your website because it is clean without loads of annoying advertising just like mine.

I certainly do not blog for financial incentive but the fact I love to help people.

I hope we can be friends

Daniel James

Kee Garcia said...

The instructions are quite simple. Great job for this one!

website design said...

Thank you SO much for writing this tutorial! It was incredibly easy and your instructions were perfectly understandable.
website design

Carlene said...

Awesome save! Slow-loading widgets hampers page rates by discouraging visitors. The net is instantaneous, and sites have to keep up, if they are ever going to think of building a business out of this.

Carlene @ Stewart Technologies