JavaScript や CSS の CDN サービスについて調べてみたpost

jQuery や Bootstrap などの一般的なライブラリを使うときは自分のサイトに設置する以外に、 Content Delivery Network 略して CDN サービスで配信されているものを利用することもあります、というかこのページでも使っています。

ということで、 CDN サービスを調べてみました。

対象

一般的な多くのライブラリを配信しているサービス

と、一部のライブラリの配信に特化しているサービス

を調べてみました。

なお、結果は環境やタイミングなどにより変化することがある旨、予めご了承ください。

ライブラリごとのレスポンス

調査は curl コマンドのレスポンスを research-of-javascript-and-css-cdn.php - Gist のスクリプトで集計しその結果をもとにまとめています。

各表は、50 回の問い合わせを算術平均した結果でソートしてあります。 また、 loss は、要求でエラーが返ってきていないかの確認のため設けましたが滅多なことではエラーは返ってこないので常に 0.0 % となっています。

対象のライブラリは独断と偏見により、

を選び調査しました。

それぞれのライブラリは調査時点で各 CDN サービスで選択できる安定版を対象としています。 なので、一部古いバージョンが混じっていますが間違ってはいません。

jQuery

CDNVerminave.maxloss
Microsoft Ajax CDN2.2.163 ms77 ms577 ms0.0 %
Google Hosted Libraries2.2.0216 ms224 ms242 ms0.0 %
jsDelivr2.2.1195 ms233 ms305 ms0.0 %
cdnjs2.2.1319 ms366 ms476 ms0.0 %
jQuery CDN2.2.1878 ms939 ms1008 ms0.0 %

lodash

CDNVerminave.maxloss
jsDelivr4.6.1129 ms168 ms196 ms0.0 %
cdnjs4.6.1338 ms442 ms1006 ms0.0 %

Snap.svg

CDNVerminave.maxloss
jsDelivr0.4.1200 ms246 ms373 ms0.0 %
cdnjs0.4.1344 ms386 ms451 ms0.0 %

D3.js

CDNVerminave.maxloss
jsDelivr3.5.16302 ms330 ms419 ms0.0 %
cdnjs3.5.16344 ms458 ms794 ms0.0 %

three.js

CDNVerminave.maxloss
Google Hosted Librariesr69251 ms274 ms323 ms0.0 %
jsDelivrr74308 ms583 ms829 ms0.0 %
cdnjsr74526 ms641 ms860 ms0.0 %

jQuery UI

JavaScript

CDNVerminave.maxloss
Microsoft Ajax CDN1.11.490 ms104 ms612 ms0.0 %
Google Hosted Libraries1.11.4225 ms235 ms278 ms0.0 %
jsDelivr1.11.4320 ms411 ms606 ms0.0 %
cdnjs1.11.4384 ms534 ms1003 ms0.0 %
jQuery CDN1.11.41096 ms1194 ms1760 ms0.0 %

CSS

CDNVerminave.maxloss
Microsoft Ajax CDN1.11.442 ms55 ms557 ms0.0 %
jsDelivr1.11.4155 ms185 ms215 ms0.0 %
Google Hosted Libraries1.11.4179 ms206 ms720 ms0.0 %
cdnjs1.11.4295 ms347 ms980 ms0.0 %
jQuery CDN1.11.4761 ms815 ms895 ms0.0 %

jQuery Mobile

JavaScript

CDNVerminave.maxloss
Microsoft Ajax CDN1.4.5130 ms153 ms655 ms0.0 %
Google Hosted Libraries1.4.5221 ms234 ms288 ms0.0 %
jsDelivr1.4.5232 ms323 ms2678 ms0.0 %
cdnjs1.4.5358 ms466 ms917 ms0.0 %
jQuery CDN1.4.51002 ms1141 ms1609 ms0.0 %

CSS

CDNVerminave.maxloss
Microsoft Ajax CDN1.4.586 ms102 ms606 ms0.0 %
Google Hosted Libraries1.4.5222 ms244 ms755 ms0.0 %
jsDelivr1.4.5232 ms272 ms1549 ms0.0 %
cdnjs1.4.5360 ms466 ms655 ms0.0 %
jQuery CDN1.4.5995 ms1124 ms1244 ms0.0 %

Bootstrap

CSS

CDNVerminave.maxloss
Microsoft Ajax CDN3.3.666 ms86 ms590 ms0.0 %
jsDelivr3.3.6187 ms223 ms761 ms0.0 %
cdnjs3.3.6338 ms437 ms899 ms0.0 %
BootstrapCDN3.3.6844 ms909 ms1040 ms0.0 %

JavaScript

CDNVerminave.maxloss
Microsoft Ajax CDN3.3.642 ms55 ms571 ms0.0 %
jsDelivr3.3.6156 ms196 ms475 ms0.0 %
cdnjs3.3.6307 ms347 ms853 ms0.0 %
BootstrapCDN3.3.6714 ms756 ms809 ms0.0 %

Font Awesome

CDNVerminave.maxloss
Google Hosted Libraries1.4.9232 ms243 ms318 ms0.0 %
jsDelivr1.5.0220 ms330 ms434 ms0.0 %
cdnjs1.5.0359 ms422 ms544 ms0.0 %

AngularJS

CDNVerminave.maxloss
Google Hosted Libraries1.4.9219 ms242 ms743 ms0.0 %
jsDelivr1.5.0223 ms312 ms759 ms0.0 %
cdnjs1.5.0359 ms465 ms669 ms0.0 %

まとめ

レスポンス速度としては大まかには

#CDN
1Microsoft Ajax CDN
2Google Hosted Libraries
3jsDelivr
4cdnjs
5jQuery CDN
6BootstrapCDN

の順のような感じです。

配信しているライブラリの数としては

CDN配信数
cdnjs1835
jsDelivr1750
Microsoft Ajax CDN20
Google Hosted Libraries14
jQuery CDN6
BootstrapCDN3

と、 cdnjs や jsDelivr が圧倒的に多いですが、 Bootstrap 用のテーマの Bootswatch は BootstrapCDN しか配信していないのでその場合はそれ一択です。 Google Hosted Libraries の場合は、最新バージョンのライブラリが配信されていないこともあるのでレスポンスはいいですが超憂が必要となります。

おまけ

使いたいライブラリが配信されていない!

また、どうしても CDN を利用したい、でもライブラリがマイナーすぎて CDN で配信されていない、という場合は GitHub でライブラリが公開されている場合に限り RawGit を利用することもできます。

まあ、その他の場合は諦めて素直に自分のサーバーのファイルを参照しましょう。

CDN で障害が起きたら?

参照している CDN で障害が起きた場合は、当然ながら、ページのレイアウトが崩れたりしてしまいます。 基本的にはほとんど問題ないとはいえ、万が一に備えておいて悪くわありません。

方策としては例えば、

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/assets/jquery/jquery.min.js"><\/script>')</script>

と、このような感じで、CDN を参照している script タグの直後に、判定式を書いて、読み込めていないようであれば、ローカルを参照することができます。

また、専用のライブラリ Fallback JS を使ってみるのもいいかもしれません。 ああ、 当然のことながら Fallback JS を CDN から読んではいけませんよ。

参考


   /   変更履歴  /   Permalink  /  このエントリーをはてなブックマークに追加 
 カテゴリ: まとめ  /   タグ: まとめ, CDN, JavaScript, CSS