有名サイト各社のjQuery読み込みについて調べてわかった問題点

有名サイト各社を適当にピックアップしてjQueryの読み込みバージョン、記述位置、CDN利用の有無を調べたら意外なことがわかった。

2012年11月10日現在のjQueryの最新バージョンは1.8.2。しかし下図のサイトを見ての通りかなり古いバージョンを使用しているサイトが結構ある。しかし、jQueryは安易にバージョンを上げるといままで動作していた箇所が動かなくなってしまったりすることがあるので影響する範囲が広い場合はバージョンを古いままにしても大きな問題にはならない。

次にjQueryファイルの読み込み位置についてだがWebページというのは上から下の順に読み込んでいくのでjQueryファイルを読み込むscriptタグは</body>の直前にあったほうが望ましい。しかし、現在は<head>タグ内に記述するサイトが大半を占める。

最後にCDNについて。CDNはGoogle CDNを利用しているサイトが多い。そのためユーザーのブラウザ内にキャッシュとして残っているとそちらを利用するため読み込みを高速化できる。Googleのサーバーで不具合があったときに読み込めなくなることを防ぐためCDNから読み込めない場合は自社サーバーから読み込む処理も忘れずに入れておきたい。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
window.jQuery || document.write('<script src="js/libs/jquery-1.8.2.min.js"><\/script>')
// ]]></script>

ちなみにこの表の中ではmobageだけがCDNから読み込めない場合は自社サーバーからjQueryを読み込む処理を入れているがCDNのバージョンが1.7.2なのに対し、自社サーバーで読み込むバージョンは1.4.2になっているので使い方としては正しくない。バージョンが違うと動かないこともあるので必ずバージョンはそろえなければならない。

site url version </body>前に記述
@cosme www.cosme.net 1.5.1
@nifty www.nifty.com 1.4.2
allabout allabout.co.jp 1.6.1
ameba www.ameba.jp 1.5.1
excite www.excite.co.jp 1.6.2
goo www.goo.ne.jp 1.5.2
gree gree.jp 1.3.2
livedoor www.livedoor.com 1.4.2
lolipop lolipop.jp 1.3.2
mobage www.mbga.jp 1.7.2
pixiv www.pixiv.net 1.7.2
sakura Internet www.sakura.ne.jp 1.4.4
sony www.sony.co.jp 1.2.6
じゃらん www.jalan.net 1.2.6
ニコニコ動画 www.nicovideo.jp 1.6.1
楽天 www.rakuten.co.jp 1.4.2