ブログが重い！ページの表示速度を改善するのなら、プラグイン：LiteSpeed Cacheが超お手軽！

先日twitterにて相互フォローをしているブロガーさんからこんなコメントが。

読ませてもらいました！

内容等はおいておいて…

なんか読み込み速度めちゃくちゃ遅くないですか？

ツイッターからだ10秒近くかかってしまいました…

— サニー＠レポートブロガー (@sol1963re) 2018年6月2日

で、調べながら2時間ほどかけてテストをしていました。
が、mixhostを使っているのならば利用可能なプラグイン
LiteSpeed Cache を使うのが一番お手軽で効果が高いことがわかりました。
迷う必要はありません。
僕みたいに調べながら試行錯誤を2時間繰り返すなら、このプラグインをすぐに入れて2時間記事を書いた方が有益です。
今回は、僕が速度改善のために何をしたか、LiteSpeed Cacheを導入したらどう変わったのかをお伝えします。

表示速度のチェックをする

まずは、どの程度遅いのかをチェックします。
方法は簡単。
GooglePageSpeed Insightを使います。
https://developers.google.com/speed/pagespeed/insights/

PageSpeed Insightを使って遅いページをチェックしてみる

PageSpeed Insightを開いて、チェックしたいページのURLを入力して、分析をクリックします。

10秒ほど待つと、結果が表示されます。あら簡単。
結果は80/100のように100点満点で表示されます。
また、「モバイル」と「パソコン」の2種類の点数を見ることができます。
読み手にストレスにならないスピードを目指すのであればモバイル、パソコンとも90点は欲しいところ。

そして表示された驚愕の結果！

モバイル：29

29!?

う、嘘だろ？？

29？？？

パソコン：57

もう、ばっちり

low（おそっ！）

って書かれてるじゃん！

これは寝る間を惜しんでやるレベルですね。

だが、慌てるのはまだ早い。トップページも含めて他のページも確認します。
このページ固有の問題か、全体の問題かをざっくり切り分けます。

他のページも確認する

全然ダメ

速度改善のために実際やったこと

これはもう全体的にやばいやつだと言うことがわかったので、調べつつとっつきやすそうなところからやってみました。
まずは簡単なところから！

PHPのバージョンの変更

まず確認すべきはサーバーのPHPバージョンです。

まさかの、5.6 最新は7.2です。
PHPのバージョンが違うと速度面やセキュリティ面で特に大きな変化が出るそうです。

もちろんすぐに7.2に変更します。

お使いのテーマやプラグインが最新バージョンのPHPに対応していない可能性があるので調べましょう。

全然気づかなかった…

PHPのバージョンを変更した結果

PHPのバージョン変更後、同じようにPageSpeed Insightで確認します。
何度かやると数値が多少ぶれることがわかったので、5回計測した平均値を取ることにしました。

モバイル
61,50,42,50,70
モバイル平均：54.6 *改善前：29
PC
70,84,63,67,67
PC平均：70.2 *改善前：57

これだけで大きな改善がみられました！が、もう少しやります。

コンテンツのレンダリングをブロックしているJavaScript/CSSを排除

PageSpeed Insightで表示された点数の下にはこのように改善方法が丁寧に掲載されています。

じゃあ、それらを1つずつつぶせばよくない？
と言うことでまずは
スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
をやることにします。

JavaScript/CSSとなっている、ということは「JavaScript」と「CSS」で対策が違うことが推察されます。

JavaScript、CSSの順番で対応します。
どちらもこちらのページを参照しながら、対応します。

レンダリングブロックのjsを除去した結果

モバイル
70,71,52,42,55
平均：58
*改善前：54.6

PC
72,73,68,65,68
平均：70.2
*改善前：69.2

誤差の範囲内な気がするレベルですね。

レンダリングブロックのCSSの最適化をした結果

続いてCSSも最適化します。
もちろん先ほどのブログを参考に、Autoptimizeというプラグインを利用します。

モバイル
50,62,57,57,71
平均：59.4
*改善前：58

PC
71,70,70,69,73
平均：70.6
*改善前：69.2

試行回数が少ないのでなんとも言えませんが、こちらも誤差範囲内な気がします。

画像の最適化：BJ Lazy Loadを使う

BJ Lazy Loadというプラグインを使って速度改善を試みます。

BJ Lazy Load

「必要な分だけ画像を読み込む」ことで改善が期待されるそうな。

BJ Lazy Loadを使った結果

モバイル
57,64,67,64,46
平均：59.6
*改善前：59.6

PC
80,82,80,81,75
平均：79.6
*改善前：70.6

PCは改善がみられましたが、モバイルファーストな時代なので頑張ってほしいところ。

mixhostでだけ使えるプラグイン：LiteSpeed Cache

ここで僕は途方にくれました。
まだ「キャッシュ」と言う問題があるが、そこに手を出すとレイアウトの崩れ発生リスクからチェックの量が膨大になってしまう。

もっと手軽に軽くできるところはないものかと探していたところ、僕が利用しているmixhostのみで使えるお手軽プラグインがあると知ったのです。

mixhostユーザーが使えるLiteSpeedとは Cache

LiteSpeed Cacheとは、LiteSpeed Webサーバーで利用できるキャッシュ機能です。
非常に高速かつ高性能で、キャッシュを有効にする事により、導入前と比較して数十倍〜数百倍程度、圧倒的に高速化する事が可能です。
また、サーバーの負荷が低くなる為、アクセス集中時にも安定してご利用いただけるようになります。

LiteSpeed Cacheは、WordPressのプラグインを導入するだけで簡単にご利用いただけます。

以上、mixhost公式HPより。
「圧倒的！」その単語に惹かれた僕は、このプラグインをインストールしてみました。