WordPressのテーマ変更 その5: Simplicityの高速化

Gearbest Gadgets Daily: Up to 95% OFF
高速化

前回はこのブログのテーマであるSimplicityをバージョン1.4からバージョン1.5に更新しました。

しばらく使っていて慣れてきたので、そろそろSimplicityに無効にしていた高速化の施策を復活させてみようと思います。

HTMLの最適化

HTMLの最適化(minify)には以前から使用していたWP-HTML-Compressionプラグインを使用してみることにします。

WP-HTML-Compression
Developer: Steven Vachon
Price: Free
WordPress高速化: WP-HTML-Compression
今回はWordPressの高速化を目指してWP-HTML-Compressionプラグインを導入します。効果は微妙なところですが、インストールだけの設定いらずで簡単ですし、WP Super Cacheプラグインと組み合わせると、副作用も解消することができます。

結果は全く問題なし! いまのところ画面レイアウトが乱れるような問題は出ていません。このプラグインは有効のままとしました。

CSSとJavaScriptの最適化

CSSとJavaScriptとの最適化(minify)にもプラグインを使います。またプラグインによって複数のファイルを一つに結合することによって高速化も行います。

これには以前はJS & CSS Script Optimizerというプラグインを使用しておりました。

JS & CSS Script Optimizer
Developer: Yevhen
Price: Free
WordPress高速化: JS & CSS Script Optimizer
今回はWordPressの高速化を目指してJS&CSS Script Optimizerプラグインを導入します。 ちょっとマイナーかもしれませんが、しっかりとJSファイルとCSSファイルを最適化してくれます。最適化後にトラブルが発生した場合に、その原因となるファイル特定して除外するというのが難しいかもしれません。

しかし、いろいろ試したのですが、うまく動かす設定を見つけることができませんでした。私の直面した問題としては

  • SNSボタンのシェア数の読み込みがいつまでたっても終わらない
  • 画面のレイアウトが崩れる(広告が画面の最上部に表示されたり
  • などなど

という感じでした。最適化から除外するファイルを増やしていったのですが、結局ほとんどのファイルを最適から除外する必要があり、意味がなくなってきたので断念することにしました。

なお、Simplicity 1.4.4からHead CleanerというプラグインによるCSSとJavaScriptファイルの最適化に対応したとのことですが、私のところではHead Cleanerもうまく動かすことができず(以前のテーマでもHead Cleanerはうまく動かなかった)、こちらも断念しました。

結局CSSとJavaScriptの最適化は見送りとなりました。

キャッシュの導入

高速化の中で最大の効果があるのがキャッシュの導入です。以前のテーマでもWP Super Cacheプラグインを導入して高速化していました。

WP Super Cache
Developer: various
Price: Free
WordPress高速化: WP Super Cacheの導入
今回はWordPressの根本的な高速化を図るため、WP Super Cacheというプラグインを導入します。また、WP Super Cacheにあわせてnginxの設定も変更します。
Wordpress高速化: WP Super Cache + RAMディスク
今回は増量されたメモリを活用するためにRAMディスクを導入し、WP Super Cacheプラグインのキャッシュ用ディレクトリとして利用します。RAMディスクはHDDに比べてかなり高速なので、WordPressのパフォーマンスの向上が期待できます。

テーマをSimplicityにした場合もこれはこのまま使えるのですが(上記例ではWPTouch対応をONしているがこれは不要)、SimplicityはモバイルブラウザとPCブラウザで若干表示内容を変えているのでひと工夫が必要です。

この設定については下記で紹介されているのでそれをそのまま踏襲することで、モバイル向け・PC向けでそれぞれ最適なページを表示させることができます。

nginxのプロキシ・キャッシュの導入

WP Super Cacheがあればいらないような気もしますが、nginxのプロキシ・キャッシュ機能を有効にするとさらに高速化することができます。これも以前のテーマでも利用しておりました。

WordPress高速化: nginxのプロキシ・キャッシュ
今回は更なるWordPressの高速化のために、nginxのプロキシ・キャッシュ機能を使ってみます。 なかなか設定が難しいですが、何とか設定に成功してWordPressが動作するところまでこぎつけました。
WordPress高速化: nginxのプロキシ・キャッシュ+RAMディスク
今回はnginxのプロキシ・キャッシュ用のディレクトリをRAMディスクとすることにより、WordPressの更なる高速化に挑戦したいと思います。使用しているVPSであるServersMan@VPSでディスクが遅いときがあるので、RAMディスクにすることで高速化が期待できます。

なおプロキシ・キャッシュ用の設定ファイルは次のように変更しています。iPadの場合もiPhoneと同様にモバイル用のキャッシュを見せている点に注意です。

# proxy_cacheを管理するためのキーを設定
set $proxy_cache_key "$scheme://$host$request_uri";
set $mobile_mode    "";

# デフォルトはproxy_cacheを使用する
set $do_not_cache 0;

### モバイルユーザの判定
###
### WordPressの表示をモバイルと通常で切り替えている場合は、
### モバイルユーザの場合は基本的にproxy_cacheを使用しない。
###
### ただし、iPhone, iPod, Androidの場合は、
### proxy_cache_keyを切り替えて別キャッシュを利用する。

# WAP端末かどうか
#if ($http_x_wap_profile ~ ^[a-z0-9\"]+) {
#    set $do_not_cache 1;
#}

#  携帯端末かどうか(?)
#if ($http_profile ~ ^[a-z0-9\"]+) {
#    set $do_not_cache 1;
#}

#  モバイルブラウザかどうか その1
if ($http_user_agent ~ ^.*(2.0\ MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraW
eb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|
Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS
|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|Windows\ Phone|WinWAP|YahooSeeker/M1A1-R2D2|BlackBerry9530|LG-T
U915\ Obigo|LGE\ VX|webOS|Nokia5800|Windows\ Phone|Mobile\ Safari).*) {
    set $do_not_cache 1;
}

#  モバイルブラウザかどうか その2
if ($http_user_agent ~ ^(w3c\ |w3c-|acs-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-|dang|doco|eric
|hipt|htc_|inno|ipaq|ipod|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-|lg/u|maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-
|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony
|sph-|symb|t-mo|teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|wap-|wapa|wapi|wapp|wapr|webc|winw|winw|xda\ |xda-).*) {
    set $do_not_cache 1;
}

#  携帯端末かどうか
if ($http_user_agent ~ ^(DoCoMo/|J-PHONE/|J-EMULATOR/|Vodafone/|MOT(EMULATOR)?-|SoftBank/|[VS]emulator/|KDDI-|UP\.Browse
r/|emobile/|Huawei/|IAC/|Nokia|mixi-mobile-converter/)) {
    set $do_not_cache 1;
}

#  その他携帯端末・ゲーム・PDAかどうか
if ($http_user_agent ~ (DDIPOCKET\;|WILLCOM\;|Opera\ Mini|Opera\ Mobi|PalmOS|Windows\ CE\;|PDA\;\ SL-|PlayStation\ Porta
ble\;|SONY/COM|Nitro|Nintendo)) {
    set $do_not_cache 1;
}
### モバイル端末の判定終了

## Androidの場合は別キャッシュを使う
if ($http_user_agent ~ ^.*(Android).*) {
     set $mobile_mode "mobile::";
}

# iPhone/iPod/iPadの場合は別キャッシュを使う
if ($http_user_agent ~ ^.*(iPhone|iPod|iPad).*) {
     set $mobile_mode "mobile::";
}

### 特別な条件ではキャッシュを使用しない
# phpファイルの場合はproxy_cacheを使用しない
if ($uri ~* "\.php$") {
    set $do_not_cache 1;
}

# 圧縮非対応ブラウザならキャッシュを使用しない
if ($http_accept_encoding !~ "gzip") {
    set $do_not_cache 1;
}

# コメントしたユーザだったらWP Super Cacheのキャッシュデータを使わない
if ($http_cookie ~ "(wordpress_logged_in_|comment_author_)(.*)") {
    set $do_not_cache 1;
}

# POSTリクエストならキャッシュデータを使わない
if ($request_method = POST) {
    set $do_not_cache 1;
}

# クエリ文字列があったらキャッシュデータを使わない
if ($query_string) {
    set $do_not_cache 1;
}

# 検索結果はキャッシュを使わない
if ($request_uri ~* "/google-results") {
    set $do_not_cache 1;
}

### 以上の設定にしたがってproxy_cache機能を利用する
location / {
    proxy_no_cache $do_not_cache;
    proxy_cache_bypass $do_not_cache;
    proxy_cache_key $mobile_mode$proxy_cache_key;
#    proxy_pass http://unix:/var/run/nginx.sock;
    proxy_pass http://127.0.0.1:8080;
    proxy_connect_timeout       600;
    proxy_send_timeout          600;
    proxy_read_timeout          600;
    send_timeout                600;
    proxy_ignore_client_abort   on;
}

その他

次の高速化対策は以前のテーマと同じ設定のまま流用しています。

WordPress高速化: WP Hyper Responseプラグイン
今回はWordPressの高速化を目指してWP Hyper Responseプラグインを導入します。シンプルなプラグインで副作用の心配がないのがよいところです。管理画面のレスポンスがよくなった気がするので継続して利用することとしました。
WordPress高速化: memcachedの利用
今回はWordPressの高速化を目指してmemcacheとWordPressを組み合わせてみます。 WP Super Cacheが導入済みの場合、通常のWordPress画面で早くなることはありませんが、管理画面では明らかに反応がよくなります。メモリの余裕がある方はぜひmemcachedを利用してみてください。
WordPress高速化: SPDYの利用
今回はWebサーバのSPDY機能を有効にしてHTTPSを使っているWordPressの画面の高速化を行います。 効果としては劇的というほどではありませんが、感覚的には高速化しておりますし、何よりnginxの設定ファイルにたった4文字付け加えるだけというお手軽さです。SPDY対応はぜひしておくことをお勧めします。
WordPress高速化: EWWW Image Optimizer
今回はWordPressの高速化を目指してEWWW Image Optimizerプラグインを導入します。設定項目はちょっと多くて焦りますが、日本語の紹介ページを見れば問題なく設定できるはずです。画像を縮小すれば通信量も節約でき、スマホでの読者が多いサイトにはお勧めです。

まとめ

今回はテーマをSimplicityに変更した後に適用した高速化手法を紹介しました。

ほとんどが以前のテーマの設定のまま流用するすることができましたが、CSSとJavaScriptの最適化だけはうまくいきませんでした。ただSimplicityはそのままでも十分早いテーマなので今回の高速化はここで打ち切ることにしました。

次回はWordPress Popular Postsプラグインについて紹介したいと思います。