前回はこのブログのテーマであるSimplicityをバージョン1.4からバージョン1.5に更新しました。
しばらく使っていて慣れてきたので、そろそろSimplicityに無効にしていた高速化の施策を復活させてみようと思います。
HTMLの最適化
HTMLの最適化(minify)には以前から使用していたWP-HTML-Compressionプラグインを使用してみることにします。
結果は全く問題なし！ いまのところ画面レイアウトが乱れるような問題は出ていません。このプラグインは有効のままとしました。
CSSとJavaScriptの最適化
CSSとJavaScriptとの最適化(minify)にもプラグインを使います。またプラグインによって複数のファイルを一つに結合することによって高速化も行います。
これには以前はJS & CSS Script Optimizerというプラグインを使用しておりました。
しかし、いろいろ試したのですが、うまく動かす設定を見つけることができませんでした。私の直面した問題としては
- SNSボタンのシェア数の読み込みがいつまでたっても終わらない
- 画面のレイアウトが崩れる(広告が画面の最上部に表示されたり
- などなど
という感じでした。最適化から除外するファイルを増やしていったのですが、結局ほとんどのファイルを最適から除外する必要があり、意味がなくなってきたので断念することにしました。
なお、Simplicity 1.4.4からHead CleanerというプラグインによるCSSとJavaScriptファイルの最適化に対応したとのことですが、私のところではHead Cleanerもうまく動かすことができず(以前のテーマでもHead Cleanerはうまく動かなかった)、こちらも断念しました。
結局CSSとJavaScriptの最適化は見送りとなりました。
キャッシュの導入
高速化の中で最大の効果があるのがキャッシュの導入です。以前のテーマでもWP Super Cacheプラグインを導入して高速化していました。
テーマをSimplicityにした場合もこれはこのまま使えるのですが(上記例ではWPTouch対応をONしているがこれは不要)、SimplicityはモバイルブラウザとPCブラウザで若干表示内容を変えているのでひと工夫が必要です。
この設定については下記で紹介されているのでそれをそのまま踏襲することで、モバイル向け・PC向けでそれぞれ最適なページを表示させることができます。
nginxのプロキシ・キャッシュの導入
WP Super Cacheがあればいらないような気もしますが、nginxのプロキシ・キャッシュ機能を有効にするとさらに高速化することができます。これも以前のテーマでも利用しておりました。
なおプロキシ・キャッシュ用の設定ファイルは次のように変更しています。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;
}
その他
次の高速化対策は以前のテーマと同じ設定のまま流用しています。
まとめ
今回はテーマをSimplicityに変更した後に適用した高速化手法を紹介しました。
ほとんどが以前のテーマの設定のまま流用するすることができましたが、CSSとJavaScriptの最適化だけはうまくいきませんでした。ただSimplicityはそのままでも十分早いテーマなので今回の高速化はここで打ち切ることにしました。
次回はWordPress Popular Postsプラグインについて紹介したいと思います。
コメント