XサーバーのXPageSpeed反映で不具合発生。原因はJavaScript遅延読み込み。

2022年8月29日にXサーバーが、XPageSpeedの提供を開始しました。早速、導入したところWebサイトのJavaScriptが適切に動作しない不具合起きましたので、シェアしたいと思います。

XPageSpeedとは？

＜XPageSpeedとは？＞

「XPageSpeed」は、Google社により開発された拡張モジュール「PageSpeed Module」をもとに、エックスサーバーが開発したWebサイト最適化機能です。画像・CSS・JavaScriptなどのファイルを圧縮してデータ転送量を削減したり、同種のファイルを一つにまとめて無駄な通信を削減するなど、Webサイト表示におけるSEO（検索エンジン最適化）のための最適化処理をワンクリックで適用できます。

＜XPageSpeed導入のメリット＞

「XPageSpeed」を使用することで、Webサイトのデータ表示は最適化され、ページのロード時間を短縮することが可能です。これにより、Webサイトの読み込み速度を評価する「Google PageSpeed Insights※1」のスコア値が向上し、SEO対策の1つとして効果が期待できます。

当社における比較テストでは「最大で264%」にスコア値が向上することが確認されています。［出典：Xサーバー］

不具合が発生

そこで、早速、クライアントのWordPressで作成したWebサイトに反映したところ、不具合が発生しました。

長年WordPress等で高速化ツールを導入した経験のある方なら、薄々「なんか起きるかも？・・・」と予想されるとおもいますが。

不具合の内容

• スマホ閲覧時に、右上にあるバーガーメニューが動作しない
• TOPページの動きのあるデザイン（画像の自動スライドなど）のレイアウトが崩れ、もちろん動作せず

不具合の対応

一旦、XPageSpeedをすべてOFFにし、適切にWebサイトが表示されることを確認しました。その後、Javascript関連のみをOFF、それ以外をONにしたところ問題なく表示され、最適化と遅延読み込みのどちらが原因となっているか調査したところ、今回のWebサイトではXPageSpeedの”Javascriptの遅延読み込み”が原因とわかりました。

このWebサイトをサイト読み込み速度を　https://pagespeed.web.dev/　で測定したところ、

• XPageSpeedをON（Javascriptの遅延読み込みはOFF）⇒　携帯電話：５４　デスクトップ：７８
• XPageSpeedをOFF　⇒　携帯電話：５２　デスクトップ：７２

となり、XPageSpeedの高速化効果は確認できました。

ただ、極端な高速化が起きているわけではなく、今回発見した不具合以外にも何かあるかもしれませんので、XPageSpeedを活用は様子を見ながら対応していきたいと思います。

今後、XサーバーのXPageSpeedを利用を検討している方は、ON後はしっかり検証した方が良いです。

関連ページ

• XPageSpeed | エックスサーバー
• PageSpeed Insights | google の読み込み速度解析