前回、Wordpressのページキャッシュ設定に関する以下の記事を書きました。
上の記事は、Wordpressのページキャッシュプラグインは、1ページにつき1つのキャッシュしか生成されないと思っていて書きました。というか、こういったプラグインはそういうもんだと思い込んでいました。
なので、パソコンとモバイルで表示が変わるようなテーマだと、ページキャッシュプラグインを使うと、表示がおかしくなると考えていました。
しかし、W3 Total Cacheというキャッシュプラグインを利用すれば、パソコンでもモバイルでも両方のキャッシュを作成し綺麗に表示することができることを知りました。（よくできる？学生さんにコメントで教えていただきました。）
それで昨日、設定してみたら、設定方法が簡単で驚きました。その上、パソコンでもスマホでも、しっかりと意図通りのデザインが表示される、素晴らしい機能だったので、その設定方法について紹介したいと思います。
今回の設定を利用すれば、大抵のテーマであれば、問題なく表示されるようになると思います。
今回の方法は、テーマ側の設定を変更する必要はありません。
他のキャッシュプラグインでも同様の機能はあるのかもしれません。
目次
主な手順
今回行う、設定の主な手順は以下になります。
- W3 Total Cacheのインストール＆有効化
- W3 Total Cacheの基本設定
- 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をインストールして有効化すると、Wordpress管理画面のメニューに「Performance」という項目が表示されると思います。それが、W3 Total Cacheの設定メニューになります。
基本設定の表示
基本的な設定を行うには、「Performance」メニューから「General Settings」項目を選択してください。
すると、以下のような設定画面が表示されると思います。
以下では、それぞれの項目ごとの設定方法を紹介します。
General
General設定部分は、特に変更する必要はありません。
チェックされてないことを確認してください。
ページキャッシュ（Page cache）
ページキャッシュのPage cacheと書かれた部分にチェックを入れます。
この設定を行うと、ページに訪問者が初めて訪れた時にページキャッシュファイルが作成されます。
そして、次の訪問者からは、複雑な動的処理は行われず、単なるHTMLともいえる静的ページキャッシュファイルが表示されることにより、サーバーのCPU負荷の軽減を図ることができます。
これにより、ページ表示も高速化されます。
縮小化（Minify）
縮小化部分は、特に設定を変更する必要はないと思います。
こちらは、JavaScriptファイルや、CSSファイルの、改行や余分なスペースを取り除いて縮小化する機能です。
ただ、JavaScriptなどを縮小化すると、環境によっては不具合が出ることがあるので今回は利用しません。
こういった設定について、あまり詳しくない場合は、とりあえずさわらないほうが無難かと思います。
データベースキャッシュ（Database Cache）
Database Cache項目にチェックを入れます。
これは、データベースなどでよく利用するクエリをキャッシュしておく設定です。多分。もし間違ってたらごめんなさい。
クエリ キャッシュには、
SELECTステートメントのテキストを、クライアント送信の関連結果を合わせて格納します。後でまったく同じクエリを受け取ると、サーバはそのクエリの解析と実行を繰り返す代わりに、クエリ キャッシュから結果を取り出します。
引用：MySQL 5.1 リファレンスマニュアル :: 4.13 MySQL クエリ キャッシュ
これを利用すると、よく利用されているクエリなら、キャッシュが利用されるので、高速化が図れます。
オブジェクトキャッシュ（Object Cache）
Object Cache項目は、そのままにしておきます。チェックは入れません。
本来なら、この機能もオンにしてよいのだろうと思います。
ただ、この機能を使うと、モバイル端末によっては表示に不具合が出るそうなので、今回の設定では利用しません。
詳しくは、今回の設定の参考にさせていただいた以下の記事を参照してください。
ブラウザキャッシュ（Browser Cache）
Browser Cache項目にチェックを入れます。（※別にブラウザキャッシュの設定をしている場合は不要）
ブラウザキャッシュは、サイトのリソース（CSS、JS、画像、フォントなど）をブラウザにキャッシュしておくことで、2回目以降はそのブラウザキャッシュが読み込まれるので、サーバーの転送量削減が図れます。
ただブラウザキャッシュは、転送量の削減などには有効ですが、サーバーCPU負荷の削減対策にはならないので注意が必要です。
ただ、ブラウザキャッシュの設定を行っていない場合、こちらの設定は、やっておいた方が良いと思います。
その他の設定項目
これ以降、CDN、プロキシ、モニタリングなどの設定がありますが、デフォルトの設定状態のままで、特に設定する必要はないかと思います。
最後に設定の保存
あとは、「Save All Settings」ボタンを押して設定を保存してください。
これで基本設定（General Settings）は終了です。新たにチェックした項目は3つの簡単な設定です。
W3 Total Cacheのモバイル表示設定
ここまでの設定でも、ページキャッシュは作成されます。
ただ、このままだとページを最初に見た端末でキャッシュファイルが作成されてしまいます。そうすると、パソコンで見ているのに、モバイルのインターフェースが表示されてしまうなんて事になってしまいます。
そんなことにならないように、パソコンではパソコン用のキャッシュを、モバイルではモバイル用のキャッシュを生成するように設定する必要があります。
ユーザーエージェントグループ設定
その設定を行うには、Wordpress管理画面の「Performance」メニューから「User Agent Groups」を開きます。
「User Agent Groups」設定画面を開くと、ユーザーエージェントをグループ分けして、グループごとにキャッシュを作成する設定を行うことができます。
スマホなどで別にキャッシュを作成する
スマートフォンなどのハイエンドモバイル端末で、パソコンとは別のキャッシュを作成する場合は、「Group name」が「high」となっているグループを表示させます。
そして、Enable項目にチェックを入れます。
これにより、ユーザーエージェント情報において以下の文字列にヒットするモバイル端末は、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 Groups」設定ページにある「Create a group」ボタンを押すと、新たなグループも作成することができます。
細かく設定して、キャッシュ表示を制御したい場合は、新たにユーザーエージェントグループを作成するのも良いかもしれません。
よくわからない場合は、設定しなくてOKです。
設定を保存
最後に、設定画面の下の方にある「Save all settings」ボタンを押せばOKです。
これで、W3 Total Cacheの全ての設定が完了しました。
参考 モバイル版表示でもキャッシュが効くW3 Total Cache | iPhone 研究室
Simplicityを利用している場合の設定
Simplicityを利用している場合は、テーマ（もしくは子テーマ）のfunctions.phpに以下をコピペしてください。
W3 Total Cache v0.9.6以降を利用する場合は、必ず以下のコードを貼り付けてください。
if (function_exists('w3_instance')) {
function is_mobile() {
$cache = w3_instance('W3_PgCache');
$group = $cache->_mobile->get_group();
return "high" === $group || "low" === $group;
}
}
これは、Simplicityのスマホ判定をW3 Total Cacheの判定に合わせるコードです。
参考 【Simplicity2】W3 Total CacheのPage Cacheを正しく使う
動作確認
W3 Total Cacheの設定終了後、動作確認をします。
動作確認は、もちろんパソコンや、手持ちのスマホなどから行うのも良いのですが、手軽に両方を行うために、PageSpeed Insightsを用いて行います。
動作確認をするサイトのURLを入力して、「分析」ボタンを押してください。
スマホとパソコンのスクリーンショットで、それぞれ意図通りの表示がされていればOKです。
まずはスマホ。
次はパソコン。
PageSpeed Insightsで確認した後は、実機や、エミュレータなどでも確認してみてください。
サーバーの応答時間
W3 Total Cacheを利用したことにより、以前は以下のように修正提案が表示されていたとしても、
以下のように「このサーバーは素早く応答しています」と出るようになれば尚良しです。
上のようなメッセージは出ずとも、応答時間はかなり改善されているのではないかと思います。
当サイトの場合は、このキャッシュプラグイン利用後は、「サーバーの平均応答時間」がかなり改善されています。
モバイル用にグループ分けしてキャッシュを作成すると、パソコン用のみのキャッシュ作成よりは、何ミリ秒ぐらいは、遅くなることはあるのかもしれません。ただ、体感ではわからないかと思います。
あと、Wordpress Popular Postsのようなアクセスごとに何かしらの処理をするプラグインが入っていると効果が現れない場合があります。そういった場合は、プラグインをオフにしてください。
まとめ
キャッシュプラグインといえば、結構面倒な設定をしなければならないかと思いますが、今回の設定は比較的簡単なのではないかと思います。
というのも、設定部分で数回ほどチェックボックスにチェックするだけでできる設定だからです。（※インストール時のデフォルト設定状態の場合）
とりあえず、この設定にしたおかげで、サーバーの負荷は大幅に削減できましたし、ブラウザでのページ表示も体感できるほど早くなりました。その上、パソコンとモバイルで異なったキャッシュが作成されるようになったことで、広告報酬も平常通りのパフォーマンスが期待できます。
個人的にはこの設定、かなり感動しました。
ということで、「最近サイトのページ表示が遅い」とか「サーバーから負荷を減らせと怒られている」なんて方は、一度このW3 Total Cacheを使った方法を試してみる価値はあると思います。
尚、もしW3 Total Cacheを用いて500エラーなどが出る場合などは、以下の方法などで復帰させることができるので、事前にチェックしておくことをおすすめします。
total cacheだけでなく、mo cacheも併用するとよりベターです。
Wordpressは翻訳する部分が結構な処理なんです。まぁ元が英語のアプリなのでアレなんですけどね。
なので、そこらをキャッシュしとくと、より効果が出るって寸法です。