画面が真っ白 レイアウトが総崩れの時にやったこと
スポンサーリンク
実際には半年近くこの状態だったようだが、全く気が付かなかったので反省も込めて記事にします。
問題の現象
それはある日、親切な方からのコメントでわかった。
えっ！毎回確認しているのでそんなはずはないのに。
試してみたら、やはり普通に表示されている。
Word Press 真っ白 正常表示
ある日、やった操作で現象が再現し、やっと解析に入ることができた。(それは後述)
Word Press 真っ白 CSSエラー
考えられる原因は、ブログの速度低下によるタイムアウト問題、プラグインの互換性問題、レンタルサーバの一時的(あるいは恒久的な)障害。。。。
いくつもありそうだが、さっぱりわからない。順番に切り分けていこう。
原因の絞り込み
１ ブログの速度低下
数秒後に真っ白になる、というのは最初のデータのロードが終わるタイミングのようだ。ブラウザが読み込んでいるときは×印が表示されており、これをクリックすればいつでも読み込みを停止するのだが、×がリロードのマークに変わる、つまり読み込みが終わるタイミングで真っ白になっているようだ。
ここ数か月やたら速度が遅くなったと思っている。その原因はたまに行うテーマの更新のためなのだが、ちょっと盛りすぎたのかもしれない。Jetpack Boostでもモバイルが相当遅い、と怒られる。うーむ。
解析ツールを使っていろいろ軽量化を図る。ついでに不要なプラグインがあれば削除する。
ここまでやっても現象は変わらない。
ちなみに速度の解析はWebPage TestというところでブラウザのNetwork解析と同じようなものができるので良かった。
Word Press 真っ白WebPage Test
２ プラグインの互換性問題
pcdiyはブログを開設して5年になり、当初採用したプラグインで最新のWord Pressに対応していないものがちらほらある。
よく調べるとWord Pressのルールに従わなかったのかプラグインの一覧から消えたものもあった。
とりあえずは、使わない機能は無効化して様子を見て、問題なければ削除、を繰り返した。
でも効果なし。やっぱり。
３ レンタルサーバの問題
ユーザに断りなく共用部分のネットワーク設定を変える、なんてことはありそうだ。
サーバ会社に問い合わせたが、特に何もしていないし、障害も起きてない、とのことだった。やっぱり。
原因に近づく方法
上記3つについてダメだったので原因はほかにあるだろう。
しかしいったい、いつからこうなっていたのか？
残念ながら自分の環境ではずっと動いていたので、気づいていなかった。だからいつからおかしくなったのかはわからない。
と、そこで思いついた。
そうだ、Clarityがあるじゃないか。
Clarityはマイクロソフトが提供する解析ツールで、Google Analyticsとは違ったことを教えてくれる。
例えばJAVAのスクリプトエラーがわかるし、なんといってもヒートマップやレコーディング機能を使える。
ヒートマップは訪問者がどこをクリックしたかわかり、レコーディングでは操作した内容を再現してくれる。
訪問者が何を求めているかわかる便利なツールだ。
Word Press 真っ白 Clarity
これは今月発生したものではなくて、ずっとこうだったんじゃないか？
原因はCSS
挙動からするとCSSの設定がおかしいと最初から疑っていたが、ロードが終わった時点でCSSの設定が全くなくなるという現象は理解できなかった。
(実際、今も理解できない)
つい最近こうなったと思い込んでいたのだが、どうやら相当前からこうなっているようだ。
CSSを更新した修正は何度もあるので、それを戻しながら試すと、ある時期の修正以降で発生しているようだ。
となればその時の追加機能を抜いて、最新の関係ない機能追加をマージすることで対応できそうだ。いったん当時の拡張機能を抜いて動作を確認し慎重にマージをした。
これで直った。
得られた教訓
今回の問題でわかったことがいくつかある。重要な情報もあるのでご参考までに。
- 同じブラウザ内の他のタブでログインしていると再現しない
これの意味が分からない。しかしWord Pressに他のタブでログインすると再現し、ログインしないと再現する。例えばEdgeでログインしてChromeでログインしていなければ、Edgeでは再現せず、Chromeでは再現する。
この意味が分からない。なんでこうなるのだろう。セッション情報が関連していそうだが。
この条件によって初期の再現検証ができなかった。今後は動作確認時にログアウトしてやらないといけないな。 - なぜかモバイルでは発生しない。Windowsだけで発生
ブラウザは同じChromeでもWindowsだけで発生している。CSSの共通の設定であればモバイルでも発生するはずだが発生しないところにヒントがあったかもしれない。 - レイアウト崩れの原因はCSSの問題以外考えられない
サーバのネットワーク環境なども疑ったが、やはり問題は自分が修正したところにある。まずはそこを疑うべきだ。
今回は疑う手掛かりがなかったので聞いて回った結果、ヒントを得られたという逆順で解析を進めたように思える。 - 高速化は常に進めるべき
最初はずっと気にしていた速度低下を疑った。これがなければ次の推定原因から調べることができた。高速化はSEOの観点でも必要なものなので、テーマやCSSを更新したときには常に速度を再測定して、問題がないことを確認すべきだ。
参考になれば幸いです。
PR
仕事でUS,UK,SGなどの国とかかわる。
自作PC、スマホ、タブレット、AV機器好き。ドラクエウォークはルーチンワーク。Linuxやストレージ、IT業界の動向は興味を持っている。
新しい機器、サービスに興味あり。年数回のレビュー（自腹購入、ご依頼）と発表されて興味があるものの新製品机上レビューをやっている。
2022年はJAPANNEXT様のアンバサダーを務めました。 本ブログはpcdiyブログのテーマ作成の経験から得た知識を記録しています。
