サーバーの高負荷対策に!Simplicityでキャシュプラグイン「W3 Total Cache」を利用する方法

先日、運良くというか、運悪くというかテレビ情報経由で大量の検索流入がありました。

TV発 突然の大量検索流入!月1000円のエックスサーバーはどれだけ負荷に耐えたのか?
最近、「テレビは見ない」「若者のテレビ離れが…」なんてのをよく見かけます。 ただ、そうは言っても大抵なら一家に一台あるこの情報...

ほんの1時間ちょっとなんですが、大量のアクセスがあったため、サーバーに負荷がかかってしまったようで、アクセス制限を受けてしまいました。そして、制限を解除するには、Wordpressのキャッシュプラグイン等を用いて、負荷対策をする必要が出てきました。

TV由来の大量アクセスが運んできたもの。エックスサーバーのアクセス制限対策。
先日、テレビで紹介された情報経由で一瞬だけ大量のアクセスがありました。 それは、Analyticsリアルタイムのアクティブユーザー数で...

ただ、僕の使っているテーマSimplicityの場合、モバイル用の表示と、パソコン用の表示を、分けて作成してあるので、キャッシュプラグインと合わせて使うようにはできていませんでした。(※キャッシュプラグインを使うと、ファーストビュー端末の表示でページキャシュが作られてしまうため)

けれど、キャッシュプラグインを使用してサーバーのCPU負荷を軽減させない限り、アクセス制限も解除してもらえません。ですので、Simplicityの方にキャッシュプラグインと併用しても、及第点の表示になるようなページキャシュモードを作成しました。

そして先日、ページキャシュモードを実装したバージョンを出したのはいいのですが、その利用方法については、書いてなかったので使い方などをこちらで紹介したいと思います。

追記:コメントにてyokudekiruさんに、パソコンと携帯端末を分けてキャッシュ表示する方法を教えていただきました。こちらの設定の方がおすすめです。

PCとスマホを分けて綺麗に高速表示してくれるWPキャッシュプラグイン「W3 Total Cache」の簡単設定方法
前回、Wordpressのページキャッシュ設定に関する以下の記事を書きました。 上の記事は、Wordpressのページキャシュプラ...
スポンサーリンク
レクタングル(大)広告

Simplicityでキャッシュプラグインを使う手順

Simplicityでキャッシュプラグインを使うには、以下の手順が必要です。

  1. Simplicityのカスタマイザーでモード選択
  2. Simplicityの「完全レスポンシブ」機能をオンにする
  3. Simplicityテーマの広告設定
  4. W3 Total Cacheのインストール
  5. W3 Total Cacheの設定

今回は、キャッシュプラグインの「W3 Total Cache」の使用を例に説明したいと思います。

Simplicityのカスタマイザーでモード選択

まず、Simplicityでキャッシュプラグインを使えるようにするには、テーマカスタマイザーから「ページキャシュモード」に変更する必要があります。

変更方法は、まずWordpressの管理画面にログインして、「外観→カスタマイズ」を開き「その他」項目を開きます。

Simplicityテーマカスタマイザーのその他項目

すると、したの方に「ページキャッシュモード」というのがあるので、チェックしてください。

Simplicityテーマのページキャシュモード

これをチェックすることにより、SNSシェアボタンなどが常にパソコン表示と同じものになります。

ページキャシュモードでのSNSシェアボタン

その他にも、パソコン表示と、モバイル表示の差違が、できる限り少なくなります。

Simplicityの「完全レスポンシブ」機能をオンにする

Simplicityデフォルトのままだと、ファーストビューがモバイルの場合は、以下のようになります。

スマホで最初にアクセスがあったときのキャッシュ

ファーストビューがパソコンの場合は、以下のように表示されます。

パソコンで最初にアクセスがあった場合のキャッシュ

キャッシュプラグインは、ファーストビューが実行された端末でページキャシュが作成されてしまいます。そうすると、ページごとに「こちらはモバイル表示されているけど、こちらはパソコン表示されている」なんてことが起こります。

    そういったことを防ぐために、Simplicityの表示を「レスポンシブデザイン表示」にする必要があります。

    完全レスポンシブ機能をオンにする

    その設定も、カステーマカスタマイザーから行えます。

    まず「外観→カスタマイズ」にある「レイアウト(全体・リスト)」項目を開きます。

    Simplicityテーマカスタマイザーのレイアウト(全体・リスト)項目

    その一番上にある「完全レスポンシブデザインにする」にチェックを入れてください。

    2015-07-30_11h12_50

    あとは、カスタマイザーの設定を保存すれば、テーマカスタマイザーでの設定は終わりです。

    テーマカスタマイザーの設定を保存して公開

    Simplicityテーマの広告設定

    Simplicityデフォルトでは、広告用ウィジェットに「レクタングル(大)」と「レクタングル(中)」のアドセンスコードを入力するエリアがあります。

    そこにアドセンスコードを設定することで、パソコンでは横幅336pxのレクタングル広告を、モバイルでは300pxのレクタングル広告を表示させています。

    ただ、それだとページキャシュを利用したときは、スマホで表示させているのにパソコン用の広告が表示されてしまい、端末の画面から広告がはみ出すなんてことが起こります。

    「レクタングル(中)」広告を使用することで対応

    それを解決するには、両方とも「レクタングル(中)」広告を挿入して、表示にばらつきがないようにする必要があります。

    設定を行うには、「外観→ウィジェット」の広告設定ウィジェットエリア双方に以下のように設定する必要があります。

    「レクタングル(中)」広告を使用することで対応

    このようにすることで、パソコンでもモバイルでも、大きさにばらつきのない表示を行うことができます。

    広告の設定方法については以下を参照してください。

    レスポンシブ広告で対応

    ただ、パソコンでも「レクタングル(中)」が出てしまうのはスペースがもったいないなんて場合は、レスポンシブ広告を使った方法もあります。

    詳しい方法は以下にあります。

    アドセンスのレスポンシブ広告を「レクタングル(大)」で表示させる方法
    AdSenseには、レスポンシブ広告ユニットというものがあります。 アドセンスいわく、このレスポンシブ広告は、利用可能...

    あとは以下のように、広告ウィジェットエリア双方に適切にスタイルが設定されたレスポンシブ広告を設定します。

    レスポンシブ広告で対応

    このようにすることで、パソコンでは「レクタングル(大)」広告が。スマホでは「レクタングル(中)」広告が、概ね表示されるようになります。

    W3 Total Cacheのインストール

    Simplicityの設定が終わったら、次はキャッシュプラグインの設定です。

    今回の例では、W3 Total Cacheを使った方法を紹介します。利用するプラグインは、その他のキャッシュプラグインでも、特に問題ないと思います。

    まずは、プラグインの「新規追加」画面から「W3 Total Cache」と検索して、プラグインをインストールしてください。

    W3 Total Cacheのインストール

    インストールしたら、有効化しておいてください。

    W3 Total Cacheも有効化

    W3 Total Cacheの設定

    インストールが完了したら、あとはW3 Total Cacheの設定を行うだけです。

    今回は、プラグインインストール後のデフォルト状態から主な変更点のみを紹介します。

    W3 Total Cacheをインストールすると、Wordpress管理画面のメニューに「Performance」と表示されると思うので、その中の「General Settings」項目を開きます。

    W3 Total Cacheのジェネラルセッティング

    基本設定を行う

    「General Settings」を開いて以下のような設定を行います。

    General

    General設定部分は、特に変更する必要はありません。

    W3 Total Cacheのジェネラル設定

    ページキャッシュ(Page cache)

    ページキャシュのPage cacheと書かれた部分にチェックを入れます。

    W3 Total Cacheのページキャシュ

    これにより、ページキャッシュファイルが作成され、次からはそのファイルが参照されることにより、サーバーのCPU負荷を軽減します。(CPU負荷を軽減するだけなら、基本的にこの機能だけでもOKかも)

    縮小化(Minify)

    縮小化部分は、特に設定を変更する必要はないと思います。

    W3 Total Cacheの縮小化設定

    CSSを縮小化するのは、特に問題ないと思うんですけど、JavaScriptファイルを縮小化すると予期せぬ不具合が起こることもあります。なので、これらの設定についてあまり詳しくない場合は、さわらないほうが無難かと思います。

    データベースキャシュ(Database Cache)

    Database Cache項目にチェックを入れます。

    W3 Total Cacheのデーターベースキャシュ設定

    これは、データベースなどでよく利用するクエリをキャッシュしておく設定だと思っているのですけど、もし間違ってたらごめんなさい。

    クエリ キャッシュには、SELECT ステートメントのテキストを、クライアント送信の関連結果を合わせて格納します。後でまったく同じクエリを受け取ると、サーバはそのクエリの解析と実行を繰り返す代わりに、クエリ キャッシュから結果を取り出します。

    引用:MySQL 5.1 リファレンスマニュアル :: 4.13 MySQL クエリ キャッシュ

    オブジェクトキャシュ(Object Cache)

    Object Cache項目にチェックを入れます。

    W3 Total Cacheのオブジェクトキャッシュ設定

    オブジェクトキャッシュには、以下のクラスを利用した機能だと思っています。これも間違ってたらごめんなさい。

    WP_Object_Cacheは複雑なデータベースクエリなどの生成に負荷のかかるデータをキャッシュするためのWordPressクラスです。

    引用:クラスリファレンス/WP Object Cache

    ブラウザキャッシュ(Browser Cache)

    Browser Cache項目にチェックを入れます。(※別にブラウザキャッシュの設定をしている場合は不要)

    W3 Total Cacheのブラウザキャッシュ設定

    ブラウザキャッシュは、サイトのリソース(CSS、JS、画像、フォントなど)をブラウザにキャッシュしておくことで、2回目以降はそのブラウザキャッシュが読み込まれるので、サーバーの転送量削減が図れます。

    ただブラウザキャッシュは、転送量の削減などには有効ですが、サーバーCPU負荷の削減対策にはなりません。ただ、やらないよりはやっておいた方が良いかと思います。

    Simplicityで、以下のような高速化を行っている場合は、W3 Total Cacheでの設定は不要です。

    その他の設定項目

    これ以降、CDN、プロキシ、モニタリングなどの設定がありますが、デフォルトの設定状態のままで、特に設定する必要はないかと思います。

    最後に設定の保存

    あとは、「Save All Settings」ボタンを押して設定を保存してください。

    W3 Total Cacheの設定保存ボタン

    これでW3 Total Cacheの設定は終わりです。

    WordPress Popular Postsのようなプラグインを使用すると、キャッシュプラグインが有効に機能しない場合もあるそうなので無効にする必要があるかもしれません。

    キャッシュプラグインの利点と難点

    最後に、ページキャシュプラグインを1週間以上を利用して思った利点と難点を挙げておこうと思います。

    キャッシュプラグインを利用してよかったこと

    まずは、よかった点です。

    サーバーのCPU負荷が減った

    エックスサーバーのサポートによると、問題のない負荷状態になったようです。

    当サポートにて引き続き負荷状況の確認を継続いたしましたが、
    高負荷状況の発生は確認されませんでした。

    おかげで、アクセス制限は解除されました。

    表示スピードが上がった

    それぞれのページスピードが上がりました。

    それまで、サーバーの平均応答時間が1.18秒だったのに対して、0.12秒に改善されました。

    サーバーの平均応答時間(秒)

    サーバーの平均応答時間というのは、GoogleのPageSpeed Insightsでは以下のように表示されるところです。

    PageSpeed Insightsのサーバーの応答時間警告

    このテストに、合格できるくらいに改善されました。

    PageSpeed Insightsのサーバーの応答時間に合格

    これは、テーマやプラグイン等でPHPによる様々な処理を経て表示していたものが、単にページキャシュを表示するだけになったので、負担が軽減されたのだと思います。

    PageSpeed Insightsのスコアも改善

    以前は、まあまあだった、PageSpeed Insightsのスコアもそれなりに良くなりました。

    モバイル「利用前:60点台前半」 → 「利用後:79点」

    PageSpeed Insightsのモバイル結果

    パソコン「利用前:80点台前半」 → 「利用後:91点」

    PageSpeed Insightsのパソコン表示結果

    これは、サーバーの応答時間がかなり評価されての結果っぽいです。

    読み込み時間、リクエストを数なども減少

    GTmetrixで、今回の対策を行う前と後を比較してみたところ、「読み込み時間」「ページサイズ」「リクエスト数」がすべて下がりました。

    対策前

    GTmetrixでページキャッシュ利用後後

    対策後

    GTmetrixでページキャッシュ利用後

    ページサイズや、リクエスト数の減少は、不要なプラグインを削除したからもあるかもしれません。

    キャッシュプラグインを利用してよくなかったこと

    キャッシュプラグインを使用すると、以下のような難点もあります。

    広告の配置が限られる(広告収入が減る)

    キャッシュプラグインを使うと、wp_is_mobile()系の処理ができなくなるので、モバイルとパソコンで広告の表示を切り替えることができません。

    ですので、広告の配置方法などは、デフォルト状態よりはかなり限られたものになります。

    例えば、以前当サイトでは、広告を以下のようにダブルレクタングル表示していました。

    広告をダブルレクタングル表示

    しかし、キャッシュプラグインを使用してダブルレクタングル表示を行うと、モバイル端末で広告が縦に連続で表示され、アドセンスポリシー違反になるので、こういった配置はできなくなりました。(縦に表示されなくしたとしても、広告が画面幅からはみ出して横スクロールが出て利便性が下がる)

    ですので、効果の高いと思われる配置ができなくなるので、広告収入が下がる可能性があります。(他の要因もあるかもしれませんが、当サイトの場合は、RPMで比較して2、3割減りました。)

    WordPress Populer Postsなどのプラグインが使用できなくなる

    Populer Postsなどの、ページを表示する事に何かの処理を行うプラグインを使用すると、「キャッシュプラグインが有効に機能せず、CPU負荷の軽減につながらないケースがあるため停止をお勧めします」みたいにエックスサーバーのサポートの方がおしゃっていました。

    ですので、「人気記事ランキング」みたいなウィジェットは利用できなくなりました。

    そのせいなのかわからないのですが、当サイトの場合キャッシュプラグイン利用後は、「ページ/セッション」が、0.04くらい下がりました。(※誤差の範囲内ともいえる数値だとは思いますが)

    まとめ

    というわけで、「Simplicityとキャシュプラグインを併用する方法」と「その設定により起こり得る利点&難点」を紹介しました。

    個人的には、サーバーから警告メールでももらわない限りは、キャッシュプラグインを使う必要はないと考えています。

    もしサーバーから「あなたのサイトのCPU負荷が大変なことになっているよ」とメールが来た時は、利用を検討してみてださい。

    ただし、Simplicityでは、「ページキャシュモード」の使い方については、フォーラムなどで基本的にノーサポートとなるので、ご了承ください。(不具合と、改善要望は、ある程度時間的余裕のある時ならできるかもしれません。)

    『サーバーの高負荷対策に!Simplicityでキャシュプラグイン「W3 Total Cache」を利用する方法』へのコメント

    1. 名前:Hidekichi 投稿日:2015/07/30(木) 15:11:19 ID:3158e8016

      >キャッシュプラグインを使うと、wp_is_mobile()系の処理ができなくなるので

      除外設定すればtotal cacheでもイケルのでは?

    2. わいひら 名前:わいひら 投稿日:2015/07/30(木) 15:40:10 ID:aa683107e

      除外設定は、どこでどのようにするのでしょうか?

      検索して見たんですけど以下のようなものでしょうか。
      WordPress の W3 total cache と WPtouch を併用するには除外設定が必要だ to @donpy | iPhone 研究室

    3. 名前:yokudekiru 投稿日:2015/07/30(木) 15:56:02 ID:ced832e6a

      デザインを極力変えたくないのであればこのページの方法も参考になるかもしれません。
      ただ、この方法ですとスマホにはキャッシュが適用されません。

      スマホでもキャッシュを効かせたいならこんな方法も紹介されていました⇒ページ

    4. わいひら 名前:わいひら 投稿日:2015/07/30(木) 17:26:03 ID:aa683107e

      テレビ情報経由の検索流入があると、7~8割がスマホのようなので、キャッシュは使う必要があるかもしれません。
      TV由来の大量アクセスが運んできたもの

      というか、この設定方法は知りませんでした!
      モバイル版表示でもキャッシュが効くW3 Total Cache | iPhone 研究室
      携帯端末用に別のキャッシュを作る方法があったんですね!
      早速試してみようと思います。
      ありがとうございます!

    5. わいひら 名前:わいひら 投稿日:2015/07/30(木) 18:05:13 ID:aa683107e

      スマホとパソコンでキャッシュを分ける方法、素晴らしいです。
      このサイトでも適用してみました。
      教えていただき、ありがとうございます!
      こんな機能があるの全然知りませんでした;

    6. 名前:yokudekiru 投稿日:2015/07/30(木) 18:55:39 ID:ced832e6a

      わいひらさんのお役に立てたみたいなので幸いです。
      明日の記事を楽しみに待っています。

    7. わいひら 名前:わいひら 投稿日:2015/07/30(木) 20:09:18 ID:aa683107e

      まさか、このような設定があるとは、思いもしませんでした。
      昔はなかったような。いや、あったのかな。
      これで、アドセンスのパフォーマンス低下も改善されました。
      この情報だけでも、何時間もかけて今日の記事を書いた価値はありました。
      マジ感謝です!

    8. 名前:Ozk 投稿日:2015/07/31(金) 11:16:37 ID:27ccb1038

      お役に立てたようで何よりです。
      「現在はStingerを使っています」のところは「現在はSimplicityを使っています」に修正しないといかんですね。

    9. わいひら 名前:わいひら 投稿日:2015/07/31(金) 13:35:05 ID:375cf6a15

      ご利用ありがとうございます。
      それとともに、良いキャッシュの設定方法をありがとうございます!
      昨日設定してみて、1人でW3 Total Cacheの能力に感動していました。
      こういった機能をがあるとも思ってもいませんでした;
      ですので、記事がものすごく参考になりました。
      こんな手軽にできるものだったとは。