Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め!

snsボタンをあとで読み込む

新しいサーバーでブログをリニューアルして気がついた、SNSボタンの有無でかなり読み込み速度に差がある。といっても2,3秒ほどですが、これは結構命取りだったりします。

まぁ私もそんなに詳しいわけではないので断言できませんが。

  • ・訪問者はその数秒でサイトから逃げる
  • ・Googleはその数秒を評価基準に入れる

たしか遅延ロード(Lazy Load)とかいう技術ですね。

わりとポピュラーなコードで何とかなったので書いときます。
ピュアなJavaScriptではなく、jQuery使いますね。

方法その1 時限式読み込み

body閉じタグの前あたりに書きます。


.
.
.
<div id="snsbox"></div>

<script type="text/javascript">
  var snscode = 
    'ここに、SNSのコードを書く'
    + '一行でつなげても良いが見にくくなるので + を使って区切る'
    + 'ここではシングルクオートは使えないので'
    + ' " またはエスケープした \' を使う'
    + '</script>終了タグだけは必ず <\/script>このようにエスケープする'
    ; //ここまで

  // 5秒後に上記のコードを snsbox に出現させる
  setTimeout(function(){
    $('#snsbox').append(snscode);
  }, 5000);
</script>

5000ms(5秒)経ったあと、SNSボタンを読み込むという設定です。

訪問時の負荷が減ります。
(適当に5秒にしました)

写真素材:@ryuzokudo

上のコードでは分かりにくいかもしれないので、読み込む実例を


.
.
<div id="snsbox"><!-- ここにボタンが現れる --></div>
.
.
<!-- jQuery を Googleから読み込む -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- 万が一 Googleが落ちていたら自分のサーバーに置いたjQueryを用意する (Boilerplateテク) -->
<script type="text/javascript">window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>


<script type="text/javascript">

// 最初に変数をまとめて定義
var google_btn, twitter_btn, facebook_btn, hatena_btn;

// google (ボタン作成サイトから、コピペするとシングルクオートなので注意)
google_btn =
  '<div class="glbtn btn"><g:plusone size="medium" annotation="inline" width="90"></g:plusone></div>'
  + '<script>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>';

// はてな (wordpress使用のため、phpタグあり)
hatena_btn =
  '<div class="htbtn btn"><a href="//b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="//b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></div>'
  + '<script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"><\/script>';

// Twitter
twitter_btn =
  '<div class="twbtn btn"><a href="https://twitter.com/share" class="twitter-share-button" data-via="ご自身のTwitterアカウント" data-lang="ja">ツイート</a></div>'
  + '<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");<\/script>';

// Facebook (wordpress使用のため、phpタグあり)
facebook_btn =
  '<div class="fbbtn btn"><iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=35&amp;appId=202396756503689" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></div>';

// 5秒後 <div id="snsbox"></div> の中に上記をまとめて出現させる
setTimeout(function(){
  $('#snsbox').append(google_btn + hatena_btn + twitter_btn + facebook_btn);
},5000);

</script>
</body>
</html>

(手っ取り早くWordPressのPHPタグ使いたいので、ソースにべたがきしてます。)

どうです、なんとなくなりました?

時限性ではなく、スクロールイベントに反応させるのもいいかもしれませんね。

方法その2 スクロール位置式読み込み

ということで私はスクロールイベントを採用しました。

上記、最後のsetTimeout実行部分を次に置き換えてください。


// スクロール位置式
// 全体高さの 3 / 5 の位置に来たら読み込む
var sns_append_height = $('html').height() * 3 / 5;
$(window).bind('scroll.sns load.sns', function(){
  if($(this).scrollTop() + $(this).height() > sns_append_height){
    // <div id="snsbox"></div>の中に出現させる、読み込む
    $('#snsbox').append(google_btn + hatena_btn + twitter_btn + facebook_btn);
    // 読み込んだらこのイベントのみを破棄(他イベントに影響を与えない)
    $(this).unbind('scroll.sns load.sns');
  }
});

jQuery1.7以降を使うならbind -> onに unbind -> offに書きかえて。

SNSボタンが多い場合は、段階的に少しずつ読み込むといいかも。

おっ、なんか出来たw くらいのノリで考えついたので、これでいいのかよくわかりません。

この記事書いた時点ではこのサイトで採用しているので、上の方でリロードして、ここまでスクロールしてみてください。3/5くらいの位置でブラウザのロードマークが出ると思います。その際に下4つのSNSボタンを読み込んだわけです。この位置でリロードすると条件を満たしているので即読み込みが実行されます。

修正 6/13 19:50 ウィンドウの高さより小さい場合表示されなかったので、 $(this).scrollTop() に $(this).height() を付け加えました。

修正 6/14 07:50 bind, unbindの場所にload.snsイベントを追加しました。結構大事なことだった(汗

参考

jQueryイベントの名前空間
Namespaced Events