WP Rocketを有効にしてからレイアウトが崩れた場合、原因の多くは「ファイル最適化」タブのCSS・JavaScript関連の設定と、古いキャッシュの残りです。まずURLの末尾に ?nowprocket を付けて最適化なしの表示と比べ、崩れがWP Rocket由来かを確かめます。そのうえで設定を1つずつ戻していけば、どの機能が原因かを特定でき、除外設定を足すことで高速化を保ったまま表示を直せます。この記事では、その切り分け手順と、原因ごとの直し方を説明します。
まず確認すること：本当にWP Rocketが原因か
最適化なしの表示と比べる
崩れているページのURLに ?nowprocket を付けて開くと、WP Rocketのキャッシュと最適化を通さない状態で表示されます。
https://example.com/sample-page/?nowprocketこの状態で正常に表示されるならWP Rocketの設定が原因、同じように崩れるならテーマや他のプラグイン、CDN側の問題です。ログイン中は既定でキャッシュが配信されない設定になっていることが多いため、確認はログアウトした状態か、別のブラウザのシークレットウィンドウで行ってください。
キャッシュを一度すべて消す
設定を変えても古いCSSやHTMLが配信され続けていると、正しく切り分けられません。管理バーの「WP Rocket」メニューからキャッシュのクリアを実行し、CloudflareなどのCDNを使っている場合はそちらのキャッシュも削除します。ブラウザ側のキャッシュも残るため、確認の都度スーパーリロード（Ctrl+Shift+R など）をかけます。
Elementorなどのページビルダーは、独自にCSSファイルを生成しています。WP Rocketのキャッシュを消しても、ビルダー側のCSSが古いままだと崩れが残ることがあるため、ビルダーのツール画面にあるCSSの再生成もあわせて実行してください。
設定を戻して原因の機能を特定する
作業前に、WP Rocketの「ツール」タブから設定をエクスポートしておくと、いつでも元の状態に戻せます。そのうえで「ファイル最適化」タブの項目をいったんすべてオフにし、表示が直るかを確認します。直ったら、次の順で1つずつオンに戻し、そのたびにキャッシュを消して表示を確かめます。
- CSSファイルの圧縮（Minify）
- CSS配信の最適化（使用されていないCSSの削除、またはCSSの非同期読み込み）
- JavaScriptファイルの圧縮
- JavaScriptの遅延読み込み（defer）
- JavaScriptの実行遅延（Delay JavaScript execution）
どこで崩れが再発したかで、原因の機能がわかります。「メディア」タブの画像の遅延読み込み（LazyLoad）も、画像の高さが確保されずにレイアウトがずれる原因になるため、ファイル最適化で直らなければこちらも同じ要領で試します。項目名や配置はバージョンによって変わることがあるため、画面の表記に読み替えてください（2026年10月現在）。
原因別の直し方
使用されていないCSSの削除で崩れる場合
最も多いのがこのケースです。WP Rocketはページを読み込んだ時点で使われていないと判断したCSSを取り除きますが、スマホメニューを開いたとき、スライダーが動いたとき、ログイン後などに初めて付くクラスのスタイルまで削られてしまうことがあります。症状としては「ページを開いた直後は正常だが、メニューを開くと崩れる」「一部のブロックだけスタイルが消える」といった形で現れます。
対処は、削除されては困るCSSを残す設定（CSSのセーフリスト）に登録することです。ファイル単位でもセレクター単位でも指定できます。
/wp-content/themes/your-theme/assets/css/menu.css
.slick-(.*)
.is-openどのクラスが削られているかは、ブラウザの開発者ツールで崩れている要素を選択し、?nowprocket 付きの表示と適用されているスタイルを比べると見つけられます。登録したら、使用済みCSSのクリア（再生成）を実行して反映させます。セーフリストで追いきれない場合は、「CSSの非同期読み込み」に切り替えるのも一つの方法です。
CSSの圧縮で崩れる場合
圧縮処理でCSSファイルの場所が変わるため、相対パスで書かれたフォントや背景画像を読み込めなくなることがあります。アイコンフォントが四角い記号になる、背景画像が消える、といった症状です。該当するCSSファイルを「除外するCSSファイル」に登録すれば、そのファイルだけ圧縮の対象から外れます。
JavaScriptの遅延・実行遅延で崩れる場合
JavaScriptで高さを計算したり、要素を並べ替えたりするテーマでは、スクリプトの実行が遅れると最初の表示が崩れます。スライダーが縦に並ぶ、メニューが開かない、タブが全部表示される、といった症状が典型です。
この場合は、該当スクリプトを遅延の対象から除外します。除外欄にはファイルのパスの一部やキーワードを1行ずつ書きます。
/wp-includes/js/jquery/jquery.min.js
/wp-content/themes/your-theme/assets/js/
sliderjQueryに依存するスクリプトが多いテーマでは、jQuery本体だけを除外しても直らず、依存するスクリプトも一緒に除外する必要があります。WP Rocketには主要なプラグイン・テーマ向けの除外候補をまとめて選べる仕組みもあるため、利用中のプラグインが一覧にあればそちらを使うと手間が省けます。
スマホだけ崩れる場合
PCでは正常なのにスマホだけ崩れる場合、テーマがPCとスマホで異なるHTMLを出し分けている可能性があります。「キャッシュ」タブのモバイル用キャッシュを有効にし、さらにモバイル端末用に別のキャッシュファイルを作る設定をオンにすると、PC用のキャッシュがスマホに配信されるのを防げます。レスポンシブデザインのテーマでは、この設定は通常必要ありません。
直したあとに確認すること
- 主要なページの種類（トップ、記事、固定ページ、アーカイブ、問い合わせフォーム）をPCとスマホの両方で表示する。
- メニューの開閉、スライダー、タブ、アコーディオンなど、操作して初めて動く部分を実際に触る。
- ブラウザの開発者ツールのコンソールにJavaScriptのエラーが出ていないかを見る。
- 除外を増やしすぎていないかを確認する。PageSpeed Insightsなどで修正前後の速度を比べ、効果が大きく落ちたなら、除外の範囲を狭められないかを見直します。
テーマやプラグインを更新すると、CSSやJavaScriptのファイル名・クラス名が変わり、再び崩れることがあります。更新のあとは、上の確認項目を一通り見る習慣をつけておくと安心です。
まとめ
?nowprocketを付けたURLで比較し、崩れがWP Rocket由来かを最初に確かめる。- 確認前にWP Rocket・CDN・ページビルダー・ブラウザのキャッシュをすべて消す。
- 設定をエクスポートしてから、ファイル最適化の項目を全部オフにし、1つずつ戻して原因を特定する。
- 使用されていないCSSの削除による崩れはセーフリスト、圧縮やJavaScript遅延による崩れは除外設定で直す。
- 修正後は操作が必要な部分まで確認し、除外の増やしすぎで速度が落ちていないかも見る。