知らないと怖いキャッシュ対象の選び方〜Web制作/運営の幅が広がるCDNを知ろう第3回〜

CNAMEでCDNを利用している場合のキャッシュ設定について

さて、今回はCNAMEで www.example.jp サイト全体をCDN経由で表示する方法でご紹介します。最も一般的なCDNの利用方法であり、設定次第ではサイトの全ファイルをキャッシュすることが出来る非常に強力な設定方法です。

サイト自体のドメインにCNAMEを設定する時、同じドメイン向きのアクセスは全てCDNのキャッシュサーバを通過することになります。

何もキャッシュがない状態でアクセスが来ると、図のような流れでファイルをオリジンへ取得しに行きます。例えば、キャッシュしない設定のファイルへリクエストが来た場合は、毎回キャッシュサーバからオリジンへ取得しに行き、それをエンドユーザへ配信するという流れとなります。

CDNのキャッシュサーバへアクセスがあった時にサーバで何が起きているかと言うと…

1. リクエストが来た！ファイルはキャッシュサーバ内に無いのでオリジンへ取りに行こう
2. オリジンからファイルを取ってきた。キャッシュ許可、キャッシュ時間30秒って書いてある
3. 以後30秒間のアクセスはオリジンに取りに行かないでキャッシュから配信しよう

となります。この時何をどうすればキャッシュしてくれるのか？というのが1つ目のポイント。今回はウェブアクセラレータの設定方法で見ていきましょう。ウェブアクセラレータではキャッシュON/OFFとキャッシュ時間をHTTPレスポンスヘッダーの設定値で判断します。Apacheの場合は、.htaccessに記載するだけで設定できます。

Header set Cache-Control "s-maxage=3600"

この設定をすると配下のファイルを1時間キャッシュできることになります。

CDNのキャッシュの流れはこのように、CNAMEでキャッシュサーバへアクセスを向ける→キャッシュサーバでキャッシュON/OFF、キャッシュ時間を判断して必要ならオリジンサーバから取ってくる→キャッシュサーバからエンドユーザへ配信する、という流れとなります。

<Files ~ "\.(gif|jpeg|jpg|png|ico)$">
Header set Cache-Control "s-maxage=86400"
</Files>

一方、このように拡張子を指定してレスポンスヘッダーを付加することもできます。画像ファイルを指定してキャッシュする場合は上記のようにすると特定ファイルだけをキャッシュすることができます。ウェブサーバの設定ファイルを利用して自分のキャッシュしたいファイルだけをキャッシュできるようにしっかり理解しておきましょう。

どのファイルをキャッシュすべきか

さて、一番重要なキャッシュファイル選定をご説明します。キャッシュファイル選定により、サイトのパフォーマンスが変わらなかったり、そこまでCDNの効果が実感できなかったりするので慎重に検討する必要があります。

ウェブサイトの構成ファイル
主に、ウェブサイトは以下のファイルで構成されています。

• HTMLファイル（ページ本体）
• 画像ファイルなどのメディアファイル
• CSS、JavaScriptなどのデザイン／プログラムファイル

これは現在サイトのボトルネックがどうなっているのかにもよるのですが、例えばWordPressサイトで考えてみましょう。WordPressは先にも述べていますがCPU処理の負荷が非常に高いCMSです。安価なレンタルサーバなどを利用している場合、レスポンスが悪くなることがあります。

Google Chromeのネットワークツールで、あるサイトのトップページを開いた時の様子です。TTFBと記載されている時間はTime To First Byteの略でサーバからの応答を待っている状態です。この時間ページは真っ白のままになっています。TTFBが短いほどHTMLの読み込みが高速で完了し、次の画像やCSSの読み込みへとすすめるわけで、ページの高速表示にはHTMLページをキャッシュすることが不可欠と判断できます。

なお、Googleではページの表示速度もランキング評価要因とするとしていますが、実際にはTTFBで判断しているわけではなくユーザにとって意味のあるコンテンツが表示され始めるまでの時間が重要だそうです。サーバのスペック（TTFB）とともに、効率的にCSSを記述してページのレンダリングをいかに速くするかというのも重要になります。

逆に、CPU処理は潤沢なリソースでおこなえているし、頻繁に修正して即時反映したいのでHTMLはキャッシュしたくないが、動画コンテンツで帯域を使いすぎているといったパターンの場合は特定メディアファイルだけキャッシュしてCDNへの費用を押さえるというのも選択肢の一つです。この場合、メディアファイルを転送している時間がネットワークツールで確認できます。メディアファイルがボトルネックとなる場合、例えばページのヘッダ画像がなかなか表示されなかったり、重要なコンテンツの表示が遅くなってしまったりということになります。

CDNを利用する上で、ウェブサイトの表示におけるボトルネックを探るのは非常に大切な作業です。これを行わないと、動画で帯域を食いつぶしているのにHTMLだけをキャッシュしてしまったり、逆にHTMLの生成に非常に時間がかかっているのに画像だけをキャッシュしたりと効果のないCDN利用をしてしまう可能性があります。

ウェブサイトで個人情報などを扱っておらず、どのファイルをキャッシュしても問題ないのであれば全ファイルキャッシュが最もおすすめです。オリジンの負荷が格段に下がり、サイトのパフォーマンスは向上します。（デメリットは前回挙げている通りです）

キャッシュしてはいけないファイル

前項のデメリットの項目でご説明していますが、いつ何時でも、絶対にキャッシュしてはいけないファイルがあります。それが、個人情報が記載されたファイルです。

具体的には、会員情報などを保有しているサイトの会員情報確認画面や、発送先の住所、購入した商品が記載された購入確認画面などがこれにあたります。CDNではレスポンスヘッダーに指定の値があるかどうかでキャッシュON/OFFを判断しますので、たとえ個人情報が記載されていようが、HTMLファイルをキャッシュする設定があればキャッシュし、次にサイトを見に来たお客さんへ同じファイルを配信します。その結果、例えば自分の前にそのサイトで買い物をした、もしくは自分の登録情報を閲覧した人が見たHTMLがキャッシュのまま配信されてしまう可能性があります。

WordPressを使ったサイトで個人情報を扱っていない場合は特に気にせず全ファイルキャッシュしても構いませんが、/wp-admin配下を除外するなどするとコンテンツ編集時にキャッシュが見えてしまうといったことが無くなります。また、WordPressはログインして閲覧していると強制的にレスポンスヘッダーに Cache-Control "no-store" を自動挿入する機能がありますので、適切にレスポンスヘッダーを読んでいるCDNではキャッシュ対象から除外されます。

ただし、過去の経験でプラグインやテーマカスタマイズの過程で上記設定が消えてしまったこともあるので、念の為/wp-admin配下を除外する設定は入れておくことをおすすめします。

ユーザに応じて出し分けるファイル

タイトルが若干わかりにくいですが、UserAgentなどでPCとスマホに違うHTMLを同じURLで表示している場合、CDNを通すと一度キャッシュされたどちらかのファイルが全端末に配信されます。例えば、キャッシュがない状態でスマートフォンユーザが訪問しスマートフォン向けのHTMLがキャッシュされると、次にPCの人が来てもUserAgent判別する機能がCDNに無ければスマートフォン向けのHTMLが表示され続けてしまいます。

これは仕様として諦めるしか無いので、CDNを利用したいサイトのデザインはレスポンシブウェブデザインにすることをおすすめします。