【ブログ】SNSボタンによるページの表示遅延を防ぐ方法『Facebookやtwitter、Adsenseまで』

公開日: : 最終更新日:2014/08/03 ブログについて

このエントリーをはてなブックマークに追加

ブログのアクセスアップに欠かせない記事のSNSシェアボタン。このシェアボタン、意外と読み込みに時間がかかっているのです。読み手にストレスを与えないためにも、ぜひともSNSボタンの読み込みを速くしてブログ全体の表示を速めたいもの。

そこで有効なのが「非同期処理」。
聞き慣れない言葉だと思いますが、これが効果的なんです!しかも、この非同期処理は簡単に設定する事ができますので非常にオススメ!

今回は非同期処理の仕組みとSNSボタンを非同期処理する設定を紹介していきます。

非同期処理とは?

ざっくり言うと、非同期処理は今行っている処理(タスク)の完了を待たずに他の処理(タスク)を行う事です。
同期処理では、その逆で、今行っている処理が完了しない間は、他の処理を行わなず現在の処理に集中します。

まだ、わかりづらいですよね。次の章で具体的な例を用いますのでもう少し読み進めてください。

スポンサーリンク

SNSボタンを同期処理で読み込むとどうなる?

Facebookのいいね!ボタンは、JavaScriptによる読み込み処理があってブログページに表示されています。この処理が同期処理で行われていたらどうなるでしょう?

いいね!ボタンの読み込み処理のみが行われ、テキストや画像の表示処理が行われません。
よって、ブログ全体の表示が遅いとユーザーに感じさせてしまうのです。
SNSボタンの表示速度を高速化する非同期

しかし、非同期処理ならいいね!ボタンの読み込み以外の処理(テキスト、画像表示など)も並行して行われます。つまり、ユーザーにブログ全体の表示速度を同期処理よりも速く感じてもらえるのです。
SNSボタンの表示速度を高速化する非同期

理解して頂けたでしょうか。
非同期処理により、ブログページ全体の表示速度自体は変わりません。
しかし、SNSボタン以外の表示も同時並行で行えるようになるので、ユーザーにはサイトの読み込みが速くなったと感じてもらえるのです。

では、次の章でその非同期処理をするための設定方法を学んでいきましょう。

スポンサーリンク

SNSボタン読み込みを非同期処理する方法

まずはいいね!ボタンを非同期処理で読み込む方法です。
Facebookのdevページから追加したいボタンのコードを取得する際、「Get Code」をクリックして吐き出されるコードをちょろっと編集します。
facebookのいいねボタンを非同期処理で高速化
赤枠で囲った部分に「 js.async = true;」を追加するだけです。「async」は非同期という意味。
以下のコードのようにすれば、いいね!ボタンを非同期処理してくれて、ブログページ全体の体感表示速度を上げる事ができます。

<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=自分のID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

twitterシェア、フォローボタンの非同期処理

twitterのシェア、フォローボタンも簡単に非同期処理設定できます。
twitterボタン作成ページで吐き出されるコードに「js.async=true;」を追加すればOK。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

これでtwitterボタンも非同期処理され、ブログ全体の体感表示速度を高められます。

なお、はてブボタンは生成時にデフォルトで非同期処理されるように設定されています。(async=”async”の部分)
また、feedlyも非同期処理でボタンが読み込まれるみたいです。

Adsenseも非同期処理する事ができる

SNSボタン以外にAdsenseも非同期処理による読み込みを行う事ができます。
Adsenseの最新版ですと、広告を作成した際にデフォルトで非同期処理がなされるように設定されています。
adsenseを非同期処理して表示速度を高速化
以前、つくった広告を利用している場合は非同期処理がなされているか確認した方がいいですね。
ブログ全体の表示速度に影響してきますので。

まとめ

・SNSボタンは非同期処理で読み込むといい
・それは、非同期処理によりテキスト読み込みなどの処理も並行して行えるようになるので、ユーザーのページ体感速度が上がるから
・SNSボタン以外にAdsenseでも非同期処理設定が簡単にできる

以上です。ブログページの表示速度はユーザーにとって重要な指標ですので、紹介した方法を使って少しづつ改善していきましょう。
それでは!

ブログの表示速度を上げたいなら

いいサーバーに乗り換えるという手もありますよ。
私が利用しているサーバーです。さくら、ロリポップなどを使っているなら乗り換えた方がパフォーマンス上がります。


筆者Twitterアカウント

フォローいただければ、最新記事や、ブログで稼ぐ、アクセスを集める方法などをタイムラインにお届けします。

仕事で悩む人から人気の記事

ブログ「らふらく」を購読する→follow us in feedly

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

いつもシェア感謝です!今回もぜひ

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!