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

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

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

今日は、ちょっとした工夫で、ページ読み込みが遅くなるのを防ぐ方法を紹介します。やたらと重い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」を追加しているだけです。

<script>の部分は、Facebookと少し違いますが、やってることは同じです(ただし、HTML5のdata-属性を利用していますので、jQuery 1.4.3未満ではうまく動作しません)。

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

◇◇◇

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

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

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

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

インフルエンサーマーケティング
インフルエンサー(世間に与える影響力が大きい人物)を活用し、商品の宣伝をSNS投 ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]