CloudFrontのキャッシュヒット率向上方法

本サイトをCloudFront経由の配信に切り替えてから久しいのですが、なかなかキャッシュヒット率が向上しないのが悩みの種でした。

バラツキはありますが、通常の日で5～7%程度。
これではCDNを経由している意味がない、ということで見直してみることにしました。

調整前の設定
1. CloudFront Behaviors設定
2. Originサイト(Apache)設定
ユーザエージェント判定をCloudFrontに任せる
1. 解説
2. モバイル判定ロジックの変更
Forward Cokkieを調整する
設定内容
1. CloudFront Behaviors設定
2. 結果
補足：完全レスポンシブについて

調整前の設定

まず、調整前の当サイトの基本設定を書いておきます。

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の記述を変更しました。

WordPressのテーマのモバイル判定に入れたモンキーパッチ…

最近このブログサイトをHTTPS化して↓のような構成にしてみたのですが、(HTTPS)CloudFront→(HTTPS)ELB→(HTTP)EC2CloudFrontと通すとUser-Agentが"Amazon CloudFront"にな

CloudFrontの設定修正

CloudFrontのBeheviers設定を修正し、Default(*)のの際のみ、User-agentの転送を止め、CloudFront-Is-Desktop-Viewerヘッダの転送を行うようにしました。

なお、管理画面(wp-admin/)ではUser-agentの転送を止めるとビジュアルエディタが利用できなくなる不具合がありましたので、引き続き転送を継続することにしました。

Forward Cokkieを調整する

以下記事を参考にしました。

CloudFrontで「Forward Cookies」を「All」にしている時に注意すべき点 | DevelopersIO

菅野です。先日、CloudFront経由でウェブページにアクセスした時に常に「X-Cache: Miss from cloudfront」となるので調査したところ、CloudFrontの「Behavior」の「Forw

なるほど、要するにGoogleAnalyticsがユーザにユニークなキーを発行してしまいCloudFrontにキャッシュできなくなってしまうため、GoogleAnalyticsのCookie以外をWhitelistに登録すれば良いということですね。

但し本サイト（というかWordPress及びテーマにて）配布されているCookie情報がわからない・・・　ChromeのEditThisCookie等を活用して自前で調べないとダメかなぁ・・・　と考えていたところ以下の情報を発見。

WordPressをCloudfrontで使用する2 | Webシステム開発・運用、サーバー・ネットワーク設計から保守まで　雲屋ネットワークにおまかせ

Wordpressでプレビューが更新されない前の記事でWordpressをCloudfrontで使用するにおいてWordpressでCloudfrontを使用した設定をご紹介しました。改めて設定を見直します。 /wp-adminと/wp-login.phpの設定ここについては従来通りです。ポイントは For...

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転送を止めてみましたが、結果はうまくいきませんでした。

それなりに表示はされるものの、ヘッダ画像サイズ調整やモバイル用広告の出し分け等、適切でない動作が散見されました。完全レスポンシブ設定時にもユーザエージェントによる判定が行われているのですね。