FacebookのLike BoxやGoogle+のバッジを遅延ロードさせて表示速度を向上させる方法

FacebookのLike BoxやGoogle+のバッジを遅延ロードさせて表示速度を向上させる方法

FacebookのLike BoxやGoogle+のバッジを遅延ロードさせて表示速度を向上させる方法

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+バッジをサイトに設置している方は、ぜひ試してみてください。

これらを遅延ロードさせることで、ページ表示の体感速度が早くなりますよ。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です