サイトにSNSボタンを設置する時、どのように実装するでしょうか？
公式にアナウンスされているタグを見てみます。
facebook developers > Like Button
1 2 3 4 5 6 7 8 | <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> |
1 2 | <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もかかっています。
この中身を解析してみると、以下のような他言語のコードもすべて詰め込まれています。こりゃ遅いな。
1 2 | ... %{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
1 2 3 | <img src="画像のURLパス" width="幅" height="高さ" /></a> |
Facebook – Like
1 2 3 | <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
1 2 3 | <img src="画像のURLパス" alt="このエントリーをはてなブックマークに追加" width="幅" height="高さ" /></a> |
LINE
1 2 3 | <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は公式で用意されているタグもこれです。スマホサイトで実装することを前提として、読み込み速度にも配慮されているのでしょうか？
読み込み速度は134ms。大幅に速くなりました。
さらに、画像をスプライトしてバイナリ化するともっと速い。
読み込み速度は110ms。
最初のより10倍以上速いことになります。
特にスマホサイトでは高速化が至上命題なので、SNSボタンを設置する時は十分注意したいところです。
カウント数も表示したい場合は、提供されたAPIを使ってごにょごにょするか、用意されたタグはそのままに、その部分だけ遅延ロードするという方法もありですね。
Comments
WPのカスタムをしているので、勉強になります。とてもいい教科書です。内容は、すばらしいのですが、そもそも、どうして、左のマージンがゼロなのでしょうか？好みの問題でしょうか？それとも、技術上の理由があるのでしょうか？
[…] SNSボタンをそのまま設置すると高速化の足を引っ張る | hijiriworld Web` […]
snsのボタンとかをAdblockでブロックしてやると、軽くなるように感じるのはこのせいだったのですね。