FacebookのLike BoxやGoogle+のバッジ(ウィジェット)を遅延ロードさせる方法について、Web担当者Forumで解説されていました。
非常に簡単にできる対策だったので、紹介したいと思います。
Like Boxを遅延ロードさせる方法
Facebookの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>
変更箇所はクラスだけで、「fb-like-box」を「fb-like-box-placeholder」に変更すればOKです。
続いて、以下のスクリプトも追加します。
<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>
このスクリプトでLike Boxを遅延ロードさせます。9行目の「6000」が遅延さえる時間で、ミリ秒で指定します。上記では、6000ミリ秒遅延させるので、6秒後にLike Boxをロードすることになります。
もっと遅くしたい場合や早くしたい場合は、数字を変更してください。
なお、上記スクリプトを動かすには、jQueryが必要です。もしサイトで、jQueryをロードしていない場合は、以下のコードも追加してください。
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
jQueryの読み込みは、先ほどのスクリプトよりも前に記述します。
Google+バッジを遅延ロードさせる方法
Google+バッジを遅延ロードさせるには、Like Boxと同じように、表示コードのクラスに「-placeholder」を追加します。
<div class="g-page-placeholder" data-href="https://plus.google.com/101126018613195627146" data-rel="publisher"></div>
「g-page」の部分を「g-page-placeholder」に変更するだけですね。
続いて、遅延ロードさせるためのスクリプトを追加します。
<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>
例によって遅延させる時間は、ミリ秒で指定されています。
なお、こちらのスクリプトは、jQuery 1.4.3未満ではうまく動作しないそうです。
あとがき
クラスを変更してスクリプトをコピペするだけなので、簡単に対策できますね。
Like BoxやGoogle+バッジをサイトに設置している方は、ぜひ試してみてください。
これらを遅延ロードさせることで、ページ表示の体感速度が早くなりますよ。