タグアーカイブ モバイルレイアウト

WP Rocketのキャッシュ後にモバイルレイアウトが崩れる原因と直し方

WP Rocket のキャッシュ生成後にモバイルレイアウトだけが崩れる場合、Remove Unused CSS（未使用 CSS の削除）や CSS の縮小化（Minify）がレスポンシブ用のメディアクエリや動的クラスを誤って処理している可能性が高い。最初に「未使用 CSS の削除」を無効化するか、モバイル用 CSS を除外設定すれば多くのケースで即座に解決する。

なぜ WP Rocket のキャッシュ後だけモバイル表示が崩れるのか

WP Rocket はサイトの表示速度を上げるため、CSS や JavaScript ファイルを結合・縮小・遅延読み込みする。この最適化処理は強力だが、画面幅に応じてスタイルを切り替えるメディアクエリ（@media）を含むファイルを処理する際に、意図しない形でルールを並べ替えたり削除したりすることがある。

特に問題を起こしやすいのは「未使用 CSS の削除（Remove Unused CSS）」機能だ。この機能はページで実際に使われている CSS だけを抽出して配信する仕組みだが、JavaScript で動的に追加されるクラスや、スクロール位置・タップ操作などユーザーのアクション後に初めて適用されるスタイルを「未使用」と判断して除去してしまう。モバイル表示の崩れは、ほぼこの機能か Critical CSS の生成に起因する。

Cloudflare のキャッシュや Auto Minify が WP Rocket と二重に最適化をかけている場合も、CSS の破損リスクが高まる。キャッシュを両方でクリアしても、最適化処理そのものが走るたびに同じ崩れが再発するのはそのためだ。

WP Rocket が CSS を処理する流れは、ファイルの読み込み・解析・不要ルールの除去・結合・縮小という順序で進む。このデモは、どの段階でモバイル用のスタイルが失われるかを概念的に示したものだ。

最初に試すべき設定変更と確認手順

未使用 CSS の削除を一時的に無効化する

WordPress 管理画面の「設定」→「WP Rocket」→「ファイル最適化」タブを開き、「CSS ファイル」セクションにある「未使用の CSS を削除（Remove Unused CSS）」のチェックを外す。変更を保存したら、WP Rocket のキャッシュを完全に削除し、Cloudflare を使っている場合は Cloudflare 側のキャッシュもパージする。

シークレットウィンドウまたはキャッシュの残っていない別ブラウザでモバイル表示を確認し、問題が解消したかどうかを判断する。もしこれで直った場合、原因は未使用 CSS の削除処理だと特定できる。

Critical CSS の生成状況を確認する

「未使用 CSS の削除」を有効にしたまま使いたい場合は、Critical CSS（ファーストビュー表示に必要な最小限の CSS）の生成がモバイル用に正しく行われているかを検証する。「WP Rocket」→「ファイル最適化」→「CSS ファイル」セクションにある「クリティカル CSS の最適化（Optimize Critical CSS）」の設定を開き、モバイル向けの Critical CSS が生成されているか確認する。

生成された Critical CSS が不完全な場合、モバイルでのレイアウトが崩れる。一度「クリティカル CSS を再生成」ボタンで再生成し、それでも改善しない場合は、この機能自体をいったん無効化して様子を見る。

CSS 縮小化（Minify）と結合の影響を切り分ける

「未使用 CSS の削除」を無効にしても問題が続く場合、CSS 縮小化（Minify CSS）または CSS 結合（Combine CSS）が原因である可能性を調べる。どちらか一方だけを有効にしてキャッシュを削除し、崩れの有無を確認する。縮小化と結合を両方有効にしていると切り分けができないため、必ず一方ずつ試す。

原因となる機能を特定できたら、その機能だけを無効化するか、次項で説明する除外設定を使って該当 CSS だけを最適化対象から外す方法に進む。

モバイル用 CSS を WP Rocket の最適化から除外する方法

テーマやプラグインが読み込むモバイル用 CSS ファイルを特定し、WP Rocket の除外リストに追加すれば、最適化によるレイアウト崩れを防ぎつつ、他のファイルの高速化は維持できる。

どの CSS ファイルが除外対象かを特定する

ブラウザのデベロッパーツール（F12）でモバイル表示を開き、「ネットワーク」タブで読み込まれている CSS ファイルを確認する。レスポンシブ用のスタイルを含むファイル名には responsive mobile tablet などの文字列が含まれていることが多い。また、テーマのメインのスタイルシート（style.css）の後半に @media ルールが集中している場合は、ファイル全体を除外候補として扱う必要がある。

WP Rocket の除外設定に CSS を追加する

「WP Rocket」→「ファイル最適化」→「CSS ファイル」セクションを開き、「除外する CSS ファイル（Excluded CSS Files）」のテキストエリアに、先ほど特定したファイル名（例: responsive.css mobile.css theme-responsive-min.css）を行単位で入力する。ファイルの URL の一部（例: /themes/my-theme/css/responsive）でも指定できる。

特定の CSS の塊（インラインの @media ブロックなど）だけを除外したい場合は、「未使用 CSS の削除」の設定内にある「セーフリスト（Safe list）」にクラス名や ID を追加する方法も有効だ。たとえば .mobile-menu #responsive-nav .hamburger など、モバイル表示でのみ使われるセレクタをカンマ区切りで指定すれば、そのルールは削除されずに残る。

Cloudflare 側の設定との競合を防ぐ

Cloudflare の「速度」→「最適化」→「Auto Minify」で CSS と JS の縮小化が有効になっている場合、WP Rocket の縮小化と二重がけになって CSS が破損することがある。Cloudflare 側の CSS 縮小化は無効にし、WP Rocket に一本化する。また Cloudflare の「Rocket Loader」も JavaScript の実行順序を変更するため、モバイルでの動的なスタイル適用に悪影響を及ぼす可能性がある。問題が解消しない場合は Rocket Loader も一時的に停止して検証する。

よくある質問

WP Rocket の「モバイルキャッシュ」機能は有効にすべきか

レスポンシブテーマを使っている場合は「モバイルキャッシュを有効にする（Enable caching for mobile devices）」はオフのままで問題ない。この機能はモバイル専用の別テーマ（例：Jetpack のモバイルテーマ）を使っている場合に必要になる設定で、通常のレスポンシブサイトでは有効化するとキャッシュが二重管理されて意図しない表示になることがある。

CSS 縮小化で改行が消えてレイアウトが崩れることはあるか

改行や空白の除去自体が CSS の意味を変えることはほとんどない。ただし、コメント行に書かれた条件付きブラウザ指定（/*! normalize.css */ のような特殊構文）や、不適切に記述された @import 文が縮小化で破損することがある。その場合は該当ファイルを縮小化の除外リストに追加する。

Remove Unused CSS をオフにするとサイト速度は大幅に落ちるか

ページ全体の CSS サイズが極端に大きい場合を除き、体感速度が大きく落ちることは少ない。むしろレイアウト崩れによるユーザー離脱のリスクのほうが深刻だ。未使用 CSS の削除を無効化したうえで、Critical CSS の生成だけを有効にすると、ファーストビューの表示速度を保ちつつ安定したレイアウトを維持できる。

モバイルキャッシュを削除しても直らないのはなぜか

WP Rocket のキャッシュ削除に加えて、Cloudflare のキャッシュ、ブラウザキャッシュ、サーバー側のページキャッシュ（Nginx FastCGI や LiteSpeed Cache など）のいずれかに古いデータが残っている可能性がある。すべてのキャッシュ層を順にクリアしてからシークレットモードで確認する。また、CDN のエッジサーバーにキャッシュが残っている場合もあるため、Cloudflare の「キャッシュ」→「すべてをパージ」を実行したあと最低5分は待ってから検証する。

この記事のポイント

• モバイルレイアウト崩れの主因は「未使用 CSS の削除」と Critical CSS の不完全な生成
• 問題の CSS を特定し WP Rocket の除外リストに登録すれば最適化と両立できる
• Cloudflare の Auto Minify や Rocket Loader との二重がけに注意する
• キャッシュの検証は全キャッシュ層をクリアしたうえでシークレットモードで行う
• モバイルキャッシュ機能はレスポンシブテーマではオフでよい

佐々木 太陽

・ Reddit、Stack Overflow、WordPress.org フォーラムを日々巡回し、現場の悩みを拾い上げて記事化
・ WordPress、WooCommerce、Next.js などモダンWeb制作領域のトラブルシューティングが専門
・ 「検索しても答えが見つからなかった」を一つでも減らすことが目標
・ エラーメッセージから根本原因にたどり着く粘り強い調査が得意
・ 初心者がつまずきやすい箇所を先回りで解決する記事作りを心がけている