CDNでキャッシュ促進でサイト高速化とデメリット解説

こんにちは、オトナ帝国です。

今回はCDNについて記載していきたいと思います。この記事をご覧いただいている皆さんは、当然多くのサイトで、CSSやJSについて調べていることが多いと思います。

そしてその度にたまに見かける言葉があります。そうCDNと呼ばれる言葉です。そして、、「CDN・・・怖い・・DLして使おう」「よくわからないけどCDNでいいや・・・」と。

CDNはインターネット界のインフラ

サイトの閲覧というのはユーザーによるファイルの読み込みです。必要な読み込みが100だとすると、毎回100読み込んでいるわけではありません、

そうキャッシュの存在があるからです。※お金ではないです。

このキャッシュがあることで、事前に30ぐらい読みこんだ状態になります。そうすると実質70の読み込みでいいわけです。

読み込む量が少ない＝Webページのユーザー体感スピードが速くなるわけです。

で、このキャッシュ、基本的にサイトごとにキャッシュは蓄積されます。オトナ帝国サイト上のキャッシュはオトナ帝国サイトでキャッシュされるわけです。

ですので、初めてオトナ帝国サイトにアクセスした場合には、ノーキャッシュ状態になるわけです。

しかし、ここでCDNがあると、どうなるか。

例えば全然関係ないサイトを見ていて、そこでもCDNを読み込んでいた場合、CDN分キャッシュされるということになります。

つまり、インターネット界の共通コンテンツであり、インフラということになります。

ゆえにContent Delivery Networkという名称になわけです。略してCDN、格好いいですね。

CDNは最強であるが、最恐でもある

ここまでCDN最強を謡ってきましたが、実は諸刃の剣です。そしてそもそもキャッシュというのにはデメリットもあるわけです。

キャッシュはいいやつだけど、癖もあるやつ

キャッシュはユーザーのデバイスの容量も食うし、サイトを更新した際に反映されないこともあるんですね。特に後者については皆さんも実感することが多いのではないでしょうか

サイト改修がうまく反映されていない・・・ってやつです

Webサイトで改修を行う、確認する、変わってない・・・なんでやねんってときありませんか？

もちろん、自分で作ったものがそもそも間違っているケース、これは許せるのですが、キャッシュの問題であることもしばしばあって、スーパーリロードやシークレットウィンドウで開くと映るみたいな・・・

許せぬ、、キャッシュという感じで、時に怒りの感情さえ沸いてしまうものです。

で、これって制作側はシークレットウィンドウとかで乗り越えればいいんですけど、ユーザーサイドはそうもいきません。

ですので、リリースした後、ユーザーによっては前のサイトの状況で描画されてしまっていたりして、困ったことになります。

インフラはたまに壊れる

CDNというのは、あくまでCDNサーバーという立ち位置で外部の機能であります。つまりCDNはこちらの事情とは関係なく、バグったり落ちてしまったリスる可能性があります。

CDNがバグを起こすと、読み込んでいるこっちも巻き込まれて崩れるみたいなこともあります。

ただ、CDNですが、最近はそんなにバグるってこともないように思います。それにそこまで言い始めると、、そもそもインターネットだって通信環境だって100％ではないわけです。

それにCDNが落ちる時は、他の影響も大きいことが多く（そもそも通信ができないレベルの大事故）、こちらで解決できることなんてない、復旧を待つしかないわけです。

そう考えるとこっちの問題は、考えてもしょうがないことかと思います。やはりキャッシュの方がデメリットと捉えることができると思います。

CDNの使い方

では、どういうものをCDNで読み込むべきなのか、の考え方についてです。

まずアクセス頻度が高いサイトでは、改修後にキャッシュによってユーザーが表示しにくいみたいな状況が起きやすいでしょうね。その中でも変更頻度が高くなりがちなところは余計にその対象になりますね。

逆に個人のブログサイトのアクセス規模や変更がそんなにないページ・領域ではあまり気にしなくてもいいのかもしれません。個人的にはフォント（あとから変えることが少ない）はCDNでもいいのかな、と思うことが多いです。

プラグイン系はDLして使うことにしています。多少なりとも自サイトで動かすのにカスタマイズすることも多いので。

なので、実はフォント系以外ではCDNを使っていません、自分の今の哲学の中では。

例えば新しいライブラリーを使ってみたいときには、最初の動作確認はDLする前にCDNでとりあえずやって、そのあとにDLして差し替える、みたいな運用をしていることが多いですね。

ちなみに本当にキャッシュがあるとまずい、ユーザー操作がしにくい場合は下記のようなmetaタグで改修するケースがあります。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

ただ、キャッシュがない、というのもユーザーにとってサイトが重くなることにもつながることを考えると運用は考え物です。

最後に

今回はCDNについて記載してみました。みなさんも個人でサイト作る際によく出てくるCDN、結局あれこれ書いていますが、結構ポリシーというか好みでもいいかなと思います。

ただなんとなくこういうものなんだな～って認識のお役に立てれば幸いです。

それでは～★

---

---