初代編集長ブログ―安田英久

無駄に重いLike Boxでページ読み込みが遅くなるのを簡単に防ぐ方法

ちょっとした工夫で、ページ読み込みが遅くなるのを防ぐ方法。ターゲットはやたらと重いFacebookのLike Box

安田英久（Web担編集統括） 2014/4/22 12:00 Web担当者／仕事 | 解説／ノウハウ

94 129 218

今日は、ちょっとした工夫で、ページ読み込みが遅くなるのを防ぐ方法を紹介します。やたらと重いFacebookのLike Boxがターゲットです。

FacebookのLike Boxを遅延ロードさせる！

Facebookの「Like Box（いいねボックス）」、使っていますか？やっぱりFacebookページの存在を知ってもらうには、メインのサイトのほうでLike Boxを設置するのがいいですよね。

ネットショップ担当者フォーラムのサイトでは、ここで紹介した遅延ロードでFacebookのLike Boxを表示しています。

でも、このウィジェット……やたらと重いんですよね。

これを表示するために必要なHTTPリクエスト数は7回＋表示されるアイコンの数だけ。つまり、標準のアイコン10個表示でもHTTPリクエスト数17回、高さ500ピクセルにして表示されるアイコンの数を増やすとは37回にもなります（実際にはブラウザ側のキャッシュが効いているので2回目以降はそうでもないですが）。

他の部分の読み込み速度をどれだけ改善していても、Like Boxのせいで重く感じられてしまったら、台無しですよね。

なので、ページ読み込み直後にはLike Boxを表示せず、ページ読み込みが完了してしばらくしてからLike Boxを表示するようにしてみました。

Like Box表示部分のコードはこんな感じです。

<div class="fb-like-box-placeholder" data-href="https://www.facebook.com/netshoptantoushaforum" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true" data-height="500"></div>

<script>
(function($){$(document).ready(function(){
  setTimeout(function(){
    $('.fb-like-box-placeholder').each(function(){
      $(this).addClass('fb-like-box');
      $(this).removeClass('fb-like-box-placeholder');
    });
    FB.XFBML.parse();
  }, 6000);
})})(jQuery)
</script>

1行目（青文字）には、標準のLike Box用のHTML（HTML5版）のクラス名を変えただけのものを記述します。元は「fb-like-box」となっているクラス名を「fb-like-box-placeholder」と変えてください。

次に来る<script>が、「あとからLike Boxを読み込ませる」ためのJavaScriptです。やっていることはシンプルで、ページ読み込み完了から指定秒数が過ぎたら、「fb-like-box-placeholder」のクラス名を元の「fb-like-box」に変えて、FacebookのJavaScriptに処理させるだけです。

ページ読み込み完了から処理開始までの時間は、<script>内の緑文字で示した部分にミリ秒で記述します。上記ならば6000なので、6秒後に処理ということですね。

これ以外にFacebookのLike Box表示用にFacebookのライブラリJavaScriptコード（「<div id="fb-root"></div>」で始まるもの）をページ内に貼り付けていると思いますが、そちらには手を付けないでください。

また、このコードが正しく動作するにはjQueryが必要ですが、今はもうだいたいのサイトにjQueryが入ってるから大丈夫ですよね。

Google+ページのバッジも遅延ロードさせる！

で、ついでに、Google+ページのウィジェット（バッジ）も遅延読み込みさせるようにしてみました。

しつこいようですが、ネットショップ担当者フォーラムのサイトはこちらです。

コードはこんな感じです。

<div class="g-page-placeholder" data-href="https://plus.google.com/101126018613195627146" data-rel="publisher"></div>

<script>
(function($){$(document).ready(function(){
  setTimeout(function(){
    $('.g-page-placeholder').each(function(){
      $(this).addClass('g-page');
      $(this).removeClass('g-page-placeholder');
      gapi.page.render(this, $(this).data());
    });
  }, 6000);
})})(jQuery)
</script>

1行目は、Facebookのときと同様に、標準のGoogle+ページウィジェット用のHTMLのクラス名に「-placeholder」を追加しているだけです。

これ以外にGoogle+のライブラリを読み込むJavaScriptコードをページ内に貼り付けていると思いますが、そちらには手を付けないでください。

◇◇◇

可能ならば、「指定秒数後に表示する」のではなく、「ウィジェットがブラウザの画面に表示されたら読み込む」ようにすると、もっといいですね。

jQueryのinviewプラグインを使えば、そういう処理も楽にできると思います（当該プラグインはタイマーで繰り返し処理するタイプであまり好きではないので、私は使っていませんが）。

地道というか、邪道な手かもしれませんが、こんな風にして、少しでもページ表示が軽くなるようにしてみてはいかがでしょうか。