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

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

遅いフェイスブックのいいねボタンを7倍早くする方法についてご紹介。間違いなく早くなるので凄くオススメです!
投稿日: 2015/03/01
最終更新日: 2015/12/29
 

フェイスブックの遅いいいねボタンが早くなる方法

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

遅いフェイスブックのいいねボタンは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倍

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

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

まとめ

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

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

 
最新情報をお届けします
筆者のご紹介
角政典@moreiic
真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。インドアだけど遊んでくれる人募集中!
Twitter / google+
よく検索されてる記事