mainvisual

みなさんは、Twitterの埋め込み機能で、表示がとても遅くて悩んだことは無いでしょうか?

自分のサイトも、この問題に頭を悩ませていました。 いつまでたっても、よみこみが終わらず、ライブラリの高速化もできず(バージョンアップが面倒なので、ローカルに保存したくなかった)、 ずっと考えていました。

その結果、今回の操作を行なうことで、高速化することに成功しました。

そもそも、なんで遅いの?

もしからしたら、Twitterの埋め込みなページ内に無いのに、 いつもライブラリを読みこむようにしている事が原因かもしれません。

Twitterの埋め込み機能はとても便利なのですが、 何度もそのライブラリを読み込むと、 めちゃくちゃ時間を取られます。 何度もライブラリを読み込んでいると、段々とダウンロード速度を制限されてしまうのです。

そこで、Twitterの埋め込みが無いページにはそもそも Javascriptを読み込ませないといった処理が必要になるわけです。

Twitterの埋め込みタグにはtwitter-tweetとったクラス名がついているので、 このクラスがあった時のみにそのライブラリを読み込むようにすればいいわけです。

最近のサイトジェネレータはできるだけパーツを共通化したりするため、 特定のページのみに、ライブラリを読み込ませたり、させなかったりとすることが難しいかもしれません。

特に、Wordpressとかなると、途方にくれる人も少なく無いでしょう。

具体的にはどうするの?

Javascriptでクラス名twitter-tweetの付いているタグを検索して、 要素数が1以上であった時に、ライブラリを読み込ませます。

今回は、jQueryを使わず、生のJavascriptを使います。 なぜなら、ライブラリの依存関係を極力なくす ことと、 できるだけ読み込みを高速化、最適化したいからです。

ソースコード

次に、Twitterの埋め込みライブラリを非同期でなおかつ状況に応じ、 読み込むかどうかのスクリプトを書きます。 これを設置する場所のおすすめは、bodyタグの終わりの直前 です。

Javascriptは、ブラウザのレンダリングを一時的にストップさせてしまうので、 表示が遅くなります。bodyタグの終わりの直前に設置するとことで、それを防ぐ事ができます。

var cb = function() {
  var l=document.createElement('script');
  l.id="twitter-wjs";
  l.async = 1;
  l.src="//platform.twitter.com/widgets.js";
  l.charset="utf-8";
  document.body.appendChild(l);
}
var tt = document.getElementsByClassName( "twitter-tweet" );
if(tt.length){
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(cb);
  else window.addEventListener('load', cb);
}

ソースコードの説明

まず、最初cb関数にてscript要素の作成、とbodyへの追加を行っています。 もし、クラス名twitter-tweetの要素が存在していたら、ttに要素が入りますので、 その数が1以上だったら、scriptを追加させる処理をしています。

最後に、requestAnimationFrameの説明です。

これを指定することで、ブラウザの処理に余裕があるときを自動で判断し、実行することができます。 普通に、document.body.appendChild(l);のみで書き込んでも結果は同じですが、 ユーザーのパソコンに優しくなります。

これだけで、速度がアップするのなら、導入しないにこしたことは無いと思います。

まとめ

本サイトでは、実際にこのスクリプトを動かしています。 効果はてきめんで、Twitterから不要なダウンロードがなくなり、 次回訪れた際には、即座に読み込みが終了するようになりました。

時間があればためしてみるのは、どうでしょうか?