無駄に重いLike Boxでページ読み込みが遅くなるのを簡単に防ぐ方法
![Web担のなかの人](https://webtan.impress.co.jp/sites/default/files/images/blank.gif)
今日は、ちょっとした工夫で、ページ読み込みが遅くなるのを防ぐ方法を紹介します。やたらと重いFacebookのLike Boxがターゲットです。
FacebookのLike Boxを遅延ロードさせる!
Facebookの「Like Box(いいねボックス)」、使っていますか? やっぱりFacebookページの存在を知ってもらうには、メインのサイトのほうでLike Boxを設置するのがいいですよね。
でも、このウィジェット……やたらと重いんですよね。
これを表示するために必要なHTTPリクエスト数は7回+表示されるアイコンの数だけ。つまり、標準のアイコン10個表示でもHTTPリクエスト数17回、高さ500ピクセルにして表示されるアイコンの数を増やすとは37回にもなります(実際にはブラウザ側のキャッシュが効いているので2回目以降はそうでもないですが)。
![](https://webtan.impress.co.jp/sites/default/files/images/blank.gif)
他の部分の読み込み速度をどれだけ改善していても、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」を追加しているだけです。
<script>の部分は、Facebookと少し違いますが、やってることは同じです(ただし、HTML5のdata-属性を利用していますので、jQuery 1.4.3未満ではうまく動作しません)。
これ以外にGoogle+のライブラリを読み込むJavaScriptコードをページ内に貼り付けていると思いますが、そちらには手を付けないでください。
可能ならば、「指定秒数後に表示する」のではなく、「ウィジェットがブラウザの画面に表示されたら読み込む」ようにすると、もっといいですね。
jQueryのinviewプラグインを使えば、そういう処理も楽にできると思います(当該プラグインはタイマーで繰り返し処理するタイプであまり好きではないので、私は使っていませんが)。
地道というか、邪道な手かもしれませんが、こんな風にして、少しでもページ表示が軽くなるようにしてみてはいかがでしょうか。
ソーシャルもやってます!