crocodile notebook

feedly feedburner google+ twitter facebook creative commons BY:2.1 プロフィール

Running
Creative Commons License photo credit: Running / Dave Haygarth

Facebookの『いいね！』はFacebookから情報を取得して表示させています。
そのため、取得が終わるまでそれ以降のページが表示されないことがあるんです。

これぞ本末転倒！
記事を読んでから『いいね！』してもらいたいのに、記事読むには『いいね！』の読み込みを待つとか！
The☆本末転倒！

これを改善することは簡単にできます。
最初からこうしてくれれば良いのに！ってくらいに簡単です。

<div id="fb-root"></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=***************";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

　
6行目の『js.async = true;』が解決してくれる1文です。
これを『js = d.createElement(s); js.id = id;』の後ろにコピペするだけ！
こうすることで、ページの続きを読み込みつつ『いいね！』も取得してくれるようになります。
待たないで良い！ということですね。

なぜ速くなるのか？

設定追加する前は『同期通信』と呼ばれる方法でデータの受信をしています。
ここに『js.async = true;』を追加することで『非同期通信』で受信するようになります。

同期通信とは、1つの処理が終わるまで待って確実に1つずつ終わらせる方法です。
回線が遅かったり不安定な場合には同時に複数の処理を行うと、失敗しちゃう可能性があるんですね。

非同期通信とは、それのまったく逆になります。
同時にいくつもの処理を行って、結果を問わずにどんどん先にすすめてしまいます。
待っている処理が少ないぶん、表示も早く感じるわけですね。

非同期通信のデメリットは『失敗しても知ったこっちゃない』というスタンスなこと。
そして同期通信に比べて余計な情報をオマケしてあげないと、送受信ができないこと。
そのため、通信に必要な転送量や速度が同期通信より増えてしまいます。
だけどADSLや3G回線でも必要十分な増量なので、国内向けページであれば非同期通信で大丈夫。
（海外からのアクセスが多い場合は同期通信のほうが無難ですよ）

Facebook Perfect Guide Book 2013年改訂版
Facebook Perfect Guide Book 2013年改訂版
posted with amazlet at 13.05.01
森嶋 良子 鈴木 麻里子 田口 和裕
ソーテック社
売り上げランキング: 1,107
Amazon.co.jpで詳細を見る

Facebook『いいね！』の影響でページ読み込みが待たされるのを改善しよう！

UPDATE: 2013.05.01
, , , ,

併せ読みに選ばれている
記事はこちらのようです
俺の雑誌愛が暴走する雑誌だけのブログ『crocodile MAG’STACK』始めてました。

俺の雑誌愛が暴走する雑誌だけのブログ『crocodile MAG’STACK』始めてました。

自分の雑誌録を兼ねたブログを立ち上げました。 読んで益なし損もなし。薬にならなきゃ毒でもなし。

Facebookのソーシャルプラグイン風のTwitterソーシャルプラグイン

Facebookのソーシャルプラグイン風のTwitterソーシャルプラグイン

twitterのフォロワーリストをfacebook風ソーシャルウィジェットのようなレイアウトでブログに掲載するjQueryプラグインです。 カスタマイズも容易なので使いやすいですよ。

移動本屋『BOOK TRUCK』の固定店舗『BOOK APART』に行ってきました

移動本屋『BOOK TRUCK』の固定店舗『BOOK APART』に行ってきました

様々なイベントに出展している『移動本屋』こと『Book Truck』の三田さんがはじめた固定本屋『Book Apart』は、まだまだ模索中だけどこれからがとても楽しみな本屋です。

FacebookやTwitterへの更新通知を見直し。手間は惜しまずブログを楽しみたい！

FacebookやTwitterへの更新通知を見直し。手間は惜しまずブログを楽しみたい！

ブログとSNS。手間を惜しまなければもっと近い関係になってコミュニケーションが生まれるんじゃない？そんなことを考えてみたのです。

Google Adsenseの広告コードを修正する4つの方法と、見落としがちなポリシー違反

Google Adsenseの広告コードを修正する4つの方法と、見落としがちなポリシー違反

従来は一切の変更を禁じられていたAdsenseコードの変更ですが、4つの方法に限り許可されました。 あわせて、たまにみかけるポリシー違反への注意喚起も1つほど。

crocodile notebookも4年目なので、ユーザビリティについて考えてみた結果

crocodile notebookも4年目なので、ユーザビリティについて考えてみた結果

google pagespeed insightやGTmatrixの指摘事項をヒントに改善してみた中から、コストもかからず比較的簡単なものをピックアップしてみました。