LiteSpeed キャッシュ（LSキャッシュ）最適化による表示崩れ対策 9+のヒント

LiteSpeed キャッシュ（LSキャッシュ）最適化による表示崩れ対策

WordPressサイトの表示速度を劇的に向上させるLiteSpeed キャッシュ（LSキャッシュ）プラグイン。しかし、CSSやJavaScriptの自動最適化機能を有効にした途端、デザインが崩れる・動作がおかしくなるといったトラブルに直面する方も少なくありません。

本記事では、そうした最適化による表示崩れの原因を見極め、段階的に解決するための具体的な方法を分かりやすく解説します。

「ページが崩れてしまった…」「どのファイルが原因なのか分からない…」という方でも、順を追ってチェックすることで、確実に問題箇所を特定し、適切に除外設定を行うことができます。

併せて読みたい：LiteSpeed キャッシュ プラグインを使用して、WordPress を PageSpeed と GTmetrix で 100% 最適化する

✅ 最初の確認：本当に最適化が原因か？

1. シークレットウィンドウなどで以下のURLにアクセス
   　https://example.com/?LSCWP_CTRL=before_optm
2. 最適化なしの状態で表示が崩れるか確認。
   • 崩れていない → 最適化が原因
   • 崩れている → 他に原因あり（LSCache以外）

🧪 CSS or JS どちらが原因かを切り分ける

1. 一旦全ての最適化をOFF
   • WordPress管理画面 → LiteSpeed Cache → Page Optimization
   • CSS Settings & JS Settings タブのすべてをOFF
   • キャッシュ全消去（Toolbox > Purge All）
   • 表示確認 → 正常なら最適化が原因
2. JSだけONにして表示チェック
   • 崩れる → JSに問題 → JSファイルを個別に除外へ
   • 崩れない → JSはOK → CSSを疑う
3. CSSだけONにして表示チェック
   • 崩れる → CSSに問題

🔍 問題のCSS/JSファイルの特定方法

1. /？LSCWP_CTRL=before_optm をつけた状態でサイト表示
2. ブラウザの開発者ツール → Network タブ → CSS または JS を確認
3. リストアップしたファイルを 全て除外 に追加
   • LiteSpeed Cache → Page Optimization → Tuning – CSS / JS → Excludes に入力
4. 一つずつ除外を外して表示確認 → 崩れるファイルが特定できたら再除外

🔁 CSS/JSの頻繁な変化でキャッシュミスが増える場合

• ランダムなセレクタ（例：.abc_1234, .tdi_49_xx）が生成されている
• Combine（結合）をONにしているとファイル名が毎回変わり、キャッシュヒットしにくくなる

対策：

• CombineをOFFにする（簡単）
• 問題のセレクタを含むファイルや文字列を Exclude設定 へ追加

🗑️ サーバーストレージが急に埋まる原因

• Combineで大量のランダムCSS/JSが生成 → ディスク圧迫
• 対策：対象ファイルやセレクタを Exclude

❌ Combined CSS/JSファイルの404エラー

• v4.0系の不具合か、ホスティング会社の自動削除処理の可能性
• 対策：
  • LSCacheを最新バージョンに
  • キャッシュ全消去（Purge All）

📌 Critical CSS（CCSS）に関する問題

1. <style id="litespeed-optm-css-rules"> が空 → まだ生成されてない可能性
2. ccss-timeout → タイムアウト、削除して再生成
3. Syntax Error → 元のCSSに構文エラー
   • Combine/MinifyをOFFにして原因ファイル特定 → 修正 or 除外

🎯 UCSS（Unique CSS）関連の不具合と対応

• UCSSに必要なセレクタが除外されていると表示崩れ
• 解決方法：
  1. 最適化なしでの表示と比較し、表示されないセレクタを抽出
  2. UCSS Allowlist に追加
  3. Purge All → Purge All – UCSS → 再生成

⚠️ その他のトラブル対

• AJAXでの最適化除外
  → functions.php に defined( 'DOING_AJAX' ) && add_filter( 'litespeed_can_optm', '__return_false__' ); を追加
• DevToolsでの SourceMap エラー（404）
  → 開発ツールの見た目上のエラーで、特に問題なし（無視してOK）

🧠 ヒントと便利なチェック

• 検証はシークレットモードや別ブラウザで
• ブラウザの開発者ツールで Console や Network からエラー確認
• diffchecker.com を活用してCSS/JSの差分を発見

参考：ライトスピードオフィシャルページ