2009-01-09

Blogger Gadget Overload

You may have seen this banner after you've published a Blogger blog. When you click on the link you literally get thousands of gadgets that are available to add to your Blog sidebar. I've seen plenty of blogs slowed down with too many sidebar gadgets; remember it says choose from thousands,not add them all.

What's the Problem?

The sidebar gets loaded for each and every blog post/page that is viewed. This is fine for some gadgets that change dynamically or load quickly, but for others it just slows down your page load times. Maps and Photos are the perfect example. Once a user has seen the map or looked at the photos they are done. They don't need to see them over and over again, yet they will continue to pay the performance hit EVERY time they visit ANY post/page on your site. Also, the sidebar gadgets are only available within the Blogger environment and are not viewable to followers and those who use your Blogger RSS feed (blog posts are). You wouldn't put a blog post in the sidebar, so why do people put too many gadgets in the sidebar? .. because gadgets make it easy!!

BlurbBits can easily be added to either the side bar or the blog post, just think of them as gadgets that can be published in posts!!

Performance Matters

Even if you are "just" a simple blogger, you have entered the world of website design and the constant balance between performance and visual content. Surveys suggest that if your page doesn't load in 8 seconds, you'll lose up to a 1/3 of your visitors.. but photos, maps and gadgets all enhance the attractiveness of the site, so it's a fine balance. Some bloggers add as many gadgets, photos, and wizbang features they can think of, hoping to increase the chance that something will catch someones eye, but instead end up losing viewers who aren't willing to wait.

If you have a "global" blog you also need to think about users who use older/slower computers with slow internet connections. We frequently get bogged down and frustrated with slow pages during our round the world sailing trip.

Add a Post

Our solution for complex/slow loading or one time use features is to add them to a separate blog post. The slow loading code gets loaded once, and only after the user has chosen to view it. We've also tried to make it just as easy to add a BlurbBit to a blog post as it is to add a sidebar gadget (via publishing options). Update with the new additions to our Dynamic GeoBlog maps you can increase your performance even more by adding slower loading items in the expanded post section and/or adding BlurbBits as links (to posts or the sidebar).

Another reason people add a sidebar gadget is to highlight/feature specific content. You can still highlight posts using a link or HTML/JavaScriptgadget which points to your post URLs. Make sure you get the correct URL by clicking on the Title of the post you want to link to (the format should be BLOGURL/YEAR/MONTH/title.html). We use the HTML/Javascript gadget because it is the most flexible. You can have simple links (like the getting started links on the top right) or image links (like svbillabong). See Blogger's guide to basic HTML or this page for more details.

BlurbBits-Sidebar vs Post

We've optimized the performance of BlurbBits for both sidebar and in post use. When BlurbBits are used with online photos the photos are not loaded until the user selects a photo viewing option (improving load times). Most embedded slideshows load the photos and degrade performance during the critical initial page display (including those with autoplay disabled) even if they are way down on the page or sidebar and are not even viewable to the reader.

We use Google static maps in our BlurbBit maps to enhance performance for both in post and sidebar maps. We don't force our slower loading interactive map on everyone, but instead allow users to chose it through our sidebar link gadget. And once we open our interactive map we keep it open (and persistent), changing your blog posts instead of rebuilding the map on every page (as a standard sidebar map does).

We also offer Dynamic GeoBlog maps which are perfect for the sidebar. The map changes automatically based on your blog pages content. Your latest location will appear highlighted on your blogs home page, while an archive or label selection will show your mapped locations for the selected period or label. We even add a popup map within Blogger to highlight a post location for those that were emailed remotely or end up hidden by partial post methods.

We are not suggesting you get rid of all your sidebar gadgets, just suggesting that you think about the usage model and decide whether or not to add a BlurbBit as a sidebar gadget or in a post (see publishing options). Here are a some good sidebar uses:

Picasa Albums SideBarSince this BlurbBit opens each album (via Open Link) in a medium BlurbBit popup, the user can see photos for all your albums quickly. New albums or changes to existing albums will automatically be updated. An individual album can also be published to a sidebar BlurbBit but it is much nicer in a post size BlurbBit. See Online Photos for more details. Note: you can hide the top BlurbBit menu with the far right arrow button.

As you start adding BlurbBits to posts it can be hard to keep your readers informed of the changes. The good news is all of your new BlurbBit post will appear at the top of your page (and in your feed) so those are covered. If you add BlurbBits to older posts or change a post date (to make the travel track work) the blog order can get jumbled and it's hard for existing readers to keep track of your updates (but better than miss-dating a post).

When we add major new features to our blog sidebar (like interactive maps) we usually write a "news release" post just to keep people in the loop (and focus them). You can also use a Blogger feed to get a list of changes. Just like BlurbBits, your Blogger feed can be configured via Url Parameters (see Blogger example and Full parameter descriptions).

You can use the orderby=updated parameter to see the recent changes you've made to your blogs (by date is the default) but this will show ANY updates you've made including small typo fixes etc. You can also search for blogs with a certain labels using the category=label parameter. If you label blogs with featupd (or anything else) you can combine the two parameters to get a feed for your featured updates. Then you can label/unlabel posts based on those changes you wish to highlight. See our example for BlurbBits latest Blogger updates. You can add this as a feed as a link in your sidebar. We are already prototyping some enhanced functionality for BlurbBit links!!