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

このブログだけのフィードを購読

今日は、ちょっとした工夫で、ページ読み込みが遅くなるのを防ぐ方法を紹介します。やたらと重い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担当者Forum 編集長

プログラミングやサーバー、データベースなどの技術系翻訳書や雑誌『インターネットマガジン』などの編集や出版営業を経て、現在Webサイト 「Web担当者Forum」編集長。ビジネスにおけるWebサイトの企画・構築・運用と、オンラインマーケティングの2軸をテーマにメディアを展開してい る。

個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模 索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。

→Google

• 内容カテゴリ：Web担当者／仕事
• コーナー：編集長ブログ―安田英久

※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：無駄に重いLike Boxでページ読み込みが遅くなるのを簡単に防ぐ方法 [編集長ブログ―安田英久] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.