WordPress.comでWordPressをフリープランでやっているときは、全くプラグインとか何も気にしていなかったけど、
AWSではそうも行かない.
なぜならWordPressが重すぎてトップのロードにめちゃくちゃ時間がかかるから(7秒~10秒)…
AWSでは一番安いt2.microでやっていた.
どうやってもmediumなんかにしたら4倍ぐらいの額になってしまう.
そんなことはもちろん避けたいわけで….
でも最終的には2~4秒ほどのロードにまでできて、
GoogleのPageSpeed Insightsでも改良がみられた.
結局t2.microのままで十分運用できるほどにまでなった.
一瞬mediumにしてたけど、その時よりも早い.かつサーバが落ちることがなくなった.
WordPressが遅い原因
おそらくWordPressをAWSに持っていたときに激重なのは、いくらかの原因があって、まず非常に根本的な原因に分解すると
- サイトを表示するのに必要なデータ量が多い
- サイトを表示するのに対応する処理量が多い
になると思っている. データ量が多いってことは、たくさんのサーバからたくさんのデータを持ってくる必要がある. ネットで持ってこれる量は決まっているのでどんどんページの表示が遅くなっていく. また、一つのサイトを表示するためにこれを計算してこれを持ってきてのようにたくさんの処理をするほど遅くなっていくのも簡単に理解できる.
そしたらどんな対策ができるかになるわけだけど、
自分の知る範囲でもっと直接的な原因をとりあえず書いてみると
- 全データを同じWebサーバから読んでいる
- CDNを使っていない
- CSSや画像を圧縮していない
- 画像を必要なものだけに限定していない
- プラグインをたくさん入れている
- etc….
とかがあると思う.
「全データを同じWebサーバから呼んでいる」: 処理が多い例. これは二つ目のCDNにも関連するが、全ての画像を同じWebサーバから呼び出すとそれを送る処理もそのWebサーバの負荷になってしまう. それを別のサーバにしてWebサーバの負荷を下げる
「CDNを使っていない」: 処理とデータが多い例. CDNは、世界中のそれぞれの地域にあるローカルなサーバで、ここに画像やCSS、JavaScriptを置いておけば、ページが見たい人は近いサーバからすぐに欲しいものを得られる.Webサーバではなく代わりにデータを送ってくれるのでサーバの不可も下がる.特に画像のように更新されることのないデータほどCDNに置くのにふさわしい. AWSではCloudFrontを使う.
「CSSや画像を圧縮していない」: データが多い例. ページが表示されるのが遅いのはもちろん送るデータが遅いというのもある. 画像を見えるけど解像度が低い方がいいし、CSSとかJavaScriptも小さい方が読み込みは早くなる. Minifyと呼びます.
「画像を必要なものだけに限定していない」:データが多い例. ユーザがスクロールせずに見もしない画像を読み込んでくるのは無駄以外の何者でもありません.なので見られそうなぐらいに表示されそうな段階になってから画像を読み込むことで全体の数を減らします. LazyLoadと呼ばれます.
「プラグインをたくさん入れている」: 処理が多い例. Webサーバでサイトをユーザに送るときに、色々な処理をしてページを作り上げます. そのときプラグインを入れるほどどんどんやらなくてはならない処理が増えていき、ユーザにページを送り返すまでがずるずる伸びていきます. 入れているというより有効にしているかどうかですね. 無効なら問題ありません.
上記が非常に有名どころな重いWordPress対策になります.
それに対して、どんなプラグインを入れていくかになります.
結局入れたプラグイン
プラグインの数は基本的に少ない方がいいので入れすぎないことに注意.
以下のGoogle Site Kitとかはあまり高速化に影響しない類のプラグイン.
高速化関係なく入れておくプラグイン
- Google Site Kit : AdSenseやConsole, Analytics連携する公式プラグイン
- JetPack : デフォルトの基本プラグイン (lazy loadはONにした方がいい)
- Akismet Anti-Spam : スパムコメント対策プラグイン
- AMP : サイトのAMP対応用プラグイン
- All In One SEO Pack : SEO対策用プラグイン
高速化用に入れたプラグイン
EWWW Image Optimizer
EWWW Image Optimizerを使って、画像のサイズを変えたり、画像のフォーマットを変えたり、画像を最適化して、ひたすら画像データサイズを小さくするようにしてくれます. WebPに変換するのはもちろん余分に大きい画像を適切な大きさに変換してくれます. 新規アップロードするときに変換してくれるのはもちろん、今まであげたものも全部変えてもらうことができます.
W3 Total Cache
W3 Total Cacheは上記にあげたような高速化が一通りできる.
AWSのCloudFontを適切に組み立てればその対応もCSSやJavaScriptの最小化も可能. ただ個人的な調査の上ではFontのPreloadだけは設定が見つからなかった.
のでしょうがなく下記Autoptimizeを入れている. 不要だと思うならこのW3 Total Cacheのみでも十分早くなる.
Autoptimize (いらないかも)
Google Fontsのpreloadだけを設定. それ以外はW3TotalCacheにやってもらうので無効化.
以上.
プラグインとしては上記以外は基本的に使っていない.
Jetpackの設定はちゃんと確認して、画像がLazyLoadされるようになっているか確認してください.
これだけで十分動く.
