【LiteSpeed Cacheの設定方法】キャッシュプラグインを導入してWordPressサイトを高速化!

LiteSpeed Cacheの設定方法_eyecatch

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を使って分析した結果です。

LiteSpeedCache導入前_PageSpeedInsightsモバイルスコア

プラグイン導入前のPageSpeed Insightsモバイルスコア

LiteSpeedCache導入後_PageSpeedInsightsモバイルスコア

プラグイン導入後のPageSpeed Insightsモバイルスコア

プラグインを導入後、モバイルスコアが45→90にアップ!
LiteSpeedCache導入前_PageSpeedInsightsパソコンスコア

プラグイン導入前のPageSpeed Insightsパソコンスコア

LiteSpeedCache導入後_PageSpeedInsightsパソコンスコア

プラグイン導入後のPageSpeed Insightsパソコンスコア

パソコンのスコアは84→99にアップ!

広告を一切設置していないとはいえ、良いスコアが出ました。

キャッシュ系プラグインは設定がややこしいうえ、不具合が起きやすいため渋っていたのですが、もっと早めに導入しておけば良かったと後悔。

プラグインのインストール

では早速Wordpressにプラグインをインストールします。

インストール前の注意事項
既に「WP Fastest Cache」や「W3 Total Cache」など他のキャッシュプラグインを導入している場合は先にアンインストールする必要があります。

キャッシュ関係の操作が被るとサイトがうまく表示されない原因にもなりますので、
キャッシュは一か所で管理するようにしましょう。

LiteSpeed Cacheプラグインのインストール_002

プラグイン > 新規追加

管理画面左メニュー > プラグイン > 新規追加

に進み、プラグインの検索窓に「LiteSpeed Cache」と入力。
出てきたらインストールを押し、有効化します。

LiteSpeedが使えないサーバーではプラグインの設定画面に下記のエラーが出ます。

LiteSpeed Cacheプラグインのインストール_003

LiteSpeed Cacheの設定画面のエラー

一応CDNを使えばキャッシュ機能を使うことが出来るようですが、
LiteSpeed Webサーバーではない場合、他のプラグインを使うことをお勧めします。

LiteSpeed Cacheのおすすめ設定

プラグインをインストールし、有効化すると管理画面のメニューにLiteSpeed Cacheという設定ページが出現しますので、ここからプラグインの設定を行っていきます。
LiteSpeed Cacheの設定方法_001設定画面は日本語で、各設定に関する補足も入っていますので設定しやすいです。
しかし、設定項目が多く専門用語も多発しますので、ポイントを絞って記載します。

以下の斜線部分は省略しました。

ダッシュボード:プラグインの動作状態を確認できる画面。

一般:自動アップデートのON・OFFなど。

キャッシュ:キャッシュ時間やパージ設定など。

CDN:QUIC.cloud CDNを使用する場合。

画像の最適化: QUIC.cloud サーバーで画像を圧縮する場合。

ページの最適化:CSSやJSの圧縮(インライン化)などの設定。

データベース:サイト内のごみ(リビジョン)などの削除。

クローラー:キャッシュクローラーの設定。

ツールボックス:キャッシュの削除(パージ)を行う画面。

ダッシュボードや一般はすぐに使えるため省略。
QUIC.cloudは外部サービスなので今回は使いません。
クローラーは設定するとサイトの負荷を高めるため使いません。

ポイント

ポイントになる設定は設定画面の画像に赤枠を付けました。
特に言及していない項目についてはデフォルトでOKです。

キャッシュを使うと不具合が良く出ます。
この記事と同じ設定でもサイト環境によって動作が異なる可能性があります。
最終的には各項目オンとオフを繰り返し、問題がなく一番速そうな設定にしておくと良いです。

ログアウトしたり、ブラウザを変えたり、携帯からアクセスしたりして問題がないことを確認しましょう。

キャッシュの設定

LiteSpeed Cache > キャッシュ

キャッシュタブの設定

LiteSpeed Cacheの設定方法_002
LiteSpeed Cacheの設定方法_003一般的にキャッシュを多く使用した方がサイトが高速になるので、殆どオンです。

ログインしたユーザーをキャッシュ

複数人でサイトを運営していない限り、自分に対しての高速化は不要ですのでオフ。

ログインページをキャッシュ

ログインページも自分しか使わないのでオフ。

モバイルをキャッシュ

ココ大事です!
スマホとPCでサイトのレイアウトが変わるレスポンシブデザインの場合はオフで良いとのことですが、当サイトのテーマでは問題が発生しました。

キャッシュを有効化→スマホで記事を閲覧→PCで同じ記事を閲覧

とするとPCアクセスにもかかわらずスマホ用のデザインが適用されました。
(なぜかChromeはOK、EdgeとFirefoxがダメでした。)

有効化してからモバイルとPCの両方の端末で確認することをオススメします。
良く分からない方はオンにしておきましょう。

LiteSpeed Cacheの設定方法_004TTLのタブではキャッシュの保存期間を設定することが出来ます。
次のパージタブの設定で記事投稿時など、サイトに変更があった場合はキャッシュを自動リセットする機能がプラグインについているのでそのままでOK!

【キャッシュのTTLの参考】
・静的なリソース:一週間以上
・広告やウィジェットなど:一日以上
・最大は一年先まで?

あくまで目安です。

LiteSpeed Cacheの設定方法_005パージタブではどのタイミングでキャッシュを削除するかを設定できます。
サイトを更新した際にパージされるように設定されているのでそのままでOK!

【キャッシュのパージ=削除】
キャッシュは1回目のアクセス時に作成され、2回目のアクセスから動作します。
パージするとそのページのキャッシュが無い状態になり、キャッシュが再生成されますのでページの更新内容がキャッシュに反映されます。

LiteSpeed Cacheの設定方法_006除外タブではキャッシュしたくない部分(カテゴリやタブなど)を設定できます。
サイト全体にキャッシュが合った方が高速化できますので、特別な理由がない限りそのままでOK!

LiteSpeed Cacheの設定方法_007ESIタブはログイン中のユーザーに対するキャッシュの設定です。
会員制のサイトなどを運用していない限り使いません。そのままでOK!

オブジェクトタブの設定

LiteSpeed Cacheの設定方法_008オブジェクトキャッシュを有効にするとデータベースから情報を取り出す操作が速くなります。
基本的にはオンにしておいた方が高速になりますが、サーバーの性能が低い場合かえって遅くなることもあるようです。
オンにしてサイトの動作に問題がある(遅い)場合はコレが原因かもしれないのでオフにすることも検討して下さい。

ブラウザータブの設定

LiteSpeed Cacheの設定方法_009キャッシュの種類にも色々あり、こちらは閲覧者側のブラウザーにサイトのキャッシュを保存してもらうことにより、2回目のページ表示速度を向上させる機能です。
使わなければプラグインの意味がないといっても過言ではないのでオン必須!

LiteSpeed Cacheの設定方法_010高度な設定タブは通常使いませんのでそのままでOK!

ページの最適化の設定

LiteSpeed Cache > ページの最適化

CSSファイルやJSファイルを圧縮してインライン化することで高速化を図ります。
大幅にサイトが高速化できますので大切な設定項目です。

CSS設定タブ

LiteSpeed Cacheの設定方法_011基本的にすべてオン推奨です。

CSSを非同期ロード

CSSの読み込みを非同期(読み込み順不確定)にするとCSSが適用される瞬間に結構レイアウトがガタつきますので、僕はチェックを外しました。

うまく伝えるのが難しいですが、同期ロードなら画面内のレイアウトが一括して一瞬で変わる感じ、非同期の場合はガタガタガタ…と変わります。
(非同期読み込みをした方がレンダリングの邪魔になりにくいですが…)

CSSを圧縮するとサイトが高速化しますが、CSSの適用が一瞬遅れることにより画面のちらつき(FOUC)が発生することがあります。

この問題は難しく、サーバースペックやWordpressの場合使っているテーマ、また閲覧者のネットの回線状況によって起こったり起こらなかったりするので厄介です。

フォント表示の最適化

LiteSpeed Cacheの設定方法_012フォント表示の最適化とは、サイトで使用しているフォントが読み込まれるまでに、まず装飾がない素のテキストを表示させておく方法です。

ページを表示した瞬間すぐにテキストが表示出来ますが、本来使用するフォントを読み込んだ時に文字のスタイル(見た目)が一瞬変わります。

追記:何度か試したのですが、Googleフォントを使用する場合swapが一番自然な感じで良さそうです。

JS設定タブ

LiteSpeed Cacheの設定方法_013こちらもすべてオン推奨です。
ただし、JSファイルはサイトに動きを付ける役割のものが多く、広告やプラグインのウィジェットに問題が発生する可能性があります。
オンにした方が高速化できるので、問題がない場合はオンにしましょう。

インラインJSの読み込み

以前JSファイルの遅延読み込みでサイトに問題が発生したため、当サイトではデフォルト設定のままにしています。
JSファイルを後で読み込ませることでレンダリングが高速になりますが、問題の種になることも多々あります。

こちらも自分のサイトに合わせて設定して下さい。
「遅延」が最速ですが、問題が発生する可能性も高いです。
「DOMの準備が整った後」は速度も問題が起こる可能性も中間という感じ。

最適化タブ

LiteSpeed Cacheの設定方法_014HTML圧縮化はオン推奨です。

クエリ文字列を削除

クエリ文字列とはcssファイルなどの後についている
「https://ほげほげ.min.css?ver=5.7.1"」のようなver=の文字です。
ページ内容が更新されない場合ココが原因のこともあります。

あまり高速化には期待できないため、トラブル未然防止のため僕はオフにしてます。
LiteSpeed Cacheの設定方法_015

Googleフォントを非同期に読み込む

サイト内でGoogleフォントを使用している場合、一般的に非同期読み込みにした方が高速化できます。
(ただしページアクセス時に一瞬文字の見た目が変更される可能性あり。)
追記:オフにするとGoogleフォントが読み込まれない場合がありました。
サイト環境で異なるため、キャッシュを全パージした後確認してください。

Googleフォントを削除

サイト内にGoogleフォントを使用していない場合、不要なファイルですので削除することで高速化できます。

WordPress文字を削除

WordPress文字も使っていない場合不要なので削除しましょう。

当サイトはWordpress文字は使っていないので削除しました。

自分のサイト環境に合わせて設定して下さい。

メディア設定のタブ

LiteSpeed Cacheの設定方法_016LiteSpeed Casheでサイト内の画像を遅延読み込みさせることが出来ます。
遅延読み込みに関しては他に優秀なプラグインがあるのでそちらを使いましょう。
LiteSpeed Cacheの設定方法_017iframesの遅延読み込みについても他のプラグインで対応できます。
最新のWordpressならheightとwidthを指定するだけで遅延読み込みできるようなので使いません。
LiteSpeed Cacheの設定方法_018除外するメディアタブでは遅延読み込みを行いたくない箇所を設定できます。
画像に関する遅延読み込みの設定なので、先述の通り他のプラグインで代用可能です。

LiteSpeed Cacheの設定方法_019「PageSpeed Insights」などのサイト診断ツールで外部のファイルの最適化が指摘されている場合に使えるようです。
Googleなどにホストされているリソースをローカルにコピーすることで対応できる?
すみません、良く分かりませんが僕は使っていません。。。

LiteSpeed Cacheの設定方法_020チューニングタブでは縮小・圧縮したくないCSSやJSファイルがある場合に指定することで除外できます。
遅れて読み込まれては困るCSSやJSファイルがある場合に良いです。
長くサイトを続けていると意外と使う日はやってくるかもしれませんね。

キャッシュやCSS、JSの圧縮についてはサイトに問題が起こらない限りオンにしておくと良いです。

LiteSpeed Cacheの設定方法_021

設定を保存したらLiteSpeed Cacheのメニューから「ツールボックス」を開き、「すべてをパージする」を押してキャッシュをリセットすることをお忘れなく!

データベースの最適化

LiteSpeed Cache > データベース

LiteSpeed Cacheにはデータベースの最適化機能も付いています。
LiteSpeed Cacheの設定方法_022記事を書いていると投稿のリビジョンなどのサイト運営には不必要なゴミが蓄積されていきますが、これを1クリックで削除できます。

溜め込みすぎるとWordpressが重たくなるので、定期的に削除しておくと良いです。

専用プラグインに「WP-Optimize」がありますが、ほとんど同じことが「LiteSpeed Cache」で可能です。

プラグインの数を減らすことでサイトの高速化にもつながるので、
僕はWP-Optimizeをアンインストールしました。

ツールボックス

LiteSpeed Cache > ツールボックス

LiteSpeed Cacheの設定方法_023キャッシュを手動でパージ(削除)したい場合はツールボックスから行えます。

ページを変更後、変更内容が反映されない場合はキャッシュをパージしましょう。
サイト内のランキングを更新するときなどにも良いかもしれません。

パージすれば初回アクセス時にキャッシュを作成しなければならないため、若干ではありますがサーバー負荷は高くなります。

まとめ

必要最低限の箇所以外はなるべく省略したつもりですが、なかなかの大作になりました。
LiteSpeedが使用できるWebサーバーを使用しているならキャッシュプラグインは「LiteSpeed Cache」が良いです。

「W3 Total Cache」もそうですが、キャッシュ系のプラグインは設定項目が多く、サイトによって不具合が出たりでなかったりする点が難儀です。

とはいえ一度設定を完了しておけば今後ずっとサイトスピードの向上に貢献してくれますので、やはり使わない手はないですね・w・

-Wordpress
-

© 2021 ソロ学