CDNとは？メリット・デメリットを調べてみた！CSSやJavaScriptライブラリはどう読み込む？

よこのじ（@yokonoji_work）です。

jQueryやBootstrapを利用していると、CDNにはお世話になっているかと思います。

CDNを使わない方法もありますが、CDNを利用することでWebページの表示速度が速くなるなどのメリットがあります。

逆に、場合によっては致命的な欠点ともなり得ることもありますので、メリットとデメリットを知って適切にCDNを使えるようになりましょう。

CDNとは？ CDNの仕組みを知ろう

CDNとは、Content Delivery Network（コンテンツデリバリネットワーク）のことです。

世界中に設置されたサーバーからユーザーにHTML、画像、CSS、JavaScriptファイルなどのコンテンツを届けることができる仕組みとなります。

ユーザーからサーバーにコンテンツが要求されるとユーザーに最も近いサーバーからデータが転送されますので、単一のサーバーからの転送よりも高速化されます。

この図のように、CDNは元となるオリジンサーバーとユーザーの中間に位置します。

CDNサーバーはオリジンが持つデータをキャッシュ（コピー）しておき、ユーザーから要求があった場合に最適なルートで応答します。

CDNについては、IBMのYouTube動画を見ればサクッと理解できるかと思います（自動翻訳の日本語字幕を表示できます）。

CDNを利用するメリットは大きいです。

例えば、あなたがあるサイトでGoogleが提供するCDNからjQueryを読み込んでいた場合、そのデータはあなたのブラウザにキャッシュされています。

そして、このサイトでもGoogleのCDNからjQueryを読み込むように設定しています。この場合、別サイトですでに読み込んだjQueryがありますので、改めて読み込むことなくそのまま利用できます。

このように、キャッシュデータを再利用することができるようになるので、サイトの表示が速くなります。よって、CDNは広く利用されている提供元を選ぶべきと言えます。

使用しているテーマにもよりますが、WordPressはjQueryの配信を自前サーバーから行うことが標準となっていますが、本サイトではGoogleのCDNを利用するようにカスタマイズしています。詳しくは下記の記事へ。

コンテンツを自身が持つサーバー以外から読み込むので、自前サーバーの通信量を減らすことができます。

サーバーの負荷が軽減されれば障害が起こりにくく、他のファイルを高速で転送できるようになります。

このように、CDNを利用することはサーバーコストを抑えることと、安定したWebサイトを運営することに繋がります。

2に関連しますが、サーバー負荷が軽減されるということはネットワークやサーバーに負荷をかけるDoS攻撃などの悪意に強くなります。

利益を生むサイトにおいては停止＝損害なので、CDNを利用するメリットは大きいですね。

デメリットとしては、外部サービスであるCDNへアクセスが集中してCDNの応答が悪くなるなど、CDN側の障害によりWebサイトが停止するといった不具合の可能性はあります。

しかしながら、CDNは複数のサーバーから成るもので障害には強いですし、サーバー構築のプロが提供するサービスですから、個人レベルでのWebサイト運営においてはそれほど気にする必要はないかと思います。

[itemlink post_id=”3087″]

[toggle title=”参考サイト”]

[/toggle]