本サイトをCloudFront経由の配信に切り替えてから久しいのですが、なかなかキャッシュヒット率が向上しないのが悩みの種でした。
バラツキはありますが、通常の日で5～7%程度。
これではCDNを経由している意味がない、ということで見直してみることにしました。
目次
調整前の設定
まず、調整前の当サイトの基本設定を書いておきます。
CloudFront Behaviors設定
こんな感じにしていました。
| Path Pattern | Forward Headers | Object Caching | Forward Cookies | Query String Forwarding and Caching |
|---|---|---|---|---|
| /wp-admin/* | Whitelist (User-agent) | Customize (0/0/0) | All | Forward All, cache based on all |
| *.php | Whitelist (User-agent) | Customize (0/0/0) | All | Forward All, cache based on all |
| Default(*) | Whitelist (User-agent) | Use Origin Cache Headers | All | Forward All, cache based on all |
管理画面(wp-config/)以下とphpファイルはキャッシュしないように、その他はOriginにて付与したヘッダ情報に依存する設定です。但し、ユーザエージェント及びCookieがキーになってしまうため、これではヒット率が低下してしまうのは自明かと思います。
Originサイト(Apache)設定
以下のような設定を入れています。
条件に合致した拡張子の時のみ、CloudFrontに2日間／ブラウザキャッシュに7日間有効とする設定です。
<FilesMatch "\.(jpe?g|gif|png|css|js|ico)$">
Header set Cache-Control s-maxage=172800,max-age=604800
</FilesMatch>
ユーザエージェント判定をCloudFrontに任せる
AWSが出しているWordPressサイトのベストプラクティスガイド(WordPress: Best Practices on AWS)では、ユーザエージェント判定をCloudFrontに任せることが推奨されています。
解説
CloudFrontはアクセスしたユーザのユーザエージェントを判定し、以下のヘッダにtrueあるいはfalseの値を付与します。
| ・ HTTP_CLOUDFRONT_IS_DESKTOP_VIEWER | PCのブラウザの場合はtrue |
| ・ HTTP_CLOUDFRONT_IS_TABLET_VIEWER | タブレット端末の場合、true |
| ・ HTTP_CLOUDFRONT_IS_MOBILE_VIEWER | スマートフォン/携帯電話等の場合、true |
| ・ HTTP_CLOUDFRONT_IS_SMARTTV_VIEWER | スマートテレビの場合、true |
アプリケーション側ではこれらのヘッダを参照し、動作を変えることでレスポンシブデザインにすることができます。
そして、これらのヘッダのみをOriginに転送するようにすることで、多様な内容であるユーザエージェントのヘッダを転送する必要がなくなり、ユーザエージェントのヘッダがキャッシュ判定のキーになることが防がれるため、キャッシュヒット率の向上が期待できます。
モバイル判定ロジックの変更
Simplicity2
以下の記事を参考に、mobile.phpの記述を変更しました。
CloudFrontの設定修正
CloudFrontのBeheviers設定を修正し、Default(*)のの際のみ、User-agentの転送を止め、CloudFront-Is-Desktop-Viewerヘッダの転送を行うようにしました。
なお、管理画面(wp-admin/)ではUser-agentの転送を止めるとビジュアルエディタが利用できなくなる不具合がありましたので、引き続き転送を継続することにしました。
Forward Cokkieを調整する
以下記事を参考にしました。
なるほど、要するにGoogleAnalyticsがユーザにユニークなキーを発行してしまいCloudFrontにキャッシュできなくなってしまうため、GoogleAnalyticsのCookie以外をWhitelistに登録すれば良いということですね。
但し本サイト（というかWordPress及びテーマにて）配布されているCookie情報がわからない・・・ ChromeのEditThisCookie等を活用して自前で調べないとダメかなぁ・・・ と考えていたところ以下の情報を発見。
Whitelist Cookiesには
wp-settings*
wordpress_logged_in*
の2つを入れておけば大丈夫です。
素晴らしい、これを採用してみます。
なお、管理サイト(wp-admin/)ではログインできなくなる不具合が発生したため、（どうせ管理サイトはキャッシュさせないことが望ましいので）フロントサイトのみに適用しました。
設定内容
調整の結果、以下の設定となりました。
CloudFront Behaviors設定
| Path Pattern | Forward Headers | Object Caching | Forward Cookies | Query String Forwarding and Caching |
|---|---|---|---|---|
| /wp-admin/* | Whitelist (User-agent) | Customize (0/0/0) | All | Forward All, cache based on all |
| *.php | Whitelist (CloudFront-Is-Desktop-Viewer) | Customize (0/0/0) | All | Forward All, cache based on all |
| Default(*) | Whitelist (CloudFront-Is-Desktop-Viewer) | Use Origin Cache Headers | Whitelist (wordpress_logged_in*,wp-settings*) | Forward All, cache based on all |
結果
設定変更から時間が経ちましたが、以下の通り、概ね20～30%程度までヒット率が上昇したことを確認しました。
今後アクセスが増加すれば、MissesとHitsが逆転する程度までヒット率が上昇するものと思われます。
補足：完全レスポンシブについて
当サイトではSimplicty2テーマの完全レスポンシブ機能を有効にしていますが、完全レスポンシブ設定を無効とした際はユーザエージェントでの判定を行う、との記述があります。
もしやユーザエージェントのヘッダ転送は不要なのでは？と思いUser-agentヘッダのOrigin転送を止めてみましたが、結果はうまくいきませんでした。
それなりに表示はされるものの、ヘッダ画像サイズ調整やモバイル用広告の出し分け等、適切でない動作が散見されました。完全レスポンシブ設定時にもユーザエージェントによる判定が行われているのですね。
コメント
[…] CloudFrontのキャッシュヒット率向上方法 […]