
By: Search Engine People Blog
ソーシャルボタンが重いので、Javascriptの読み込み非同期化とフッターへの移動で高速化を試みました。結果ページ読み込み時間は2割ほど少なくなり、体感的にも少し速くなりました。
同期読み込みと非同期読み込みとは
同期読み込み
FacebookやtwitterボタンのJavaScriptは、デフォルトでは「同期読み込み」になっています。
非同期読み込み
そのため、FacebookやtwitterボタンのJavaScriptが完全に読み込まれるまで、他の部分の読み込みが行われません。
しかし、「非同期読み込み」にすると、FacebookやtwitterボタンのJavaScriptの読み込みが完了していなくても、他の部分の読み込みが行われます。
非同期化前の読み込み速度
当サイト内のある特定ページの読み込み速度を測ってみました。
それぞれのツールで、10回ずつ計測して、平均を取ってみました。
- Web担当者Forum
- 3.09秒
- pingdom
- 6.31秒
- GTmetrix
- 5.59秒
- WebWait
- 2.13秒
<body>直下Facebook関連jsの非同期化
Facebook関連のjavascriptは以下のように非同期化しました。
非同期化前
<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.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
非同期化後
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
非同期化のためにjs.async = true;を書き加えました。
Twitter関連jsの非同期化
js.async = true;を書き加えました。
非同期化前
<a href="https://twitter.com/share"
class="twitter-share-button"
data-via="○○" data-lang="ja"
data-count="vertical">
ツイート</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>
非同期化後
<a href="https://twitter.com/share"
class="twitter-share-button"
data-via="○○" data-lang="ja"
data-count="vertical">
ツイート</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>
Google+関連jsの非同期化
デフォルトで非同期化していました。po.async = true;という記述が無い場合のみ、書き加えてください。
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="tall"></div>
<!-- Place this tag after the last +1 button tag. -->
<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/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
はてブ関連jsの非同期化
async=”async”で、最初から非同期化されていました。
<a href="http://b.hatena.ne.jp/entry/ページURL"
class="hatena-bookmark-button"
data-hatena-bookmark-layout="vertical"
title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
alt="このエントリーをはてなブックマークに追加"
width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript"
src="http://b.st-hatena.com/js/bookmark_button.js"
charset="utf-8" async="async">
</script>
GoogleAdsense関連jsの非同期化
Adsenseが、いつの間にか同期コードと非同期コードの選択が可能になっていました。
非同期はベータ版ですがとりあえず入れてみました。
非同期化後の測定結果
それぞれ、10回ずつ計測して、平均を取ってみました。
- Web担当者Forum
- 2.76秒
- pingdom
- 5.61秒
- GTmetrix
- 5.08秒
- WebWait
- 1.97秒
なんかイマイチです。
ソーシャルボタン絡みのjavascriptを全てフッターへ
非同期だけでは効果が無いので、ボタンの周辺や<body>直下にあったソーシャルボタン絡みのjavascriptを、全て</body>直前へ移しました。(アドセンスのjavascriptはそのままです。)
<!-- ここからsocial button用script -->
<!-- ここから本来div#fb-rootの直下に置くべきscript -->
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- ここから本来a.twitter-share-buttonの直下に置くべきscript -->
<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>
<!-- ここから本来a.pocket-btnの直下に置くべきscript -->
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;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>
<!-- ここから本来div.g-plusoneの直下に置くべきscript -->
<!-- Place this tag after the last +1 button tag. -->
<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/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- ここから本来a.hatena-bookmark-buttonの直下に置くべきscript -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<!-- social button用scriptここまで -->
javascript移動後の測定結果
それぞれ、10回ずつ計測して、平均を取ってみました。
- Web担当者Forum
- 2.63秒
- pingdom
- 5.70秒
- GTmetrix
- 4.63秒
- WebWait
- 1.37秒
結局、ページ読み込み時間は平均して2割ほど減少
体感的には、若干速くなったという感じ。
- Web担当者Forum
- 3.09秒⇒2.63秒 14.9%
- pingdom
- 6.31秒⇒5.70秒 9.7%
- GTmetrix
- 5.59秒⇒4.63秒 17.2%
- WebWait
- 2.13秒⇒1.37秒 35.7%
高速化のためにはもっと抜本的な対策をせねばならないようです。でも、面倒くさいんですよね。
「SNSボタンのJavascript非同期通信化などでページ読み込み時間2割削減」への1件の返信
[…] こちらが参考になります。 –>SNSボタンのJavascript非同期通信化などでページ読み込み時間2割削減 […]