How can I make facebook like buttons faster?

Question

in my website, for each blog entry I have a facebook like button. So on the index, there is multiple(more than 10 at the moment) like buttons.

These like buttons make my page a bit cumbersome to use. The total page time becomes several seconds and it's laggy/jumpy while loading(even though all the content is loaded) while it's loading. Is there anyway to fix this other than not showing the like button on the index? (a single like button on a page produces negligible lag)

For reference, my website is at http://lastyearswishes.com In firebug, you can see that the page load time is 20 seconds, of which about 200 milliseconds is tied back to my actual website. Each facebook like button appears to do three separate non-cacheable, unique requests.

Afterthought: Now (nearly 2 years later) I decided to give up on facebook. Even with asynchronous code it still enduced a noticable delay in page rendering time. It also uses some stange javascript that screws up my layout. When dropping in twitter buttons, my layout looked immediately the way it should (something with alignment and float that facebook did. I could never use margin or anything to get facebook to line up like I wanted)

Breeks

btw, I just broke my website. It's not just you. – Breeks

As an aside, I've also found that facebook's buttons are very obstructive to my CSS classes. Because of how little they are used, I'm actually considering removing them or replacing them with something else for social media – Breeks

thanks for updating this helped me decide whether or not to include fb like, I decided against in the end – Stephens

@SimonB Twtitter buttons are very easy to deal with and they were more appropriate for my audience anyway (tech blog) – Breeks

Answer 1

Facebook Developers provides the javascript to create an asynchronous Like button

found here: Loading the SDK Asynchronously

c/p'd here:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

---

Updated:

Try just this portion (and add #xfbml=1 at the end of the URL, should be the same result on your site but async loading):

<div id="fb-root"></div>
<script>
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js#xfbml=1';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Put this script at the bottom of your page

Sundstrom

I don't have an app ID. I just use the generic "like this link" buttons – Breeks

Updated post, should be able to load the facebook .js just like you already have it in your page but this loads it async – Sundstrom

This doesn't make it faster it just delays the process and allows the page to finish loading. It makes the user think the page is done loading. I am still looking for a way that could mass load all the like iframes, maybe something that could be implemented server side. – Clack