GTmetrix でWPサイトを計測して3秒台から1秒台になるまでの経緯

4年ぐらい放置していたサイトだけれど久々に見たらまだアクセスがあった。
WordPress のバージョンと plugin のバージョンはたまに覗いて手入れしていたのだけれど当時 SEO とかあまり考えずに作っていたのでトップページの表示が体感できるほど重い、当然ダッシュボードもかなり重い。
効果があると言われている cache 系の plugin は WP Super Cache を効果もわからずお守り程度に入れているのと、データベースの自動保存の目的で WP-DBManager を入れているのくらい、確か定期的にメンテしてくれているはず。

サーバー:エックスサーバー
ページ数:700
アクセス:200/日

GTmetrix | Website Speed and Performance Optimization

計測は3回計測してその最後の数値を取り出しました。

はじめは3秒台でかなり重い感じがしましたが、
speedtest01

最終的には1秒台で表示もキビキビしています。
speedtest02

計測結果の画像を全て貼るのはあまりにも重いので経緯は全てテキストで。

Page Speed Grade  (76%) C
YSLow Grade     (70%) C
| Page load time: 3.58s
| Total page size: 1.25MB
| Total number of requests: 65

始めの計測

Page Speed Grade  (77%) C
YSLow Grade     (69%) C
| Page load time: 5.06s
| Total page size: 1.28MB
| Total number of requests: 68

+ MO Cache
+ 001 Prime Strategy Translate Accelerator
+ object-cache

Page Speed Grade  (77%) C
YSLow Grade     (70%) C
| Page load time: 4.79s
| Total page size: 1.29MB
| Total number of requests: 66

+ MO Cache
+ WP File Cache
この時WP File Cacheはダッシュボードで設定できなかったり削除しようとしてもファイルがありませんというメッセージが出てなんか不安定だった。

Page Speed Grade  (77%) C
YSLow Grade     (70%) C
| Page load time: 4.22s
| Total page size: 1.27MB
| Total number of requests: 62

+ MO Cache
+ WP File Cache
エックスサーバーのPHP高速化設定(FastCGI化)というのをしてみたがあまり変わらず。

Page Speed Grade  (77%) C
YSLow Grade     (69%) D
| Page load time: 10.70s
| Total page size: 1.20MB
| Total number of requests: 64

+ PHP高速化設定(FastCGI化)
+ MO Cache
+ APC Object Cache Backend
今までで一番遅い。

Page Speed Grade  (73%) C
YSLow Grade     (70%) C
| Page load time: 3.38s
| Total page size: 1.02MB
| Total number of requests: 53

上の条件で再度計測、設定直後は遅いのかな。

Page Speed Grade  (77%) C
YSLow Grade     (69%) D
| Page load time: 10.58s
| Total page size: 1.28MB
| Total number of requests: 64

- php.in オフ設定
遅くなってる。

Page Speed Grade  (74%) C
YSLow Grade     (69%) D
| Page load time: 3.48s
| Total page size: 1.00MB
| Total number of requests: 56

+ php Ver 5.5 に変更後
+ PHP高速化設定(FastCGI化)

Page Speed Grade  (75%) C
YSLow Grade     (70%) C
| Page load time: 3.71s
| Total page size: 867KB
| Total number of requests: 54

+ Lazy Load
プラグイン Lazy Load を導入後そのままの設定 200で測定。
Total page size がかなり下がっている。
※ azy-load/js/lazy-load.js の中の6行目あたり

Page Speed Grade  (79%) C
YSLow Grade     (70%) C
| Page load time: 3.46s
| Total page size: 818KB
| Total number of requests: 51

- Twetter タイムライン(JetPack)
重そうな感じのしたウィジェット Twetter タイムライン(JetPack) を外してみたがさほど変わらず。

Page Speed Grade  (78%) C
YSLow Grade     (67%) D
| Page load time: 4.06s
| Total page size: 1.31MB
| Total number of requests: 69

- PHP高速化設定(FastCGI化)
PHP高速化設定(FastCGI化) を無効にしてみたがあまり変わらず。

Page Speed Grade  (86%) B
YSLow Grade     (78%) C
| Page load time: 4.25s
| Total page size: 1.10MB
| Total number of requests: 53

+ Autoptimize
プラグイン Autoptimize をインストール
初めてランクBに!!
しかし Page load time: 4.25s とまだ遅い。

Page Speed Grade  (84%) B
YSLow Grade     (78%) C
| Page load time: 2.75s
| Total page size: 772KB
| Total number of requests: 41

たまに必要だけれど常時onでなくても良いプラグインを外す。
- Auto Post Thumbnail
- Better Delete Revision

Page Speed Grade  (87%) B
YSLow Grade     (78%) C
| Page load time: 3.37s
| Total page size: 1.10MB
| Total number of requests: 52

+ Tribe Object Cache
+ APC Object Cache
obje ctcache 系のプラグインを入れてみた。
が平均して Page load が遅くなっている。

Page Speed Grade  (86%) B
YSLow Grade     (80%) B
| Page load time: 2.25s
| Total page size: 1.11MB
| Total number of requests: 52

+ WP Super Cache
そういえば WP Super Cache を外していたので入れてみる、かなり早くなった。
ようやく YSLow Grade も B ランクになる。
2秒台になると体感的にも早さを体感できた。

Page Speed Grade  (84%) B
YSLow Grade     (80%) B
| Page load time: 2.48s
| Total page size: 781KB
| Total number of requests: 42

+ WP Widget Cache
ウィジェットの設定を3600にしてみた。
さほど効果はないみたい。

Page Speed Grade  (84%) B
YSLow Grade     (80%) B
| Page load time: 2.26s
| Total page size: 765KB
| Total number of requests: 40

Widget Cache の設定を Twetterタイムライン(Jetpack) と Popular Posts だけにして他は設定せずに。

Page Speed Grade  (86%) B
YSLow Grade     (63%) B
| Page load time: 4.32s
| Total page size: 1.83MB
| Total number of requests: 101

- Autoptimize
HTML,CSS,Javascript を圧縮してくれるプラグイン Autoptimize を使用すると lightbox 系の plugin が機能しなくなるので外してみたら結果的に YSLow Grade のスピードがかなり落ちた
Defer parsing of JavaScript が F ランクに落ちているのが響いたみたい

Page Speed Grade  (86%) B
YSLow Grade     (81%) B
| Page load time: 2.63s
| Total page size: 1.04MB
| Total number of requests: 50

+ Autoptimize
- FancyBox for WordPress
Autoptimize の Javasvript のチェックon
lightbox 系の FancyBox for WordPress を外した。

Page Speed Grade  (83%) B
YSLow Grade     (82%) B
| Page load time: 1.99s
| Total page size: 591KB
| Total number of requests: 34

トップ画像が 800kb ととても大きかったので 61kb に圧縮。
なんとか1秒台。

Page Speed Grade  (81%) B
YSLow Grade     (82%) B
| Page load time: 2.08s
| Total page size: 553KB
| Total number of requests: 31

余程のアクセスがない限り Object Cache は必要ないみたいなので
- APC Object Cache
- MO Cache
を外してみた。
外しても問題なし。

Page Speed Grade  (81%) B
YSLow Grade     (82%) B
| Page load time: 1.72s
| Total page size: 553KB
| Total number of requests: 31

- WP Widget Cache
さらに WP Widget Cache を外してみるがコレも問題なし。

Page Speed Grade  (85%) B
YSLow Grade     (81%) B
| Page load time: 2.72s
| Total page size: 963KB
| Total number of requests: 47

- WP Super Cache
調子に乗って WP Super Cache を外したら一気に下がる。
コレは入れたほうがいいみたいだ。

Page Speed Grade  (81%) B
YSLow Grade     (82%) B
| Page load time: 1.99s
| Total page size: 542KB
| Total number of requests: 31

+ WP Super Cache
再び入れなおしたらまた戻った。
やはり WP Super Cache は効果あるみたい。

Page Speed Grade  (81%) B
YSLow Grade     (82%) B
| Page load time: 2.31s
| Total page size: 542KB
| Total number of requests: 31

- DB Cache Reloaded Fix
DB Cache Reloaded Fix も外してみたがこれも外してイイみたい。

Page Speed Grade  (80%) B
YSLow Grade     (82%) B
| Page load time: 1.70s
| Total page size: 592KB
| Total number of requests: 33

今のところの最終結果
後引っかかっているのはソーシャルボタンを表示するpluginだと思うんだけれど、これも手動で設定すればもう少し早くなるかもしれない。

200/日くらいなら Object Cache 系プラグインはいらない

結局は一日200くらいなら Object Cache プラグインを入れない方がいいみたい。いろいろ試した結果遅くなる。

効果があると思えるのは

1)ヘッダークリーニング系の Autoptimize
これは体感で早くなった。しかし JavaScript を圧縮すると動かないプラグインや使えないサービスが出てくるみたい。

2)画像サイズの最適化
当然ながらトップ画像を軽い物にするとかテキストのみにするだけでかなり改善する。今回は未使用だけど EWWW Image Optimizer という投稿されたすべての画像を最適化してくれるプラグインもあるみたいだ。CSSスプライトなんかも上手く使っていくといいみたい。

3)常時使わないプラグインを停止する。
たまにメンテナンスで使うようなプラグインは停止しておくとそれだけで負担が減るみたいだ。プラグインの削減は WordPress の安定にもつながるのでこまめにチェックする。

4)キャッシュ系プラグイン WP Super Cache
これだけ入れておいたほうがイイみたい。体感できるぐらい速度が変わった。

期待したほど効果がなかったもの

あくまでも200/日のサイトで効果がなかったもの、もしくはまだ必要なかったもの。アクセスが増えれば当然 Object Cache は必要になるだろう。

1)翻訳キャッシュ (MO Cache + WP File Cache)
アクセスに関係なく当然効果あるだろうと思ったし、色んな所で効果アリの紹介がされていて期待したのだけれど、設定がおかしいのかイマイチ効果出ず。再度勉強。

2)オブジェクトキャッシュ系プラグイン
200そこそこのアクセスでは必要ないみたいです。500/日超えたら考える。

3)PHP高速化設定(FastCGI化)
サーバー側の設定だけれど、これも500/日以下では別に効果ないし逆に負担になるみたい。

結論

まずは画像の最適化とヘッダークリーニングもしくはテーマからちゃんとヘッダーを設計する。アタリマエのことですね。