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

   

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

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

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

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

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

  • W3 Total Cache
  • Head Cleaner
  • Autoptimize
  • JetPack の Photon
  • CloudFlare

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

W3 Total Cacheの設定について

GeneralSettingsから以下をON

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HeadCleanerを使おう

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

HeadCleanerの設定画面

HeadCleanerの設定画面

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

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

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

Autoptimizeを使おう

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

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

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

スクリーンショット 2015:05:15 11:32

After

after

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

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

pingdomでも良いでしょう。

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

GTmetorixのタイムライン

GTmetorixのタイムライン

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

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

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

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

スクリーンショット 2015:04:23 19:13

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

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

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

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

以上な感じです。

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

私からは以上です

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

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

オススメNginx本

nginx実践入門 (WEB+DB PRESS plus) 単行本(ソフトカバー) – 2016/1/16

nginxを現場で活用するための知識を、実践的なノウハウを交えて解説した書籍です。nginxのインストール方法や基本的な設定方法からはじめ、nginxを利用した「静的コンテンツ配信サーバ」「HTTPSサーバ」「Webアプリケーションサーバ」「大規模コンテンツ配信システム」の構築方法をそれぞれ詳しく紹介しています。後半ではnginxサーバのモニタリングやログの収集、そして軽量スクリプト言語Luaでnginxを拡張する方法について解説しているので、nginxをこれから使う方はもちろん、さらに活用したい方にもお勧めです。

 - Wordpress