「Elementor×LiteSpeed Cache」表示崩れと画像不表示の解決策

今月、お客様が契約しているロリポップのWEBサーバーにインストールしたwordpressを、elementorを使って制作するという依頼がありました。

既に納品完了しているWEBサイトではありますが、制作中にサイトの表示が崩れてしまうということが発生したので、その時の対処方法と結果、原因について説明します。

選べる2種類のロリポップのWEBサーバー

ロリポップには大きく分けて2種類のウェブサーバー環境が存在します。Elementorを使用する場合、どちらのプランを使っているかで最適化戦略が変わります。

発生した不具合の内容

「elementorで更新した内容が反映されない」「elementorのプレビュー画面と実際の端末で表示が異なる」「ページによって画像が表示されたり、非表示になる」「画像の大きさ指定がおかしい」というような不具合が発生しました。

対処した内容と結果

対処1、elementor自身が持つCSSとJSのキャッシュの削除と再生成を実施しましたが、
結果は変わりませんでした。（管理画面左側から、Elementor＞一般＞Elementorキャッシュ→ファイルとデータの削除）

対処2、LiteSpeed Cacheプラグインを使ったキャッシュ削除（管理画面上部＞すべてをパージする）を実施しましたが、結果は変わりませんでした。

対処3、LiteSpeed Cacheプラグインを無効化すると、状況が改善しました。

しかしながら、このままだと、爆速なサイト表示を実現するLiteSpeed Cacheのメリットを受けることが出来ないので、どうしたら良いかをGeminiに聞いてみました。

ElementorとLiteSpeed Cacheの「構造的矛盾」

ElementorとLiteSpeed Cache（以下LSCWP）を併用して不具合が起きるとき、それは単なるバグではなく、両者の「設計思想のズレ」が表面化している状態です。

一言で言えば、「Elementorが新しく作り直したデータを、LiteSpeedが古いデータとして固定して配り続けてしまう」ことが原因です。

「最新のCSS」と「古いHTML」のボタン掛け違い

Elementorは、あなたが「更新」ボタンを押すたびに、新しいデザインを反映した専用のCSSファイル（例：post-123.css）を自動生成します。

一方、LSCWPはサーバーの高速化のために、ページ全体のHTMLを「静的なスナップショット」として保存します。ここにズレが生じます。

• Elementor: 「新しいCSSファイルを作ったよ！リンク先はこれだよ！」
• LSCWP: 「（過去に保存したHTMLを見せながら）いや、以前保存したこの古いCSSリンクのまま配信するね」

この結果、ブラウザは存在しない古いCSSを探しに行き、「スタイルが当たっていない素のページ」が表示される、あるいは「更新が反映されない」という現象が起こります。

「CSSの結合」が招くスタイルの消失

LSCWPには、サイトを速くするために「複数のCSSファイルを一つにまとめる（結合）」機能があります。しかし、Elementorはウィジェットごとに複雑なスタイル計算を行っているため、無理に結合されるとスタイルの優先順位が崩れてしまいます。

特に、以下の条件下で「表示崩れ」が頻発します。

• CSSの結合（Combine）: 結合後のファイル生成が間に合わず、404エラーになる。
• CSSの縮小化（Minify）: Elementor独自のコードが削られ、正しくレンダリングされない。

JavaScriptの「遅延実行」によるウィジェットの停止

Elementorの高度なウィジェット（スライダー、メニュー、アニメーションなど）は、JavaScript（JS）が動くことで初めて正しい形になります。

LSCWPの「JS遅延読み込み（Load JS Deferred）」を有効にすると、HTMLの描画がすべて終わった後にJSが実行されます。

すると、ブラウザは「高さや位置が計算される前の、壊れたレイアウト」を一旦表示してしまいます。これが、「一瞬崩れて見える」あるいは「スライダーが動かない」といった不具合の正体です。

なぜ「無効化」で直るのか

LSCWPを無効にすると不具合が解消されるのは、この「サーバー側での強引な書き換え（固定化）」が止まり、Elementorが生成した最新のデータが直接ユーザーに届くようになるからです。

「速いまま、崩さない」を実現するためには、ElementorとLiteSpeed Cacheの役割を明確に分担させ、「干渉しやすい部分はElementor側に任せ、サーバー側は配信に徹する」という引き算の設定が必要です。

以下の3つのステップで設定を最適化しましょう。

ステップ1：Elementor側の設定変更（最重要）

まずは、キャッシュとの不整合を物理的に防ぐために、Elementorの出力方式を変更します。

1. CSSの出力方法を「内部埋め込み」にする

通常、Elementorは外部CSSファイルを生成しますが、これをHTML内に直接書き込む方式に変更します。これにより「HTMLは古いのにCSSファイルだけ新しくなってリンクが切れる」という問題が解消されます。

• 操作: WordPress管理画面 ＞ Elementor ＞ 設定 ＞ 詳細タブ
• 項目: 「CSSプリントメソッド」を [内部埋め込み] に変更して保存。

2. 実験的な機能をオフにする

最新のElementorにある「要素キャッシュ」などは、LiteSpeed Cacheと二重キャッシュになり不具合の元です。

• 操作: Elementor ＞ 設定 ＞ 特徴（Features）タブ
• 項目: 「Element Caching」「Optimized Image Loading」を [Inactive] に設定。

ステップ2：LiteSpeed Cacheの「攻めすぎ」を抑える

次に、LiteSpeed Cache側で、Elementorのデザインを壊しやすい「過剰な最適化」をオフにします。

1. ページ最適化（CSS/JS）の調整

CSSやJSを一つにまとめる「結合」は、Elementor環境ではオフにするのが定石です。

• 操作: LiteSpeed Cache ＞ ページ最適化 ＞ [CSS設定]
• CSS結合: オフ
• CSSを非同期ロード: オフ
• 操作: 同メニュー ＞ [JS設定]
• JS結合: オフ
• JS遅延読み込み: オフ（もしオンにする場合は、特定のJSを除外する必要があります）

2. 画像の遅延読み込み（Lazy Load）の除外

ロゴやファーストビューの画像が消えるのを防ぐため、Elementorの特定のクラスを除外設定に追加します。

• 操作: LiteSpeed Cache ＞ ページ最適化 ＞ [調整（Tuning）]
• 項目: 「CSS除外」や「JS除外」の欄に、Elementor関連のパスを追加します。

/wp-content/plugins/elementor/
/wp-content/uploads/elementor/

ステップ3：ロリポップ環境での「運用ルール」

ロリポップ特有の仕様による「更新されない」を防ぐための、仕上げのステップです。

1. ロリポップ！アクセラレータの停止

サーバーパネルから「ロリポップ！アクセラレータ」を無効にします。LSCWPと二重でキャッシュがかかると、どれだけプラグイン側を操作しても表示が変わりません。

2. wp-config.phpの書き込み権限

LSCWPの設定が保存されない場合は、ロリポップのファイルマネージャーからwp-config.phpのパーミッションを一時的に「600」にしてから設定を保存し、完了後に「400」に戻してください。

3. 更新時の「黄金ルーチン」

ページを編集した後は、必ず以下の順番でクリアを行ってください。

1. Elementorメニュー ＞ ツール ＞ [CSSの再生成] をクリック
2. 上部バーの LiteSpeedアイコン ＞ [すべてをパージ] をクリック

まとめ：最適化設定チェックリスト

これらの設定を行うことで、Elementorの自由なデザインを維持したまま、LiteSpeedサーバーの強力なレスポンス性能を活かすことができます。