WEXALでサイトの表示崩れが起きる時の対処法｜CocoonのCSS・Font Awesome崩れ実例

WEXAL環境下においては様々な表示崩れが生じることがあります。
本記事では、WEXALが原因で生じる表示崩れの多くについて解決できる方法を紹介します。

採り上げるのはCocoonにおける実例となります。
ただし本質的にはテーマに関係無く発生するトラブル。
原因がWEXALによるCSS・フォントファイルの最適化であれば、他テーマでも同じ考え方で対処できると思われます。

WEXALが原因で生じるCocoonの表示崩れの例

WEXALが原因で生じるCocoonの表示崩れの例としては次のものがあります。
私の運営するサイトで生じたものですが、きっと他にも色々あるでしょう。

１　ページ読み込み時に表示が崩れる。

PageSpeed Insightsの読み込み遷移画像です。

CSSが半端にしか適用されていません。
実際の画面でも一度こんな風になってから、しばらく経って適用されます。
見苦しいのはもちろん、体感的にも遅く感じます。

上の例のスキンは「モノクロ」ですが「grayish」でも同じ現象が生じます。

２　アドセンスのサイズが正しく適用されない

こんな感じ。
最悪、ポリシー違反を引き起こします。

こちらの記事に詳しく書いています。

３　Font Awesomeが読み込まれない。

日本語意味不明ですが、テスト環境でのものです。

□と×マークを組み合わせた表示になってしまっています。

４　ボックスメニューのレイアウトが崩れる

特定のメニューだけ位置がずれます。
（不具合が生じた時のSSを撮っていなかったため、加工画像により再現しています）

この場合、真ん中か両サイドのアイコンのどちらかの読み込みが極端に遅れているはずです。

WEXALが原因か切り分ける手順

まず表示崩れの原因を切り分けます。
WEXALが原因かどうかは次の操作でわかります。

# pst off （プロファイル名）

あるいはPST ManagerからPSTのトグルをOFF。

念のため、キャッシュをクリアします。

# kusanagi bcache off （プロファイル名）
# kusanagi fcache off （プロファイル名）

シークレットウィンドウからサイトをチェックします。
場合によってはPageSpeed Insights（PSI）のテストも加えます。

直らない場合はそれ以外に原因があります。
プラグインやKUSANAGI本体の設定などを見直してみましょう。

WEXALが原因で起こる表示崩れの解決方法

PST Managerを開きます。
当該サイトのプロファイルの「スマートモード」を開きます。

デフォルトではengagement delay以外の３つにチェックが入っていると思います。
試しにengagement delayにチェックを入れてみてください。
正しく表示されるはずです。

次の記述を含んだ項目の「除外」（右端）にチェックを入れます。

/wp-content/themes/cocoon-master/style.css
/wp-content/themes/cocoon-master/keyframes.css
/wp-content/themes/cocoon-master/（使っているスキンのCSS）

例３・４のようにフォント絡みの表示崩れが生じている場合は次もチェックします。

/wp-content/themes/cocoon-master/webfonts/fontawesome5/css/all.min.css
/wp-content/themes/cocoon-master/css/fontawesome5.css
/wp-content/themes/cocoon-master/webfonts/icomoon/style.css

重要なのは、

解説

冒頭で例に挙げたケースは、

WEXALはAIによってCSS・jsファイルの読み込み順や同期・非同期を制御しているものと思われます。
その項目がengagement delayです。

しかしCSSはうまく制御できないと表示崩れが生じがち。
なので（読み込みの）最適化対象から除外してしまうわけです。

親テーマのstyle.cssとスキンのcssは除外しないと問題の起こる可能性が高いです。
私の環境では３サイト全て、スキン２種類どちらも、１カラム２カラムどちらも。
ついでにほとんど空っぽのテストサイトであっても。
何かしらの表示崩れが発生しています。

例３・４はFont AwsomeとIcoMoon絡みの表示崩れ。
表示崩れが発生していないなら除外する必要ないので場合わけしています。

除外したことによる副作用

もしかしたらPSIで「レンダリングブロックしてるよ」と怒られるかもしれません。
しかし、

ファーストビューだけ早く表示されてもレイアウトが崩れているのでは印象悪いです。

それどころか、例１では、engagement delayから除外したらPSIのスコアが10上がりました。
こういうケースもあります。

レンダリングブロックで怒られたところでスコアが上がればいいわけで。
体感的にも快適になるならもっといいわけで。
気にしすぎないのが吉です。

まとめ

実は、自分でCSSの読み込みを適正化することで対処することもできます。
クリティカルCSSのインライン化という手法です。

ただここまでできるなら、きっとこの記事に辿り着くこともなく自分で解決しているはずです。

とりあえず表示崩れさえ直ればそれでいいという私みたいな方。