LiteSpeed Cacheは、ページキャッシュに加えてCSS・JavaScriptの圧縮や遅延読み込み、画像の最適化までを1つで扱える多機能なプラグインです。その分、項目を一度にまとめて有効にすると、レイアウト崩れやボタンが動かないといった不具合が起きやすくなります。この記事では、サーバーの条件を確かめたうえで、効果が大きく安全な設定から順に1つずつ有効にし、表示の確認と除外設定で調整していく手順を説明します。
基本のインストールとキャッシュの有効化を終えた人が、次に「ページの最適化」で速度を詰めていく段階を想定しています。
まずサーバーの条件を確かめる
LiteSpeed Cacheのページキャッシュは、サーバー側の LiteSpeed Web Server（または OpenLiteSpeed）と連携して動く仕組みです。Apache や Nginx のサーバーでは、プラグインを入れてもページキャッシュは働きません。一方、CSS・JSの最適化、画像の遅延読み込み、データベースの整理といった機能は、サーバーの種類に関係なく使えます。また、開発元が提供する QUIC.cloud のCDNを経由すると、LiteSpeed以外のサーバーでもページキャッシュを使える構成があります。
自分のサーバーがどれに当たるかは、レスポンスヘッダーで確認できます。
curl -sI https://example.com/ | grep -iE '^(server|x-litespeed-cache|x-qc-cache):'server: LiteSpeed が返り、2回目のアクセスで x-litespeed-cache: hit が出ていれば、ページキャッシュは働いています。ヘッダーが見当たらない場合は、ホスティング会社の案内でWebサーバーの種類を確認してください。CDNを挟んでいると server の値がCDNのものに置き換わることもあります。
作業前の準備
- ファイルとデータベースのバックアップを取る。可能ならステージング環境で先に試す
- WP Rocket、W3 Total Cache、WP Super Cache など、ページキャッシュや最適化を行う別のプラグインを止める。同じ処理を二重に行うと、原因の切り分けができなくなります
- 改善前の数値を記録しておく。PageSpeed Insights の結果や、主要ページの表示を確かめておくと、後で比べられます
- 設定画面のツールボックスにある書き出し機能で、現在の設定を保存しておく
プラグインの画面は、ダッシュボード・一般・キャッシュ・CDN・画像最適化・ページ最適化・データベース・クローラー・ツールボックスといったメニューに分かれています。版によって名称や配置が変わり、プリセット（推奨設定の一括適用）の機能が加わるなど、画面の変更は多めのプラグインです（2026年10月現在）。プリセットは手早いものの、どの項目が変わったかが見えにくいため、この記事では1項目ずつ有効にする方法をとります。
最適化を1つずつ有効にする
各ステップの後は、ページキャッシュを削除し、ログアウトした状態（ブラウザのプライベートウィンドウなど）でトップページ・記事ページ・お問い合わせフォーム・スマホ表示を確認します。管理者としてログインしたままだと、キャッシュや最適化が効かない表示を見ていることがあるためです。
ステップ1：画像の遅延読み込み
メディアの設定にある画像の遅延読み込みは、効果が分かりやすく、不具合も比較的起きにくい項目です。最初に表示される範囲のロゴやメイン画像まで遅延させると、かえって表示が遅く感じられ、LCP（最大コンテンツの描画）の数値が悪化することがあります。ファーストビューの画像は除外の欄にファイル名やクラス名を入れて、遅延の対象から外します。
WordPress本体にも画像の遅延読み込み（loading="lazy"）の仕組みがあるため、両方が重なっていないかも、ページのHTMLで確かめておきます。
ステップ2：HTML・CSS・JSの圧縮（Minify）
HTML、CSS、JSの圧縮は、空白やコメントを取り除いてファイルを小さくする処理で、表示崩れの原因になりにくい部類です。1つずつ有効にして確認します。圧縮後に崩れが出る場合は、特定のファイルの記述が原因のことが多いので、チューニングの画面で該当ファイルを除外します。
ステップ3：CSSの読み込み方を変える
CSSの結合（Combine）は、HTTP/2以降の環境では効果が小さく、崩れの原因になることもあるため、無理に使う必要はありません。
CSSを非同期で読み込む設定は、ページの描画を早める効果がありますが、そのままだと一瞬スタイルの無い画面が見える（FOUC）ことがあります。これを防ぐためにクリティカルCSSを生成する機能があり、QUIC.cloudのオンラインサービスを利用します。利用には QUIC.cloud との接続設定が必要で、無料枠の範囲や処理の待ち時間は変わることがあるため、公式の説明を確認してから使ってください。
ステップ4：JavaScriptの遅延（Defer / Delay）
JavaScriptの読み込みを遅らせる設定は、PageSpeed Insightsの数値を大きく改善する一方、もっとも不具合が起きやすい項目です。よくある症状は次のとおりです。
- スライダーやハンバーガーメニューが動かない
- お問い合わせフォームの送信ボタンやreCAPTCHAが反応しない
- アクセス解析や広告のタグが計測されない
まずは遅延（Defer）から試し、問題がなければ、ユーザーの操作まで実行を待たせる遅延（Delay）を検討します。不具合が出た場合は、原因になっているスクリプト（たとえば jquery.min.js やフォームプラグインのJS）をJSの除外の欄に追加して、そのスクリプトだけ通常どおり読み込ませます。どのファイルが原因かは、ブラウザの開発者ツールのコンソールに出るエラーで見当をつけられます。
ステップ5：画像の最適化
画像最適化の機能は、画像をQUIC.cloudに送って圧縮し、WebPなどの形式を生成します。元の画像のバックアップを残す設定があるので、有効にしておくと元に戻せます。サーバーの容量が少ない場合は、バックアップ分の容量も見込んでおきます。他の画像圧縮プラグインと併用すると二重処理になるため、どちらか一方に絞ります。
キャッシュ側の調整
ログインユーザーとモバイル
会員サイトやWooCommerceなど、ログインユーザーごとに表示が変わるサイトでは、ログインユーザーのキャッシュを有効にする前に、個人情報が他の人に見えないかを慎重に確認します。カートやマイページなど動的な部分は、ESI（ページの一部だけを別に扱う仕組み）で切り出す方法がありますが、ESIもLiteSpeedサーバーでのみ機能します。
スマホとPCで別のHTMLを出すテーマでは、モバイル用のキャッシュを分ける設定を有効にします。レスポンシブデザインのテーマであれば、通常は分ける必要はありません。
オブジェクトキャッシュ
キャッシュの設定にはRedisやMemcachedを使うオブジェクトキャッシュの項目もありますが、サーバー側にそれらが用意され、PHPの拡張が読み込まれていることが前提です。接続テストの結果が失敗のまま有効にしないでください。
データベースの整理
データベースの画面では、リビジョン、自動下書き、ゴミ箱の投稿、期限切れのトランジェントなどを削除できます。削除したデータは元に戻せないため、実行前にデータベースのバックアップを取ります。
不具合が起きたときの戻し方
表示が崩れたら、直前に有効にした項目を無効にしてキャッシュを削除するのが一番早い戻し方です。1つずつ有効にしてきたのは、このためです。管理画面に入れないほど崩れた場合は、FTPやファイルマネージャーで wp-content/plugins/litespeed-cache のフォルダ名を一時的に変えると、プラグインが無効になります。WP-CLIが使える環境なら、wp litespeed-purge all でキャッシュを削除できます。
まとめ
- ページキャッシュはLiteSpeed系サーバー（またはQUIC.cloud経由）でのみ働き、最適化機能はサーバーを問わず使える。まずレスポンスヘッダーで条件を確かめる
- バックアップと設定の書き出しを済ませ、他のキャッシュ・最適化プラグインを止めてから始める
- 遅延読み込み → 圧縮 → CSS → JS → 画像の順に1項目ずつ有効にし、ログアウト状態で確認する
- JSの遅延は不具合が出やすいため、原因のスクリプトを除外欄に入れて調整する
- 崩れたら直前の項目を戻し、管理画面に入れないときはプラグインのフォルダ名を変えて無効化する