当ブログにて、ちょっと困った事象に遭遇しました。
タイトルに書いている通り、画像が表示されなくなったのです。
そこで、事象の切り分けや、どうやったら再度表示されるようになるのかなどを調べました。
それを備忘録としてまとめていきます。
もし同じ事象で悩んでいるなら、同じ対応で解決するかもしれません。
参考にしてもらえれば幸いです。
あるプラグインが悪さしてたみたい…
発生した事象と調査内容
まず、発生した事象と、何を調査したかを細かく書いていきます。
発生した事象
最初、この事象に気づいたのは、記事を投稿した時でした。
無論プレビューでページがどう見えるか確認しながら進めていましたが、その時は問題なし。
ところが、いざ投稿した後のページを見ると、画像のキャプションはあるものの画像自体が表示されない。
そして、よく見るとアイキャッチや、サイドバーにあるはずのアイコンも消えていました。
ただ、広告は表示されていたため、当ブログで何か問題が発生していると判断し、調査開始です。
何か設定をしたか思い出してみる
このブログはまだ開いてから2週間も経過しておらず、色々と設定を微調整している段階でした。
そこで、何か設定を変えたか思い返してみると、以下2つが思い当たりました。
1つ目、テーマ「Cocoon」の設定項目「高速化」の中にある「遅延読み込み」をONに。
2つ目、プラグイン「EWWW Image Optimizer」の設定項目の中にある「遅延読み込み」をONに。
これらは、ページの高速化を目的にしています。
両方とも「Lazy-load」という仕組みに関する設定で、詳しくは後で解説します。
今は、簡単に画像読み込みのタイミングを変えるものだと思ってください。
ちょうど、今回の問題である画像に関する設定なので、ここら辺が怪しいと思い色々試してみました。
試したこと
シンプルに、この2つの設定のON/OFFの組み合わせ4パターンを試し、画像が表示される/されないの違いを調べました。
その結果、プラグイン「EWWW Image Optimizer」側の設定がONだと画像が表示されないことに気づきました。
なお、テーマ「Cocoon」側の設定は影響がありませんでした。
また、元のブログ側でも試してみましたが、この設定をONにすると画像が表示されなくなり、OFFにすると表示されたので、ほぼ間違いないかと思います。
と、いうわけで…
対応策
対応策は、もうお分かりかと思います。
プラグイン「EWWW Image Optimizer」の設定内、「遅延読み込み」を無効にして保存します。
このブログと同じ原因の場合、これで画像が再度表示されます。
実際に表示して確認してみましょう。
ただし、この対応策はあくまで当シノベースにおける解決策です。
必ずしも全ての画像が表示されない問題を解決するものではないこと、ご了承お願いします。
また、設定を変える場合は、それによる影響をしっかり把握した上で行い、事前にバックアップなど取ることをお勧めします。
もしこの通りに設定を変え、何か致命的な不具合等発生しても、私は責任を取れません。
やるのであれば、自己責任で行ってください。
原因はなんだったのか？
ここからは補足知識と推測です。
原因を考察する前に、「Lazy-load」について詳しく見ておく必要があります。
「Lazy-load」、「遅延読み込み」とは？
この「Lazy-load」、あるいは「遅延読み込み」とは、先ほども少し書いた通り、画像の読み込みに関する設定です。
まず、通常の状態だと、あるページを開いた時、そこにある画像を全て読み込みます。
しかし、これだとページが表示され切るまでに時間がかかってしまいます。
また、ネットワークやサーバーにも一度に負荷がかかります。
そこで、スクロールして初めて表示される画像は、あえて最初は読み込むのをやめてみましょう。
そこにスクロールされて初めて読み込むようにすれば、最初ページが表示されるまでの時間は短縮されます。
これを実現するのが、「Lazy-load」、もしくは「遅延読み込み」です。
ページの読み込み速度はSEOにも絡む話なので、ブログをやっているなら知っておいて損はないでしょう。
なお、昔はJavaScriptでゴリゴリ書く必要があったようですが、今ではimgタグにloading=”lazy”と記述するだけで実現できちゃいます。
実は、WordPress5.5以降デフォルトで対応していた！
このLazy-load機能ですが、なんとWordPress5.5以降はデフォルトで対応しているようです。
参考にしたサイトは以下です。
つまり、手動でこの機能を実装したり、プラグインで対応したりする必要はありませんでした。
…のはずなんですが、当ブログ、なぜか自動でLazy-loadが入ってくれません。
ここについては現在調査中で、また何か分かれば別途記事にするつもりです。
一旦、二時間くらい格闘してみたけど無理だった…
(´・ω・｀)
結局、今回の原因は？
ここで、私が変更した2つの設定を見直してみましょう。
- テーマ「Cocoon」の「高速化」設定内、「遅延読み込み」をONに
- プラグイン「EWWW Image Optimizer」設定内、「遅延読み込み」をONに
このうち、前者は該当部分に説明が書かれていて、どうやらデフォルトでは対応していない部分の画像も同じくLazy-loadにしてくれる設定のようでした。
それに対し、後者はそもそもこのLazy-load機能を付与するもののように見えます。
すると、WordPressデフォルトのLazy-loadと、プラグインで付与したLazy-load、この2つがかかってしまうことになります。
これが原因で、画像が表示されなくなってしまったのではないでしょうか…
確実なことは言えませんが、私が推測した原因はこんな感じです。
まとめ
今回は、実際に遭遇した問題への対応を、備忘録としてまとめてきました。
結論として、今回の原因はプラグイン「EWWW Image Optimizer」の設定でした。
たまたますぐ気づけたからよかったものの、画像が表示されないのはかなり致命的な問題です。
こういった部分の設定は、もう少し慎重に行うべきだと反省しました…
是非、設定を変える時は事前に影響を確認したり、何かあればすぐ戻せるよう準備をしたりしておきましょう。
コメント