ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

ソーシャル系ボタンを非同期で表示速度が劇的に向上

ソーシャル系ボタンを非同期にするJavaScriptを導入することで、表示速度が劇的に向上したのでその方法。

「イイね」ボタンや「ツイート」ボタンの読み込みを非同期にすることで、サイトの表示速度が劇的に向上しました。
tokkonopapaさんが公開しているjavascriptを使います。

非同期方法

下記のjavascriptを読み込みます。Goolge+、Google Analytics、はてブ、Facebook、Twitterの非同期が可能になります。

Googleアカウントに合わせて「UA-XXXXXXXX-X」の箇所を変更してください。 Google Analyticsは非同期コードが用意されていますし、Google+1に関しては設定で非同期にできるので不要な箇所は環境に合わせて削除します。

<script type="text/javascript">
(function(w,d){
    w._gaq=[["_setAccount","UA-XXXXXXXX-X"],["_trackPageview"]];
    w.___gcfg={lang:"ja"};
    var s,e=d.getElementsByTagName("script")[0],
    a=function(u,i){if(!d.getElementById(i)){s=d.createElement("script");
    s.src=u;if(i){s.id=i;}e.parentNode.insertBefore(s,e);}};
    a(("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js","ga");
    a("https://apis.google.com/js/plusone.js");
    a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
    a("//platform.twitter.com/widgets.js","twitter-wjs");
    a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
})(this,document);
</script>

また、「イイね」ボタンのJavaScript SDKの記述は削除しても大丈夫でした。
このjavascriptを導入後、表示速度がかなり向上しました。特にIEでは顕著に表示速度がアップ!

新しい記事

東京のWEB制作会社イッティ