編集長ブログ―安田英久
無駄に重いLike Boxでページ読み込みが遅くなるのを簡単に防ぐ方法

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

今日は、ちょっとした工夫で、ページ読み込みが遅くなるのを防ぐ方法を紹介します。やたらと重い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プラグインを使えば、そういう処理も楽にできると思います(当該プラグインはタイマーで繰り返し処理するタイプであまり好きではないので、私は使っていませんが)。

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

この記事が役に立ったらシェア!
tweet129このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

今日の用語

広告代理店
広告を出したい者(広告主)と広告を掲載する者(媒体)の間にたつ存在。 媒体 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


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

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore