「W3 Total Cache」はWordPressで作成されたブログの表示速度を高速化できるキャッシュ系プラグインの1つです。今回は他プラグインやスピードアップ対策との併用やスマホ対応などの設定方法を共有したいと思います。
前回の記事でも1秒台を達成したと書きました。表示速度の計測サービスGTmetrixでは、はじめての「AA」（ダブルエー）スコアも達成しました。
ゆめぴょんです。こんちはっ(^^)/
今回の記事は「W3 Total Cache」プラグインを導入していることが前提です。「W3 Total Cache」の特徴、インストールや設定方法などについては下のリンクから参照してください。
また今までの高速化の方法をまとめた記事も参考にしてください。
現在利用中の高速化対策とプラグイン一覧
私が現在（2013.08.12時点）、ブログ表示の高速化のために利用している技術やプラグインの一覧です。
- ページ・キャッシュ／Page Cache – W3 Total Cache
- ブラウザ・キャッシュ／Browser Cache – W3 Total Cache
- オブジェクト・キャッシュ／Object Cache – 001 Prime Strategy Translate Accelerator（日本語化のみ）
- データベース・キャッシュ／Database Cache – DB Cache Reloaded Fix
- コンテンツデリバリーネットワーク／CDN – CloudFlare
- JS・CSS・HTML圧縮／Minify – CloudFlare+W3 Total Cache
- JavaScriptの自動遅延・後読み/Rocket Loader – CloudFlare+W3 Total Cache
- PHPバッファの先出し表示 – WP Hyper Response
- 画像圧縮（投稿前） – ImageOptim、Picasa、JPEG mini
- 画像圧縮（投稿後） – WP Smush.it、Regenerate Thumbnails
「W3 Total Cache」と他キャッシュ系プラグインとの併用時の設定方法
まず「001 Prime Strategy Translate Accelerator」と「WP Hyper Response」については通常設定で問題ありません。
ちなみに「MO Cache」も「001 Pri…」と同じ翻訳言語のキャッシュプラグインですが、オブジェクトキャッシュ「Wp File Cache」も併用する必要があります。私は最近の更新頻度から「001 Prime Strategy Translate Accelerator」を選択しました。
「DB Cache Reloaded Fix」については「W3 Total Cache」導入後に画面上部に赤字でエラーが出ました。キャッシュをクリアしたり有効期限を変えたりしたけどエラーのままです。
そこで「DB Cache Reloaded Fix」の設定画面（「設定」→「DB Cache Reloaded」）の一番下「詳細」の「ラッパーモード」を「有効」にしたらエラーはなくなりました。有効にするには一回キャッシュを無効にして有効に戻す必要があります。
ただしもしエラーが出てなければ「ラッパーモード」は無効のままの方がキャッシュ効率は上がります。
あと画像を後読みしてくれるプラグイン「lazy load」も私の環境では相性が悪かったので利用をやめました。画像の位置がずれたりしたら外した方がいいかも。画像もキャッシュで表示されるので、はずしても問題ないです。
スマホ対策方法／「WP touch」との併用
「W3 Total Cache」のページキャッシュ機能を利用すると、スマホでブログを見た時にもPCモードで表示されてしまいます。これはユーザーエージェント（アクセスした端末の種類）を判定する前にキャッシュを表示してしまうからです。
また「WP touch」プラグインを利用している場合にも同じ現象が起こるようです。ちなみに簡単にスマホ対応できるプラグイン「WP touch」についての記事も参考にしてくださいね。
ではスマホ対策の設定方法です。「W3 Total Cache」の「ページキャッシュ/Page Cache」機能を利用している方は、WordPress管理画面の左メニューから「Performance」→「Page Cache」をクリックしてください。
「Advanced」設定の「Rejected user agents:」の入力欄に下の文字列をコピペしてください。わかる人は必要なものだけ選んでもいいと思います。最後に「Save all settings」クリックを忘れずに！
iphone
ipod
ipad
pre
pixi
iemobile
aspen
incognito
webmate
android
dream
cupcake
froyo
blackberry9500
blackberry9520
blackberry9530
blackberry9550
blackberry 9800
blackberry 9780
blackberry 9850
blackberry 9860
webos
s8000
bada
もし「W3 Total Cache」の「Minify」機能を利用している方は、そちらの「Rejected user agents:」にも同じ設定をしてください。私のようにCloudFlareを利用している人には関係ありませんが。
最後にWordPress管理画面の「Performance」の「User Agent Groups」をクリックして、「Group name」が「1.high」、「Enabled」にチェック、「Theme」が「Pass through」になってることも確認してください。
「CloudFlare」の「Rocket Loader」によるJavaScriptあと読み設定
前回「W3 Total Cache」の「CloudFlare」設定で「Rocket Loader」を「Automatic」に設定しました。「Rocket Loader」はブログで利用している全JavaScriptを後読み（遅延読込み）することにより表示速度を高速化します。
具体的には「複数のJavaScriptを結合したり」「JavaScriptを非同期であと読みしたり」を自動的に行なってくれるようです。実際の内部処理についての具体的な記述は見つからなかったので、私もそのくらいしか理解できてません。
しかしブログを表示してみてソースを確認すると、JavaScriptの読み込み時に「type=”text/rocketscript” 」になっているのが確認できます。ブラウザはrocketscriptなんてスルーするので、CloudFlare側でAjax処理してくれてるみたいです。
さてうれしいことばかりの「Rocket Loader」ですが、実はテーマやスクリプトの種類によっては不具合を起こすこともあるようです。スクリプトを使う処理で何かおかしければ「Rocket Loader」を疑いましょう。
設定の場所は「Performance」の「General Settings」の「Cloudflare」で検索すれば見つかります。下の方です。「Rocket Loader」を「Off」にして「Save」すればスクリプトは全て自動で元に戻ります。
または「Off」にせずに「Automatic」のままでも、指定したスクリプトだけ「rocketscript」にしない方法があります。スクリプト文に「<script data-cfasync=’false’ src=…」のように書けばいいです「Google Adsense」などで利用すればいいと思います。
あとこれは試してないので推測ですが「Manual」の場合は「data-cfasync=’true’」に設定したスクリプトのみ「rocketscript」に変換されるのではないでしょうか。知ってる人がいれば教えてください。
ちなみに以前ブログで紹介したソーシャルボタンのあと読み設定ですが、Rocket Loaderを導入したなら解除した方がいいかも。「あと読み」の「あと読み」になるので。
「Rocket Loader」については下の記事も参考にしました。感謝です。
◆ページの読み込み速度を劇的に改善！CloudFlareとW3 Total Cacheを組み合わせて高速化する方法
「CloudFlare」の「Minify」でコメントを削除しない方法
「W3 Total Cache」で「CloudFlare」の「Minify」を利用設定していると、HTML内の全てのコメントも削除してくれます。通常はこれで何も問題無いのですが、コメントを利用するサービスもあるので要注意です。
例えば「Zenback」を利用している場合、関連記事の精度を上げるために本文をコメントタグで囲みます。「Minify」機能はこのタグも削除してしまいます。
上のJavaScriptのように特定コメントだけ残す方法を探しましたが見つかりませんでした。もしご存知の方がいらっしゃれば、ぜひ教えてください。
ちなみに「W3 Total Cache」の「Minify」機能を利用している場合には特定コメントを残す方法があります。WordPress管理画面から「Performance」→「Minify」をクリックしてください。
2段目の「HTML & XML」の「Ignored comment stems:」の入力欄に例えば「zenback_body_begin」などと入力して「Save all setttings」ボタンを押せばOKです。「CloudFlare」の「Minify」を利用している方は無効なので要注意です。
テーマ編集でCSSが更新されない場合。キャッシュクリア方法
キャッシュ系プラグインを利用しはじめると、WordPressのテーマやスタイルシートやJavaScriptを編集したのに、すぐ更新されない場合がでてきます。「CloudFlare」を利用している場合の対処方法は次のとおりです。
CloudFlare Settingsにアクセスしてログインしてから、中段の「Purge single file」をクリックしてください。そしてクリアしたいファイル名を入力してください。
例えば「http://wispyon.com/****/style.css」のようにフルパスで入力してから、「Purge file」ボタンを押せばそのファイルのみキャッシュクリアできます。全キャッシュをクリアしたければ「Purge Cache」をクリックです。
もしそれでも更新できない場合は、「W3 Total Cache」のページキャッシュ、ブラウザキャッシュや他のキャッシュ系プラグインのキャッシュもクリアしていきながら確認していってください。
まとめ：今日のゆめぴょんの知恵
以上が「W3 Total Cache」と「CloudFlare」及び、その他キャッシュ系プラグインとの併用・共存環境の構築について注意すべき点でした。
WordPressブログの表示速度の高速化については、下のまとめ記事も参考にしてみてください。
ゆめぴょんでした。ちゃおっ！
