世の中には有名なjavascriptライブラリなんかをサーブしているパブリックなCDNというものがあります。例えばjQueryを例に挙げると、Google, やMicrosoft、それにjQuery本家(?)のCDNなんかが有名ですよね。その他にもちょっとマイナーになりますがjsdelivrcdnjsなんかもありますね。

では、どのCDNを私達は使うべきなんでしょう。人気だけで言えばネームバリューの信頼感からかGoogleのCDNがダントツでしょうね。でも個人的にはjsdelivrがオススメです。それはナゼか。

大は小を兼ねる

jsdelivrはたくさんのライブラリをサポートしています
現在は1004プロジェクトがホストされています

CDNとしての性能を考えるとどれも「どんぐりの背比べ」だと思います。どのCDNも(少なくとも日本からのアクセスにおいては)十分に高速だし、キャッシュの設定もgzipもhttpsも当然対応しているし、ダウンタイムも誤差みたいなもんです。ですから、これらのCDNの大きな違いはネームバリューとホストしているプロジェクトの数のように思えます。例えばjQuery本家のCDNは当然jQueryとその姉妹プロジェクトのみホストされています。GoogleのCDNはjQuery本家CDNよりはホストされているプロジェクトが多いですが、それでも一握りの人気ライブラリのみのサポートとなります。MicrosoftのCDNはGoogleよりは多いですが、やはり大多数の人気ライブラリはホストされていません。ですが、知名度こそ劣るjsdelivrやcdnjsといったコミュニティベースのCDNはユーザーが登録する形になっているので、何百ものプロジェクトがホストされています。膨大なプロジェクトがサポートされているので有名どころのjqueryプラグインやフレームワークはほぼカバーされているのではないでしょうか。

Make the Web Faster

例えばBootstrapを例にして考えます。Bootstrapの公式ではパブリックなCDNとしてBootstrap CDNがオススメされています。ところが、BootstrapのjavascriptはjQueryに依存しているにもかかわらずBootstrap CDNではjQueryがホストされていません。公式のサンプルを見たらGoogleのCDNから読み込んでいます。折角CDNで高速なウェブを目指しているはずなのに、わざわざリクエストを飛ばすドメインが1つ増えてます。(Google曰く、「DNSルックアップは最小化しろ」とのお達しに反します。) さらに、CDNに起因する障害発生の確立も上がるわけですし、分散させてもいいことなんて無いわけです。そういう意味でCDNの恩恵をより受けようと思うとjQuery本家のCDNのように小さな塊のCDNよりも、jsdelivrやcdnjsのような大きな塊のCDNのほうが扱いやすいわけですね。まさしく「大は小を兼ねる」わけです。

ちなみにcdnjsよりjsdelivrをオススメするわけですが、jsdelivrのほうが機能が豊富に見えたからです。例えばGoogleのCDNのようにバージョンの別名(?)が使えます。

//cdn.jsdelivr.net/{projectName}/latest/{file}

You can also load latest versions per branch:

//cdn.jsdelivr.net/{projectName}/3.8/{file} Latest in 3.8 branch

//cdn.jsdelivr.net/{projectName}/3/{file} Latest in 3 branch

To automatically load the main file of a project use:

//cdn.jsdelivr.net/{projectName}/{version}/mainfile

ただ、これらのファイルはキャッシュ期間が短いですし、プロジェクトの仕様変更で動かなくなるかもしれないから気軽には使いにくいですけどね。

あと、複数のファイルが一回のリクエストで取得できます。

To combine multiple files enter the relative paths to all files you want to load inside brackets () separated by a plus + symbol. Brackets can be encoded as %28 and %29 without issues.

Load multiple files from multiple projects:

//cdn.jsdelivr.net/g/[email protected],[email protected](angular.min.js+angular-resource.min.js+angular-animate.min.js+angular-cookies.min.js+angular-route.min.js+angular-sanitize.min.js)

外部ファイルをまとめるのはGoogleも推奨してますよね。他のサイトでのキャッシュが効きにくいという面もありますが、リクエスト数が一気に減らせるのは魅力的ですね。ただ、この機能には問題があって、相対URLで指定してあるウェブフォントのCSS(Font-AwesomeとかBootstrapとか)がうごかなくなります。

適材適所?

ここまでjsdelivrをプッシュしてきたわけですが、jQueryだけ利用するようなページではGoogleのCDNを使った方が既にブラウザにキャッシュされていることが期待出来る分、よりCDNの恩恵を受けると思われますね。まあ、でもnormalize.cssとかhtml5shivとか読み込むわけだから、やっぱり私的にはjsdelivrが今のところ一番よさげですね。