ただいま本サイトを親サイトから切り離すマルチサイト化作業の途中です。
サイトレイアウトの構築まで終わったのでWEXALをオンにしました。
管理者のままでは正しい表示がわかりません（←ここ注意です）。
Chromeのシークレットウィンドウから外部訪問者としてアクセスします。
チェックしてみると……
なんだこれ！
悲惨なことになってたトップページのスクリーンショット。
もう１枚。
アドセンスがはみ出てぐちゃぐちゃになってました。
試しに２枚目の画像をダブルレクタングルにしてみました。
幅の広がったアドセンス同士で重なってしまいました。
アドセンス・ポリシー違反になっちゃう！
アドセンスにグローバルナビなどサイトの要素が重なって隠れてしまうのはポリシー違反にあたります。
しかしアドセンス同士が重なってしまうなんて夢にも思いませんでした。
このままじゃやばすぎる
自動広告（サイドレール広告）をオフにして、テーマの広告設定を元に戻して。
大急ぎでトラブルシューティングにかかります。
原因の切り分け
まず原因を切り分けます。
WEXALをオフにしてサイトが正常に表示されるか確認します。
pst off 【プロファイル名】
正常に表示されます。
これでWEXALが原因なのは確定です。
具体的な原因の特定
原因のアタリをつける
しかしWEXALが原因なら原因として。
さらにWEXALの具体的に何が原因なのかを突き止めないといけません。
かつてはWEXALに頼らず、自力で高速化カスタマイズに挑んできた身。
その経験則として、この手のトラブルはだいたい次にアタリがつけられます。
- キャッシュが悪さしている
- CSSの非同期・圧縮が原因で表示が崩れている
- jsの非同期・圧縮が原因でアドセンスがおかしくなっている
もちろんコーディングミスやCSSの記述ミスもありえますけど。
その場合はすぐわかると思います。
とりあえずキャッシュを消してみる
一番可能性が高く、かつ対処が容易なのはキャッシュ。
まず、キャッシュのクリアを試します。
kusanagi bcache clear
kusanag fcache clear
ダメでした。
症状からCSSにアタリをつける
シークレットウィンドウでサイトを開くと、一旦縮まってから広がって表示されます。
言い換えると、一旦モバイルのレイアウトが適用されてからPCのサイトレイアウトが適用されているように見えます。
アドセンスの幅が広がってしまってるのは、ここに原因がありそう
つまりアドセンスがモバイルと御認識して広告を配信してしまってるということです。
つまり最初からPCのレイアウトが読み込まれるようにすれば直るはず。
こういう症状、なんか覚えがあるんだけど……あっ！
CSSの非同期設定カスタマイズしたときだ！
CSSを普通の方法で読み込ませるとレンダリングブロックを引き起こします。
サイト高速化の観点からはまずいので対処します。
具体的にはファーストビューに必要な最小限のCSSだけインライン化。
残りのCSSを非同期で読み込ませます。
しかしやり方を間違えると今回みたいなレイアウト崩れを引き起こします。
インライン化するCSSを絞り込む過程でいっぱい見たから覚えていたわけです。
WEXALの原理
ここでWEXALがどうやって高速化しているかを見てみます。
ざっくり言うと、AIで要素の読み込み順序と時間を制御してます。
読み込み順序は手動でも制御できます。
高速化カスタマイズ手法の一つですが、かなり面倒くさい。
WEXALのある現在は基本的に任せてしまう方がいいです。
WEXALの「engagement delay」の設定を見直す
前項のWEXALの機能は「engagement delay」。
まず試しにengagement delayのチェックを外して全て無効にします。
直った！
これでengagement delayの設定に問題があることが確定します。
だとすれば、ほぼ親テーマのstyle.cssが原因。
（もし子テーマにサイトレイアウトに関わるCSSを記述してるなら、そちらも含まれます）
私の使ってるテーマはCocoonなのでwp-content/themes/cocoon-master/style.cssの含まれた項目を探して一番右の「除外」にチェックを入れます。
完全に直った！
PageSpeed Insightsで確認してみる
そしてなぜかサイト速度が速くなりました。
体感でもわかるくらい。
そこでPageSpeed Insightsをやってみました。
修正前のPCスコアは60台と低迷していたのですがモバイルはスコア出てるので流してました。
しかし今回の修正でPCのスコアもモバイル並になりました。
各指標も出るべき数字が出ています。
CSSのレンダリングブロックを解消すればもっとスコア挙がりますけど。
メンテナンス性を考慮してこのままにしておこうと思います。
あれこれいじると後が大変……
これまた私の経験則なので。
広告の設定を見直す
ここは蛇足気味になりますが。
１枚目のインデックスリスト内の広告は外しました
当サイトみたいに零細ですとインデックスページのリスト内の広告からの収益はほとんどありません。
しかもジャンル的にPCからのアクセスが多いですから、なおさらクリックしてもらえません。
今回ケチがついてしまったのもあって、もう外してしまいました。
別サイトも同じくファーストビューの表示崩れが出ていました。
別サイトにはアドセンスを置いてないのでそちらの問題はないのですが。
やはり同じ方法で解決しました。
まとめ
もしWEXALでサイト表示崩れのトラブルに出くわしたら、まずengagement delayを疑ってみてください。
私の環境では親テーマのstyle.cssを適用除外することで解決しました。
ただし原因となるCSSファイルは環境によって異なります。
本記事の切り分け手順を参考に確認してみることをおすすめします！
VPSは、もう「黒い画面」だけじゃない。
「VPSは難しそう」と諦めていませんか？ ConoHaのKUSANAGIなら、ブラウザ上の管理画面（KUSANAGI Manager）で、ドメイン設定からSSL発行まで直感的に操作可能です。
コマンド操作なしで世界最速級の環境を構築できる、今の時代の初心者にとっての最適解。私が長年愛用している理由がここにあります。
※当サイト経由で新規申し込みいただくと、特典として1000円分のクーポンをもらえます。