【解決済】AFFINGER6でスマホ表示だけ画面が真っ白になった時に試したこと

やはり原因はプラグイン

ずっとブログを更新できていなかったので最近気づいたことです。WordPressの更新通知が来ていたのでアップデート。現在使用中のテーマAFFINGER6についても最新データが更新されていたので子テーマと一緒にアップデートしました。

それで表示の崩れなどないかPC上でチェックしたところ問題ない。スマホ（iPhone14）でも問題ありません。
安心して管理画面を閉じてしばらくしてから何気なくスマホで確認してみると、読み込みがとても遅い。

具体的には、トップ画面を出すだけで10秒以上かかりました。さっきは普通に見られたのにと思いながら何度かリロードしてみるものの、やっと表示されたと思ったら画像の部分だけ何も表示されない現象が起こっていました。

サムネイル、アイキャッチ画像ともに表示されず、ロゴも見当たりません。ここから小１時間格闘することになりました。

原因を絞り込む

表示系の不具合はキャッシュとかプラグインに問題があることが多いです。特にWordPress自体やテーマの更新時に起こりやすい。とはいえ、原因の特定はそう簡単ではありません。

僕がやったことは大きく分けて2つ。

• サーバーのデータベース更新
• 該当プラグインの無効化

データベースはそこまで古いものではなかったのですが、こちらも原因かもしれないと思い、良い機会なので最新のものに更新しておきました。ただし結論から言うと、データベースを更新するだけでは問題は解決されませんでした。

無効化したプラグイン

いろいろネットの記事を参考にさせていただいた上で絞り込んだのが以下のプラグインです。
いずれもサイト表示速度改善を目的としたプラグインですね。

1. Autoptimize
2. Async JavaScript
3. W3 Total Cache

時系列で言うと、Autoptimizeを停止（無効化）したらスマホで相当遅いながらも画像含め表示はされましたが、微妙にレイアウトが崩れているし、とにかくページの読み込みが遅い。

次にAsync JavaScriptも停止するも特に変化はなかったのですが、この時点ではこちらも停止したままにしておきました。

この2つのプラグインを停止したあたりから気づいたことがあって、WordPress管理画面を開いている間はスマホでも正常に表示されているのです。これを閉じるとスマホ表示もおかしくなるということは、やはりキャッシュ系プラグインに問題があるのではないか。

そこで僕の環境においてインストール済みでキャッシュ系としてヒットしたプラグインが「W3 Total Chche」でした。このプラグインは気軽にキャッシュをクリアできて便利だと思っていたのですが、とにかく今は高速化より正常に表示させることが最優先。仕方なく停止してみました。

その結果、管理画面を閉じた状態でもスマホで正常に表示されることを確認できました。時間をおいてからも問題ないようでホッとしたところです。

いずれもサイト表示速度の高速化が目的で入れたものばかりですが、僕の今の環境では相性が良くなかったようですね。
これらのプラグイン自体に問題があるというわけではありませんが、設定の仕方や組み合わせによっては不具合が生じるというのは周知の通りです。

まとめ

特にこのような変更を行う前には必ずバックアップを取り、いつでも戻せるようにしておいた方が安心です。また、プラグインに限らず、どこをどういじったかを記録しておくことをおすすめします。