Dec 13 2013

[WordPress 高速化計画 Vol.5] W3 Total Cache, Smush.it プラグインで高速化！

By gyoza manner On 2013/12/13 In WordPress

今回は、W3 Total Cache と Smush.It プラグインを使って高速化に挑戦します。このプラグインの組み合わせは web 速度計測サイト GTmetrix が推奨している WordPress の高速化ページに書いてあるものです。今度こそ劇的に速くなるんじゃないか！？

Pocket

[`evernote` not found]

今回の施策

今回は適切なプラグインを使って高速化に挑戦です。

サーバーを速いものに変える (完：Vol.1)
サーバの設定を見直す (完：Vol.2)
CDN を使う(完：Vol.3, Vol.4)
適切なプラグインを使う（キャッシュ、画像圧縮など）
重そうな JavaScript を見直す

なんのプラグインを入れるかがミソですが、GTmetrix の WordPress 速度向上指南のページに２つのプラグインが紹介されています。まずはこれを試してみるのがよさげです。

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! を入れる

２つ目のプラグイン、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 をかけると最終的にはすべての画像に適用されます。ちょっと面倒ですね。一回で全部やってくれればいいのに…。説明を見ると本来は一回ですべての画像に対して処理をしてくれるようなので単にバグかもしれません。