WordPress の入れ替えのため、何かしらの最適化プラグインを
入れようということで、色々調べた結果、一番ナウい(古)と噂の
W3 Total Cache を入れてみた。
どれぐらい効果があるの？
実際に計ってみた。
WebpageTest で調べた Before/After がコレ。
※CDN は CloudFlare を利用しているが、今回は割愛する。
インストール方法
管理画面から、
[プラグイン/新規追加]→[検索 "W3 Total Cache"]→[インストール]
簡単だね！
…というだけではアレなので。
W3 Total Cache は Apache2 のモジュールの機能を色々と利用しているので、
下記のようなモジュールは入れておいたほうがよい。といっても、殆どの
ディストリビューションでデフォルトで有効になってそうなものばかり。
- mod_mime
- mod_headers
- mod_deflate
- mod_expires
唯一、例外なのは mod_expires だろう。コイツはキャッシュに関する
ヘッダを色々とアレするせいか、コンテンツを激しく変更している最中に
弄ると、ブラウザや環境によっては副作用があるので、この時点で導入して
いないのであれば、一通りデザインやプラグイン、W3 Total Cache 自体の
設定が終わって落ち着いた後に導入するのがオススメである。
尚、[Performance / FAQ] にも記載がある通り、mod_rewrite は必須である。
あとは管理画面の左側メニューに[Performance]という項目が現れるので、
Installのところをクリックすると .htaccess に書き込まれた内容が見れる。
それから、これは optional な機能だが、W3 Total Cache はキャッシュの
バックエンドとして Memcached, XCache, Alternative PHP Cache (APC),
eAccelerator と連携ができるので必要な方はインストールしておくとよい。
一番安定していて、かつインストールが楽なのは APC である。多分、
効果もその分たかが知れているのだろうが、黙って入れておけばよい。
Debian あたりだと apt-get/aptitude で php-apc を一発インストール可能、
あとは Apache2 を再起動するだけだ。
当然といえば当然だが、WP Super Cache や Quick Cache のような、
他のキャッシュ関係プラグインとはバッティングするみたいなので、
無効にするか削除しておこう。
設定方法
General Settings
こんな感じにするよ。
- Page Cache: Enabled
- Minify: Enabled
- Database Cache: Disabled
- Object Cache: Disabled
- Content Delivery Network: Disabled
- Browser Cache: Enabled
Page Cache, Minify, Browser Cache は、各々「○○ Method」のプルダウンで
キャッシュ方法が選べる。デフォルトは推奨値になっているようなので、
とりあえずそのままにしよう。
インストール方法で説明した optional なキャッシュ方法を用意した場合は、
それらを選んでおくと、多分、デフォルトよりは速いだろう。多分。メイビー。
Database Cache や Object Cache は、共有ホスト(レンタル鯖や VPS など)では
ディスクのアクセス速度の関係で、逆にパフォーマンスが落ちる場合があるので、
Disabled にするのがいいらしい。僕は APC を入れたので APC にお願いしてる。
Content Delivery Network (CDN) に関しては、W3 Total Cache でサポートする
CDN が全て有料の CDN なので、ここでは無効にしておいて、CloudFlare を
利用するのが良いと思う。CloudFlare については下記の記事を読むとよく分かる。
WordPress のプラグインも用意されていて、利用も無料である。WordPress での
導入方法については、気が向いたら何か書くかもしれない。
参考: ０円の広域負荷分散システムCloudFlareが素晴らしい件 – fladdict
Page Cache
生成したページのキャッシュについて。
- General / ☑ Don’t cache pages for logged in users
- General / ☑ Cache home page
- General / ☑ Cache feeds: site, categories, tags, comments
- General / ☐ Cache URIs with query string variables
- General / ☑ Cache 404 (not found) pages
注意するべきは4つめで、これは Query String 付の URL (?foo=123&bar=abc 等) を
キャッシュするという設定で、利用しているプラグインなどによっては色々と
要らんことをしそうなので Disabled にしてくのが良いと思う。
あとは別に問題なさげ。
- Advanced / Rejected User Agents
Page Cache を無効にする User-Agent を指定する項目である。性能的な問題で
機能上の制限があるモバイル端末が主な対象である。
# IE6？Netscape？使ってる奴は一刻も早く死ね。
デフォルトでは空欄になっていると思うが、[Performance]-[User Agent Groups] に
モバイル端末の User-Agent が列挙されているので、これをコピペしておくとよい。
- Cache Preload / ☑ Automatically prime the page cache
Google Sitemap を用意している人は、ここにチェックを入れておこう。
Minify
HTML の余分な空白を削除したり、CSS や JavaScript を1個のファイルにまとめて
負荷を下げようという機能である。
- General / ☑ Rewrite URL structure
- General / ☑ Automatically upload modified files
- HTML / HTML Minify settings / ☑ Enable
- HTML / HTML Minify settings / ☐ Don’t minify feeds
- HTML / HTML Minify settings / ☑ Inline CSS minification
- HTML / HTML Minify settings / ☑ Inline JS minification
- HTML / HTML Minify settings / ☑ Line break removal
ここまでは特に深く考えず適当にチェックしても、あまり問題が出ることもない。
- JavaScript / JS minify settings / ☑ Enable
- JavaScript / JS minify settings / ☐ Combine only after <head>
- JavaScript / JS minify settings / ☐ Combine only after <body>
- JavaScript / JS minify settings / ☐ Combine only before </body>
- JavaScript / JS minify settings / ☑ Comment removal
- JavaScript / JS minify settings / ☑ Line break removal
最大の鬼門である JavaScript。ここは、チェックを入れるだけでは機能せずに、
[Add a script] を押して追加した JavaScript だけが Minify されるという仕組み。
ところが、これがサッパリ動かない。いや、確かに Minify はされている。
されているんだが、その JavaScript を使ったプラグインが全てまともに動かない。
そういうわけで僕は No JS files added のままで放置プレイしている。
- Cascading Style Sheets / CSS minify settings / ☑ Enable
- Cascading Style Sheets / CSS minify settings / ☐ Combine only
- Cascading Style Sheets / CSS minify settings / ☑ Comment removal
- Cascading Style Sheets / CSS minify settings / ☑ Line break removal
今度は CSS。これも JavaScript と同じで、[Add a style sheet] したものだけが
Minify されるようになっている。JavaScript と違って、チェックボックスの下に
テーマを選ぶプルダウンがあるが、テーマごとに CSS が違うので、それぞれの
テーマで Minify するかしないかが選べるため。まぁ、(active) になっている
テーマだけ Minify しておけばいいんじゃないでしょうか。
JavaScript と違い、元の CSS が余程の糞でもない限り、悪影響は出ないと思う。
Browser Cache
キャッシュコントロールに関するヘッダを吐くことで、ブラウザに必要な時だけ
リクエストを送ってもらう。主に mod_expires に関する設定といってもよい。
- General / ☑ Set expires header
- General / ☑ Set cache control header
- General / ☐ Set entity tag (eTag)
- General / ☑ Set W3 Total Cache header
- General / ☑ Enable HTTP (gzip) compression
- General / ☐ Do not process 404 errors for static objects with WordPress
- Cascading Style Sheets & JavaScript / ☑ Set expires header
- Cascading Style Sheets & JavaScript / ☑ Set cache control header
- Cascading Style Sheets & JavaScript / ☐ Set entity tag (eTag)
- Cascading Style Sheets & JavaScript / ☑ Set W3 Total Cache header
- Cascading Style Sheets & JavaScript / ☑ Enable HTTP (gzip) compression
- HTML / ☑ Set expires header
- HTML / ☑ Set cache control header
- HTML / ☐ Set entity tag (eTag)
- HTML / ☑ Set W3 Total Cache header
- HTML / ☑ Enable HTTP (gzip) compression
- Media & Other Files / ☑ Set expires header
- Media & Other Files / ☑ Set cache control header
- Media & Other Files / ☐ Set entity tag (eTag)
- Media & Other Files / ☑ Set W3 Total Cache header
- Media & Other Files / ☑ Enable HTTP (gzip) compression
大体こんな感じ。
ETag は Apache2 の現在の実装だと、i-node, mtime, size の情報を元にしか
生成できない。複数サーバで冗長化している場合、i-node を同じにできないので
全く同じファイルでも ETag が同じ値にならず、無駄なリクエストが発生する。
じゃー mtime や size で ETag 作ればいいじゃないかという話もあるが、今度は
サイズと更新時刻さえ揃えてしまえば全く違うファイルでも ETag が同じ値に
なるので、それはそれでアレ。…ということで、僕は基本的に ETag が嫌いで、
一律オフにすることにした。
Expires header lifetime, Cache Control policy はコンテンツの種類に応じた推奨値が
デフォルトで設定されているようなので、理由がない限りは弄る必要はない。
最後に
設定を変更したら必ず deploy ボタンを押すこと。設定が反映されなくて泣く。
あと、プラグインをインストールしたりすると上部に「キャッシュを消せ！」と
通知が出るので、指示に従うように。出力が変になったりして、やっぱり泣く。
なんか動作がおかしい
キャッシュを消す。
[Performance]-[General Settings] の上部に [empty all caches] というボタンがあるので、
とりあえずそれを押しておけば間違いない。
これはいちいち面倒くさいので、管理画面の大抵の場面で、右上のプルダウンから
[Empty Caches] を選べば簡単にキャッシュをクリアできる。
投稿ごとにキャッシュを削除したい場合は、投稿一覧の [編集] とかがあるあたりに
[Purge from Page Cache] が追加されているので、それで削除できる。
このエントリーを共有する
[...] http://xeres.jp/2011/04/25/w3-total-cache-no-susume/ [...]