WordPress高速化: Nginx Cache Controllerプラグインとモバイル・ブラウザ

WordPressの導入と設定

2013/05/272020/04/02

前回はNginx Cache Controllerプラグインを導入することによって、WordPressの更新時にnginxのプロキシ・キャッシュのデータが削除されるようにしました。

しかし、まだ一点だけ問題があります。それはモバイルブラウザ(Android/iPhone)の場合です。今回はこの問題を解決してみようと思います。

モバイルブラウザ時の問題点
参考ページ
関数の追加
動作確認
まとめ

モバイルブラウザ時の問題点

このサイトはAndroid/iPhoneでの表示を早くするために次の工夫を行っています。

WPTouchプラグインを使って軽量化したWebページとする
WPTouchの表示もnginxのプロキシ・キャッシュの対象とする

この2番目は、nginxのプロキシ・キャッシュの設定で、Android/iPhone時にキャッシュに使うキーを変更することにより実現していますが、これが問題だったりします。

下記が私のnginxの設定の該当部分です。

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

・・・・

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

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

・・・・

location / {
    proxy_no_cache $do_not_cache;
    proxy_cache_bypass $do_not_cache;
    proxy_cache_key $proxy_cache_key;
    proxy_pass http://unix:/var/lib/nginx/proxy.sock;
}

これを見てわかるようにAndorid/iPhoneの場合は通常のキャッシュキー「$scheme://$host$request_ur」の先頭に「mobile::」を追加しています。

Nginx Cache Controllerプラグインは、キャッシュキー「$scheme://$host$request_ur」に対応するデータだけを削除するので、モバイルブラウザのキャッシュデータは削除されないことになります。

参考ページ

この問題を解決するに当たり、下記のページが参考になりました。

どうやら、Nginx Cache Controllerプラグインの設定ではなく、別途関数を追加しなければいけないようです。

Samsung 256GB microSDXCカード EVO Plus Class10 UHS-I U3 A2 4K R:130MB/s MB-MC256KA

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

関数の追加

参考ページを見るとfunctions.phpに追加しています。このファイルはプラグインのファイルではなくテーマについてくるファイルです。

変更するにはWordPressの設定画面で「外観」→「テーマ編集」を選び、右側のファイルリストから「functions.php」を選択します。

すると真ん中のテキストエリアにfunctions.phpの内容が表示されますので、下記内容を最後の行の「?>」の手前にコピペして「ファイルを更新」を選びます。

add_filter('nginxchampuru_get_cache', 'nginxchampuru_get_cache', 10, 2);
function nginxchampuru_get_cache($key, $url = null) {
    global $nginxchampuru;
    if (!$url) {
        $url = $nginxchampuru->get_the_url();
    }
    $keys = array(
        $key,
        $nginxchampuru->get_cache_key('mobile::'.$url),
    );
    if ($key !== $nginxchampuru->get_cache_key($url)) {
        $keys[] = $nginxchampuru->get_cache_key($url);
    }
    return $nginxchampuru->get_cache_file($keys);
}

10行目が追加のキャッシュ・キーになります。私の場合は、nginxの設定で先頭に「mobile::」をつけることにしているので、上記のような記述になります。