CDNとJavaScriptライブラリの読込みの高速化
《 初回公開：2022/08/21 , 最終更新：未 》
CDNは大雑把に言うと、スループットを改善した配信サーバー群。
これを利用するとjQuery等の著名なJavaScriptライブラリの読込みを高速化できる。
【 目次 】
CDNとは
CDN - Content Delivery Network（コンテンツデリバリーネットワーク）
コンテンツ・デリバリー・ネットワーク（CDN）は、地理的に分散されたサーバーグループであり、コンテンツをユーザーの所在地に近づけることで Web コンテンツの配信をスピードアップします。
ユーザーが近くのサーバーを通じて Web 対応デバイスまたはブラウザーからインターネットコンテンツにアクセスできるようにするために、世界各地のデータセンターでキャッシング（一時的にファイルのコピーを保存するプロセス）が使用されます。
CDN では、Web ページ、画像、動画などのコンテンツがユーザーの物理的所在地に近いプロキシサーバーにキャッシュされます。
これによりユーザーは、映画を見たり、ソフトウェアをダウンロードしたり、銀行口座の残高を確認したり、ソーシャルメディアに投稿したり、何かを購入したりするときに、コンテンツが読み込まれるのを待たずに済みます。
CDN は ATM のようなものと考えることもできます。実際、あらゆる街角に現金自動預払機があれば、すぐに効率的に現金を得ることができます。
便利でアクセスしやすい多数の場所に ATM が配置されていれば、銀行で長時間順番待ちをする必要はありません。
CDN サービスは、グラフィックや動画などのリッチ Web コンテンツをインターネットで配信することで生じるネットワーク輻輳の問題（交通渋滞のようなもの）を解決するために創り出されました。
中央に配置されたサーバーから個々のユーザーにコンテンツを配信するのでは時間がかかり過ぎます。
今や CDN は、テキスト、グラフィック、スクリプト、メディアファイルから、ソフトウェアダウンロード、ドキュメント、ポータル、e コマース、ライブ・ストリーミング・メディア、オンデマンド動画ストリーミングメディア、ソーシャル・メディア・サイトなど、あらゆるものを網羅するまでに成長しました。
CDN を使用すれば、分散サービス妨害攻撃（DDoS）などの攻撃者やセキュリティ上の懸念に対する強力な防御を Web サイトに提供することもできます。
ところがCDN、実はとても身近なところで使われているのです。
そう、今お使いのパソコンのWindows UpdateやスマートフォンのOSアップデートで利用されています。
...
最高負荷の日に合わせてサーバやネットワークを用意すると、低負荷の日も最高負荷に備えたサーバを運用する必要があるので非常にコストがかかります。
この場合のコストとは、電気代や回線代からサーバの保守費用、有償OSを使っている場合はそのライセンス費用などですね。
1台のサーバには実にたくさんのコストがかかります。
そこで、最高負荷の日だけサーバとネットワークを借りられたらどんなに楽だろう！というニーズに応えたのがCDNです。
...
CDNは簡単に言うと負荷を肩代わりしてくれるレンタルサーバのようなものです。
CDNとは、コンテンツデリバリーネットワークの略で、大容量のデジタルコンテンツをインターネット上で大量配信するためのネットワークのことです。
従来、サイト上で大容量のデジタルコンテンツを公開する場合、アクセスが集中した際はコンテンツをのせているWebサーバーがダウンしたり、ネットワークに過剰な負荷がかかってしまう問題がありました。
CDNではそういった問題を解決するべく、大量配信や高速配信に耐えうるような最適化が施されています。
...
CDNによってキャッシュを運営側のサーバーではなく、専用のキャッシュサーバーに割り振ることで、サイトのレスポンスの高速化に役立てることができます。
CDNを使うメリット
- サーバーやネットワークの負荷を軽減できる
- サーバーのレスポンスを改善できる可能性がある
CDNを使うデメリット
- ファイルの更新が遅れる場合がある
- 設定を誤ると「キャッシュ事故」が起きる
- アクセスログを取得できない可能性がある
CDNの利用によるJavaScriptライブラリの読込みの高速化
CDN （Content Delivery Network、コンテンツ配信ネットワーク）は、様々な地域に分散されたサーバーの集まりです。
これらのサーバーは同じ内容のデータのコピーを保有し、各ユーザーに最も近いサーバーからデータへの要求に応えることが可能になっています。
CDN は通信量の影響を受けにくい高速なサービスを実現します。
CDN は、 Bootstrap や jQuery など、スタイルシートや JavaScript ファイル（静的ファイル）からなるライブラリを配信するために広く用いられています。
これらのサードパーティライブラリの配信に CDN を用いることが有効な理由はいくつかあります。
- ライブラリのような静的なファイルを CDN から配信することで、サーバーへの要求負荷を軽減します。
- ほとんどの CDN は世界中にサーバーを配置しています。 そのため、自分のサーバーよりも CDN のサーバーの方が地理的にユーザーの近くに位置しているかもしれません。 地理的な距離は応答時間に比例的に影響します。
- CDN には適切なキャッシュ設定が適用されています。 CDN を使用すると、自分のサーバーに静的ファイルを配置するための設定を行う手間を省くことができます。
多くの便利なJavaScriptライブラリがCDNを利用して配信されています。自前のサーバーにそのライブラリをコピーして配信するよりも、CDNを使った方が高速にライブラリを配信できます。
...
CDNを使うと、複数の地域に配置されたサーバーを利用して、各ユーザーに最も近いサーバーからそのデータを取得します。
CDNのリスク
- サービスが突然終了してしまうことがある。
- セキュリティ(第三者によるコードの改ざん)
ハッシュ値を使ってコードの改ざんをチェック。
このように、CDNからライブラリを取り込む際、integrity属性を指定しておくことで、攻撃者によるライブラリ改ざんをチェックできます。
CDNをするしないに限らず、ライブラリの改ざんチェックができますので普段から指定することをオススメします。
なお、integrityに何を指定したら良いか分からない場合には、SRI Hash Generatorというツールがあり、Web上に配置したJavaScriptのintegrity値を計算して表示してくれます。
無料でCDNを利用
jsDelivrやunpkgというサービスを利用すれば、自作のライブラリをCDNを通じて配信できます。
CDNのJavaScriptライブラリ
- JavaScriptライブラリはCDN使ったほうが便利だし早いっていう話
- ASP.NET 開発者以外にもおススメしたい Microsoft Ajax CDN - しばやん雑記
Query プラグインが Microsoft Ajax CDN の方が充実しているのに対して、JavaScript フレームワークが充実しているのが Google Hosted Libraries ということになりますね。
配信されているライブラリには差がありますが、jQuery と jQuery UI は双方で配信されているので、好きな方を選んで使うことができます。
主要なJavaScriptライブラリのCDNは
大手なので安心感はあるが配信されているライブラリの数が少ない
配信されているライブラリの数が多い