As some of you developers might know when you get the default Facebook Like code, the script loads the like button synchronously. When you add the synchronous Facebook Like button to your website, Page Speed Online will tell you to prefer asynchronous resources. If you are like me and want to get the best score possible in Page Speed you would want to know how to make it asynchronous.
Here is the original code:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=###############";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Here is the modified code:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=###############";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I figured this out by looking at the Google +1 code. It was as simple as adding one line of code. I can’t understand why Facebook didn’t implement this in its code. Same applies for Twitter Follow Button.
Thanks it helped me allot. Keep up the good work.
very simple…thanks for the tip just implemented on my blog
Thanks to share above post to remove PageSpeed issue in blogger blog.
Thanks a lot, so nice and simple
Have used it. It works, no more blocking of page rendering, and improve load time by a couple of points. Thanks a lot…
I used this and Pagespeed check shut up about aSync loading.
Now if only i could get the same error resolved for twitter.
Could you also figure that out please – it would make a lot of lives easier.
Here it is:
http://www.ockwebs.com/2013/06/load-twitter-follow-button-asynchronously/
Omer, you are the man! Plain and simple. Thanks. By the way, do you have the solution to the “Remove query strings from static resources” such as Facebook elements?
+1 for this tip.
Have a great new year!
This is great. No idea why this isn’t the default, or at least mentioned in the official code generator.
It`s worked like a charm. thank you.
wow its worked thanks you <3
Thank you very much, works perfectly
not working on wp when I tested on google page speed insights speed before inserting the code 80 and after inserting the code it goes to 64 not works for me if there is any solution so please let me know
yeah, now it’s not work on my react web, but i try to modified and make it works
I can immediately implement in blog and a very simple and practical
Thank you very much for the tip, indeed a quick easy fix; can’t agree more with ppl wondering why fb devs chose not to have the script load in async mode by default.
Both twitter & google scripts come with async as default.