フェイスブックの「いいねボタン」たったの1行で7倍速！遅いボタンを高速化する方法！

フェイスブックの「いいね」ボタンが遅い。遅すぎる。物凄くストレスだったので調べてみた。

遅いフェイスブックのいいねボタンは7倍早くなる

検索の評価にも直結するページの読込スピード。このスピードを遅くしている元凶「いいねボタン」。
いいねボタンの読込が完了するまで他の要素を読み込まないため待ち時間が長く、途中離脱してしまうユーザーが現れないか心配。

削除するには影響力が大きすぎるサービスなので何とか高速化する方法を模索します。

外部ツールには同期・非同期がある

いいねボタンなどの外部ツールには、同期・非同期という種類があります。
それぞれメリットがあるのですがスピードを重要視するなら圧倒的に非同期通信がオススメです。

非同期通信は、色々な処理を同時に行えるように配慮された方法なので「いいねボタン」の処理が遅くても他の処理を進める事ができるのです。

具体的なソース

ソースに付け加える1行は下記です。たったこれだけで7倍早くなります。

js.async = true;

加える位置はハイライト表示している6行目です。「async」は非同期という意味です。

<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.async = true;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

たったこれだけのソースで処理スピードが7倍早くなっています。

確認してみたら早くなってるはず

フェイスブックのいいねボタンの読込時間を確認してみたところ、コードの追加前と追加後では明らかに変化が出ています。
ある一部分ですが読み込みスピードが7.5倍になっています！

全体の読み込みスピードを計算しても5倍以上早くなっています。

まとめ

多少、煽ったタイトルですみません。でも5倍早くなるのは魅力的ですよね。検索対策も様々な要素を最適化しなければ上位表示されなくなってきた昨今、ページの読込スピードも重要な評価要素です。

折角の拡散ツールで足を引っ張られていては泣くに泣けません。ぜひ、魔法のコードを追加してみてください！