Social Plugins (Fb, Twitter, Google) adding 3 seconds of load time to my site. Defer them?

Question

I know you can use the defer="" html attribute to defer javascript files, but it's only supported in IE (lol) and that will only defer javascript files, I need to defer the entire plugin from loading.

Is there any way to do this, at all? I love the Facebook integration and such, but the plguins are SO SLOW. It more than doubles the load time.

Thanks! ~ Jackson

<div class="socialplugins"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="DesignSweeter">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

<div class="socialplugins">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=218305128208494&amp;xfbml=1"></script><fb:like href="http://designsweeter.com/" send="false" layout="box_count" width="55" show_faces="true" font=""></fb:like>
</div>

<div class="socialplugins">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" count="true"></g:plusone>
</div>

NOTE: The .socialplugins class is just for positioning in my header.

Answer 1

Load javascript files dynamically in non-blocking fashion:

http://berklee.github.com/nbl/

or

https://github.com/rgrove/lazyload/

This technique works somewhat like this:

 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "file1.js";
 document.getElementsByTagName("head")[0].appendChild(script);

This new element loads the source file file1.js. The file begins downloading as soon as the element is added to the page. The important thing about this technique is that the file is downloaded and executed without blocking other page processes, regardless of where the download is initiated. You can even place this code in the of a document without affecting the rest of the page (aside from the one HTTP connection that is used to download the file).

this book: "High Performance JavaScript" by Nickolas Zakas has a lot of interesting information about JavaScript performace optimization.

Answer 2

Two solutions, create a script element (it's going to load the JS asynchronously):

var scriptElem = document.createElement('script'); 
scriptElem.src = 'http://anydomain.com/A.js'; 
document.getElementsByTagName('head')[0].appendChild(scriptElem);

And also writing the script tag directly:

document.write("<script type='text/javascript' src='A.js'><\/script>");

Both examples are from the Even Faster Websites book by Steve Souders.

Answer 3

/*
* Google Plus
* http://www.google.com/intl/en/webmasters/+1/button/index.html
* */
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

/*
* Facebook
* https://developers.facebook.com/docs/reference/plugins/like/
* */
(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";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

/*
 * Twitter
 * http://twitter.com/about/resources/buttons
 * */
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");