Xserverには、Webサイトの表示速度を改善するために「XPageSpeed」機能があります。
その中に「JavaScript遅延読み込み」機能があり、ページの初期表示でJavaScriptの読み込みを遅らせることで、PageSpeed Insightsのスコアやページの表示速度を改善できる場合があります。
しかし、WordPressでCocoonテーマを使用しているサイトでこの設定を有効にしたところ、スマートフォン表示のサイドバーが白くなってしまう現象が発生しました。
今回は、この現象が発生したときの原因と対処方法についてまとめてみました。
１．発生した現象
Xserverの XPageSpeed で「JavaScript遅延読み込み」を有効にしたところ、PCでは特に問題ありませんでした。
しかし、スマートフォンでサイトを確認すると、サイドバーの表示がおかしくなっていました。
通常であれば、Cocoonの設定したスキンに合わせてサイドバーが表示されます。
ところが、「JavaScript遅延読み込み」を有効にした状態では、サイドバー部分だけが白い状態になりました。
例えば、Cocoonのスキンに「COLORS（ブラック）」を設定していても、モバイル表示のサイドバーが白く表示されます。
正常な状態のモバイルサイドバー
モバイルサイドバーが白くなる
２．原因
今回の原因は、Xserverの「JavaScript遅延読み込み」がONになっていることでした。
この設定をOFFにすると事象が改善されたためです。
JavaScript遅延読み込みは、JavaScriptの実行をページの初期表示より後にすることで、ページの表示速度を改善する機能です。
一方、CocoonではJavaScriptを使用して、モバイル表示やサイドバーなどの動作を制御しています。
そのため、「JavaScript遅延読み込み」をONにすることによって、JavaScriptの実行タイミングが変わり、結果、モバイルサイドバー表示が白くなるという事象になったと推察しています。
３．まず確認したこと
最初はコミュニティなどの記事も見つつ、CSSやCocoon側の設定を中心に確認しました。
3-1. 追加CSSの有無を確認（設定なし）
画面のレイアウトに関することかと思ったため、最初に「CSS」周りを確認しました。
ただ、私の環境ではサイドバー自体にも「追加CSS」はなく、テーマ側にも特にCSSを追加していなかったので、CSSではないかと思い、Cocoonの設定の確認に移りました。
3-2. 「高速化」設定をON/OFFにしてみる（→効果なし）
次に、Cocoon設定 > 高速化 の設定を確認しました。
私の環境ではすべてチェックが入っていたので、1つ1つチェックを外し、サイドバーの状態を確認しましたが、サイドバーが白い状態は変わりませんでした。
3-3. 「モバイル」設定を見直す（→効果なし）
次に、Cocoon設定 > モバイル の設定を確認しました。
特に「モバイルボタン」の設定を見てみるものの関連しそうな設定はなく、念のためチェックを入れて挙動を確認しましたが、サイドバーは白いままでした。。
3-5. スキンを変更する（→一時的に改善されるも効果なし）
次に、スキンの設定を変更してみました。
私の場合、「COLORS（ブラック）」を利用していたので、「COLORS（イエロー）」や「なし」に変更してみました。
すると、モバイルサイドバーが正常に表示されました。
しかし、スキン変更の翌日などに確認すると、モバイルサイドバーが白い状態に戻っていました。。
今回ここが本当に厄介で、この現象のおかげで原因の調査が難航しました。。
3-6. 背景色変更する（→効果なし）
次に、スキン周りが怪しそうということで、Cocoon設定 > 全体 > サイト背景色 を確認しました。
スキンによってはこの設定が固定されているため、一度スキンを「なし」に変更し、黒色に変更などしてみましたが効果はありませんでした。。
3-7. JavaScript に関連する設定を確認する
スキン周りが怪しいと思いつつ、全然改善できず、原因がわからなかったのでサイドバーの表示に関係する JavaScript に関する設定周りについて確認しました。
Cocoon側の設定は見つくしたので、そういえばXserver側でも以下の記事にもあるような設定をしていたなと思い、XPageSpeedの設定を確認してみました。
そして、「JavaScript遅延読み込み」をOFFにした結果、事象が改善されました。
４．解決方法
上記でも記載しましたが、今回の環境では、Xserverの XPageSpeed で「JavaScript遅延読み込み」をOFFにすることで、モバイルサイドバーの表示が元に戻りました。
・Xserverのサーバーパネル > XPageSpeed から、「JavaScript遅延読み込み」 の設定をOFFにする。
JavaScript遅延読み込みをOFFにしたあと、スマートフォン表示でサイドバーを確認すると、正常な表示に戻りました。
※再度確認する際にはキャッシュが残っていると引き続きサイドバーが白いままの可能性があるため、キャッシュを削除、もしくは全く別のページを確認すると良いです。
５．まとめ
Xserverの「JavaScript遅延読み込み」は、Webサイトの表示速度改善に役立つ機能として提供されています。
しかし、Cocoonテーマを使用している環境では、JavaScriptの実行タイミングが変わることで、モバイル表示などに影響する可能性があります。
私の環境では実際にモバイルサイドバーが白くなるという影響が出ました。
この手の速度改善の設定を入れる際には、PCサイトのみならずスマホでもサイトの表示をすべて確認して、もし不具合があるようなら設定を入れないということが重要だと思いました。
また、サイトの設定がCocoonのみならずXserver側でも設定していたため原因を見つけるのに時間がかかりました。。
もし今後も同じような事象があったら2か所の設定を確認することを肝に銘じておこうと思います。
