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

ナビゲーションをスキップする

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

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

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

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

How-To: Optimize Social Plugin Performance

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

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

１．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秒に短縮されたと記されています。

２．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>

３．ソーシャルプラグインへの適用

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

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

まず、「いいね！」ボタンの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に１項の方法を適用するには、次のようにします。ソーシャルプラグインだけの利用であれば、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に２項の方法を適用するには、次のようにします。先程と同様、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>

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

Posted by yujiro このページの先頭に戻る