HCDコンサルティング（旧・中川勉社会保険労務士事務所FPウェブシュフ）のブログ

SNSボタンのJavascript非同期通信化などでページ読み込み時間2割削減


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の非同期化

2013-07-03_1752
Adsenseが、いつの間にか同期コードと非同期コードの選択が可能になっていました。

非同期はベータ版ですがとりあえず入れてみました。

非同期化後の測定結果

それぞれ、10回ずつ計測して、平均を取ってみました。

Web担当者Forum
2.76秒
pingdom
5.61秒
GTmetrix
5.08秒
WebWait
1.97秒

なんかイマイチです。

非同期だけでは効果が無いので、ボタンの周辺や<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％

高速化のためにはもっと抜本的な対策をせねばならないようです。でも、面倒くさいんですよね。

お世話になったページ

[img-link url=”http://cappee.net/coding/social-async” title=”Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ | Cappee Design”][img-link url=”http://nori510.com/archives/12460″ title=”Facebook「いいね」ボタンの表示を爆速化する方法”][img-link url=”http://www.marbee.info/2013/06/25/wordpress%E3%81%AB%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%ABsns%E3%83%9C%E3%82%BF%E3%83%B3%EF%BC%88%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%EF%BC%9A%E9%9D%9E%E5%90%8C%E6%9C%9F%EF%BC%89%E3%82%92/” title=”WordPressにソーシャルSNSボタン（読み込み：非同期）を設置する方法”]

投稿日

カテゴリー:

投稿者:

webshufu

　最終更新日:

タグ: