Facebook/Twitter/Google+/はてぶのSNSボタン高速化2(async + delay)

ページ内でSNSボタンの表示にdelayを入れてずらす事で体感速度を向上させました。

要点は script.async = true と setTimeout(function(){...} です。

はてなブックマーク読み込み。
scriptタグで完結していたものをjavascriptに展開。

元はscriptタグで書かれていました。

<script type="text/javascript" src="http://cdn-ak.b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

delay入れるために展開しました。

$(function() {
  setTimeout(function(){  
    var script = document.createElement('script');
    script.src = "http://cdn-ak.b.st-hatena.com/js/bookmark_button.js";
    script.charset = "utf-8";
    script.async = true;
    $('body').append(script);
  }, 5000);
});

Twitter

!function(d,s,id){
  setTimeout(function(){  
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
    if(!d.getElementById(id)){
      js=d.createElement(s);js.id=id;
      js.async = true;
      js.src=p+'://platform.twitter.com/widgets.js';
      fjs.parentNode.insertBefore(js,fjs);
    }
  }, 6000);
}(document, 'script', 'twitter-wjs');

Google+

window.___gcfg = {lang: 'ja'};
(function() {
  setTimeout(function(){  
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  }, 7000);
})();
(function() {
  setTimeout(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);
  }, 8000);
})();

Facebook

(function(d, s, id) {
  setTimeout(function(){  
    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=247875698724916";
    fjs.parentNode.insertBefore(js, fjs);
  }, 4000);
}(document, 'script', 'facebook-jssdk'));

ページ内で完結できる方法としてはここまででしょうか。これ以上速くするとなると、オフィシャルから配布されているタグを使わない、またはサーバーサイドで処理して返すなどの対応が必要になりそうです。