先日、運良くというか、運悪くというかテレビ情報経由で大量の検索流入がありました。
ほんの1時間ちょっとなんですが、大量のアクセスがあったため、サーバーに負荷がかかってしまったようで、アクセス制限を受けてしまいました。そして、制限を解除するには、Wordpressのキャッシュプラグイン等を用いて、負荷対策をする必要が出てきました。
ただ、僕の使っているテーマSimplicityの場合、モバイル用の表示と、パソコン用の表示を、分けて作成してあるので、キャッシュプラグインと合わせて使うようにはできていませんでした。（※キャッシュプラグインを使うと、ファーストビュー端末の表示でページキャッシュが作られてしまうため）
けれど、キャッシュプラグインを使用してサーバーのCPU負荷を軽減させない限り、アクセス制限も解除してもらえません。ですので、Simplicityの方にキャッシュプラグインと併用しても、及第点の表示になるようなページキャッシュモードを作成しました。
そして先日、ページキャッシュモードを実装したバージョンを出したのはいいのですが、その利用方法については、書いてなかったので使い方などをこちらで紹介したいと思います。
追記：コメントにてyokudekiruさんに、パソコンと携帯端末を分けてキャッシュ表示する方法を教えていただきました。こちらの設定の方がおすすめです。
目次
Simplicityでキャッシュプラグインを使う手順
Simplicityでキャッシュプラグインを使うには、以下の手順が必要です。
- Simplicityのカスタマイザーでモード選択
- Simplicityの「完全レスポンシブ」機能をオンにする
- Simplicityテーマの広告設定
- W3 Total Cacheのインストール
- W3 Total Cacheの設定
今回は、キャッシュプラグインの「W3 Total Cache」の使用を例に説明したいと思います。
Simplicityのカスタマイザーでモード選択
まず、Simplicityでキャッシュプラグインを使えるようにするには、テーマカスタマイザーから「ページキャッシュモード」に変更する必要があります。
変更方法は、まずWordpressの管理画面にログインして、「外観→カスタマイズ」を開き「その他」項目を開きます。
すると、したの方に「ページキャッシュモード」というのがあるので、チェックしてください。
これをチェックすることにより、SNSシェアボタンなどが常にパソコン表示と同じものになります。
その他にも、パソコン表示と、モバイル表示の差違が、できる限り少なくなります。
Simplicityの「完全レスポンシブ」機能をオンにする
Simplicityデフォルトのままだと、ファーストビューがモバイルの場合は、以下のようになります。
ファーストビューがパソコンの場合は、以下のように表示されます。
キャッシュプラグインは、ファーストビューが実行された端末でページキャッシュが作成されてしまいます。そうすると、ページごとに「こちらはモバイル表示されているけど、こちらはパソコン表示されている」なんてことが起こります。
そういったことを防ぐために、Simplicityの表示を「レスポンシブデザイン表示」にする必要があります。
完全レスポンシブ機能をオンにする
その設定も、テーマカスタマイザーから行えます。
まず「外観→カスタマイズ」にある「レイアウト（全体・リスト）」項目を開きます。
その一番上にある「完全レスポンシブデザインにする」にチェックを入れてください。
あとは、カスタマイザーの設定を保存すれば、テーマカスタマイザーでの設定は終わりです。
Simplicityテーマの広告設定
Simplicityデフォルトでは、広告用ウィジェットに「レクタングル（大）」と「レクタングル（中）」のアドセンスコードを入力するエリアがあります。
そこにアドセンスコードを設定することで、パソコンでは横幅336pxのレクタングル広告を、モバイルでは300pxのレクタングル広告を表示させています。
ただ、それだとページキャッシュを利用したときは、スマホで表示させているのにパソコン用の広告が表示されてしまい、端末の画面から広告がはみ出すなんてことが起こります。
「レクタングル（中）」広告を使用することで対応
それを解決するには、両方とも「レクタングル（中）」広告を挿入して、表示にばらつきがないようにする必要があります。
設定を行うには、「外観→ウィジェット」の広告設定ウィジェットエリア双方に以下のように設定する必要があります。
このようにすることで、パソコンでもモバイルでも、大きさにばらつきのない表示を行うことができます。
広告の設定方法については以下を参照してください。
レスポンシブ広告で対応
ただ、パソコンでも「レクタングル（中）」が出てしまうのはスペースがもったいないなんて場合は、レスポンシブ広告を使った方法もあります。
詳しい方法は以下にあります。
あとは以下のように、広告ウィジェットエリア双方に適切にスタイルが設定されたレスポンシブ広告を設定します。
このようにすることで、パソコンでは「レクタングル（大）」広告が。スマホでは「レクタングル（中）」広告が、概ね表示されるようになります。
W3 Total Cacheのインストール
Simplicityの設定が終わったら、次はキャッシュプラグインの設定です。
今回の例では、W3 Total Cacheを使った方法を紹介します。利用するプラグインは、その他のキャッシュプラグインでも、特に問題ないと思います。
まずは、プラグインの「新規追加」画面から「W3 Total Cache」と検索して、プラグインをインストールしてください。
インストールしたら、有効化しておいてください。
W3 Total Cacheの設定
インストールが完了したら、あとはW3 Total Cacheの設定を行うだけです。
今回は、プラグインインストール後のデフォルト状態から主な変更点のみを紹介します。
W3 Total Cacheをインストールすると、Wordpress管理画面のメニューに「Performance」と表示されると思うので、その中の「General Settings」項目を開きます。
基本設定を行う
「General Settings」を開いて以下のような設定を行います。
General
General設定部分は、特に変更する必要はありません。
ページキャッシュ（Page cache）
ページキャッシュのPage cacheと書かれた部分にチェックを入れます。
これにより、ページキャッシュファイルが作成され、次からはそのファイルが参照されることにより、サーバーのCPU負荷を軽減します。（CPU負荷を軽減するだけなら、基本的にこの機能だけでもOKかも）
縮小化（Minify）
縮小化部分は、特に設定を変更する必要はないと思います。
CSSを縮小化するのは、特に問題ないと思うんですけど、JavaScriptファイルを縮小化すると予期せぬ不具合が起こることもあります。なので、これらの設定についてあまり詳しくない場合は、さわらないほうが無難かと思います。
データベースキャッシュ（Database Cache）
Database Cache項目にチェックを入れます。
これは、データベースなどでよく利用するクエリをキャッシュしておく設定だと思っているのですけど、もし間違ってたらごめんなさい。
クエリ キャッシュには、
SELECTステートメントのテキストを、クライアント送信の関連結果を合わせて格納します。後でまったく同じクエリを受け取ると、サーバはそのクエリの解析と実行を繰り返す代わりに、クエリ キャッシュから結果を取り出します。
引用：MySQL 5.1 リファレンスマニュアル :: 4.13 MySQL クエリ キャッシュ
オブジェクトキャッシュ（Object Cache）
Object Cache項目にチェックを入れます。
オブジェクトキャッシュには、以下のクラスを利用した機能だと思っています。これも間違ってたらごめんなさい。
WP_Object_Cacheは複雑なデータベースクエリなどの生成に負荷のかかるデータをキャッシュするためのWordPressクラスです。
ブラウザキャッシュ（Browser Cache）
Browser Cache項目にチェックを入れます。（※別にブラウザキャッシュの設定をしている場合は不要）
ブラウザキャッシュは、サイトのリソース（CSS、JS、画像、フォントなど）をブラウザにキャッシュしておくことで、2回目以降はそのブラウザキャッシュが読み込まれるので、サーバーの転送量削減が図れます。
ただブラウザキャッシュは、転送量の削減などには有効ですが、サーバーCPU負荷の削減対策にはなりません。ただ、やらないよりはやっておいた方が良いかと思います。
Simplicityで、以下のような高速化を行っている場合は、W3 Total Cacheでの設定は不要です。
その他の設定項目
これ以降、CDN、プロキシ、モニタリングなどの設定がありますが、デフォルトの設定状態のままで、特に設定する必要はないかと思います。
最後に設定の保存
あとは、「Save All Settings」ボタンを押して設定を保存してください。
これでW3 Total Cacheの設定は終わりです。
WordPress Popular Postsのようなプラグインを使用すると、キャッシュプラグインが有効に機能しない場合もあるそうなので無効にする必要があるかもしれません。
キャッシュプラグインの利点と難点
最後に、ページキャッシュプラグインを1週間以上を利用して思った利点と難点を挙げておこうと思います。
キャッシュプラグインを利用してよかったこと
まずは、よかった点です。
サーバーのCPU負荷が減った
エックスサーバーのサポートによると、問題のない負荷状態になったようです。
当サポートにて引き続き負荷状況の確認を継続いたしましたが、
高負荷状況の発生は確認されませんでした。
おかげで、アクセス制限は解除されました。
表示スピードが上がった
それぞれのページスピードが上がりました。
それまで、サーバーの平均応答時間が1.18秒だったのに対して、0.12秒に改善されました。
サーバーの平均応答時間というのは、GoogleのPageSpeed Insightsでは以下のように表示されるところです。
このテストに、合格できるくらいに改善されました。
これは、テーマやプラグイン等でPHPによる様々な処理を経て表示していたものが、単にページキャッシュを表示するだけになったので、負担が軽減されたのだと思います。
PageSpeed Insightsのスコアも改善
以前は、まあまあだった、PageSpeed Insightsのスコアもそれなりに良くなりました。
モバイル「利用前：60点台前半」 → 「利用後：79点」
パソコン「利用前：80点台前半」 → 「利用後：91点」
これは、サーバーの応答時間がかなり評価されての結果っぽいです。
読み込み時間、リクエスト数なども減少
GTmetrixで、今回の対策を行う前と後を比較してみたところ、「読み込み時間」「ページサイズ」「リクエスト数」がすべて下がりました。
対策前
対策後
ページサイズや、リクエスト数の減少は、不要なプラグインを削除したからもあるかもしれません。
キャッシュプラグインを利用してよくなかったこと
キャッシュプラグインを使用すると、以下のような難点もあります。
広告の配置が限られる（広告収入が減る）
キャッシュプラグインを使うと、wp_is_mobile()系の処理ができなくなるので、モバイルとパソコンで広告の表示を切り替えることができません。
ですので、広告の配置方法などは、デフォルト状態よりはかなり限られたものになります。
例えば、以前当サイトでは、広告を以下のようにダブルレクタングル表示していました。
しかし、キャッシュプラグインを使用してダブルレクタングル表示を行うと、モバイル端末で広告が縦に連続で表示され、アドセンスポリシー違反になるので、こういった配置はできなくなりました。（縦に表示されなくしたとしても、広告が画面幅からはみ出して横スクロールが出て利便性が下がる）
ですので、効果の高いと思われる配置ができなくなるので、広告収入が下がる可能性があります。（他の要因もあるかもしれませんが、当サイトの場合は、RPMで比較して2、3割減りました。）
WordPress Populer Postsなどのプラグインが使用できなくなる
Populer Postsなどの、ページを表示する毎に何かの処理を行うプラグインを使用すると、「キャッシュプラグインが有効に機能せず、CPU負荷の軽減につながらないケースがあるため停止をお勧めします」みたいにエックスサーバーのサポートの方がおっしゃっていました。
ですので、「人気記事ランキング」みたいなウィジェットは利用できなくなりました。
そのせいなのかわからないのですが、当サイトの場合キャッシュプラグイン利用後は、「ページ/セッション」が、0.04くらい下がりました。（※誤差の範囲内ともいえる数値だとは思いますが）
まとめ
というわけで、「Simplicityとキャッシュプラグインを併用する方法」と「その設定により起こり得る利点＆難点」を紹介しました。
個人的には、サーバーから警告メールでももらわない限りは、キャッシュプラグインを使う必要はないと考えています。
もしサーバーから「あなたのサイトのCPU負荷が大変なことになっているよ」とメールが来た時は、利用を検討してみてください。
ただし、Simplicityでは、「ページキャッシュモード」の使い方については、フォーラムなどで基本的にノーサポートとなるので、ご了承ください。（不具合と、改善要望は、ある程度時間的余裕のある時ならできるかもしれません。）
>キャッシュプラグインを使うと、wp_is_mobile()系の処理ができなくなるので
除外設定すればtotal cacheでもイケルのでは？