Wordpressはpluginで色々拡張できるのは嬉しいのですが、程度をわきまえないと閲覧が重くなってしまいかねません。そこで色々工夫してみた事のメモです。
ほいほいとpluginを導入しないとか重いThemaを避ける等も意味があるでしょう。でももっと劇的な効果が得られる手段もあります。出力の最適化やキャッシュ機構を組み込むplugin達です。
今回はWP Super CacheとHead Cleanerを利用してみました。前者は強力なキャッシュ機構が得られる物、後者は出力するHTMLのヘッダ部分(特にCSSやJavaScript)を最適化することで高速化を図るものです。この二つはアプローチが異なるものなので併用が可能であろう事が推測され、相乗効果が期待できました。そういう訳でこの二つを選んだのです。
WP Super Cacheの導入は少し面倒でした。このblogのあるサーバのPHPはsafe modeで動いているので、cacheディレクトリ等の権限の関係で上手く動かないのです。検索するとWordpressをCGIモードで動かして回避する策が紹介されていました。確かにCGIモードにすれば回避できるのではありますが、せっかくモジュール版PHPを使える環境なのにそれを捨てるなんてとんでもないと思い、色々やってみました。結果からいえばcacheディレクトリを自前で作り、またその下にmetaとsupercacheというディレクトリも作成、それらとwp-contentディレクトリに707等のパーミッションを手動で与えれば動作しました。動作モードはHALF ONにしてあります。ONで手動設置の方法が使えるかは未検証です。
次にHead Cleanerです。こちらの導入は容易でした。ただ、同じくcacheディレクトリ内にこのplugin専用のディレクトリを手動で作成し、707等のパーミッションを与える必要があります。これはWP Super Cacheと同じ理由です。
しかしながら、WP Super Cacheとの関係でデフォルト状態ではCSSやJavaScriptの最適化&結合が出来ませんでした。これは、Head CleanerとWP Super Cacheが同じcacheディレクトリを使っているのですが、WP Super Cacheのキャッシュ削除ルーチンが走るとcacheディレクトリ内のファイルやディレクトリが一掃されてしまうのが原因でした。つまりHead Cleanerの為のディレクトリも削除され、結果としてHead Cleanerが上手く働かなくなってしまうのです。これには参りました。多分WP Super Cache側の問題といって良いと思います。
解決までは色々試行錯誤しましたが、結局WP Super Cacheのcacheディレクトリを別にする、という手法で解決を図りました。実際の変更箇所は次の通りです。
./wp-content/wp-cache-config.php ---- $cache_path = WP_CONTENT_DIR . '/任意の名前/';
新たに作成するWP Super Cache用のcacheディレクトリは上と同じように設定します。これで両pluginがまともに稼動するようになりました。wp-cache-config.phpが存在しない場合は、WP Super Cacheのディレクトリ内のwp-cache-config-sample.phpをリネームして配置してください。
後、最後に少しだけ嵌った事が2点あります。まず、Head Cleanerの最適化は
<?php wp_head(); ?>
よりも上の部分にだけ適用されるのだそうです。現在使用しているblogテーマのCSSはそれよりも下で設定されていた為、対象外となっていました。何度もキャッシュをクリアしたりしても効果が無くて延々悩んでいました。
もうひとつはCSS結合を行うとA要素のbackground-imageが変になる現象が発生しました。例えば、メニューの夫々のリンクにある矢印画像は
background-repeat: no-repeat;
に設定されている筈なのですが、なぜかrepeatされているような状態になってしまってました。これも色々探求した結果、『CSS最適化 オプション』の『font-weightを数値にする』を切れば回避できることが判明しました。多少不可解な現象ではありましたが、問題は解決しました。
さぁ、快適化の工夫の結果はどうなのかFirebugで測定してみました。まず何もしない状態でtopにアクセスすると大体2-3秒くらい掛かりました。両プラグインをONにすると1秒台に収まるようになりました。大体1.5秒位の高速化です。今回の挑戦は成功に終わったと言えるでしょう。あとはしばらく運用して問題がないかチェック、ですね。