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: