Usability And Optimization: Why Too Much Widgets Can Penalize Your Blog

Adds-on and widgets for blogs generally allow a better interaction with readers and integrate marketing and social networking functionalities, etc. to your pages, however that can generate undesirable and unpredictable consequences.

The Javascript code that embed the widget into your web pages is just made of fews characters, although it is not the widget itself but it just specify where and how to download it. You don't know how much Kb the browser needs to download in order to display your last twit, or the most recent MyblogLog readers. In this way, the load time of your pages can increase without control.

Here’s a list that shows how much your web pages are charged by the most common widgets around:

1. MyBlogLog: +64 Kb
2. AdSense Ads: +22 Kb
3. Google Analytics: +22 Kb
4. Disqus: +17 Kb
   
5. Criteo Autoroll: +17 Kb
6. Woopra tracker : +6Kb
7. Quintura cloud generator: +380 Kb
8. Technorati Rank: +27 Kb
9. LLOOGG Tracker: +2 Kb
10. coComment: +8 Kb
11. DIGG button: +17 Kb

As noticed before, once you have installed three or four widgets into your blog platform your web pages have become more heavy without a warning, and the load time of your pages increase. Here’s the pager size of some italian blogs: 

• Ikaro: 177 Kb
• Daniele Salamina : 79 Kb
• MasterNewMedia: 120 Kb
• Psiche e Soma: 52 Kb
• Sw4an: 204 Kb
• Downloadblog: 95 Kb
• Geekissimo: 136 Kb
  
• Catepol: 337 Kb
  

As you can see, widgets are useful but they charge the browsers with additional data  that can make the site really unaccessible for slow internet connections, and create some serious problems with search engines ranking.

The best you can do is to choose only widgets that can bring some benefit to your blog and compress your web pages by using the mod_deflate or the php. That kind of caution can reduce the size down up to 70% and increase page loading speed.

A great tool to analyze the size of each element in a page (including widgets and adds-on) is the Web Developer Tools for Firefox. Once you have visualized the webpage, open Tools>Web>Developer>Information>View document size.

[Photo Credit: SasPartout]