ここ最近、サーバーの負荷軽減などのためにサイトを大改造していましたが、それからしばらくして、スマホでブログを確認していると、一部の画像が表示されないことがあるのに気づきました。
最初は一部のページで、ヘッダー画像やサイドバーの画像がいくつか消えていて、再読込したり、時間を置いて見てみたり、別のブラウザで見たりすればもとに戻るので、何か読み込みに失敗しただけかと思っていたのですが…。
原因はJetpackのPhoton?
思い当たったのは、サイト改造のときに、サーバーの負荷軽減のために有効化したJetpackのPhoton。
画像表示を高速化する機能ということで、何かしらうちのブログでは不具合が出たのかと思って、一度切ってみることにしました。
そうすると、サーバー負荷がまた180%あたりまで上がって困ったことになったのですが、それどころではない大惨事に。
なんと日に日に表示されない画像が増えていき、ついにはプロフィール画像やアイキャッチのサムネイル画像を含め、外から引っ張ってきているAmazonなどの画像以外はほぼまっ白という異常事態になりました。
?
つまり、Photonは問題の原因ではなくて、その逆に問題を食い止めてくれていた防波堤だったようです。つい考えなしに疑ってしまって悪かった(笑)
とはいえ、Photonが原因であるケースもままあるようなので、いったんは疑ってみるべきかと思います。
WordPressのPhotonが酷すぎる件。画像が表示されなくなる問題あすたまいず | あすたまいず
WordPressでPhotonを有効化したら画像が表示されない・・・を解消しました | The indescribable moments
画像の日本語URLが原因?
しっかり調べてみると、スマホのブラウザで画像が表示されなくなってしまう原因はいろいろありました。
たとえば数年前からの情報によると、画像名が日本語でアップロードしたせいで、日本語URLになっていていると、Safariなどで読み込めないとのこと。
PCは表示されるがスマホでは画像が表示されない – Webデザイン・CSS | 【OKWAVE】
【ワードプレスお悩み解決】スマホで見た時になぜか画像が表示されない時の原因３つ | WEBマーケッター山田祐輔
そういえば、うちのブログも日本語名でアップロードしていた画像が多いので、これだ!と思って、さっそくURLの修正をしようかと思ったところで、いや待てよと。
このブログのヘッダー画像などは日本語タイトルによるURLでしたが、今までは問題なく表示されていました。そしてサイドバーのアイキャッチ画像などは、明らかに日本語タイトルでないものまで軒並み消えています。
さらに調べてみると、定番プラグインのWP Multibyte Patchを入れていれば大丈夫とのこと。
日本語版では必ず有効化しておくべきプラグインで、うちのブログでも当然使用しているので、画像タイトルが日本語URLでも問題なかったはずです。
現にこれまで数年間支障が出ていなかったわけなので、これは原因ではないと判断。画像のURLをひとつずつ書き換えるとかいう不毛な作業をせずにすみました。
画像のサイズが原因?
そのほかの原因を探ってみると、中には画像の大きさが原因であった方もいました。
WordPressの画像がスマホだと表示されなくなったのを解消しました | The indescribable moments
しかしうちのブログでは、大きな画像は使っていませんし、写真なども必ず縮小してからアップロードしています。
そもそも消えている画像の中には、サイズが小さいアイキャッチ画像も大量に含まれているので、これではないらしい。
高速化プラグインが原因?
さらに調べてみると、画像やCSS、HTMLの読み込みを最適化・高速化する一部のプラグインが原因のことがあるという情報が。
例として出てきたのは、
■EWWW Image Optimizer
アップロードした画像を自動で圧縮してくれる (アップデートで修正された一時的不具合とも)
■Autoptimize
HTML、CSS、
■BJ Lazy Load
見える部分以外の画像読み込みを遅らせることで読み込みを高速化
などなど。
以下のサイトはじめ、上で紹介したいくつかのリンク先でも言及されています。
【WordPress】画像が表示されない時に確認することの１つ | シャッフルブログ
【WordPress】画像が消えていく怪現象が起こったらこのプラグインを切ってみて | 月と東京タワー
うちのブログはこれらのプラグインは入れていません。
しかし、思い当たったものが一つ。
Googleのmod_pagespeedが原因だった
うちのブログでは、最適化プラグインは使っていなかったものの、それらと同様のCSS・HTMLなどの圧縮・高速読み込みを行う、Googleのツールmod_pagespeedを有効化していました。
mod_pagespeedは使っているサーバーで簡単に設定できて、しかも使い始めたころは表示の崩れなどもまったくなかったので、昨年末あたりから安心して活用していたところでした。
エックスサーバーのmod_pagespeedはモバイル閲覧時の高速化に特に効果有り
サーバーの負荷が少し増加するかもしれないとのことで、サーバー負荷軽減の取り組みのときに外そうかとも思ったのですが、それほど大きな問題ではない様子だったので、とりあえずそのままにしていました。
しかし、mod_pagespeedは前述の最適化プラグインたちとやっていることが似ていて、しかも、画像が徐々に消えていくという謎現象の経過が似ていたので、これだと確信。
サーバー設定でオフにしてみると、キャッシュがまだ残っているページ以外は、すぐに画像の表示が復活しました。おいおい全てのページで復活してくるかと思います。
よくあるプラグインやテーマ改造などの不具合と違って、すぐには悪影響が出ず、徐々に問題が広がっていくというケースもあることを知って、勉強になりました。
サーバー負荷軽減に重宝している頼れるPhoton先生(用心棒的な(笑)ではなく、どちらかというとなくてもいいと思いながら適当に使っていただけのmod_pagespeedが原因であったことは不幸中の幸いだったかなと思います。
