MixhostなどLiteSpeedを使っているサーバーにおすすめのWordpress専用キャッシュプラグイン「LiteSpeed Cache」の導入方法とおすすめの設定方法、注意点などをまとめました。
Apacheの次の世代とも言われるLiteSpeedが使えるサーバー環境なら
「WP Fastest Cache」や「W3 Total Cache」よりも高速に動作するこちらのプラグインが相性抜群です！
上手く設定するとGoogleのサイト診断ツール「PageSpeed Insights」のスコアが大幅にアップします。
設定する項目が非常に多いため、ポイントだけ押さえました。
この記事の目次
LiteSpeed Cacheプラグインの設定と使い方
Webサイトを高速化するにはキャッシュの利用は必須です。
Worpdressにはキャッシュ系のプラグインが複数存在しますが、
LiteSpeed Webサーバーなら断然「LiteSpeed Cache」がオススメです。
このプラグインを導入後、Googleが提供しているサイト診断ツールである「PageSpeed Insights」のスコアが大幅にアップしました。
以下は当サイトの記事ページをPageSpeed Insightsを使って分析した結果です。
プラグイン導入前のPageSpeed Insightsモバイルスコア
プラグイン導入後のPageSpeed Insightsモバイルスコア
プラグインを導入後、モバイルスコアが45→90にアップ！
プラグイン導入前のPageSpeed Insightsパソコンスコア
プラグイン導入後のPageSpeed Insightsパソコンスコア
パソコンのスコアは84→99にアップ！
広告なし、アイキャッチ画像なしとはいえ、良いスコアが出ました。
キャッシュ系プラグインは設定がややこしいうえ、不具合が起きやすいため渋っていたのですが、もっと早めに導入しておけば良かったと後悔。
プラグインのインストール
では早速Wordpressにプラグインをインストールします。
インストール前の注意事項
既に「WP Fastest Cache」や「W3 Total Cache」など他のキャッシュプラグインを導入している場合は先に無効化する必要があります。
キャッシュ関係の操作が被るとサイトがうまく表示されない原因にもなりますので、
キャッシュは一か所で管理するようにしましょう。
プラグイン ＞ 新規追加
管理画面左メニュー ＞ プラグイン ＞ 新規追加
に進み、プラグインの検索窓に「LiteSpeed Cache」と入力。
出てきたらインストールを押し、有効化します。
LiteSpeedが使えないサーバーではプラグインの設定画面に下記のエラーが出ます。
LiteSpeed Cacheの設定画面のエラー
一応CDNを使えばキャッシュ機能を使うことが出来るようですが、
LiteSpeed Webサーバーではない場合、他のプラグインを使うことをお勧めします。
cPanelのLiteSpeed Web Cache Manager
ちょっと気になったので補足です。
MixhostのcPanel内に「LiteSpeed Web Cache Manager」がありこの中に「WordPress Cache」という項目があります。
このcPanelのキャッシュ機能と当プラグインは別物ではなく、同じものです。
Wordpressの管理画面から「LiteSpeed Cacheプラグイン」をインストールし、有効化してからcPanelの「LiteSpeed Web Cache Manager」で「Scan」を行うとcPanelの方でもキャッシュステータスがEnabledになります。
なお、cPanelからキャッシュパージを行うこともできますが、基本的にWordpressのプラグイン管理画面から行うように説明があります。
「LiteSpeed Cache」という名前がcPanel内にもプラグイン名にもあるので混同しますが、同じものです。
LiteSpeed Cacheのおすすめ設定
プラグインをインストールし、有効化すると管理画面のメニューにLiteSpeed Cacheという設定ページが出現しますので、ここからプラグインの設定を行っていきます。
設定画面は日本語で、各設定に関する補足も入っていますので設定しやすいです。
しかし、設定項目が多く専門用語も多発しますので、ポイントを絞って記載します。
以下の斜線部分は省略しました。
ダッシュボード：プラグインの動作状態を確認できる画面。一般：自動アップデートのON・OFFなど。- キャッシュ：キャッシュ時間やパージ設定など。
CDN：QUIC.cloud CDNを使用する場合。画像の最適化： QUIC.cloud サーバーで画像を圧縮する場合。- ページの最適化：CSSやJSの圧縮（インライン化）などの設定。
- データベース：サイト内のごみ（リビジョン）などの削除。
クローラー：キャッシュクローラーの設定。- ツールボックス：キャッシュの削除（パージ）を行う画面。
ダッシュボードや一般はすぐに使えるため省略。
QUIC.cloudは外部サービスなので今回は使いません。
クローラーは設定するとサイトの負荷を高めるため使いません。
ポイント
ポイントになる設定は設定画面の画像に赤枠を付けました。
特に言及していない項目についてはデフォルトでOKです。
キャッシュを使うと不具合が良く出ます。
この記事と同じ設定でもサイト環境によって動作が異なる可能性があります。
最終的には各項目オンとオフを繰り返し、問題がなく一番速そうな設定にしておくと良いです。
ログアウトしたり、ブラウザを変えたり、携帯からアクセスしたりして問題がないことを確認しましょう。
キャッシュの設定
LiteSpeed Cache ＞ キャッシュ
キャッシュタブの設定
一般的にキャッシュを多く使用した方がサイトが高速になるので、殆どオンです。
ログインしたユーザーをキャッシュ
複数人でサイトを運営していない限り、自分に対しての高速化は不要ですのでオフ。
ログインページをキャッシュ
ログインページも自分しか使わないのでオフ。
モバイルをキャッシュ
ココ大事です！
スマホとPCでサイトのレイアウトが変わるレスポンシブデザインの場合はオフで良いとのことですが、当サイトのテーマでは問題が発生しました。
キャッシュを有効化→スマホで記事を閲覧→PCで同じ記事を閲覧
とするとPCアクセスにもかかわらずスマホ用のデザインが適用されました。
（なぜかChromeはOK、EdgeとFirefoxがダメでした。）
有効化してからモバイルとPCの両方の端末で確認することをオススメします。
良く分からない方はオンにしておきましょう。
TTLのタブではキャッシュの保存期間を設定することが出来ます。
次のパージタブの設定で記事投稿時など、サイトに変更があった場合はキャッシュを自動リセットする機能がプラグインについているのでそのままでOK！
キャッシュのTTLの参考
- 静的なリソース：１週間以上
- 広告やウィジェットなど：１日以上
- 最大は１年先まで？
あくまで目安です。
パージタブではどのタイミングでキャッシュを削除するかを設定できます。
サイトを更新した際にパージされるように設定されているのでそのままでOK！
【キャッシュのパージ＝削除】
キャッシュは1回目のアクセス時に作成され、2回目のアクセスから動作します。
パージするとそのページのキャッシュが無い状態になり、キャッシュが再生成されますのでページの更新内容がキャッシュに反映されます。
除外タブではキャッシュしたくない部分（カテゴリやタブなど）を設定できます。
サイト全体にキャッシュがあった方が高速化できますので、特別な理由がない限りそのままでOK！
ESIタブはログイン中のユーザーに対するキャッシュの設定です。
会員制のサイトなどを運用していない限り使いません。そのままでOK！
オブジェクトタブの設定
オブジェクトキャッシュを有効にするとデータベースから情報を取り出す操作が速くなります。
サーバーが対応していないとオンにしても意味がありません。
MemcashedかRedisが使えるサーバーでないと無理です。専用サーバーやVPSなどroot権限があるのならばインストールを試してみても良いかも。
ステータスの拡張機能と接続テストがどちらも有効な場合は設定すると良いです。
基本的にはオンの方が高速になりますが、サーバーの性能が低い場合は負荷が増えるためかえって遅くなることもあるようです。
ブラウザータブの設定
キャッシュの種類にも色々あり、こちらは閲覧者側のブラウザーにサイトのキャッシュを保存してもらうことにより、2回目のページ表示速度を向上させる機能です。
使わなければプラグインの意味がないといっても過言ではないのでオン必須！
高度な設定タブは通常使いませんのでそのままでOK！
ページの最適化の設定
LiteSpeed Cache ＞ ページの最適化
CSSファイルやJSファイルを圧縮してインライン化することで高速化を図ります。
大幅にサイトが高速化できますので大切な設定項目です。
ただ、サイト環境によってファイルの読み込みが上手くいかず、レイアウトが崩れたりすることもあるのでココが一番試行錯誤が必要な項目かもしれません。
当サイトも何度も微調整しています。
CSS設定タブ
基本的にすべてオン推奨です。
CSSを非同期ロード
CSSの読み込みを非同期（読み込み順不確定）にするとCSSが適用される瞬間にレイアウトのガタつきが発生することが多々あります。
うまく伝えるのが難しいですが、同期ロードなら画面内のレイアウトが一括して一瞬で変わる感じ、非同期の場合はガタガタガタ…と変わります。
（非同期読み込みをした方がレンダリングの邪魔になりにくいですが…）
ポイント
CSSを圧縮するとサイトが高速化しますが、CSSの適用が一瞬遅れることにより画面のちらつき（FOUC）が発生することがあります。
この問題は難しく、サーバースペックやWordpressの場合使っているテーマ、また閲覧者のネットの回線状況によって起こったり起こらなかったりするので厄介です。
サイトスピードが速いと気にならないくらいの速度で読み込めたりもします。
フォント表示の最適化
フォント表示の最適化とは、サイトで使用しているフォントが読み込まれるまでに、まず装飾がない素のテキストを表示させておく方法です。
ページを表示した瞬間すぐにテキストが表示出来ますが、本来使用するフォントを読み込んだ時に文字のスタイル（見た目）が一瞬変わります。
追記
何度か試したのですが、Googleフォントを使用する場合swapが一番自然な感じで良さそうです。
JS設定タブ
こちらもすべてオン推奨です。
ただし、JSファイルはサイトに動きを付ける役割のものが多く、広告やプラグインのウィジェットに問題が発生する可能性があります。
追記
「JS結合」及び「JSは外部とインラインを組み合わせる」の設定オンで不具合が出ました。
ChromeのLighthouseを当サイトで試した結果、何かがトリガーになったのか新しいJSキャッシュが作成→ページでは古い圧縮されたJSファイルを読み込もうとするためファイルに404エラーが発生しサイトレイアウトが崩れました。
【更に追記】モバイルユーザ―エージェントの設定変更がまずかったようです。
現在は両者ともONにしていますが大きな問題は起きていません。
オンにした方が高速化できるので、問題がない場合はオンにしましょう。
インラインJSの読み込み
以前別のサイトでJSファイルの遅延読み込み設定でサイトに問題が発生しました。
JSファイルを後で読み込ませることでレンダリングが高速になりますが、問題の種になることも多々あります。
こちらも自分のサイトに合わせて設定して下さい。
「遅延」が最速ですが、問題が発生する可能性も高いです。
「DOMの準備が整った後」は速度も問題が起こる可能性も中間という感じ。
当サイトでは特に問題が無かったので遅延にしています。
最適化タブ
HTML圧縮化はオン推奨です。
これが原因でサイトに問題が発生する可能性は低いです。
クエリ文字列を削除
クエリ文字列とはcssファイルなどの後についている
「https://ほげほげ.min.css?ver=5.7.1"」のようなver=の文字です。
ページ内容が更新されない場合ココが原因のこともあります。
あまり高速化には期待できないため、トラブル未然防止として僕はオフにしてます。
Googleフォントを非同期に読み込む
サイト内でGoogleフォントを使用している場合、一般的に非同期読み込みにした方が高速化できます。
（ただしページアクセス時に一瞬文字の見た目が変更される可能性あり。）
追記
オフにするとGoogleフォントが読み込まれない場合がありました。
サイト環境で異なるため、キャッシュを全パージした後確認してください。
Googleフォントを削除
サイト内にGoogleフォントを使用していない場合、不要なファイルですので削除することで高速化できます。
※画像ではオンになっていますが、当サイトの設定はオフです。
Wordpress文字を削除
Wordpress文字も使っていない場合不要なので削除しましょう。
当サイトではWordpress文字は使っていないのでオンにしてます。
ポイント
自分のサイト環境に合わせて設定して下さい。
メディア設定のタブ
LiteSpeed Casheでサイト内の画像を遅延読み込みさせることが出来ます。
遅延読み込みに関しては他に優秀なプラグインがあるのでそちらを使いましょう。
iframesの遅延読み込みについても他のプラグインで対応できます。
最新のWordpressならheightとwidthを指定するだけで遅延読み込みできるようなので使いません。
除外するメディアタブでは遅延読み込みを行いたくない箇所を設定できます。
画像に関する遅延読み込みの設定なので、他のプラグインで代用可能です。
「PageSpeed Insights」などのサイト診断ツールで外部のファイルの最適化が指摘されている場合に使えるようです。
Googleなどにホストされているリソースをローカルにコピーすることで対応できる？
すみません、良く分かりませんが僕は使っていません…
チューニングタブ
チューニングタブでは縮小・圧縮、及び遅延読み込みをしたくないCSSやJSファイルがある場合に指定することで除外できます。
遅れて読み込まれては困るCSSやJSファイルがある場合に良いです。
長くサイトを続けていると意外と使う日はやってくるかもしれませんね。
追記
Googleアドセンスに使う「adsbygoogle.js」に注意が発生した時、この設定でjsの遅延読み込みを除外すれば解決できました。
【関連記事】アドセンス用jsに「AdSense head tag doesn't support data-deferred attribute.」が出た時の原因と解決法。
参考
キャッシュやCSS、JSの圧縮についてはサイトに問題が起こらない限りオンにしておくと良いです。
ポイント
設定を保存したらLiteSpeed Cacheのメニューから「ツールボックス」を開き、「すべてをパージする」を押してキャッシュをリセットすることをお忘れなく！
データベースの最適化
LiteSpeed Cache ＞ データベース
LiteSpeed Cacheにはデータベースの最適化機能も付いています。
記事を書いていると投稿のリビジョンなどのサイト運営には不必要なゴミが蓄積されていきますが、これを１クリックで削除できます。
溜め込みすぎるとWordpressが重たくなるので、定期的に削除しておくと良いです。
参考
専用プラグインに「WP-Optimize」がありますが、ほとんど同じことが「LiteSpeed Cache」で可能です。
プラグインの数を減らすことでサイトの高速化にもつながるので、
僕はWP-Optimizeをアンインストールしました。
ツールボックス
LiteSpeed Cache ＞ ツールボックス
キャッシュを手動でパージ（削除）したい場合はツールボックスから行えます。
ページを変更後、変更内容が反映されない場合はキャッシュをパージしましょう。
サイト内のランキングを更新するときなどにも良いかもしれません。
パージすれば初回アクセス時にキャッシュを作成しなければならないため、若干ではありますがサーバー負荷は高くなります。
まとめ
必要最低限の箇所以外はなるべく省略したつもりですが、なかなかの大作になりました。
LiteSpeedが使用できるWebサーバーを使用しているならキャッシュプラグインは「LiteSpeed Cache」が良いです。
「W3 Total Cache」もそうですがキャッシュ系のプラグインは設定項目が多く、環境によって不具合が出たり出なかったりするので試行錯誤が必要です。
とはいえ一度設定を完了しておけば今後ずっとサイトスピードの向上に貢献してくれますので、やはり使わない手はないですね。
ページを軽くすることはサーバーの負荷や転送量の軽減にもつながりますよ・ｗ・
