Page Rendering Delay Caused by Javascript Widgets

Wednesday, June 18. 2008

It's very rare that I get stumped when putting together a theme for a website, my skills are good enough to be able to fix most problems and because I know the terminology in most cases I can find something on Google when I need more.

However, there is something on my blog that is annoying the heck out of me and its due to the widgets in the sidebar and in my posts, and the way the browser renders the page. People on really fast connections might not notice it, but I do, so I thought I'd describe the problem and tell you how I've applied a band-aid to try and resolve it.

Here's the problem, this theme has a blue background. The posts and sidebars have a white background. When the page is rendered by the browser, the basic structure renders with no problem, but the delay in getting the widgets to do their thing means that by the time the browser has finished rendering the page, several seconds will have elapsed where the page doesn't display correctly.
To try and correct the problem I've removed several widgets, but it can still be a little slow. The other thing I've tried is giving the entire page a white background and using a blue square of only a few pixels that I tile across the page, however this didn't work. My final attempt has been moderately successful, I gave the post column and sidebar column a white background in the CSS.

At least now the post is still readable while the page completes rendering. Now some of you are probably wondering what the actual cause of the problem is. Well, quite simply its the blue border and white content area that is causing the problem, and its being made obvious by slow loading widgets.

Another possible solution is to remove the bookmarking widget and replace it with static icons loaded from my own host rather than rely on a third party site to help my readers out. Doing this will remove some of the page load overhead, but won't completely solve the problem because the BlogCatalog and AddFreeStats widgets are being served a lot slower these days than they used to be.

I don't want to remove the blue background, and I don't want to render the widgets at the end of the HTML since it would require positioning them absolutely. Arghh!

Does anyone have any suggestions? My only other thought is that I could use an iframe in the sidebar so that the browser can complete the rendering process but I haven't tried this and it means a lot of extra work. Your Thoughts?
If you enjoyed this post, make sure you subscribe to my RSS feed.
in Basic html/css   Comments (6)

Trackbacks
Trackback specific URI for this entry

No Trackbacks

Comments

  1. AmeriGlide said,

    Wednesday, June 18. 2008 at 12:38 (Reply)

    Yeah, I hadn't really noticed before, but your right it does look like it takes a second to load. Weird.

  2. nicole said,

    Thursday, June 19. 2008 at 08:50 (Reply)

    You're right. And, I do have a fast connection, but I did notice it.

    The new look is very attractive, btw! :-)

  3. Carl said,

    Thursday, June 19. 2008 at 09:14 (Reply)

    Thanks everyone.

    It's even more disappointing that you've noticed it on a fast connection, kinda suggests I have some work to do. I wish the widget people would speed things up, then it wouldn't be a problem, so now my evening will be spent looking at CSS instead of watching TV.

  4. Costa Rica SEO said,

    Thursday, June 19. 2008 at 13:40 (Reply)

    Carl,

    You can delay the script from running until after the page has loaded. In IE it's as simple as adding "delay" inside the SCRIPT tag.

    for cross browser support though it will involve a little programming. I suggest checking out the window.onload=function():

    http://www.evotech.net/blog/2007/05/including-javascript-in-xhtml/

    If you like I can write some sample code and e-mail it to you to test.

  5. Costa Rica SEO said,

    Thursday, June 19. 2008 at 14:06 (Reply)

    OK, I created the script, tested it locally here, and e-mailed it to you with an explanation. I hope it works/helps.

  6. DeadRooster said,

    Friday, June 20. 2008 at 14:39 (Reply)

    Carl, I got around this problem (somewhat) by loading widgets in an IFrame. What happens is the rest of your page will load without having to wait for the slow widgets.

    If you have a wordpress blog, you can download a plugin called, IFrameWidgets:

    http://www.scratch99.com/wordpress-plugin-iframewidgets/

    Hope this helps.

Add Comment

Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

 
 
 
 

Friends


$40 per month. PR6, Alexa 110,947.