PCとスマホを分けて綺麗に高速表示してくれるWPキャッシュプラグイン「W3 Total Cache」の簡単設定方法

前回、Wordpressのページキャッシュ設定に関する以下の記事を書きました。

サーバーの高負荷対策に!Simplicityでキャシュプラグイン「W3 Total Cache」を利用する方法
先日、運良くというか、運悪くというかテレビ情報経由で大量の検索流入がありました。 ほんの1時間ちょっとなんですが、大量のアクセスがあった...

上の記事は、Wordpressのページキャシュプラグインは、1ページにつき1つのキャッシュしか生成されないと思っていて書きました。というか、こういったプラグインはそういうもんだと思い込んでいました。

なので、パソコンとモバイルで表示が変わるようなテーマだと、ページキャシュプラグインを使うと、表示がおかしくなると考えていました。

しかし、W3 Total Cacheというキャッシュプラグインを利用すれば、パソコンでもモバイルでも両方のキャッシュを作成し綺麗に表示することができることを知りました。(よくできる?学生さんにコメントで教えていただきました。)

それで昨日、設定してみたら、設定方法が簡単で驚きました。その上、パソコンでもスマホでも、しっかりと意図通りのデザインが表示される、素晴らしい機能だったので、その設定方法について紹介したいと思います。

今回の設定を利用すれば、大抵のテーマであれば、問題なく表示されるようになると思います。

今回の方法は、テーマ側の設定を変更する必要はありません。

他のキャシュプラグインでも同様の機能はあるのかもしれません。

スポンサーリンク
レクタングル(大)広告

主な手順

今回行う、設定の主な手順は以下になります。

  1. W3 Total Cacheのインストール&有効化
  2. W3 Total Cacheの基本設定
  3. W3 Total Cacheのモバイル表示設定

主にやることといったら、このくらいで、慣れてない人でも10分、慣れた人なら3分もかからないでできる簡単な設定です。

しかし、そんな簡単な設定ながらも、効果は強力です。この設定を行うことで、僕の環境では、サーバーの読み込み時間を約6分の1に減らすことができ、サーバーのCPU負荷をかなり軽減できるようになりました。

もし、サーバーの高負荷で悩んでいる場合は、かなりおすすめな方法だと思います。

尚、キャッシュ系プラグインは、重大な不具合を引き起こす可能性もありますので、利用には注意が必要です。導入前に「Wordpress キャッシュ トラブル」と検索してみて対応できそうなら利用してみてください。一応、今のところ僕は、トラブルは起きたことはないです。

W3 Total Cacheのインストール&有効化

W3 Total Cacheのイメージ

まずは、W3 Total Cacheをインストールして有効化します。

既に、インストールされている場合は、この項目を飛ばしてください。

プラグインのインストール

まず、プラグインをインストールするために「プラグイン→新規作成」画面を表示してるださい。

プラグインの新規追加画面を開く

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

W3 Total Cacheのインストール

プラグインの有効化

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

W3 Total Cacheも有効化

尚この後、W3 Total Cacheの説明は、インストール後のデフォルト状態の設定を基本として説明します。

W3 Total Cacheの基本設定

プラグインがインストールできたら、まずはキャッシュを利用するための基本的な設定を行います。

設定といっても、簡単な基本設定部分をいくつか変更するだけで行うことができます。

W3 Total Cacheをインストールして有効化すると、Wordpress管理画面のメニューに「Performance」という項目が表示されると思います。それが、W3 Total Cacheの設定メニューになります。

基本設定の表示

基本的な設定を行うには、「Performance」メニューから「General Settings」項目を選択してください。

W3 Total Cacheの管理画面のメニュー

すると、以下のような設定画面が表示されると思います。

General Settings  W3 Total Cache ‹  WordPress

以下では、それぞれの項目ごとの設定方法紹介します。

General

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

W3 Total Cacheのジェネラル設定

チェックされてないことを確認してください。

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

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

W3 Total Cacheのページキャシュ

この設定を行うと、ページに訪問者が初めて訪れた時にページキャッシュファイルが作成されます。

そして、次の訪問者からは、複雑な動的処理は行われず、単なるHTMLともいえる静的ページキャッシュファイルが表示されることにより、サーバーのCPU負荷の軽減を図ることができます。

これにより、ページ表示も高速化されます。

縮小化(Minify)

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

W3 Total Cacheの縮小化設定

こちらは、JavaScriptファイルや、CSSファイルの、開業や余分なスペースを取り除いて縮小化する機能です。

ただ、JavaScriptなどを縮小化すると、環境によっては不具合が出ることがあるので今回は利用しません。

こういった設定について、あまり詳しくない場合は、とりあえずさわらないほうが無難かと思います。

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

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

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

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

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

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

これを利用すると、よく利用されているクエリなら、キャッシュが利用されるので、高速化が図れます。

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

Object Cache項目は、そのままにしておきます。チェックは入れません。

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

本来なら、この機能もオンにしてよいのだろうと思います。

ただ、この機能を使うと、モバイル端末によっては表示に不具合が出るそうなので、今回の設定では利用しません。

詳しくは、今回の設定の参考にさせていただいた以下の記事を参照してください。

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

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

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

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

ただブラウザキャッシュは、転送量の削減などには有効ですが、サーバーCPU負荷の削減対策にはならないので注意が必要です。

ただ、ブラウザキャッシュの設定を行っていない場合、こちらの設定は、やっておいた方が良いと思います。

その他の設定項目

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

最後に設定の保存

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

W3 Total Cacheの設定保存ボタン

これで基本設定(General Settings)は終了です。新たにチェックした項目は3つのの簡単な設定です。

W3 Total Cacheのモバイル表示設定

ここまでの設定でも、ページキャッシュは作成されます。

ただ、このままだとページを最初に見た端末でキャッシュファイルが作成されてしまいます。そうすると、パソコンで見ているのに、モバイルのインターフェースが表示されてしまうなんて事になってしまいます。

そんなことにならないように、パソコンではパソコン用のキャッシュを、モバイルではモバイル用のキャッシュを生成するように設定する必要があります。

ユーザーエージェントグループ設定

その設定を行うには、Wordpress管理画面の「Performance」メニューから「User Agent Groups」を開きます。

W3 Total CacheのUser Agentグループ設定

「User Agent Groups」設定画面を開くと、ユーザーエージェントをグループ分けして、グループごとにキャッシュを作成する設定を行うことができます。

User Agent Groups  W3 Total Cache ‹  WordPress

スマホなどで別にキャッシュを作成する

スマートフォンなどのハイエンドモバイル端末で、パソコンとは別のキャシュを作成する場合は、「Group name」が「high」となっているグループを表示させます。

そして、Enable項目にチェックを入れます。

User Agent Groupのハイエンド端末設定

これにより、ユーザーエージェント情報において以下の文字列にヒットするモバイル端末は、highグループ用のキャッシュが別に作成されます。

acer\ s100
android
archos5
bada
bb10
blackberry9500
blackberry9530
blackberry9550
blackberry\ 9800
cupcake
docomo\ ht\-03a
dream
froyo
googlebot-mobile
htc\ hero
htc\ magic
htc_dream
htc_magic
iemobile/7.0
incognito
ipad
iphone
ipod
kindle
lg\-gw620
liquid\ build
maemo
mot\-mb200
mot\-mb300
nexus\ one
nexus\ 7
opera\ mini
s8000
samsung\-s8000
series60.*webkit
series60/5\.0
sonyericssone10
sonyericssonu20
sonyericssonx10
t\-mobile\ mytouch\ 3g
t\-mobile\ opal
tattoo
touch
webmate
webos

ユーザーエージェント用の文字列は、デフォルトで設定されているので特に新たに設定する必要はないかと思います。

これにて、モバイル表示用のキャッシュの設定は終わりです。

古い携帯端末用のキャッシュを作成する場合

古い携帯端末用に別にキャッシュを作成する場合は、「Group name」が「low」となっているグループを表示させます。

そして、Enable項目にチェックを入れればOKです。

User Agent Groupの古い携帯端末設定

いろいろ試した結果、こちらもチェックをつけておいたほうがいいかもしれません。

別のグループを作成する

「User Agent Groups」設定ページにある「Create a group」ボタンを押すと、新たなグループも作成することができます。

Create a groupでグループの新規作成

細かく設定して、キャッシュ表示を制御したい場合は、新たにユーザーエージェントグループを作成するのも良いかもしれません。

よくわからない場合は、設定しなくてOKです。

設定を保存

最後に、設定画面の下の方にある「Save all settings」ボタンを押せばOKです。

W3 Total Cacheのユーザーエージェント設定の保存

これで、W3 Total Cacheの全ての設定が完了しました。

参考 モバイル版表示でもキャッシュが効くW3 Total Cache | iPhone 研究室

動作確認

W3 Total Cacheの設定終了後、動作確認をします。

動作確認は、もちろんパソコンや、手持ちのスマホなどから行うのも良いのですが、手軽に両方を行うために、PageSpeed Insightsを用いて行います。

動作確認をするサイトのURLを入力して、「分析」ボタンを押してください。

PageSpeed Insightsでキャッシュプラグインの動作確認

スマホとパソコンのスクリーンショットで、それぞれ意図通りの表示がされていればOKです。

まずはスマホ。

PageSpeed InsightsでW3 Total Cacheの動作確認(モバイル)

次はパソコン。

PageSpeed InsightsでW3 Total Cacheの動作確認(パソコン)

PageSpeed Insightsで確認した後は、実機や、エミュレータなどでも確認してみてください。

サーバーの応答時間

W3 Total Cacheを利用したことにより、以前は以下のように修正提案が表示されていたとしても、

サーバーの応答時間短縮提案

以下のように「このサーバーは素早く応答しています」と出るようになれば尚良しです。

このサーバーは素早く応答しています。

上のようなメッセージは出ずとも、応答時間はかなり改善されているのではないかと思います。

当サイトの場合は、このキャッシュプラグイン利用後は、「サーバーの平均応答時間」がかなり改善されています。

W3 Total Cache使用後のサーバーの応答速度

モバイル用にグループ分けしてキャッシュを作成すると、パソコン用のみのキャッシュ作成よりは、何ミリ秒ぐらいは、遅くなることはあるのかもしれません。ただ、体感ではわからないかと思います。

あと、Wordpress Popular Postsのようなアクセスごとに何かしらの処理をするプラグインが入っていると効果が現れない場合があります。そういった場合は、プラグインをオフにしてください。

まとめ

キャッシュプラグインといえば、結構面倒な設定をしなければならないかと思いますが、今回の設定は比較的簡単なのではないかと思います。

というのも、設定部分で数回ほどチェックボックスにチェックするだけでできる設定だからです。(※インストール時のデフォルト設定状態の場合)

とりあえず、この設定にしたおかげで、サーバーの負荷は大幅に削減できましたし、ブラウザでのページ表示も体感できるほど早くなりました。その上、パソコンとモバイルで異なったキャッシュが作成されるようになったことで、広告報酬も平常通りのパフォーマンスが期待できます。

個人的にはこの設定、かなり感動しました。

ということで、「最近サイトのページ表示が遅い」とか「サーバーから負荷を減らせと怒られている」なんて方は、一度このW3 Total Cacheを使った方法を試してみる価値はあると思います。

『PCとスマホを分けて綺麗に高速表示してくれるWPキャッシュプラグイン「W3 Total Cache」の簡単設定方法』へのコメント

  1. 名前:Hidekichi 投稿日:2015/08/01(土) 16:42:41 ID:06ad4ebce

    total cacheだけでなく、mo cacheも併用するとよりベターです。
    Wordpressは翻訳する部分が結構な処理なんです。まぁ元が英語のアプリなのでアレなんですけどね。
    なので、そこらをキャッシュしとくと、より効果が出るって寸法です。

  2. 名前:Hidekichi 投稿日:2015/08/01(土) 16:45:51 ID:06ad4ebce

    ただ、この記事中ではobject cacheをオフってますよね。一部モバイル環境でアレと言う事で。mo cacheを使う場合は、こやつをオンにしなくてはならないという諸刃の剣。

    そこらは各々の環境次第というところでしょうか。

  3. 名前:Hidekichi 投稿日:2015/08/01(土) 17:07:19 ID:06ad4ebce

    あるいは、object cacheをオフっておいて、001 Prime Strategy Translate Acceleratorとかなんですかな。

  4. わいひら 名前:わいひら 投稿日:2015/08/01(土) 17:08:17 ID:ff6225f81

    mo cacheは、翻訳ファイルの読み込みをキャッシュ化する「001 Prime Strategy Translate Accelerator」とはまた違うんですかね?
    こっちの方はずっと使ってはいるんですけど。

  5. わいひら 名前:わいひら 投稿日:2015/08/01(土) 17:10:34 ID:ff6225f81

    あらら、開いていたページのコメント欄に書き込んだら、同じ内容のものがかぶってしまった…。
    という事は、001 Prime Strategy Translate AcceleratorでもOKなんですね。
    あとで追記しとこうと思います。

  6. 名前:Hidekichi 投稿日:2015/08/01(土) 21:59:15 ID:06ad4ebce

    mo cacheは別途キャッシュする何かしらが必要だったと思います。total cacheはobject cacheする機能があるので、それで利用できるんですけれども、それらを一つにまとめたようなものが001 Prime Strategy Translate Acceleratorです。

    しかも、アレじゃないですかXSERVERは確かAPCが利用できるから更に高速にキャッシュできるはず。通常はファイルにキャッシュかと思いますが、中間コードのキャッシュですからかなり速いはず。APCはCで書いてありますからね、PHPとは雲泥の速度ですし。

    どこかで読みましたがtotal cacheのobject cacheは管理画面で一部キャンセルさせる機構が入っていたような記憶があります。管理画面はキャッシュ効かせるとマズイ部分もあるからなんでしょうけれども、おそらくそこらは後発のプラグインは理解していると思うので001 Prime Strategy Translate Acceleratorのが良いでしょうね。
    どっちが後発かは知りませんけども(笑)

  7. わいひら 名前:わいひら 投稿日:2015/08/02(日) 10:28:10 ID:ccd0b3c91

    mo cacheは、オブジェクトキャッシュ機能が必須なんですね。

    APCとはこれですね。
    APC/OPcacheについて

    これも、以前、サーバーパネルを何気なく見ていて良さそうだったので、チェックした程度だったんですが、詳しい説明を読むとかなりよさそうですね。

  8. 名前:マグ 投稿日:2016/03/29(火) 23:07:34 ID:8da768f1f

    こんばんは。
    今回の記事はとても参考になりました。

    1点質問です。
    概観→カスタマイズ→その他の中に「ページキャッシュモード」という項目があります。
    こちらはチェックを入れるべきでしょうか?

    あと「完全レスポンシブ」のチェックは無くても問題ないですか?

  9. わいひら 名前:わいひら 投稿日:2016/03/30(水) 22:14:48 ID:13a2cfae7

    こんばんは。
    書いてあるのは、Simplicityの機能のことですよね?
    この記事に書いてある方法なら、両方の機能とも、無効で問題ないと思います。
    「完全レスポンシブ」は、好みの方で良いかと思います。

  10. 名前:マグ 投稿日:2016/03/30(水) 23:42:32 ID:2ff29312d

    お返事ありがとうございます。

    そうです。
    Simplicity1.9.3を使用しています。
    この記事と同様に設定してもスマホでPC表示される事がありました。
    全部の記事ではなく1記事だったり、トップページだけがPC表示されたりと色々です。
    勝手に直る場合とキャッシュをクリアして直る場合と2通りです。

    対応として「ページキャッシュモード」にチェックを入れてなかったため入れてみました。
    完全レスポンシブはオフです!
    そうすると、スマホで閲覧した時にウィジェットの「投稿SNSボタン上」の「テキスト」が表示されなかったりとレイアウトが崩れました。

    今はどうすればいいか悩み中です。
    もし何か分かればでいいので教えていただけたらと思いました。
    お邪魔しました。

  11. わいひら 名前:わいひら 投稿日:2016/04/01(金) 12:33:52 ID:fbb7bb619

    おそらくW3 Total Cacheがモバイルと判定していないモバイル端末で最初の訪問があったのではないかと思います。
    ただ、そういった、細かな部分の動作に関しては、作者に問い合わせていただくしかないかもしれません。
    そこらへんの動作については、テーマ側の機能でどうこうできるものではないかもしれません。「ページキャッシュモード」を使えば、うまくいくのかもしれませんが、非推奨です。カスタマイザーの説明にも以下のようにあります。

    ※通常は利用非推奨。ページキャシュプラグインと併わせて利用して高速化を図るためのモードです。尚、この機能をオンにすると不具合があるかもしれません。ですが基本的にノーサポートです。この機能は.自分の力で何とかできる場合にのみご利用ください。

    ですので、そこら辺の設定の成否は自前で見極めていただければと思います。

    僕は現在、WP Fastest Cacheを利用しています。
    初心者にも扱いやすいWordpressキャシュプラグイン「WP Fastest Cache」の使い方
    試しに、別のキャッシュプラグインでどのような動作をするかを試してみるのもいいかもしれません。

    ※キャッシュプラグインには、重大なエラーを引き起こすものもあるので、そこらへんは自己責任でお願いします。