WordPressで構築したサイトを Cloud Front 経由の配信にした際に、キャッシュヒット率が向上しない現象の対応を行ないます。
改善前のキャッシュステータスレポート
Cloud Front 管理画面からキャッシュステータスレポートを確認すると、キャッシュヒット率は1桁台となっており、CDNの効果が出ていません。
モバイル判定の変更
User-Agentをフォワードするとそれがキーとなってしまい、キャッシュヒット率が低下してしまいます。そこで、モバイルの判定をCloudFrontのUser-Agent判定を利用するよう変更します。
CloudFrontでは、アクセスした端末のUser-AgentからPC・モバイルの判定を行ない、以下のヘッダに「true」「false」を付与します。
- HTTP_CLOUDFRONT_IS_DESKTOP_VIEWER
- HTTP_CLOUDFRONT_IS_TABLET_VIEWER
- HTTP_CLOUDFRONT_IS_MOBILE_VIEWER
- HTTP_CLOUDFRONT_IS_SMARTTV_VIEWER
WordPress 側でのモバイル判定をこのヘッダを参照するように変更することにします。
多様なUser-Agentでなく、これらのヘッダをoriginに転送することでUser-Agentのヘッダがキャッシュ判定のキーにならずにキャッシュ率の向上が見込めます。
子テーマの functions.php に以下を追加します。親テーマに同名の関数が if ( !function_exists ) で定義されているかどうかも確認し、利用するテーマに応じて変えていきます。
気を付けないといけないのは、元のモバイル判定ロジックでタブレットが対象なのかを確認することです。元のモバイル判定の仕様に合わせて各ヘッダを判定に利用します。
if ( !function_exists( 'st_is_mobile' ) ) { /** * スマホ表示分岐 */ function st_is_mobile() { if (isset($_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER'])) { if($_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER'] == 'true'){ return true; } else { return false; } } else { 『既存の UserAgent でのモバイル判定ロジック』 } }
}フォワードするクッキーの調整
GoogleAnalyticsを利用しているサイト（ほとんどのサイトがそうでしょうが）では、GoogleAnalyticsがユーザにユニークなキーを発行する為、CloudFrontでキャッシュ判定のキーとなり、キャッシュ率が低下します。その為、GoogleAnalyticsのCookie以外をWhitelistに登録します。
GoogleAnalyticsのCookie以外とは何かについては、参考にさせていただいたサイトによると以下の二つのようです。（※その後、更に2つ追加してみました）
wp-settings*
wordpress_logged_in*
wp-postpass*
comment_author_*このクッキーの設定をフロントサイト「Path Pattern : Default (*)」に設定します。管理画面は以前の章でご紹介したように、User-Agentはそのまま転送し、キャッシュはさせないようにします。
CloudFront Behaviors 設定
最終的に、CloudFront の Behaviors は以下のようになりました。
path-Pattern : /wp-admin/*
管理画面はUser-agentはそのまま転送し、キャッシュをさせないようにします。クッキーは全て転送します。
Path Pattern : *.php
*.php は CloudFrontのUser-agent判定ヘッダを転送し、キャッシュをさせないようにします。クッキーは全て転送します。
Path Pattern : Default (*)
フロントサイトは、 CloudFrontのUser-agent判定ヘッダを転送し、キャッシュを有効にします。クッキーはGoogleAnalyticsのCookie以外の「wp-settings*」「wordpress_logged_in*」を転送します。
チューニング結果
設定変更後、以下の通りMissesとHitsが逆転し、キャッシュヒット率が大幅に向上しました。
参考記事
以下の記事を参考にさせて頂きました。
