Dec 13 2013

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

meter_Icon2

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


Pocket

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

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

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

 

W3 Total Cache は超有名なキャッシュシステムです。プラグインの検索から検索してインストールします。W3 Total Cache の設定は左側のメニューの独立して「Performance」という項目ができるのでそこから設定を行います。

投稿の編集_‹_餃子マナー_—_WordPress-2

 

何も考えずに全部チェックをつけてもよいのですが、CDNにはチェックをつけませんでした。これは、Photon との関係がどうなるかよくわからなかったのと、チェックをつけてみたらなにやらエラーメッセージが出たからです。

General_Settings___W3_Total_Cache_‹_餃子マナー_—_WordPress-2-5

Page Cache, Minify にチェックを付けます。

 

General_Settings___W3_Total_Cache_‹_餃子マナー_—_WordPress-6

さらに、Database Cache, Object Cache, Browser Cache の Enable にもチェックをいれます。

ここで、まずはいままでのページがきちんと表示されるかを確認します。僕の場合は、Bootstrap を使った記事と Amazon JS を利用した商品紹介がうまく表示されなくなってしまいました。

 

Minify 機能を利用すると副作用でうまく表示されなくなるページやプラグインがある場合には Minify 設定ページの Advanced に適用除外する JavaScript や CSS を明示的に指定することができます。

Minify___W3_Total_Cache_‹_餃子マナー_—_WordPress-2

 

Minify 設定の Advanced セクションに下記のような入力ボックスがあります。JS と CSS にそれぞれ URL を入力しておくとそれらのファイルに対しては Minify 機能が働かなくなるので副作用も起こらなくなります。書き方は下図の実際の例を見てもらえばわかるかと思います。http:// から始めたファイルまでの URL になります。

Minify___W3_Total_Cache_‹_餃子マナー_—_WordPress

 

2つ目のプラグイン、Smush It を同じようにプラグインの検索から探してインストールします。Smush It! は JPG や PNG などの画像ファイルから無駄な情報を省いたり、再圧縮してさらに小さくしてくれるプラグインです。サーバからの転送量が減るので高速化に貢献できます。

インストール後は新たにアップロードした画像は自動的に最適化されるのですが、過去のアップロード画像に対してはそのままでは最適化がされません。そこで、一括最適化の機能を使って過去の画像も最適化を行います。

Bulk_Smush.it_‹_餃子マナー_—_WordPress_と_テキストのインポート_-__history%20_1_.csv_-2 0.08.48

[メディア] メニューの欄に [Bulk Smush.It]というメニューが追加されているはずです。画像が多いと時間がかかりますよというメッセージも出ていますが、気にせず「Run all my images thorough WP Smush.It right now」ボタンを押します。ブラウザがグルグルモードに入ってしばらく返ってこなくなります。しばらくすると戻ってくるのですが実は全部の画像が一括で最適化されていないことに気づきました。

[メディア]メニューの [ライブラリ]から画像の一覧を見るとそれぞれの画像の Smush.It 状況が分かります。

メディアライブラリ_‹_餃子マナー_—_WordPress-3

Not proceeded – Smush.It now! というステータスになっている画像は Smush.It が適用されていません。何度か Bulk Smush.It をかけると最終的にはすべての画像に適用されます。ちょっと面倒ですね。一回で全部やってくれればいいのに…。説明を見ると本来は一回ですべての画像に対して処理をしてくれるようなので単にバグかもしれません。

 

いつものように GTmetrix の計測です。

Latest_Performance_Report_for__http___blog.miyadi.net_archives_1048___GTmetrix-5

 

劇的に速くなったとは言えない感じ、、、ですが、全体的には右肩下がりです。でももっと速くなると思っていたのだけど。

GTmetrix の Page Speed と YSlow のスコアも見てみます。

Latest_Performance_Report_for__http___blog.miyadi.net_archives_1048___GTmetrix-5 2

わずかですが右肩上がりです。スコアなので右肩上がりのほうがよい傾向です。

 

Page Speed Grade : 86% → 87% ↑上昇

YSlow : 59% → 60% ↑上昇

これは誤差の範囲かな、、、

Archived_Performance_Report_for__http___blog.miyadi.net_archives_1048___GTmetrix

74  → 80 ↑上昇

Website_speed_test

おお、またスコアが上がりました。80点になったのは初めてです。でも Load Time はまだ 6秒以上もかかっています。うーむ。

パソコン:68 → 71 ↑上昇

モバイル:57 → 61 ↑上昇

PageSpeed_Insights

Google PageSpeed Insight もさらにスコアが上がりました。これも何度やってもこれくらいのスコアが出るようになりました!

次回は別のキャッシュ系プラグインを試してみようと思います。というのも W3 Total Cache はこんな話もあるようで。

Pocket

コメントを残す