高速化したいなら、SNSスクリプトをまとめて設置!計測もしてみた

ページスピードを高速化するソーシャルスクリプトの設置方法

ソーシャルボタンは記事の拡散に必要・・だけど。

いまや、ソーシャル上での記事のシェアやいいね!ツイートはブログ記事拡散の為に必要不可欠。

ではあるのですが、素直にポンッと設置してしまうと、ソーシャルボタンを設置すればするほど、ページの読み込みに時間がかかるようになってしまいます。

これは、ソーシャルボタンのアクティビティをそれぞれのソーシャルのスクリプトがやり取りする為の時間がかかってしまうから。

ブログの1ページを例にとってみると、記事タイトル上下、サイドバー、フッターとたくさんのソーシャルのボタンを見かけますね。

それぞれ重要なボタンだと思いますが、これらのボタンのコードを取得ページでコピーし、そのままボタンと同じ場所に設置したとすると、それぞれにスクリプトも設置していることに。

たとえば、ツイートボタンはサイトにコピペしてね!とボタンのタグとスクリプトがセットで出てきちゃいますね(^^ゞ
ツイートボタン取得画面

その場合、設置した数のスクリプトからのソーシャルへのリクエスト:データの送信が行われます。

この送信の数だけ、ページの読み込みが遅くなってしまうのです。

スクリプトは、各ソーシャルごと、1つだけにまとめましょう

スクリプトはボタンの数だけ設置する必要はありません。
各ページにソーシャルの種類の数だけあれば充分です。

なので、ボタンのタグとスクリプトのタグは分けて、ボタンタグは設置したい場所にそれぞれ配置し、スクリプトタグはひとまとめにして、ページの下の方に配した方が高速化に寄与します。

昨今では、ソーシャルのボタンのスクリプトも読み込みを遅延する=非同期タイプのものをソーシャルのボタンを作成できるページで取得できるようになっています。
facebook-sdk

Facebookのボタンコード取得ページには、

「このスクリプトは1ページに1回だけ記述してくれれば良い、
<body>タグのすぐ下に設置してくれると理想的です。」

と書いてあります。

理想的、ということは、そこでなくてもOKだということ。
ただ<body>タグのすぐ下、ということは<body>~</body>の間に設置しなくてはいけないということでもあります。

スクリプトはなるべく後から読み込ませたいので、</body>タグの直前に設定するのが読み込みに一番影響が出ない場所、ということになりますね。

こういった読み込みを遅延するスクリプト=非同期スクリプトは、各ソーシャルボタンで取得できますから、それらを一括して</body>タグの直前に設定することで、ページの読み込みを高速化していきます。

ソーシャルのスクリプトの設定方法

ここでは、すでにボタンを配置済みの方を想定し、スクリプトのみをひとまとめにして、ページ下部に設置し、配置済みのボタンタグからスクリプトを削除できるよう、主な非同期スクリプトを1つにまとめました。

まとめたスクリプト:

<!-- TWITTER -->
<script>// <![CDATA[ !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>
<!-- Google +1 and badge -->
<script type="text/javascript">
 window.___gcfg = {lang: 'ja'};

 (function() {
 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/platform.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
</script>
<!-- FACEBOOK -->
<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/sdk.js#xfbml=1&amp;version=v2.5&amp;appId=◆アプリケーションID◆";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Hatena --><script src="http://b.st-hatena.com/js/bookmark_button.js" async="async" type="text/javascript" charset="utf-8"></script>
<!-- Hatena -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<!-- Pocket -->
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.async=true;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

Twitter
: Tweetボタンなどの取得時に生成されるHTMLの後半部分、<script>~</script>です。

Google+
: Google+バッジの非同期のスクリプトです。

非同期のスクリプト生成方法については「Google+バッジの非同期読み込み対応スクリプトを生成するには」に詳しく記載しましたので、ご参考になれば、と思います。

+1ボタン、バッジなどのGoogle+のソーシャルパーツに共通のplatform.jsのスクリプトです。

Facebookスクリプト
: Facebookの場合は、デベロッパーページでSDKが取得できます。

デベロッパーページ:https://developers.facebook.com/docs/plugins/like-button

開発者登録をして、サイトのアプリケーションIDを取得している場合には、version=v2.5の前にアプリケーションIDが入ります。

◆アプリケーションID◆の部分をご自分のアプリケーションIDに変更して下さい。

はてな、Pocketボタンスクリプト
はてなボタン作成ページPocketボタン作成ページから取得したスクリプトです。

これらのスクリプトをすべて</body>タグの前に設置します。

WordPressテーマなら、</body>タグはfooter.phpにあります。

FTPソフトで子テーマにfooter.phpをコピーし、テーマ編集から子テーマのフッターをクリックして開き、</body>タグの前に設置すればOKです。
ソーシャルスクリプトの設置場所

※このサイトでは、管理を簡単にするために、social-script.phpを作成し、</body>タグ前にphpファイルの読込を行っています。

スクリプトをまとめたスクリプトを設定する、スマートな方法

と、まあ結構アナログな感じでスマートじゃないなぁと思っていたのですが、いろいろと探していて発見したのが、下の記事。

【Webサイト高速化】ソーシャルボタンを1つにまとめるコードを共有するよhttp://wispyon.com/social-button-together/

上記の記事には、Twitter、Facebook、Google+1、はてな、Pocketのすべての非同期スクリプトがまとめられたものが記載されています。

<script type="text/javascript">// <![CDATA[ (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/platform.js"); })(this, document); // ]]></script>

はい、超スマートですね!(≧▽≦)
ゆめぴょんさん、ありがとうございます!

ここでは、Google+のjsを、platform.jsに変更してあります。

また、FacebookのアプリケーションIDを取得している場合で、Facebookのソーシャルシグナルを完璧にFacebookに送りたいと言う場合は、素直にFacebookのSDK(スクリプト)を使用した方が良いのではないかと思われますので、Facebookは適宜お外しください(^^ゞ

Facebookを外したスクリプト

<script type="text/javascript">// <![CDATA[ (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("https://widgets.getpocket.com/v1/j/btn.js?v=1"); a("https://apis.google.com/js/platform.js"); })(this, document); // ]]></script>

どっちが高速か比べてみました!

比較検証したページ:Google+バッジ使ってますか?

まず、各ソーシャル非同期スクリプトをまとめたものの場合

PageSpeedTEST
PageSpeedEXAM1-1

GT-MATRIX
PageSpeedEXAM1-2

スクリプトをまとめたスクリプトの場合

PageSpeedTEST
PageSpeedEXAM2-1

GT-MATRIX
PageSpeedEXAM2-2

やはり、リクエストが少なくなった分、少~しだけですが、スクリプト自体がまとまっている方がPageSpeedTestのスコアもGT-Matrixの読み込み速度も良くなっていますね!

ではでは、今日はこのへんで^^

お役に立てたら、ボタンをポチっとしていただけると幸いです!(≧▽≦)

 

Published:2015/03/06

Written by

高速化したいなら、SNSスクリプトをまとめて設置!計測もしてみた」への1件のフィードバック

コメントを残す