Facebookソーシャルプラグインのロード時間を短縮する

Facebookソーシャルプラグインのロード時間を短縮する

Posted at August 4,2011 3:33 AM
Tag:[Facebook]

Facebookの開発者ブログに、ソーシャルプラグインのパフォーマンス最適化についての記事が掲載されていましたので、本エントリーで紹介します。

How-To: Optimize Social Plugin Performance

「いいね!」ボタンやコメントボックスのソースコードを、ブログなどにそのまま貼りつけている方は、このエントリーで紹介しているものに書き換えればページの表示時間が短縮されるかもしれません。

パフォーマンスの最適化には、次の2つのベストプラクティスがあります。

1.channelUrlパラメータを追加する

FB.initに、青色で示すchannelUrlパラメータを設定します。

<div id="fb-root"></div>
 <script src="//connect.facebook.net/ja_JP/all.js"></script>
 <script>
   FB.init({
     appId  : 'YOUR APP ID',
     status: true, // check login status
     cookie: true, // enable cookies to allow server to access session,
     xfbml: true, // enable XFBML and social plugins
     oauth: true, // enable OAuth 2.0
     channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
   });
</script>

channelUrlパラメータに記述したURLのchannel.html(ファイル名は何でもOK)には、次の1行を記述します。

<script src="//connect.facebook.net/ja_JP/all.js"></script>

channelUrlに指定するURLには、次のような条件があります。

  • 完全修飾された絶対URLであること(相対URLは×)
  • アプリケーションがhttpsの場合は、channelUrlのURLもhttpsであること

また、channelUrlで指定したファイルがブラウザにキャッシュされている必要があり、無期限にキャッシュすることを推奨しています。channel.htmlをPHPで提供できるのであれば、次のように記述すればいいようです。

<?php
  $cache_expire = 60*60*24*365;
  header("Pragma: public");
  header("Cache-Control: maxage=".$cache_expire);
  header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>
<script src="//connect.facebook.net/ja_JP/all.js"></script>

開発者ブログでは、Internet Explorerで実験したところ、5つのソーシャルプラグインのロード時間が1.10秒→0.43秒に短縮されたと記されています。

2.JS SDKを非同期読み込みにする

もうひとつの方法は、アプリケーション開発ですでにご存知の方も多いと思われますが、FacebookのJS SDKを非同期読み込みにする方法です。非同期読み込みにすることで、他の要素の読み込みをブロックせずにロードすることができます。

JS SDKのロードが完了すると、fbAsyncInitを起動します。Facebook APIに依存するすべてのフロントエンド機能は、fbAsyncInitを経由して呼び出されるべき、と書かれています。

<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
  /* All Facebook functions should be included 
     in this function, or at least initiated from here */
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', 
             status: true, 
             cookie: true,
 	     xfbml: true});
 
    FB.api('/me', function(response) {
      console.log(response.name);
    });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/ja_JP/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
</body>
<html>

3.ソーシャルプラグインへの適用

開発者ブログのタイトルが「How-To: Optimize Social Plugin Performance」なのですが、具体的な適用方法は記載されていません。

ということで、個人的な解釈ですが、1項または2項のパフォーマンス最適化を「いいね!」ボタンなどのソーシャルプラグインへ適用するためのサンプルを紹介します。設定内容に認識誤りがありましたらご指摘ください。

まず、「いいね!」ボタンのXFBMLは次のようになっています。

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&amp;xfbml=1"></script>
<fb:like href="www.foo.com" send="true" width="450" show_faces="true" font="verdana"></fb:like>

このXFBMLに1項の方法を適用するには、次のようにします。ソーシャルプラグインだけの利用であれば、FB.initのパラメータは元のソースコードに設定されているappIdとxfbmlおよび、channelUrlだけでいいと思ってます。間違っていたらすいません。

<div id="fb-root"></div>
 <script src="//connect.facebook.net/ja_JP/all.js"></script>
 <script>
   FB.init({
     appId  : 'xxxxxxxxxxxxxxx',
     xfbml: true,
     channelUrl: 'http://www.yourdomain.com/channel.html'
   });
</script>
<fb:like href="www.foo.com" send="true" width="450" show_faces="true" font="verdana"></fb:like>

XFBMLに2項の方法を適用するには、次のようにします。先程と同様、FB.initのパラメータはappId、xfbmlだけにしています。

<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId: 'xxxxxxxxxxxxxxx', 
      xfbml: true
    });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/ja_JP/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
<fb:like href="www.foo.com" send="true" width="450" show_faces="true" font="verdana"></fb:like>
</body>
<html>

私はブログに設置している「いいね!」ボタンのソースコードを、2項の方法に変更してみました。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)