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

2016.10.18

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

cloudfront-cache-before

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

調整前の設定

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

CloudFront Behaviors設定

こんな感じにしていました。

Path PatternForward HeadersObject CachingForward CookiesQuery String Forwarding and Caching
/wp-admin/*Whitelist
(User-agent)		Customize
(0/0/0)		AllForward All, cache based on all
*.phpWhitelist
(User-agent)		Customize
(0/0/0)		AllForward All, cache based on all
Default(*)Whitelist
(User-agent)		Use Origin Cache HeadersAllForward 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が&quot;Amazon CloudFro
shinodogg.com

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 …
dev.classmethod.jp

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

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

http://www.kumoyanet.com/2114/
www.kumoyanet.com

Whitelist Cookiesには
wp-settings*
wordpress_logged_in*
の2つを入れておけば大丈夫です。

素晴らしい、これを採用してみます。

なお、管理サイト(wp-admin/)ではログインできなくなる不具合が発生したため、（どうせ管理サイトはキャッシュさせないことが望ましいので）フロントサイトのみに適用しました。

設定内容

調整の結果、以下の設定となりました。

CloudFront Behaviors設定

Path PatternForward HeadersObject CachingForward CookiesQuery String Forwarding and Caching
/wp-admin/*Whitelist
(User-agent,Host)		Customize
(0/0/0)		AllForward All, cache based on all
*.phpWhitelist
(CloudFront-Is-Desktop-Viewer)		Customize
(0/0/0)		AllForward All, cache based on all
Default(*)Whitelist
(CloudFront-Is-Desktop-Viewer)		Use Origin Cache HeadersWhitelist
(wordpress_logged_in*,wp-settings*)		Forward All, cache based on all

結果

設定変更から時間が経ちましたが、以下の通り、概ね20～30%程度までヒット率が上昇したことを確認しました。
今後アクセスが増加すれば、MissesとHitsが逆転する程度までヒット率が上昇するものと思われます。
cloudfront-cahce-after

補足：完全レスポンシブについて

当サイトではSimplicty2テーマの完全レスポンシブ機能を有効にしていますが、完全レスポンシブ設定を無効とした際はユーザエージェントでの判定を行う、との記述があります。
もしやユーザエージェントのヘッダ転送は不要なのでは？と思いUser-agentヘッダのOrigin転送を止めてみましたが、結果はうまくいきませんでした。

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

コメント

  1. wordpressの前段にCloudFrontを置いたときの備忘録 より:
    2017年5月14日 11:40 PM

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

    返信