FB + Twitter buttons + FB Like button === huge performance issues

Question

My new work is full of wonderful and terrible surprises. one of the most interesting parts of this work is the desire to strengthen, accelerate, make everything large-scale. And today, the first real problem. Here's the deal: we get up to 20 elements of the list, each of which shows its own share in Facebook, a share in Twitter and a “Facebook Like” button. As you can imagine, 60 open iframes is just a pain for the user. My question is: has anyone already encountered such problems, and what would you recommend to increase these performance problems?

Although I am thinking about implementing AddThis, I hope there are other solutions that I could consider.

Answer 1

The best way to improve performance is to not copy the pasted code from facebook plugins.

The Facebook Like Button code looks like this:

<div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&amp;xfbml=1"></script> <fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like> 

The problem with this is, if you have 20 buttons like this, then 20 Divs are created with id = "fb-root" and the script for all.js is called 20 times. The best way is to move

 <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&amp;xfbml=1"></script> 

in the page title and whenever you need a similar button, use only

 <fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like> 

The same goes for facebook comments and other plugins.

In addition, some facebook plugins provide the ability to use xfmbl or iframe code. Always choose iframe code because facebook js needs to parse all xfbml code and convert to iframe. This causes a lot of DOM attachments and slows down the page.

Hope this helps!