NginxでWordPressのスマホページを高速化してみる

　WordPressをNginxで動かしているサーバのCPU使用率が高くなってきたので、これまでNginxでキャッシュしていなかったスマホページもキャッシュすることで負荷を減らすことにしました。設定するにあたって、WPtouchが対応している端末（User Agent）にあわせてキャッシュの設定を行わないと、PCページとスマホページが混ざってキャッシュされてしまうので注意しなければなりません。

　WPtouchでは数種類の端末に対してスマホページを表示していますが、その中でもアクセスの多いiPhone（+iPod）、Androidについてはキャッシュし、それ以外の端末についてはアクセスが少なく馴染みも無いのでキャッシュしないことにしました。また、WPtouchで除外されている一部のタブレット端末（Nexus 7など）などについてもキャッシュしないようにします。

Nginx.confの設定

server {
    listen       80;
    server_name  example.com;

    location / {
        if ($http_user_agent ~* '(iPhone|iPod|Android|Googlebot-Mobile|AdsBot-Google)') {
            set $pattern 1;
        }
        if ($http_user_agent ~* '(SCH-I800|Xoom|P160U|Nexus\ 7)') {
            set $pattern '';
        }
        if ($http_cookie ~* 'wptouch_switch_toggle=normal') {
            set $pattern 2;
        }
        if ($request_uri ~* '\?wptouch_view=(normal|mobile)') {
            set $do_not_cache 1;
        }
        if ($http_user_agent ~* '(incognito|webmate|dream|CUPCAKE|froyo|BlackBerry|BB10|webOS|s8000|bada)') {
            set $do_not_cache 1;
        }
        if ($http_cookie ~* "comment_author_|wordpress_(?!test_cookie)|wp-postpass_" ) {
            set $do_not_cache 1;
        }

        proxy_no_cache     $do_not_cache;
        proxy_cache_bypass $do_not_cache;

        proxy_pass http://127.0.0.1:8080;
        proxy_cache czone;
        proxy_cache_key $scheme://$host$request_uri$is_args$args$pattern;
        proxy_cache_valid  200 60m;

        proxy_set_header Host               $http_host;
        proxy_set_header X-Forwarded-For    $remote_addr;
    }

    location ~ /purge(/.*) {
        allow              127.0.0.1;
        deny               all;
        proxy_cache_purge  czone $scheme://$host$1$is_args$args;
    }

    location ~ /purge(.)(/.*) {
        allow              127.0.0.1;
        deny               all;
        proxy_cache_purge  czone $scheme://$host$2$is_args$args$1;
    }
}

9-11行目は、6-8行目でスマホ端末として識別されてしまう端末から、実際にはスマホ表示されない端末などを除外しています。

if ($http_user_agent ~* '(SCH-I800|Xoom|P160U|Nexus\ 7)') {
    set $pattern '';
}

12-14行目は、スマホ端末として識別される端末で、PCページを表示している端末用のキャッシュの設定です。

if ($http_cookie ~* 'wptouch_switch_toggle=normal') {
     set $pattern 3;
}

15-17行目は、WPtouchでPCページとスマホページを切り替えるときにキャッシュを利用しないようにする設定です。

if ($request_uri ~* '\?wptouch_view=(normal|mobile)') {
    set $do_not_cache 1;
}

43-47行目は、スマホページ用のキャッシュを削除するための設定です。

location ~ /purge(.)(/.*) {
    allow              127.0.0.1;
    deny               all;
    proxy_cache_purge  czone $scheme://$host$2$is_args$args$1;
}

　記事の更新のとき、スマホページのキャッシュも削除されるようNginx Proxy Cache Purgeのプログラムを修正します。Nginx Proxy Cache Purgeは、Nginxのキャッシュを削除してくれるプラグインです。

 $post_url = $parse[scheme].'://'.$parse[host].'/purge'.$parse[path];
+$post_url_1 = $parse[scheme].'://'.$parse[host].'/purge1'.$parse[path];
+$post_url_2 = $parse[scheme].'://'.$parse[host].'/purge2'.$parse[path];

 $home_page_url = $parse[scheme].'://'.$parse[host].'/purge';

 if ($parse_home[path] != '') { 
+        $home_page_url_1 = $home_page_url.'1'.$parse_home[path].'/';
+        $home_page_url_2 = $home_page_url.'2'.$parse_home[path].'/';
         $home_page_url = $home_page_url.$parse_home[path].'/';
 } else {
+        $home_page_url_1 = $home_page_url.'1/';
+        $home_page_url_2 = $home_page_url.'2/';
         $home_page_url = $home_page_url.'/';
 }


 $urls = array(
     $post_url, 
+    $post_url_1,
+    $post_url_2,
     $home_page_url,
+    $home_page_url_1,
+    $home_page_url_2,
     $feed_url,
     $comments_feed_url,
     $posts_url
 );

　これでスマホページのキャッシュ対応は完了です。サイトに来るアクセスの大半はキャッシュで処理され、バックエンドまで来ることがほとんど無くなったので、サーバのCPU使用率は平均して6～10%台前半を維持するようになりました。１日５万ビジター、20万ページビューほどのサイトですが、かなり快適に動いています。

2013-04-22 追記：
スマホ端末でPCページを表示しているときへの対策を追加

2014-03-11 追記：
WPtouch Ver. 3環境での設定を追加
NginxでWPtouch（Ver. 3）の高速化