ブログ記事から画像が消える怪現象。再掲載してもまた消える。その対策

インターネットブラウザのGoogle Chromeで当ブログを見ていたら、画像が消えているページがいくつかあることに気がついたのは、2週間ほど前のことだ。たとえば7月に書いたこの記事。

0012

本文の写真が消えている。キャッシュをクリアしても、ブラウザを再起動しても表示されない。機能拡張をすべて外したプライベートモードにしても、やはり表示されない。どうしたんだろうか。

奇妙なのは、ブラウザのSafariやFireFoxなら表示されることだ。

こちらはSafariで表示した同じ記事。まったく問題なく写真が表示されている。

0011

画像が消えるのはごく一部のページで、99%の記事はちゃんと画像が表示される。

数日してから判明したのは「画像を差し替えたり、順番を入れ替えると、数十分後にそのページから画像が消える」ということ。いったいなぜそんなことが起きるのだろうか。

写真がないブログはさみしく見える

問題の記事をスクロールすると、写真のファイル名の「Lelo11」がパラパラと並ぶ、さみしいページになっていた。

0014

これじゃあ、せっかく来てくれた読者もすぐに帰ってしまうな。

この現象は、メインのノートパソコンMacBookPro Retinaだけでなく、サブで持ってるMacBook Airで見ても同じ状況だ。それからスマホのアンドロイドでもChromeも同じだった。

一度この「画像が消える」現象がおきたページは、こう展開していくことが分かった。

  1. どの端末でもChromeでは画像が表示されない
  2. どの端末でもSafariとFirefoxは画像が表示される
  3. 何時間か過ぎると画像が表示される
  4. しかしその画像はなぜか画質が荒い
  5. それから何時間かするとまた画像が消える

まったくわけが分からない。

画像のリンクが切れているのだろうか

画像が表示されないということは、リンクが切れているのだろうか。しかしChrome以外のブラウザでは画像が表示されるから、リンク切れではないようだ。ではChromeのバグだろうか。

ネットであちこち探したが同じ事例はみつからなかった。

謎を解明すべく、Chromeの検証機能(デベロッパーツール)で記事をチェックした。記事を開き、マウスを右クリックして「検証」を選ぶと通信状況の検証機能が使える。そしてConsole欄をみるとなんと!

0016

…….真っ赤じゃないか…。

Console欄をみると、ブラウザがサーバーに写真をリクエストすると404が返ってくることがわかった。404というのは指定した写真がそこにないということだ。

まったく奇妙なことだ。Chromeがリクエストしたら写真は存在しないとかえされるのに、Safariがリクエストすればちゃんと写真が表示されるのだ。いったいどうなってんの。

写真は存在するのか、しないのか

そもそも本当に写真がサーバーに存在するのか、写真のURLを確認した。

右クリックで「画像アドレスをコピー」を選べばURLがクリップボードにコピーできる。ブラウザに写真が表示されていなくても、写真があるべき位置で右クリックすればちゃんとコピペできた。それがこれ。

https://www.photo-yatra.tokyo/blog/wp-content/uploads/2017/10/lelo-01.jpg.pagespeed.ic.VPxRI_MBEn.webp

 画像のURLをChromeの窓にいれてリターンキーを押すとNot Foundとしか表示しない。やはり写真は存在しないのだろうか。

0031

Safariで取得したURLでは

つぎにSafariで同じことをして写真のURLを取得した。

https://www.photo-yatra.tokyo/blog/wp-content/uploads/2017/10/lelo-01.jpg

Safariで取得したURLをChromeの窓にいれてリターンキーを押すと、ちゃんと写真が表示されるではないか。ということはChromeの表示機能に問題はないということか。

0034

原因は Googleの高速化技術 Page Speedか

ChromeとSafariの、それぞれのブラウザで取得したURLを比べると、Chromeのほうは末尾に「pagespeed.ic.VPxRI_MBEn.webp」という文字が加わっている。

この文字列は何だろう? 
なぜChromeにだけついているのだろう?

前者はpagespeedの文字から推測することができた。PagespeedはGoogleが開発したWebサイトの表示速度をキャッシュを利用して高速化する技術のこと。そのモジュールとして開発したmod_pagespeedを当ブログのサーバーのエックスサーバー社が採用している。

mod_pagespeedはエックスサーバーのウリのひとつで、高性能の証でもある。設備投資のコストをかけられない他のレンタルサーバーとは一線を画している。

しかしもしかしたら、この高性能な機能が干渉して画像が表示されないのではないか。結果的に不具合になっているのではないか。そう見当をつけて、Xserverにログインしてmod_pagespeedをオフにした。

0061

そのとおり、すべての画像が表示された

すると、すべての画像が表示された。

150731378349

やはりmod_pagespeedが干渉していたのだった。

やれやれ、WordPressは管理に手間がかかるなあ。Chromeにのみ干渉してSafariに影響がないのはなぜか、ぼくにはわからない。もしかしたら、Apple Safariがもともと表示が高速なブラウザなのに対して、Google Chromeは表示が遅いブラウザだから、ということもあるかもしれない。

しかし、8月まではこんな現象はなかった。最近になって頻発するようになったのは、OSのアップデートによるのか、一体なんだろうなあ。

mod_pagespeedにはデメリットもある

その後調べたら、mod_pagespeedにはデメリットもあるということがわかった。

そのひとつが「ブラウザのキャッシュがリロードしても更新されない」ということ。確かにCSS(ブログのデザイン)を変えたとき、Safariは即反映されるのに、Chromeはしばらくしてからでないと反映されなかった。mod_pagespeedの効き方がブラウザによって異なるのだ。

それから表示高速化のために画像ファイルを圧縮して軽くすること。これで、画像が粗くなるのも合点がいった。

ごく一部の記事にだけ「画像が消える現象」が起きるのは、この記事には写真が20点も載っていて、写真データの軽量化が充分ではないことが原因かもしれないが、わからない。

今後の対策は

今のところ考えられるのは、

  1. 画像データをさらに軽量化する
  2. mod_pagespeedをオフにする

このくらいかなあ。
(1)に関しては、当ブログの画像はRetina対応しているから、表示の2倍(面積比4倍)のデータサイズがあって重いことも原因だと思う。しかしこのRetina対応をやめると、MacBookPro RetinaはもちろんiPhoneでも画像がぼやけてみえるから、やめることはできない。

どうしたらいいかな〜
もしご存知の方がいらしたら教えてください。
よろしくお願いいたします。

エックスサーバーさんに問い合わせたら、この件を認識していて、来週には対策が取られるとのこと。原因はサーバーにあったようだ。OSやWordPressではなかった。10月13日以降にmod_pagespeedをオンにすることにしよう。