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.
//Insert code between here...
/* <![CDATA[ */
document.getElementById('paste1').innerHTML = document.getElementById('cut1').innerHTML;
document.getElementById('cut1').innerHTML = '';
/* ]]> */
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:
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.