今回、mixhostに乗り換えた目的の１つであるサイトの高速化として、LiteSpeedCacheを適用しました。
LiteSpeedCacheを適用した結果、サイトの速度が3倍〜4倍も早くなり、PageSpeed Insightsなどの評価も上がりました。
mixhostのサーバを利用している方は絶対LiteSpeedCacheを導入した方が良い！と言いたいところですが、いくつか注意点があります。
この注意点を理解しておかないと、画面の表示崩れやコメントができない等の不具合が発生してしまいます
MixHostではLiteSpeedCacheを代行で設定してくれるのですが、まずはご自分で注意点を理解してから依頼した方が無難だと思います。
今回はLiteSpeedCacheの導入手順に加えて、注意事項についてご紹介したいと思います。これからLiteSpeedCacheを導入しようかなと考えている方の参考になれば幸いです。
LiteSpeedCacheとは
LiteSpeedCacheとはどのようなものかというと、
- キャッシュを用いた高速化のプラグイン
- LiteSpeedのサーバのみ使用可能
- mixhostの公式サポートページでも導入を推奨
MixHostではLiteSpeedのサーバを用いているため、LiteSpeedCacheの導入が可能です。（エックスサーバやロリポップなどのサーバはApacheを使っているため、導入不可）
LiteSpeedCache導入時の注意事項
LiteSpeedCacheを導入時に何点か注意しておくことがあります。自分の管理しているサーバに該当するかを確認してみてください。
他のキャッシュプラグインは削除する
LiteSpeedCacheは他のキャッシュプラグインとの相性が悪いです。他のプラグインが混在していると、モバイル向けのサイトがパソコンで表示されるなどの不具合が発生します。
そのため、W3 Total cacheなどのキャッシュプラグインは削除してください。
コメントの画像認証は無効とする
SiteGuardのプラグインを用いている場合、スパム対策としてコメント投稿時に画像に表示された文字を入力させる機能を用いている方が多いと思います。
しかし、LiteSpeedCacheをインストールするとこの画像が正常に表示できなくなり、コメントができなくなってしまいます。
MixHostのサポートセンタにも問い合わせましたが、有効な対策はないそうです。（キャッシュの性質上、致し方ないところですね。）
そこで、SiteGuardの設定でコメントについては画像認証を無効とし、スパム対策にはAkismetなどのプラグインを用いてスパム対策を実施することをおすすめします。
SiteGuardでコメントの画像認証を無効とする手順
SiteGuardによるコメントの画像認証を無効とする手順は非常に簡単です。
まず、SiteGuardの設定画面を開きます。
続いて、SiteGuardの設定画面で、「画像認証」を選択します。
画像認証の設定画面で、コメントページを無効にします。
すると、コメント欄のキャプチャ画像が非表示となります。
なお、スパムコメントの対策はAkismetがしっかり実施してくれます。
レスポンシブデザインでない場合はEnable Separate Mobile Viewを有効にする
Simplicity2を利用していて「完全レスポンシブを無効」としている場合（レスポンシブデザインでない場合）、LiteSpeedCacheの設定がデフォルトのままだと、モバイル向けのサイトがパソコンで表示されるなどの不具合が発生してしまいます。
そこで、「完全レスポンシブを無効」としている場合はLiteSpeedCacheの設定画面で、「Enable Separate Mobile View」にチェックをつければ不具合は発生しなくなります。
画面の表示内容がおかしい場合はキャッシュクリア
私の場合、LiteSpeed Cache導入後に、スマホ画面でSNSボタンの表示内容がページごとに異なるという事象が発生しました。
そんな時はLiteSpeed Cacheのキャッシュクリアを実施してください。
事象はこんな感じで、ページごとにSNSボタンのデザインが変わってしまいました。
これらはLiteSpeedCacheを導入した後に、サイトのカスタマイズを実施するとキャッシュが残ってしまう関係で発生する事象のようです。
そのような場合は、WordPress管理画面の上のメニューにある「LiteSpeed Cache Purge All」を実行してください。
私の場合はこの結果、キャッシュがクリアされて事象が解消しました。
cssやphpを編集した時もキャッシュクリア
LiteSpeedCacheを導入すると、style.cssやheader.php等のファイルを修正しても、前のファイルキャッシュがサーバに残ってしまいます。
そのため、cssやphp等のファイルを編集したら、LiteSpeedCacheのキャッシュをクリアして動作確認してください。
なお、その際は忘れずにブラウザのキャッシュもクリアしてください。MacのSafariのキャッシュをクリアする方法はこちらをご覧ください。
LiteSpeedCacheの導入方法
続いて、LiteSpeedCacheの導入方法です。といっても単純にプラグインの新規追加からLiteSpeedCacheをインストールして、有効化するだけです。
LiteSpeedCacheの動作確認方法
LiteSpeedCacheをインストールした後、実際に動作しているかについては開発者ツール（F12）を使用して確認できます。
まずはブラウザの開発者ツールを開いてください。（開発者ツールはWindowsの場合はF12キー、Macの場合は「option」+「command」＋「i」です。）
以下の開発者ツールはGoogle Chromeを用いています。
続いてサイトのトップページ（当サイトの場合はhttps://ikumen-sim.net）を開き、開発者ツールのNetworkを選択します。
そして、NetWork内でトップページを選択してください。
そして、Headersを開いた後、「Response Headers（応答ヘッダ）」の「x-litespeed-cache」がhitになっていれば、キャッシュが有効となっており、LiteSpeedCacheが正常に動作していることがわかります。
LiteSpeedCacheの導入前と導入後の速度
導入前の速度
導入前のPageSpeedInsightsとGTmetrixの速度は以下の通りです。評価が低いわけではないですが、サーバの応答時間が結構遅かったです。
導入後の速度
導入後のPageSpeedInsightsとGTmetrixの速度です。サーバの応答時間がかなり速くなっていることがわかります。
GTmetrix側の評価は変わりませんでしたが、insigts側はサーバの応答時間が速くなったことにより評価もGoodになりました。
離脱率や平均セッション継続時間などにも好影響あり
サーバの応答時間が速くなったおかげなのか、サイトに来てくださった方が検索結果で表示されたページだけでなく、別のページも見てくださるようになりました。
その結果、離脱率やページ/セッションや平均セッション継続時間などが改善されました。Googleアナリティクスの具体的な数字は出せませんが、10%近く改善されています。
サイトの高速化の大事さを改めて痛感しました。
まとめ
Mixhostのサーバを利用している方であれば、LiteSpeedCacheは絶対インストールした方が良いと思います。
注意点は以下3点です。
- LiteSpeedCache以外のキャッシュプラグインは全て削除する
- SiteGuardを導入しているサイトの場合はコメントの画像認証機能のみ無効とする
- Simplicity2で完全レスポンシブをオンにしている場合は「Enable Separate Mobile View」にチェックを付ける
月額約500円〜でこのパフォーマンスなので、コスパが最も良いサーバはMixhostだと思います。
コメント