[WordPress 高速化計画 Vol.5] W3 Total Cache, Smush.it プラグインで高速化!
今回の施策
今回は適切なプラグインを使って高速化に挑戦です。
- サーバーを速いものに変える (完:Vol.1)
- サーバの設定を見直す (完:Vol.2)
- CDN を使う(完:Vol.3, Vol.4)
- 適切なプラグインを使う(キャッシュ、画像圧縮など)
- 重そうな JavaScript を見直す
なんのプラグインを入れるかがミソですが、GTmetrix の WordPress 速度向上指南のページに 2つのプラグインが紹介されています。まずはこれを試してみるのがよさげです。
W3 Total Cache を導入してみる
W3 Total Cache は超有名なキャッシュシステムです。プラグインの検索から検索してインストールします。W3 Total Cache の設定は左側のメニューの独立して「Performance」という項目ができるのでそこから設定を行います。
何も考えずに全部チェックをつけてもよいのですが、CDNにはチェックをつけませんでした。これは、Photon との関係がどうなるかよくわからなかったのと、チェックをつけてみたらなにやらエラーメッセージが出たからです。
Page Cache, Minify にチェックを付けます。
さらに、Database Cache, Object Cache, Browser Cache の Enable にもチェックをいれます。
ここで、まずはいままでのページがきちんと表示されるかを確認します。僕の場合は、Bootstrap を使った記事と Amazon JS を利用した商品紹介がうまく表示されなくなってしまいました。
副作用を回避する
Minify 機能を利用すると副作用でうまく表示されなくなるページやプラグインがある場合には Minify 設定ページの Advanced に適用除外する JavaScript や CSS を明示的に指定することができます。
Minify 設定の Advanced セクションに下記のような入力ボックスがあります。JS と CSS にそれぞれ URL を入力しておくとそれらのファイルに対しては Minify 機能が働かなくなるので副作用も起こらなくなります。書き方は下図の実際の例を見てもらえばわかるかと思います。http:// から始めたファイルまでの URL になります。
Smush It! を入れる
2つ目のプラグイン、Smush It を同じようにプラグインの検索から探してインストールします。Smush It! は JPG や PNG などの画像ファイルから無駄な情報を省いたり、再圧縮してさらに小さくしてくれるプラグインです。サーバからの転送量が減るので高速化に貢献できます。
インストール後は新たにアップロードした画像は自動的に最適化されるのですが、過去のアップロード画像に対してはそのままでは最適化がされません。そこで、一括最適化の機能を使って過去の画像も最適化を行います。
[メディア] メニューの欄に [Bulk Smush.It]というメニューが追加されているはずです。画像が多いと時間がかかりますよというメッセージも出ていますが、気にせず「Run all my images thorough WP Smush.It right now」ボタンを押します。ブラウザがグルグルモードに入ってしばらく返ってこなくなります。しばらくすると戻ってくるのですが実は全部の画像が一括で最適化されていないことに気づきました。
[メディア]メニューの [ライブラリ]から画像の一覧を見るとそれぞれの画像の Smush.It 状況が分かります。
Not proceeded – Smush.It now! というステータスになっている画像は Smush.It が適用されていません。何度か Bulk Smush.It をかけると最終的にはすべての画像に適用されます。ちょっと面倒ですね。一回で全部やってくれればいいのに…。説明を見ると本来は一回ですべての画像に対して処理をしてくれるようなので単にバグかもしれません。
効果測定
いつものように GTmetrix の計測です。
劇的に速くなったとは言えない感じ、、、ですが、全体的には右肩下がりです。でももっと速くなると思っていたのだけど。
GTmetrix の Page Speed と YSlow のスコアも見てみます。
わずかですが右肩上がりです。スコアなので右肩上がりのほうがよい傾向です。
GTmetrix スコア
Page Speed Grade : 86% → 87% ↑上昇
YSlow : 59% → 60% ↑上昇
これは誤差の範囲かな、、、
Pingdom
74 → 80 ↑上昇
おお、またスコアが上がりました。80点になったのは初めてです。でも Load Time はまだ 6秒以上もかかっています。うーむ。
Google PageSpeed Insight
パソコン:68 → 71 ↑上昇
モバイル:57 → 61 ↑上昇
Google PageSpeed Insight もさらにスコアが上がりました。これも何度やってもこれくらいのスコアが出るようになりました!
次回は別のキャッシュ系プラグインを試してみようと思います。というのも W3 Total Cache はこんな話もあるようで。