サイトの画像が表示されない! エックスサーバー、高速化mod_pagespeed設定が原因だった

僕が運営している子育てサイト「パパやる」で、ここ最近トラブルが発生していました。

記事内の画像が表示されないことがある、という問題です。

結論から言うと、エックスサーバーの高速化(キャッシュ系)の設定が原因でした。これをオフにするだけで問題解決したので、その手順を解説します。

サイトの画像が表示されず、空白やリンク切れになってしまう

ウェブサイトの画像が非表示(空白)に
画像が非表示(空白)に

ここがおかしい!

  • あるはずの画像が表示されない。
  • リロード(再読み込み)をすると、表示されたり、されなかったりする。

 

ウェブサイトの画像がリンク切れに
画像がリンク切れに

ここがおかしい!

  • あるはず画像が、リンク切れになっている。
  • 画像の上で右クリックし「新規タブで開く」を選択すると、Not Found。
  • 上記ページを何度リロードしても画像は表示されない。

画像のリンク先URLに「pagespeed」が勝手についている

画像のURLを確認すると、このように書き換えられていました。

一例ですが、画像のURLは本来以下のようになっています。

https://papayaru.com/wp-content/uploads/2016/01/160128_sotsunyu_dannyu_nekashitsuke_1.jpg

しかし、画像のURLがこうなっていたのです。

https://papayaru.com/wp-content/uploads/2016/01/160128_sotsunyu_dannyu_nekashitsuke_1.jpg.pagespeed.ce.W4tnIz26e9.jpg

 

北野啓太郎アイコン
.jpgの後に、pagespeed.ce……って勝手に付いてる!

ここがおかしい!

  • 画像のURL(ファイル名)が変わっていた

エックスサーバー、高速化「mod_pagespeed設定」をオフで直った

エックスサーバー mod_pagespeed設定

原因は、サーバーの設定にありました。

当該サイトはエックスサーバーで運営しているのですが、そこにある設定をオフにすることで画像トラブルが収まったのです。

解決手順

  1. XSever サーバーパネルにログイン。
  2. 高速化内「mod_pagespeed設定」をクリック。
  3. オンをオフに変更し、設定を保存します。

mod_pageseed設定は、オフにするともう使えない

エックスサーバー mod_pagespeed設定 オン・オフ

mod_pagespeedとは拡張モジュール「mod_pagespeed」を使用することによりWebサイトのコンテンツを最適化し、表示速度の向上および転送量の軽減を図ります。

ここでmod_pagespeed設定をオフにするだけで、すぐに画像が表示されない問題が解決しました。

ちなみに、この「mod_pagespeed設定」機能は、2019年3月28日で新規受付を終了していました。現状利用しているユーザーは引き続き使えるのですが、一旦オフにすると、もう使えなくなります。サーバーパネルから、「mod_pagespeed設定」の項目も消えました。

北野啓太郎アイコン
あっさり解決! よかった

キャッシュ系の機能・プラグインは要注意!

「サイトにはアクセスできるけど、表示がおかしい」

そんなとき、サーバーのキャッシュ系の機能や、WordPressのキャッシュ系プラグインが悪さをしている場合があります。つまり、画像ファイルやCSSファイルがうまく読み込めていないのです。

こうした機能を使う場合、注意が必要です。

利用当初は良くても、他のプラグインや機能とコンフリクト(衝突)を起こしてトラブルを引き起こす可能性があるからです。

今回はエックスサーバーの設定がトラブルの原因でしたが、もし今後、同様のトラブルが起きた際はキャッシュ系を疑ってみてください。

北野啓太郎アイコン
複数を混ぜて使う場合は、より要注意!

Google PageSpeed Insights スコアの変化

キャッシュ系の機能・プラグインをオフにする際、Google PageSpeed Insights スコアが下がるのを懸念する方も多いでしょう。

ちなみに今回オフにしたことで、このように変化しました。それぞれ2回測定し、その平均値です。

mod_pagespeed設定 オン

  • パソコン トップページ 79
  • パソコン 記事ページ 54
  • モバイル トップページ 27
  • モバイル 記事ページ 20.5

mod_pagespeed設定 オフ

  • パソコン トップページ 75
  • パソコン 記事ページ 44.5
  • モバイル トップページ 23.5
  • モバイル 記事ページ 21.5
北野啓太郎アイコン
うーん、少し下がってしまいましたね

ページ表示速度は大切ですが、画像が表示されなかったり、レイアウトが崩れるほうがユーザーには不親切です。

うん、これは仕方がない!

今回は以上です。
同様のトラブルで困っている方の問題解決になれば幸いです。