エックスサーバーで運営している、子育てサイト「パパやる」で、サイト内の一部画像が表示されないトラブルが発生しました。
原因は、XPageSpeed設定。
同様のトラブルが起きている方のために、解決方法などをお伝えします。
XPageSpeed設定とは
XPageSpeed機能は、エックスサーバーが開発したWebサイトデータを最適化する機能です。
2022年8月29日、エックスサーバーよりメールで以下の案内が届きました。
最新ニュース
Google PageSpeed Insightsのスコアが最大264％にアップ！ SEO（検索エンジン最適化）機能「XPageSpeed」を提供開始
このたびエックスサーバーでは、Webサイト表示におけるSEO（検索エンジン最適化）機能「XPageSpeed（エックスページスピード）」を、無料でご利用可能な標準機能として提供を開始いたしました。
「XPageSpeed」機能は、Google社によって開発された拡張モジュール「PageSpeed Module」をもとに、エックスサーバーが開発したWebサイトデータを最適化する機能です。
「XPageSpeed」機能はワンクリックで簡単にON・OFFを切り替えられ、お客様のオリジナルデータを改変することなく、Webサイトが表示されるタイミングにのみ自動的に表示データを最適化します。
これにより、Webサイトの読み込み速度が向上し、Google PageSpeed Insights（ページスピードインサイト）のスコアも最大で264％（※）に向上、SEO対策としても効果が期待されます。
ぜひこの機会に「XPageSpeed」機能のご利用をご検討ください。
※当社サービス内の同一構成のサーバーに対する比較結果によるもの
メールマガジン「エックスサーバーニュース」より引用
早速、エックスサーバーの管理画面にログインし、XPageSpeed設定を行いました。
画像最適化・画像遅延読み込み、設定ONで一部画像が表示されない
XPageSpeed設定項目
- 画像最適化
- 画像遅延読み込み
- CSS最適化
- CSS遅延読み込み
- JavaScript最適化
- JavaScript遅延読み込み
XPageSpeed設定画面では、6つの項目があります。それぞれで検証すべきかと思いましたが、まずはすべての項目をオンに。
すると、サイト内の一部画像が表示されなくなってしまったのです。ブラウザをリロードしたり、別のブラウザで試したり、パソコンではなくスマートフォンからアクセスしたりしてみましたが、いずれでも画像が表示されません。
最初は「あるはずの画像が無くなっている……。もしや、WordPressがウイルスに感染したのでは!?」と焦りました（過去のウイルス感染した経験談）。
しかし、画像のURLを確認すると、ファイルはきちんと存在しているのです。
設定をOFFに変更、画像はすぐに表示
設定をオフに変更
- 画像最適化
- 画像遅延読み込み
そこで、画像関連の2つの項目をOFF設定に変更しました。
設定変更後、トラブルはすぐに解消されました。
Webサイト高速表示やキャッシュ系の機能は要注意！
とにかく、すぐに修復できてよかったです。
振り返ってみれば、去年2021年もエックスサーバーの「高速化mod_pagespeed設定」で画像が表示されなくなるトラブルを経験しているのですよね。
■関連リンク
サイトの画像が表示されない！ エックスサーバー、高速化mod_pagespeed設定が原因だった
これはエックスサーバーにだけ問題があるわけではなく、WordPressのテーマやプラグインとコンフリクト（干渉）を起こしている可能性もあります。
Webサイトの表示が速くなるといったキャッシュ系の機能やプラグインは、使用する際は要注意ですね。手軽に何でも導入するのではなく、設定後はサイトの表示確認を必ず行ってください。
【追記】リンクカードが表示されない、項目も全てOFFで解決
その後、スマートフォンでサイトを確認すると、記事内の画像のいくつかが表示されないトラブルが残っていました。
さらに、当該サイトはURLを挿入すれば自動的にリンクカードになる仕様なのですが、それがモバイルで表示されていないことに気づきました。パソコンでは問題問題なかったので見落としていました。
XPageSpeed設定の項目をすべてオフにすることで問題解決しました。
XPageSpeed設定、Google PageSpeed Insightsのスコアは変化なし
ちなみに、今回XPageSpeed設定を行なったWordPressサイト「パパやる」では、Google PageSpeed Insightsの恩恵は受けられませんでした。オンにする前と後でスコアを比較したのですが、誤差レベルで特に変化は無し。
残念。
また、本サイト「Swingin’ Thinkin’」は、「パパやる」と同じWordPressテーマを使ってサイト制作・運営を行なっています。ただし、前者はロリポップ！、後者はエックスサーバーです。
このサイトを比較した場合、ロリポップ！で運営している本サイトの方が、Google PageSpeed Insightsのスコアがかなり高いのです。気になる方は、レポート記事をご覧ください。
とはいえ、エックスサーバーは世間からの評判は良いですよね！ もうちょっと頑張って欲しいな……と、個人的には願っています（偉そうにすいません）。
