有名サイト各社の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になっているので使い方としては正しくない。バージョンが違うと動かないこともあるので必ずバージョンはそろえなければならない。

関連した記事

全角半角を区別しテキスト省略して語尾に「…」を付けるjQueryプラグイン jquery.ry.js google.loadのjsapiでjQueryの読み込みはダメ 1分でできるYouTube動画をWebサイトの背景での再生方法 1分でわかるjQueryとプラグインを使用した要素の外側クリックイベントの取得