/ programing

twitterがダウンしてもいいようにtwitterウィジェットを最後に読み込む

深夜のアクセス障害について ( 2012年7月27日金曜日 )
http://blog.jp.twitter.com/2012/07/blog-post_27.html

以前からjavascriptによる表示の更新が、twitterのつぶやきの取得で止まることが気になっていた。今回twitterがダウンしたことをいいことにページが表示されてから読み込むテストをしてみた。

twitterがダウンしている時に調べたところ以下のjsonの読み込みでずっとページが待たされていた。
http://api.twitter.com/1/statuses/user_timeline.json

なんとかしてこの処理を後の方へ持っていきたい。そこで今回参考にしたのは以下のサイト。(user_timeline.jsonの読み込みは非同期にならない気がするが)
asynchronous loading of twitter widgets

この記事によるとtwitterウィジェットは内部でdocument.writeしているので単にtwitterウィジェットの処理をページの最後に持っていくことはできない。しかし、ソースを読んでみると

if (!opts.id) {
  document.write('<div class="twtr-widget" id="' + this.id + '"></div>');
}

という処理になっているので先に <div id="twitter_div"></div> を表示したいところに置いておいて、id:'twitter_div' を WTR.Widget() に追加すると document.write 処理から解放される。

ということで実際にやってみた。

<div id="twtr-widget"><span class="twitter_loading">LOADING...</span></div>
<script>
(function($){
    $(window).load(function () {
        $.getScript('http://widgets.twimg.com/j/2/widget.js', function(){
            var twitterWidget = new TWTR.Widget({
              version: 2,
              id: 'twtr-widget',
              type: 'profile',
              rpp: 3,
              interval: 30000,
              width: 'auto',
              height: 300,
              theme: {
                shell: {
                  background: '#ffffff',
                  color: '#363636'
                },
                tweets: {
                  background: '#ffffff',
                  color: '#363636',
                  links: '#777777'
                }
              },
              features: {
                scrollbar: false,
                loop: false,
                live: false,
                behavior: 'all'
              }
            }).render().setUser('makoto_kw').start();
    });
  });
})(jQuery);
</script>

ポイントはハイライト部分。widget.jsも遅延で読み込んでいる。

説明するとややこしいが、twitterウィジェットをWordPressのウィジェットとしてサイドバーに表示していて、特にこの処理をフッターへ移動していない。実行はwindow.loadでされるので無理に可読性を悪くしてまで最後に持っていかなくてもいいと判断している。

インスペクタでtwitter関連のファイルの読み込みが一番最後で行われていることを確認。オッケー。

Markdown with by ❤ wp-gfm