[レビュー]LiteSpeed Cacheプラグインの設定方法と効果検証

九荻新

カラフルボックスやmixhostなどのLiteSpeed採用レンタルサーバーで使えるWordPressプラグイン LiteSpeed Cacheプラグインの設定方法と効果をレビューします。

効果検証結果(表示速度の変化)のみを知りたい方は、目次からジャンプしてください。

※ちなみにnginx + LiteSpeed LSAPI環境のConoHa WINGで同プラグインは動作しません

カラフルボックス公式サイトを見る
 mixhost公式サイトを見る

カラフルボックスのレビュー！WordPress初心者にオススメのレンタルサーバー

九荻新高速Webサーバー LiteSpeed採用のレンタルサーバーカラフルボックス(ColorfulBox)のレビューをします。WordPress初心者にオススメである理由は下記の3つです。 WordPressサイトを簡単に設置できる...

mixhostのレビュー！LiteSpeed採用の高速レンタルサーバー

九荻新 MixHostはLiteSpeed+100%ピュアSSD採用の高速レンタルサーバーです。下記の2つが主な特徴になります。 WordPressを90秒で始められる(WordPressクイックスタート) 表示速度が高速である記事ではW...

LiteSpeed Cacheプラグインの設定方法

1.WordPressダッシュボード＞プラグイン＞新規追加をクリック。

2.検索ボックスにLiteSpeed Cacheと入力＞今すぐインストールをクリック。

3.インストール完了まで待つ＞有効化をクリック。

4.設定をクリックするとキャッシュ設定のパージタブが開く＞キャッシュタブをクリックしておいてください。

設定に関する補足事項

九荻新

一つのタブやメニューを設定したらキャッシュを削除して、表示に問題がないか確認してください。

まとめて設定を行ってから表示が崩れた場合、どの項目が原因なのか切り分けるのが難しくなります。

キャッシュタブの設定

下記設定に切り替えて、ページ下部の変更を保存をクリックします。

キャッシュを有効にする:オン
ログインしたユーザーをキャッシュ:オン
コメントをキャッシュ:オン
REST API をキャッシュ:オン
ログインページをキャッシュ:オフ
favicon.ico をキャッシュ:オン
PHP リソースをキャッシュ:オン
モバイルをキャッシュ:オフ

九荻新

モバイルをキャッシュは、PCで記事を表示したのにモバイル表示される場合にオンにしてください。

そうするとPC用とモバイル用ページが別々にキャッシュされるので、意図しないキャッシュが発生しなくなります。

TTLタブの設定

九荻新

ここではキャッシュする時間を設定できますが、特に理由がなければ変更する必要はありません。

パージタブの設定

九荻新

アップグレード時にすべてをパージするがオンになっていればOKです。

古いものを出すをオンにするとサーバー負荷を軽減できますが、古いキャッシュが表示される可能性があります。

他は特に変更しなくて問題ありません。

除外タブの設定

九荻新

こちらではキャッシュから除外するものを設定できますが、基本的に変更しなくてOKです。

ESIタブの設定

九荻新

ESIはログイン中ユーザーのためのキャッシュページを設定する項目です。
一人でWordPressブログ・サイトを管理する場合は変更しなくて問題ありません。

オブジェクトタブの設定

九荻新

こちらではオブジェクトキャッシュのオン・オフを設定できます。
Memcached 拡張機能 or Redis 拡張機能が有効で、接続テストが問題ない場合はオンに変更してください。

※レンタルサーバーだと使えないケースがあります

カラフルボックスでRedisを使ってる方がいらっしゃいました。
使い方を記事にまとめて下さっているので、下記を参考にしてみてください。
【完全版】Redisをただのレンタルサーバー上で安定して使う方法

ブラウザタブの設定

ブラウザキャッシュをオンにして変更を保存をクリックします。

九荻新

ブラウザキャッシュを有効にするとユーザーのWEBブラウザにキャッシュが保存されて、表示の高速化が期待できます。

高度な設定タブの設定

九荻新

こちらは特に変更する必要がありません。

CDNメニューの設定

九荻新

QUIC.cloudやCloudflareなどのCDN(コンテンツデリバリネットワーク)を有効にすると、表示速度が高速になったりサーバー負荷の軽減を期待できますが、WordPressの表示が崩れる(カラム落ちなど)が発生することがあります。

使用する場合は運用テストをしっかりと行ってください。

画像の最適化メニューの設定

九荻新

LiteSpeed Cacheでは画像の最適化(圧縮やWebP作成・置換など)を行えますが、圧縮率がイマイチ良くないので、別途EWWW Image Optimizerプラグインを使うことをオススメします。

ページの最適化メニュー(CSS設定タブ)

こちらのメニューではCSSやHTML、JSの圧縮などを行えます。
機能としてはAutoptimizeに近いです。

CSS 圧縮化:オン
CSS 結合:オン
固有の CSS ファイル:オフ
CSS HTTP/2 プッシュ:オン
CSSを非同期ロード:オン
クリティカル CSS を生成:オン
バックグラウンドでクリティカル CSS を生成する:オン
別々のCCSSキャッシュポストタイプ:そのまま
個別のCCSSキャッシュURI:そのまま
インライン CSS 非同期ライブラリ:オン
フォント表示の最適化:デフォルト

すべての設定が終わったら、変更を保存をクリックします。

九荻新

CSSを非同期ロードをオンにして使うには、ドメインキーを設定する必要があります。
ここをクリックして設定してください。からドメインキーを取得してください。

JS設定タブ

JS 圧縮化:オフ
JS 結合:オフ
JS HTTP/2 プッシュ:オン
JS Deferredをロード:オン
インライン JS の読み込み:デフォルト
JQueryを除外する:オン

九荻新

JS 圧縮化と結合をオンにすると、表示が崩れたり、広告コードが改変される場合があるので注意が必要です。
使用する場合はテストをしっかり行ってください。

最適化の設定タブ(HTML)

CSS/JS キャッシュ TTL:そのまま
HTML 圧縮化:オン
インライン CSS の圧縮:オン
インライン JS の圧縮:オフ
DNS プリフェッチ:オン
コメントを削除します:オン
クエリ文字列を削除:オン
Google フォントを非同期に読み込む:オフ
Googleフォントを削除:オン
WordPress 文字を削除:オン
Noscript タグを削除:オフ

九荻新

Googleフォントを使用する場合は非同期に読み込むをオン、Googleフォントを削除をオフにします。

メディア設定タブ

画像遅延読み込み:オン
基本的な画像プレースホルダー:そのまま
応答プレースホルダ:オン
レスポンシブプレースホルダー SVG:そのまま
レスポンシブプレースホルダーの色:そのまま
LQIP クラウドジェネレーター:オフ
LQIP 品質:そのまま
LQIP 最小寸法:そのまま
バックグラウンドでの LQIP の生成:オン
Iframes 遅延読み込み:オン
インラインレイジーロードイメージライブラリ:オン

九荻新

画像遅延読み込み機能はWorPressテーマやEWWW Image Optimizerにも搭載されている場合があります。
二重に設定しないようにご注意ください。