XPageSpeedとは、エックスサーバー社が2022年8月29日に提供を開始した、表示速度改善機能です。
この機能がどのくらい表示速度改善につながるのか、試してみましょう。
このページに書いてあること
XPageSpeedとは
XPageSpeedとは、エックスサーバーの管理画面にてボタンのオン・オフのみで対応が可能な表示速度向上に向けた便利な機能です。
以下公式サイトより引用
「XPageSpeed」は、Google社により開発された拡張モジュール「PageSpeed Module」をもとに、
https://www.xserver.ne.jp/functions/xpagespeed.php
エックスサーバーが開発したWebサイト最適化機能です。
画像・CSS・JavaScriptなどのファイルを圧縮してデータ転送量を削減したり、
同種のファイルを一つにまとめて無駄な通信を削減するなど、
Webサイト表示におけるSEO（検索エンジン最適化）のための最適化処理をワンクリックで適用できます。
現在は、プラグインが便利になり増えたことでコアウェブバイタル実装時に比べれば容易になりましたが、それでも細かな調整は面倒なものです。
そんな作業がボタン一つで簡単にできるのであれば、非常に有益な改善です。
実際の管理画面
実際のサーバーパネル（管理画面）に入ってみると、サイドバー「ホームページ」の箇所に「XPageSpeed設定」が追加されています。クリックしてみると、利用するドメインを選択する画面に飛びますので、表示速度を改善したいドメインを選択しましょう。
このように、ONかOFFを選ぶだけで簡単に実装をすることができます。
ワードプレスであれば、「EWWW Image Optimizer」や「WP Rocket」などのプラグインと同じような作業をサーバー側で適切に行なってくれるようです。
これだけで良いなんて便利ですねぇ。
XPageSpeedを実際に使用してみた感想（Lighthouse編）
何はともあれ、一旦使用してみました。
まず、何も最適化されていないサイトの状態です。
62点です。元々の環境やシステム的な都合で、これでも画像周りの対応や、CSS・JavaScriptの最適化は走らせている状態です。
では、この状態からXPageSpeedの機能をオンにしてみます。
上がった…！
LCP、CLSなどは顕著に良くなりましたね。
ボタン一つで点数が10点も上がるのは美味しいですね。
XPageSpeedを実際に使用してみた感想（PageSpeed Insights編）
今度は、PageSpeed Insightsでも調べてみます。
まずは、XPageSpeed機能をオフにしている状態。
ではXPageSpeed機能をオンにしてみます。
おお、PageSpeed Insightsでは、より点数が飛躍しましたね。
やはりLCPにおける画像配信あたりに非常に良い影響を及ぼしてくれてますね。
XPageSpeedの注意点
XPageSpeedの注意点についてもみておきましょう。
対象のサーバーかどうか確認をしましょう
まず、使用しているサーバーの対応可否を確認しておきましょう。
以下、公式より引用
| 対象サーバー | sv10001.xserver.jp 以降のサーバー |
|---|
※お客様がご利用中のサーバーについては、Xserverアカウントへログインし、「サーバー」項目内か、サーバーパネルの「サーバー情報」→「サーバー番号」からご確認ください。
※sv10000.xserver.jp 以前のサーバーでの「XPageSpeed」機能の提供については順次対応予定です。
sv10000.xserver.jp 以前のサーバーをご利用の方で、本機能の利用をお急ぎの場合は、無料で最新サーバー環境へ移行できる「新サーバー簡単移行」のご利用をご検討ください。
詳しくは、マニュアル「新サーバー簡単移行 ご利用手順」をご参照ください。
ファイルの画質が下がる恐れがある
最適化処理の影響で一部ファイルの画質が下がる恐れがあります。
基本的に画像の最適化に関しては、現実的に必要最低限にサイズや画質を下げる作業がほとんどです。かと言って、いきなりとんでもなく画質が悪くなることはないと思うので、ご安心ください。
体感値はそんなに気になりませんでした。
最適化に伴うキャッシュ処理の影響で反映まで時間がかかるケースがある
キャッシュが関係してくると、設定を変えた瞬間に最適化が走らないケースもあります。
自信が運用している環境やキャッシュ周りのプラグイン・CDNあたりの設定も踏まえて確認しておきましょう。
サーバー側に負荷が発生している場合は、一時的に処理が無効化されるケースがある
今回のサーバー側での作業になるため、サーバー側に高負荷がかかっている場合や、何らかのトラブルでサーバー側がダウンしてしまった場合などは、処理が反映されない状況があるでしょう。
環境によっては表示崩れも起こりうる
WP側の設定ではないので、あまり目立った表示崩れは少ないようにも感じますが、環境によっては表示崩れも全然起こりうるでしょう。
ただ、ボタンですぐに切り替えが可能なので、怪しいと感じたらすぐに機能を停止しましょう。
テーマ【AFFINGER】シリーズでは非推奨？
人気テーマのAFFINGERシリーズでは、
「上記の機能はCSSファイル、JavaScriptファイルなどの圧縮など無条件に行うため、様々なケースに対応した機能を有する当テーマでは不具合が生じる可能性が高いと考えられます。そのため、当テーマでは「XPageSpeed（エックスページスピード）」に関して非推奨とさせていただきますので、ご利用される場合は自己責任にてお願い致します。」
とのアナウンスが流れていました。その他のテーマによってもこの手のお話が出てくるかと思います。
不具合が心配な方向けの設定
設定の変更に伴い、サイト崩れや表示の不具合が心配な方向けの設定も考えてみました。
一番サイト崩れが起こり得ないであろう設定
おそらく、最も表示崩れが起こり得ない方法として、画像の最適化と遅延読み込みだけを設定する方法です。
もともと、ワードプレスなどの場合は画像の遅延読み込みがデフォルトの機能として挿入されていますので、大きな改善につながるかはなんとも言えませんが。
▼ちなみにプラグイン等に頼らずに画像の最適化を行う場合は下記も参照ください。
CSSの最適化だけ行う設定
次に問題が少なさそうな方法として、画像の最適化・遅延読み込みに加えて、CSSの最適化も対応する設定です。
どうしても遅延読み込みを入れることで、一時的の不自然な挙動やスクロールが早い人にとっては気になる要素が出る可能性があります。
なので、あくまでもCSSの遅延読み込みは避けた形としてこの設定であればリスクが少ないと感じます。
とりあえず遅延読み込みだけを避けた設定
可能な限りは対応したいけれど、遅延読み込みだけはさけて最低限のリスクを減らす設定です。
jQueryなどが関わってくると表示の不具合に影響しやすいのですが、XPageSpeedではJavaScriptのみの対応なので大きな心配はないと感じます。
まずは一旦設定してみる
まずは一旦全てオンにした状態で設定を行い、万が一不具合が生じた場合は一つ一つオンオフを試しながら、何が不具合の原因になるのか突き止めるのが一番良いと感じます。
XPageSpeedは6つの設定しかないので、そこまで大きな手間にもならないでしょう。
表示速度改善はリスクを伴う作業であることを理解する
WordPressやプラグインで、どんな作業も簡単にできるようになりました。
ただ、表では簡単に動いているように見える変更や改修は、裏側でコードの変更・削除やファイルの上書きなどさまざまな作業が走っています。
表示速度改善を行うということは、その裏側の動きについても多少は理解をしておく必要があります。
大切なのは何か不具合が生じた際に自分で解決する能力を磨くこと
テーマファイルに関わるCSSやJavaScriptを触ったら何かしら影響があるのは当然です。
バックアップをとり、不具合が生じたときにどの作業が関係しているのか、プラグインのどの機能がどういった影響を及ぼしているのか？を理解しておくことが大切です。
「予期せぬ動きをするかもしれない・多少サイトが壊れるかもしれない」ということを常に念頭に置いて、一つ一つ丁寧に作業を行うことで、大きな不具合を招くことはありません。
また、一つ一つ作業を行うことで不具合が生じた際に原因の特定が速くなります。
慌てずに作業をしていけば、ある程度のトラブルは自分で解決することができます。
XPageSpeedは最後の一押しとして使うのが吉
実際に使用してみた結果、思ってた以上に数字の変化を感じることができました。ただ、注意点でも記載したように、高負荷がかかってしまっている場合や、サーバー側でトラブルなどがあった際に効果が切れてしまうので、あくまでもXPageSpeedに依存するような使い方はおすすめできません。
普段の環境でも可能な限りは表示速度を整えておき、最後の一押しとしてXPageSpeedを活用できると良いですね。
※執筆時は実装から間もないので、今後機能の更新や変更があるかと思います。それに応じて本記事も随時更新していけるようにいたします。
記事を読んで不明な点等がありましたらお気軽にTwitter（@kaznak_com）などでご質問ください。
ではまた。
