CDNを使う際のポイント
そもそもCDNとは
CDNとは、Contents Delivery Networkの頭文字を取ったもので、インターネット上でサイズの大きなもファイルや、よく使うファイルを事前にアップロードしておき、必要に応じて取り出して使う技術の総称又は、それに使うサーバの事を指します。
WEBページやWEBアプリケーションを作成する際に、HTMLファイルや画像ファイル、各種スタイルシートやスクリプトなど、様々なファイルが対象になるのですが、特にオープンソースやパブリックドメイン系のファイルには多用されています。
例えば、jQueryを使う場合
jQueryを使う場合、jQueryの本家サイトから最新のjquery-1.11.1.min.jsをダウンロードし、htmlファイルの中でこのスクリプトを読み込んで使います。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページタイトル</title> </head> <body> <!-- コンテンツ --> <!-- jQueryを読み込み --> <script type="text/javascript" charset="UTF-8" src="js/jquery-1.11.1.min.js"></script> </body> </html>
このサイトにユーザがアクセスした際、そのWEBサーバは、ページのhtmlファイルと共に、ページの中で読み込まれている画像やファイルも一緒にHTTPプロトコルで送出します。上のコードの場合、jquery-1.11.1.min.jsも送出されます。
インターネットに公開しているサイトであった場合、何百、何千、何万という数のアクセスが同時に発生し、サーバの処理が徐々に重くなる事があります。
そのため、jQueryでは、スクリプトを共有のサーバに格納し世界に公開してくれています。WEBサイトの制作者はそのサーバのスクリプトを直接読み込むことで、自分のWEBサーバの負荷を少しでも軽くする事が出来るのです。
<!-- CDN上のjQueryを読み込み --> <script type="text/javascript" charset="UTF-8" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
当然、その公開されたCDNサーバがダウンすると、たとえ自分のWEBサーバが正常でもjQueryを使う事が出来なくなってしまうデメリットはありますが、当然、全世界の人が使うサーバなので負荷や障害を起こさないよう多重化/強化されています。少なくとも、通常の共有型のホスティングサーバよりは耐性があります。
どのCDNを使うか
インターネットでCDNサービスを展開しているサーバを検索すると、Google CDN、Bootstrap CDN、Open Source Software CDN、Microsoft CDN、CDNJS CDN、jsDelivr CDNなど、ユーザとして使うのには無料のものが沢山あります。
では、数あるCDNホストの中から何を根拠に何を選べば良いのでしょうか？
まず優先すべきはサーバのレスポンス
CDNの目的は、自分のWEBサーバの負荷を他のサーバに肩代わりしてもらい、最終的に短時間でページを表示する事が第一の目的です。自分のサーバの負荷が減りレスポンスが改善しても、他のサーバのレスポンスが遅ければ、トータルではマイナスの結果になってしまいます。
jQueryの場合
jQuery UIの場合
jQuery Mobileの場合
MooToolsの場合
Bootstrapの場合
FontAwesome(CSS)の場合
FontAwesome(TTF)の場合
上記の画像は、念のためブラウザのキャッシュ等を毎回削除し、テストした結果ですが、ブラウザやネット環境に依存するため、各自の環境で何度かテストを行い、その平均などから答えを導くことをお勧めします。
人気のCDNでキャッシュ効果を活用
例えばjQueryを使用しているAサイトとBサイトを訪れた際、それぞれのサイトで使われているjQueryのパスやファイル名が全て一致する場合、ブラウザのキャッシュを利用する事ができます。インターネット上からダウンロードする必要がなくなるので、非常に速い表示が出来るようになります。
// 例えば最初にAサイトを訪問 // AサイトではjQueryをCDNを使わず、ローカルに設置していた <script type="text/javascript" charset="UTF-8" src="js/jquery.min.js"></script> // キャッシュは利用されない // 次にBサイトを訪問 // BサイトではGoogleCDNを使用していた <script type="text/javascript" charset="UTF-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> // キャッシュは利用されない // 更にCサイトを訪問 // CサイトでもGoogleCDNを使用していた <script type="text/javascript" charset="UTF-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> // キャッシュは利用される(新たなダウンロードは発生しない)
上記を考慮したおすすめCDN
レスポンスが早くても、他のサイトで使われていなけれな、キャッシュを使う事が出来ず、毎回ダウンロードしなければなりません。
逆に、他のサイトでよく使われていても、レスポンスが悪いと人によって遅くなってしまうという相反する2つのバランスを取る必要があります。
| Google CDN | Bootstrap CDN | OSS CDN | Microsoft CDN | CDNJS CDN | jsDelivr CDN | jQuery CDN | |
|---|---|---|---|---|---|---|---|
| jQueryを使う場合 (Library) |
◎ 人気 |
- | ○ 早い |
○ そこそこ早い |
○ 本家/少し遅い |
||
| jQueryUIを使う場合 (UI Framework) |
○ 人気/遅い |
- | ○ そこそこ早い |
○ 早い |
△ 本家/遅い |
||
| jQueryMobileを使う場合 (UI Framework) |
◎ 人気/早い |
- | 少し遅い |
○ 本家 |
|||
| MooToolsを使う場合 (Library) |
◎ 本家推奨 |
- | - | - | |||
| Bootstrapを使う場合 (Framework) |
- | ○ 本家推奨 |
非推奨(※1) |
○ 早い |
- | - | |
| FontAwesomeを使う場合 (WebFont) |
- | ○ 本家推奨 |
非推奨(※1) |
- | 遅い |
○ 早い |
- |
| Prototypeを使う場合 (Library) |
○ 人気 |
- | - | ○ 早い |
- |
FontAwesomeを使う時の注意点
とあるサイト制作をしていた時、サイト内でjQuey、Bootstrap、FontAwesomeなど複数のCDNを使用しなければならず、DNSキャッシュを有効活用しようと、それを全てまとめてOpen Source Software CDN (OSS CDN)に統一したことがあったのですが、どうしてもFontAwesomeにおいてアイコンフォントが表示されない事態が発生。
長い時間かけて調査した結果、同サイトから配信される各種ファイルのHTTPレスポンスヘッダーのAccess-Control-Allow-Originが、「*, *」になっていて、Cross-Origin Resource Sharing (CORS)の制限に引っかかっているのが原因の模様。
ブラウザによってCORSの対応状況が違うため、フォントが表示されるブラウザもありますし、表示できないものもあります。当環境では最新のFirefoxで表示が出来ませんでした。
この問題に対し専用の対処をすれば、解決する事も可能だとは思うのですが、それよりも実績のあるCDNが多数ありますので、今回は該当CDNを非推奨とししました。