すべてのブロガー必見!Facebookのソーシャルプラグインを使っているWebサイトの表示速度をアップさせるたった一言の魔法

すべてのブロガー必見!Facebookのソーシャルプラグインを使っているWebサイトの表示速度をアップさせるたった一言の魔法

更新日:カテゴリ:Webデザイン

すべてのブロガー必見!Facebookのソーシャルプラグインを使っているWebサイトの表示速度をアップさせるたった一言の魔法

「いいね!ボタン」「いいね!ボックス」など、Facebookのソーシャルプラグインはほとんどのブロガーが利用する、ほぼ必須の機能なのにもかかわらず、思わず外したくなるレベルにサイトを重くさせますよね。
そんなFacebookのソーシャルプラグインを使っているWebサイトの表示速度(レンダリング速度)をアップさせる方法をご紹介します。

なぜ重くなってしまうのか

たった一言で「いいね!」ボタンが爆速に!全ブロガーに必須の呪文。という記事を参考にさせて頂きました。

Facebookのソーシャルプラグインの「いいね!ボタン」「いいね!ボックス」「Facebookコメント」などの機能を使うには、以下のJavaScriptを挿入しなければいけないのですが、これを読み込むときに時間がかかっているのです。

<div id="fb-root"></div>
<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&appId=XXXXXXXXXXXXXXX";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Facebookのソーシャルプラグインを「非同期読み込み」に設定

そこで、先ほどのJavaScriptを以下に変更し、「非同期読み込み」の設定をしてあげます。

<div id="fb-root"></div>
<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/all.js#xfbml=1&appId=XXXXXXXXXXXXXXX";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

追加してあげたのは以下の一言だけです。

js.async = true;

これを追加すると、このJavaScriptが非同期読み込みになるので、読み込みの完了を待たずに他のソースコードの読み込みを同時進行で行なってくれます。

これによってページ全体の表示速度がアップするわけですね。
利用環境にもよりますが、この方法で1〜2秒ほど体感速度がアップしました。

ちなみに

Facebookではbodyタグのすぐ後ろに挿入させることを推奨していますが、footerなどソースの終わりの方に挿入している人は、非同期読み込みの性質上あまり差が感じられないかもしれません。

この記事に関連するタグ

あわせて読みたい記事