SNSボタンをそのまま設置すると高速化の足を引っ張る

サイトにSNSボタンを設置する時、どのように実装するでしょうか？

公式にアナウンスされているタグを見てみます。

Facebook

facebook developers > Like Button

<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/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>

Twitter

Twitter > Twitterボタン

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!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");</script>

これらのコードをそのまま貼付け→サンプル1
（開いた時点で遅いなっていうのは体感できるはず。

いずれもiframeが生成されて、その中に大量のドキュメントが含まれています。それはもう大量にね。

読み込み速度を計測

なんと、1120ms!!!!（回線速度による

元ファイルのsample01.htmlが215Bで29msなのに対して、例えばtweet_button.1359159993.htmlは146msもかかっています。

この中身を解析してみると、以下のような他言語のコードもすべて詰め込まれています。こりゃ遅いな。

... %{name} 님 팔로우하기","Follow %{screen_name}":"%{screen_name} 팔로우하기",K:"천",M:"백만","This page ...
... View these Tweets.":"اس صفحے کو %{tweets} مرتبہ شیئر کیا گیا ہے. ان ٹویٹس کو دیکھیں.",Tweet:"ٹویٹ کریں","Tweet %{hashtag}":"ٹویٹ کری ...

Twitterのカウント数を表示するJavaScriptファイルも273B。
jquery.minが181Bなので、それを遥かに上回るサイズです。
ウィジェット関連のファイルも382B、Facebookのファイルも263B。

これはキツい…

いくら元ファイルを軽量化しても、JSやCSSを圧縮sひても、画像をスプライトしてバイナリ化しても、SNSボタンの読み込みがこれだけ遅ければ意味がありません。

解決法ですが、カウント数を表示しなくていいなら簡単。
ボタンの画像を用意してリンクを貼るだけでいいです。

Twitter – Tweet

<a href="http://twitter.com/share?text=サイトタイトル&url=サイトURL" target="_blank">
	<img src="画像のURLパス" width="幅" height="高さ" />
</a>

Facebook – Like

<a href="サイトURL" onclick="window.open(this.href, 'facebookwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">
	<img src="画像のURLパス" width="幅" height="高さ" />
</a>

おまけ↓

Hatena

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=サイトURL&title=サイトタイトル" target="_blank">
	<img src="画像のURLパス" alt="このエントリーをはてなブックマークに追加" width="幅" height="高さ" />
</a>

LINE

<a href="http://line.naver.jp/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.naver.jp%2F">
	<img src="画像のURLパス" width="幅" height="高さ" alt="LINEで送る" />
</a>

*LINEは公式で用意されているタグもこれです。スマホサイトで実装することを前提として、読み込み速度にも配慮されているのでしょうか？

→サンプル2

読み込み速度は134ms。大幅に速くなりました。

さらに、画像をスプライトしてバイナリ化するともっと速い。

→サンプル3

読み込み速度は110ms。
最初のより10倍以上速いことになります。

特にスマホサイトでは高速化が至上命題なので、SNSボタンを設置する時は十分注意したいところです。

カウント数も表示したい場合は、提供されたAPIを使ってごにょごにょするか、用意されたタグはそのままに、その部分だけ遅延ロードするという方法もありですね。