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

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

最近、「テレビは見ない」「若者のテレビ離れが…」なんてのをよく見かけます。 ただ、そうは言っても大抵なら一家に一台あるこの情報...

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

先日、テレビで紹介された情報経由で一瞬だけ大量のアクセスがありました。 それは、Analyticsリアルタイムのアクティブユー...

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

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

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

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

前回、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のレクタングル広告を表示させています。

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

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

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

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

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

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

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

Simplicityでは、Google AdSenseの「レクタングル(大)」と「レクタングル(中)」の二つの広告を貼り付けるだけで、パソコンやスマホの画面サイズに対応した広告をパフォーマンスの高い位置に貼り付けることができます。 Goo

レスポンシブ広告で対応

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

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

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での設定は不要です。

Simplicityを高速化し、さらなるパフォーマンスアップをする方法を解説します。高速化には、ブラウザキャッシュの設定と、リソースを圧縮の設定を行います。たったこれだけのことですが、かなりの高速化が図れます。例、Simplicityに今回

その他の設定項目

これ以降、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の能力に感動していました。
    こういった機能があるとも思ってもいませんでした;
    ですので、記事がものすごく参考になりました。
    こんな手軽にできるものだったとは。