Facebook campus Photo by Marcin Wichary

nori510です。

Facebookのソーシャルプラグインは読み込みが遅い。

そんな迷える子羊の私に天恵、天啓を与えてくれる方がいらっしゃいました。

iPhone研究室のOzk氏です。

iPhone 研究室 » たった一言で「いいね！」ボタンが爆速に！全ブロガーに必須の呪文。

読み込みの遅いいいねボタンを爆速表示する方法です。

Facebook ソーシャルプラグインを非同期読み込み化で爆速に！

方法はとっても簡単で、Facebook ソーシャルプラグインのページから追加し、ヘッダーなどに設置してあるJavascriptの読み込みコード(下記)に、『 js.async = true; 』を追加するだけ。

[html]<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=XXXXXXXXXXXX”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>[/html]

この魔法の呪文で、表示の爆速化です！

なんでも、

Javascript の async、つまり非同期読み込み（asymmetric sync）を設定しています。これで Facebook の Javascript の読み込みが完了していなくてもページの別の部分の読み込みが継続するので、全体に表示が高速化するわけです。

他のソーシャルプラグイン（コメント機能など）も動きますので、Facebook 関連の読み込みが全部高速化します。
iPhone 研究室 » たった一言で「いいね！」ボタンが爆速に！全ブロガーに必須の呪文。

という事だそうです。

私も早速追加しましたが、確かに速くなりました。

この一言を追加するだけで、チョッパヤになるなら追加するしかないですね。