FacebookやTwitter等のウィジェットを使用するとローカルが重い

解決策

以下のいずれかの解決策を実行する事で改善する可能性があります。

そもそもFacebookやTwitterのウィジェットを使用しない。

クライアントの希望には応えられないが、ローカルであろうとサーバーであろうと負荷がかかる物はユーザビリティ上好ましくないと言う考え方。スマホでも快適・快速。

Scriptの場合：ローカル上ではスクリプトが実行されない様にする。

下記の様にlocation.protocolでローカルだと判別された場合、処理を実行しない様にする。

<script type="text/javascript">if(location.protocol != "file:"){ /*ここに該当する処理*/ };</script>

「!=」は否定（ではない）を表す。ローカルのみで実行する場合は「==」となる。

iframe型に切り替える

例えばLike ButtonやLike Boxの場合、ユーザーが間違ってHTML5型や、XFBML型を貼り付けしていた場合。
XHTMLベースのBXIではそもそも使用する物が間違っていると言う事になる。素直にiframe型に切り替えよう。

iframeでもやっぱり重い

HTML上にiframeを埋め込んだ時点で、読み込み先を読みに行ってしまうので、根本的な解決には繋がらないが、display:none;にすると言った方法が存在する。しかしながら、jQueryが使用できる環境であれば、該当するiframeにIDを入れてやり、.remove()関数を使用してその要素自体を削除する方法や、下記の様に…

if(location.protocol != "file:"){ $('#add').append('<iframe src="***"></iframe>'); };

location.protocol が ‘file:’では無い時のみ、#addへiframeを埋め込む等といった方法も実行できる。

location.protocolについて

通常このプロパティが返す値は http: や https: であるが、ローカル環境の場合は file: が返される。

原因

ウィジェットを使用した際に重くなる原因は以下の何れかとなる。

  1. そもそもFacebookやTwitterのウィジェット自体が重い。
    例えばFacebookのLike Boxに使用されているスクリプトは以下となるが…
    http://connect.facebook.net/ja_JP/all.js
    このコードだけで168KBとそこそこ重く、さらにこのスクリプトから外部スクリプトを読み込んでいたり、ファイル読み込み後の処理にも時間がかかる。
  2. JavaScriptはソースコードの上から順に読み込まれて、順に実行される。その為、<head>内や#header周辺に重い処理を記述した場合、そのコードの処理と平行してHTMLが読み込まれるのでHTMLの表示が遅くなる。よく「<script>はフッタ直前に記述する」等とあるが、これが該当する為である。
    1. 上記の件については、jQueryの 
      $(function(){/*処理*/});

      や、prototypeの

      Event.observe(window,'load',function(){/*処理*/});

      等により、「HTML要素（DOM）が全て構築された後に、その中に記述した処理を実行する」と言う関数を使って回避する事が出来るが、Event.observeはIEのバージョンによって挙動（宣言事の実行順序）が変わるので、jQueryを使用する事をお薦めする。