【Webサイト高速化】ソーシャルボタンを1つにまとめるコードを共有するよ

記事の中に複数の同じソーシャルボタンを設置している場合、スクリプトをまとめることによりブログ表示を高速化できます。今回は各ソーシャルボタンをも1つのコードに集約したのでリクエスト回数も減りファイルもすっきりしました。

ゆめぴょんです。こんちはっ(^^)/

ブログにソーシャルボタンを付けるのは当たり前になっています。私も今までソーシャルボタンについてはいくつか記事を書いています。興味のある方は参考にしてみてください。

◆保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK

私が現在このブログで利用しているソーシャルボタンは、自分でも利用している5種類です。ツイッター、Facebook、はてなブックマーク、Google+、Pocketです。

なおWordPressを利用している方は、次の高速化についてのまとめ記事も参考にしてみてください。

◆WordPressサイト高速化でSEO対策！17の表示速度アップ術

ソーシャルボタンを3段階でまとめる
ソーシャルボタンをまとめる理由
全てのソーシャルボタンを1つにまとめる方法
まとめ：今日のゆめぴょんの知恵

ソーシャルボタンを3段階でまとめる

そもそも、ソーシャルボタンをまとめるとはどういう意味なのかを3段階で説明します。

同じソーシャルボタンのスクリプトを1つにまとめる
全てのソーシャルボタンのスクリプトを1箇所にまとめる
全てのソーシャルボタンを1つのスクリプトにまとめる

ただし同じボタン（例えばツイッターボタン）を1記事内に1箇所づつしか設置していない場合は、あまりまとめる意味はないかもしれません。

1.同じソーシャルボタンのスクリプトを1つにまとめる

同じSNS（ソーシャルネットワーク）のボタンを複数設置している場合は、「横型」「縦型」「押した人の数がでるタイプ」「顔のでるタイプ」のどれであっても基本的には同じスクリプト（プログラム）を利用しています。

ソーシャルボタンを作成した時に次のようなコードを設置したとします。これはツイッターの場合です。1行目がリンクを作るaタグ。2行目がJavaScriptのスクリプトのタグです。

[html]
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="yume_pyon">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
[/html]

このツイッターボタンを1箇所だけに付ける場合は、2行とも記述すればいいでしょう。しかし2箇所以上につける場合は1行目のaタグは全てのボタン箇所に記述する必要がありますが、2行目のスクリプトは同じページ内なら1箇所だけで充分です。

このことを理解していないと、何回も同じスクリプトを実行してしまうため表示速度がかなり低下してしまいます。

2.全てのソーシャルボタンのスクリプトを1箇所にまとめる

先ほどのツイッターボタンのスクリプト（2行目）は、同じページ内ならどこに記述しても動作します。だから私は一番下の</body>タグの直前あたりにおいています。

「CSSはheadタグ内の上の方で、JavaScriptは（可能なら）</body>の直前で」の原則に従っています。最近は非同期化（下で説明）に対応したスクリプトも増えてきてるのでひと昔前ほどは、こだわる必要はなくなりましたが。

スクリプトの非同期化を使うと、JavaScriptを完全に読み込む前でも次の動作に移れます。逆に言うと非同期化されていない場合、完全にスクリプトが読み込まれるまでは次の処理が行われません。

このことが原因で、表示速度がかなり遅くなってしまいます。

3.全てのソーシャルボタンを1つのスクリプトにまとめる

2段階目との違いがわかりにくいですね。例えば5種類のソーシャルボタンを利用しているとします。2段階目が完了した時点では、5つのスクリプトがページの一番下などに配置されている状態です。

一箇所にソーシャルボタンのスクリプトを集めるだけでも、今まで複数設置していた人にとってはかなりの表示速度アップにつながったと思います。しかしさらにこれらを1つにまとめてしまう！というのが今回の最終目標です。

ソーシャルボタンをまとめる理由

リクエスト回数を減らせられるので、表示を高速化できる
ボタンを複数設置する場合はスクリプトは1回だけ実行すればよい
HTMLとJavaScriptをわけると保守性も増すし、Googleにも好かれるかも
ファイルの行数も減るし、すっきり見やすくなる

全てのソーシャルボタンを1つにまとめる方法

作業は意外と簡単に終わってしまいます。ただこの作業をはじめる前に、まず上の2段階目まではクリアしておく必要があります。

すなわち、同じソーシャルボタンのスクリプトは必ず1つだけにしぼり、それぞれのスクリプトもどこか一箇所にまとめるところまでは各自で実行してください。

そして1箇所にまとめた5つのスクリプトを次の1つのスクリプトに置き換えます。くわしい中身の説明はしませんが、5つのスクリプトをまとめたものです。不要なソーシャルボタンは行ごと削除してください。

また可能なら自分で作成した外部スクリプトファイルに書きだすのが理想です。それ以外の人は</body>タグの直前などに置いてください。そして全てのソーシャルボタンが表示できるか確認してください。

[javascript]
<script type="text/javascript">
(function(w,d){
w.___gcfg={lang:"ja"};
var s,e = d.getElementsByTagName("script")[0],
a=function(u,f){if(!d.getElementById(f)){s=d.createElement("script");
s.src=u;if(f){s.id=f;}e.parentNode.insertBefore(s,e);}};
a("//b.st-hatena.com/js/bookmark_button.js");
a("//platform.twitter.com/widgets.js","twitter-wjs");
a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
a("https://widgets.getpocket.com/v1/j/btn.js?v=1");
a("https://apis.google.com/js/plusone.js");
})(this, document);
</script>
[/javascript]

なお上のスクリプトは次のブログ記事を参考にさせて頂きました。素晴らしいプログラムをありがとうございます。その記事内では「Google Analytics」のスクリプトもまとめているので興味ある人は確認してください。

私は「Google Analytics」は単独で設置したかったので、ソーシャルボタンのみをまとめました。

・最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた