Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ

  • あとで読みたい人は…

今朝突然iPhoneから避難訓練の緊急速報がピピピとなってびっくりした、@cappeeです。

以前投稿したこちらの「ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など」がわりと好評なので、高速化についても追記しようと思ったのですが、あまりにも長くなるので別記事で投稿したいと思います。

ソーシャルボタンの高速化に関する方法は色々なブログで見かけるのですが、記述方法などまとまったものがなかったのでメモしておきたいと思います。

ソーシャルボタンのJavaScriptを最後に記述する

ソーシャルボタンに限らず基本的なことですが、JavaScriptは表示が問題なければ</body>の直前に記述するとページの読み込みを早くすることができます。

jQueryなど<head>内で指定しないといけないJSもありますが、ソーシャルボタンのタグであれば最後に記述しても問題ありません。

ソーシャルボタンのJavaScriptに非同期化を指定する

現在のFacebookやtwitterボタンは「同期読み込み」になっており、ソーシャルボタンのJavaScriptの読み込みが完了するまで他の読み込みができない状態です。

これを「非同期読み込み」にすることで、JavaScriptの読み込みが完了していなくても他の部分を読み込むことが可能になります。

FacebookやGoogle+1でもそのような読み込み方法が推奨されているようです。

ちなみにGoogle+1ボタンは最初から非同期の設定になっていますので変更の必要はありません。

Facebookタグの記述方法

js.async = true; を以下のように追加することで非同期化します。

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

twitterタグの記述方法

twitterの公式タグは非同期に対応しているらしいのですが、それらしい記述が見当たらないため、疑り深い方は async を記述してみてください。表示は問題ありません。
js.async = true; を以下のように追加することで非同期化します。

!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');

Twitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプト(+はてな)

よく追加するソーシャルボタンとAnalyticsのJavaScriptをキレイにまとめて非同期にしたスクリプトがあります。

/*
 * Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
 * Better handling of scripts without supplied ids.
 *
 * N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
 */ (function (doc, script) {
    var js,
    fjs = doc.getElementsByTagName(script)[0],
        add = function (url, id) {
            if (doc.getElementById(id)) {
                return;
            }
            js = doc.createElement(script);
            js.src = url;
            id && (js.id = id);
            fjs.parentNode.insertBefore(js, fjs);
        };
    // Google Analytics
    add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
    // Google+ button
    add('https://apis.google.com/js/plusone.js');
    // Facebook SDK
    add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk');
    // Twitter SDK
    add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));

さらにプラス「はてな」を追加してスクリプトもありましたので引用しておきます。

詳しくはこちらをご覧ください。
最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた

<script>
(function (w, d) {
w._gaq = [["_setAccount", "UA-XXXXXXXX-X"],["_trackPageview"]];
w.___gcfg = {lang: "ja"};
var s, e = d.getElementsByTagName("script")[0],
a = function (u, i) {
if (!d.getElementById(i)) {
s = d.createElement("script");
s.src = u;
if (i) {s.id = i;}
e.parentNode.insertBefore(s, e);
}
};
a(("https:" == location.protocol ? "//ssl" : "//www") + ".google-analytics.com/ga.js", "ga");
a("https://apis.google.com/js/plusone.js");
a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
a("//platform.twitter.com/widgets.js", "twitter-wjs");
a("//connect.facebook.net/ja_JP/all.js#xfbml=1", "facebook-jssdk");
})(this, document);
</script>

遅延ロードまたはスクロール位置ロード

非同期読み込みでも遅い!という方はもう一手間追加すればきっと快適になるはずです。

遅延ロード … ページが表示されて数秒した後に指定したJavaScriptを読み込むという方法です。

スクロール位置ロード … ページの高さのとある場所までスクロールしたらJavaScriptを読み込むという方法です。

こちらの読み込みの記述方法に関しては下記を参考にしてください。
Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め!

以上になります。

ちなみにこのブログのソーシャルボタンはプラグインで表示しているため非同期化はまだ未対応です!

Pocket
article clipper Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ

One thought on “Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ

  1. Pingback: 今すぐ簡単にできる!サイトを高速化する為の5つの方法をご紹介。 | 60-minutes.biz

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>