結局WordPressを高速化するにはどうすればいいのか2015年4月版

2015/04/23 2015/05/15

Googleさんがモバイル対応しろよというお触れを出したのに伴い、ああこりゃちゃんとやらないとダメなんだなという事で試行錯誤をこの数カ月間行ってきました、@geeorgey です。

まだ完全に分かっている訳では無いのですが、勘所みたいなものは大分ついてきたのでその辺の話を。

要約すると、以下の二点です

・プラグインを適切に設定してざっくりと改善
・パフォーマンス測定ツールを使って細かい所を調整
・nginx + php-fpm socketで接続する←これがインパクト大きかったかもしれない

パフォーマンス改善に役立ったプラグイン5つ

W3 Total Cache
Head Cleaner
Autoptimize
JetPack の Photon
CloudFlare

この５つ。最後のはプラグインじゃないけど。

W3 Total Cacheの設定について

GeneralSettingsから以下をON

ページキャッシュ
ブラウザキャッシュ
Minify(これは不具合出る人いるかもなので試してからで)

昔はGeneralSettingsしか設定してなかったのだけど、詳細設定もやるべきです。特にブラウザキャッシュ回りは初期設定だとほとんどの機能がOFFEREDなので設定必須です。

ブラウザキャッシュの設定画面

: ブラウザキャッシュGeneral設定１

ブラウザキャッシュGeneral設定2

ブラウザキャッシュのCSS設定

ブラウザキャッシュのHTML,XML設定

ブラウザキャッシュのMedia設定

Expires Headerとか、gzip圧縮とか、静的ファイルにはcookie付けないとか、そんな設定をします。これやらないとパフォーマンス上がってかない。

HeadCleanerを使おう

何にも分かってなかった頃は、ページが崩れる…とか言って敬遠していたのですが、使わざるを得ないプラグイン。JS回りをいい感じに処理してくれます。

HeadCleanerの設定画面

ここにプラスして、有効なフィルタってのをちゃんとやらないと崩れるし、ちゃんと動かなかったりします。

最低限wp_print_stylesは対象外にしないとダメな気がする。(全員がそうかどうかはわかりません）

他にもhead回りで必要そうなもの。特にCSS関係については対象外にしています。CSSが読み込まれないとレンダリングブロックが発生するとかいってですね、その辺は検索していただければ良いと思うのですが、ブラウザってCSSが全てロードされないとレンダリングを始めないんですって。その辺を解除する感じで設定していきます。

Autoptimizeを使おう

これはCSSをまとめてくれます。設定は一つだけ。JS部分は使いませんでした。

AutoptimizeでCSSをいい感じに配信する

JetpackのPhotonはONに

画像ファイルをCDNから配信してくれます。使ったほうが負荷が下がると思います。ただ、対象になったりならなかったりするのがなぜだかはよく分かってません。

CloudFlareを使って軽く軽く

サイトをいい感じにキャッシュしてくれます。サーバがしょぼい人ほど使ったほうが良いと思います。

ユーザにはCloudFlare経由でファイルが配信されます。素敵です。SSLにも対応です。

nginx + php-fpm socketで接続する

やり方はこちらを参照

nginxとphp-fpmとの接続に、UNIX socketを指定する

socket通信を使うとTCPで接続するので、「http://127.0.0.1:9000」でアクセスするより早いのかな？

php-fpm
・www.conf（/etc/php-fpm-5.5.d/www.conf）の「listen」を下記に変更する
php-fpm
listen = /var/run/php-fpm/php-fpm.sock
・再起動する
/etc/rc.d/init.d/php-fpm restart

・再起動すると、「/var/run/php-fpm」に「php-fpm.sock」が作られる

nginx
・confの「fastcgi_path」にphp-fpm.sockを指定する
nginx
fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
・再起動する
/etc/rc.d/init.d/nginx restart

アクセス後したら「502 Bad Gateway」になる場合

・/var/run/php-fpm/php-fpm.sockのOwner情報を確認する
・カッコカリ、確認したところ「root」だったことにします。
・php-fpm：www.confの「listen.ownerとlisten.group」を下記に変更する
php-fpm
listen.owner = nginx
listen.group = nginx
・再起動する
/etc/rc.d/init.d/php-fpm restart

これ凄かった。

Before

After

パフォーマンスの測定はGTmetrixとpingdomtoolとか使ってみる

一番お世話になってるのはGTmetorixです。

pingdomでも良いでしょう。

GTmetrixの場合はこんな感じで見えます。何に時間がかかってるのかなと。

GTmetorixのタイムライン

見てみると、プラグインが吐くjsやらcssがメッチャ遅いとかが分かります。要らないものはプラグインをこの際OFFにしましょう。

必要なものは、CSSだったらテーマのstyle.cssに上書きしちゃって読み込まないように設定してしまうとかでもいいでしょう。

重要じゃないプラグインはOFFにすると驚くべきほどにパフォーマンスが上がったりします。見てみたほうがいいですよ。余計なCSSが配置されてたりとかすると、イライラするようになると思います。

ページサイズを減らしましょう

このブログのトップページ、実は改善前は10Mくらいありました。(ｱﾎｶｰ

何故かと言うと、モバイル対応でThemeを変更したのですが、サムネイルを再生成してなかったので、元画像が小さいサイズで表示されてたんですよね。アカン。

ということで、重たいサイズの画像を１つずつ処理。あららふしぎだ10分の1になりました。これやったほうが良いですよ。面倒ですけど。

Regenerate Thumbnailsとか使うのも手ですね。ただ、抜け漏れがあったんだなぁ。

以上な感じです。

レンダリングブロック回りがまだきちんと分かってないのでもう少し知見が必要だなと思っています。クリックしてるのに読み込みが始まらないとか地獄じゃないですか・・・

私からは以上です

余談ですが、EWWW Image Optimizerとか入れとくと、新規にアップした画像を自動的にサイズダウンしてくれるようになりますので、入れといて良いと思いますよ。

jetpackのカスタムcssは遅いです。やめたほうが良いかと。

結局WordPressを高速化するにはどうすればいいのか2015年4月版