WordPressのソースコードを圧縮し、表示速度向上を目的としたプラグイン「Autoptimize」。
有効化したときの設定そのままで使っていると、サイトの表示がおかしくなってしまうことがあります。
JavaScriptやCSSを圧縮している以上起こってしまうのはしょうがないことなので、実際に効果があった対処法を紹介します。
前提として、Autoptimizeを無効化したときにサイト表示が直る（=Autoptimizeが原因）場合に効果があります。
「404 フォールバックの使用」をOFFにする
使用サーバー：エックスサーバー
使用テーマ：Cocoon
Autoptimize 設定 > JS、CSS & HTMLタブ > その他オプション から「404 フォールバックの使用」を探します。
このチェックをOFFにすることでデザイン崩れが解消されました。
しかし、
時折、キャッシュされた HTML から、すでに削除された Autoptimized JS/CSS が参照された結果、サイトの表示が壊れることがあります。このオプションを有効化すると、Autoptimize は、それら見つからないファイルの「フォールバック版」(予備) へのリダイレクトを試し、ページやサイトが表示できるようある程度維持しようとします。一部の環境では、wp-content/cache/autoptimize 内の wp-content/autoptimize_404_handler.php が 404 を処理できるよう、ウェブサーバー単位での追加の設定が必要です。
の説明通り、本来であればONにしておいた方が良い項目です。ただ、実際にこれをOFFにしたことで表示が改善された＆他のサイトを見てもOFFにしている方が一定数いることからしばらくはOFFのままで試してみようと考えています。
それでも直らなかったら項目を1つ1つOFFにする
上記で直らない場合、「404 フォールバックの使用」が原因でないことになります。
その際は、デフォルトの設定から項目を1つずつ確認し、チェックを外していくしかありません。
逆に、チェックする項目を増やすことは思わぬバグにつながる可能性があるため推奨しません。
作業前に必ずバックアップを取っておきましょう。
