CDNでWEBサイトを高速化！CDNを利用する場合のメリットとデメリット

Minory コメントを残す
cdn

近年、特にスマホなどの回線の細い端末では、高速化することが重要視されるようになり、CDNの存在がが広まって認知されるようになってきています。
私もCDNを利用する機会が増え、WEBサイトの高速化だけでなく開発が少し楽になったと感じています。
今回はCDNの基本的な使い方とメリット、デメリットを紹介します。

CDNとは？

まず、CDNとは何なのかを引用して説明します。

コンテンツデリバリネットワーク(英: content delivery network、CDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。

引用：コンテンツデリバリネットワーク – Wikipedia
(左) 単一のサーバーによる配信
(右) CDNによる配信

要するに、皆さんがよく使うJavaScriptの「jQuery」やCSSの「Bootstrap」などは、ダウンロードしてサーバーにアップしてから利用していたと思いますが、CDNはこのようなライブラリやプラグインを共通のサーバーに置いておくから、ダウンロードせずにインターネット経由で直接使ってね！ってことです。

よく利用されているCDN

cdnjs
class="fa fa-external-link external-icon anchor-icon">
ライブラリがものすごく豊富でよく利用しています。
使いたいものはほぼ何でも揃っているので1番のオススメです。
Google Hosted Libraries
class="fa fa-external-link external-icon anchor-icon">
jQueryのCDNはGoogleを利用する人が多いようです。
ただ、種類は豊富ではないです。
Microsoft Ajax CDN
class="fa fa-external-link external-icon anchor-icon">
マイクロソフトもやってました。
この中で1番レスポンスが良いようです。
jsDelivr
class="fa fa-external-link external-icon anchor-icon">
cdnjsにない場合にたまに利用しています。
Google Fonts
class="fa fa-external-link external-icon anchor-icon">
Googleのウェブフォントです。
フォントはかなり重たいので、キャッシュさせると高速化の効果がすごく高いです。
jQuery CDN
class="fa fa-external-link external-icon anchor-icon">
jQueryの本家です。
本家なのにレスポンスが悪いようです。
Bootstrap CDN
class="fa fa-external-link external-icon anchor-icon">
Bootstrapの本家です。
Bootstrapだけでなく、Font Awesomeも利用することがあります。

CDNの使い方

CDNを利用しない場合

CDNを利用せずにサーバーにアップした場合は以下のようになりますね。

<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

CDNを利用した場合

CDNを利用する際は以下のように直接URLを書きます。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

書き方の注意点

URLを記載する際には、http:やhttps:を外しましょう。
何故かと言うと、以前これでハマった経験があるのですが、例えばSSLで保護されているページ（https）に保護されていないコンテンツのURL（http）を読み込もうとするとブラウザのセキュリティが危険を察知して読み込まないように制御するようです。
※ローカルでサーバーを介さずに表示する場合には必要です
あと、ネットワーク制限で外部コンテンツの読み込みを許可していない場合もCDNは利用できません。

なぜCDNを利用するのか？

ざっくりですが、CDNのメリットとして以下のようなことが挙げられます。

1. 高速化が期待できる
一度読み込んだライブラリはブラウザがキャッシュしてくれますので、次に同じWEBサイトを読み込む場合はもちろんのこと、他のWEBサイトでも同じURLから読み込んでいるライブラリがあれば、キャッシュを参照するので高速化します。
2. 手間がかからない
ファイルをダウンロードしたり、サーバーにアップロードする手間が省けるだけでなく、バージョン管理やバグ対策なども容易になります。
3. サーバーの容量削減（おまけ）
使用するライブラリをサーバーにアップロードしなくていいので、容量の削減に繋がります。
（大したファイルサイズではありませんが…）

CDNを利用した場合のデメリット

はっきり言ってデメリットはありません！
よくインターネットで目にするデメリットを例に解決していきます。

外部URLから読み込むと遅いのでは？
そもそもCDNは前述の通り、「ウェブコンテンツをインターネット経由で配信するために最適化」されていますので、そこら辺の安いサーバーよりよっぽど高速です。
CDNがダウンして読み込めなくなったら？
よく耳にしますが、声を大にして言いたいです。
Googleとあなたのサーバー、どちらが信用できます？
自論ですが、そこら辺のサーバーよりよっぽど安全です。
大手のサーバーで優秀なエンジニアがトラブルが発生しないように管理しているから。
もう一つの理由は、セキュリティも然ることながら、攻撃しても何のメリットもなさ過ぎる。
損する人はいても得する人は誰も居ないので、利用者も含め暗黙のルールとして守ってるんじゃないかとさえ感じます。
どうしても不安な方は、下記のような2段構えにしましょう。

CDNが利用できない場合の対策

場合によってはサーバー側でネットワーク制限をする場合があります。
万が一jQueryが読み込めなかった時の対策です。
一旦、CDNを読み込んで、jQueryが使えなかった場合にローカルのファイルを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
    (window.jQuery || document.write('<script src="js/jquery.min.js"></script>'));
</script>


Amazonベストセラー

Now loading...


返信を残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA