WordPressでプレビューだと問題ないのにログアウトして確認すると画像が表示されない時の対処法

WordPressでブログを作成している人は、ブログを公開する前に記事をチェックしますよね。

具体的にどのようにチェックしてるでしょうか？

私は、次のような方法で確認しています。

自分では、それなりにしっかり確認していると思っていました。

しかし、ある時、普段使わないPCから自分のサイトを確認してみたら、なんと画像が表示されていなかったのです。

「！！」

『おかしい、そんなはずはない！画像が表示されないなんて大きなレイアウトのミスは確認時にさすがに見逃すはずはない』

と思い、色々試行錯誤して何とか解決できました。

「Lazy Load」というプラグインがトラブルの原因でした。

そこで今回は、同じようなトラブルで困っている人のために、トラブルの詳細、対策方法について紹介します。

WordPressでプレビューだと問題ないのにログアウトして確認すると画像が表示されない現象

ブログの記事の中で画像の持つ意味合いは大きいです。

目を休めるための挿入として入れている場合はまだしも、手順の説明などに用いている場合は致命的です。

このブログも手順を画像で解説する記事も多く存在しますが、いつから表示されていなかったかもわからないので、それを考えるとがっくりきます。

折角訪問してくれた読者を逃してしまった可能性もあるのです。

私の場合、具体的には次のよう現象が起きていました。

なぜか、WordPressにログインしていない状態でPCで確認した時のみ画像が表示されないのです。

しかもややこしいことに、文章の冒頭のアイキャッチの画像は表示されるのに、本文中の画像のみ表示されないのです。

本来画像が表示される場所には、画像が壊れた際に表示されるアイコンなども表示されず、透明な四角形が表示されている状態です。

画像が表示されなかった時の対処法に関する記事を参考に、一つずつ確認してみましたが、どれも当てはまりませんでした。

bibabosi-rizumu.com

ここで、疑わしいのが何らかのプラグインです。

沢山のプラグインを入れていたので、チェックに時間がかかりましたが、「Lazy Load」というプラグインが原因であることが分かりました。

「Lazy Load」サイトの表示速度を向上させるために、画像の読み込みタイミングを調整したりできる便利なプラグインなので、利用している人も多いでしょう。

「Lazy Load」は容量の大きい画像を読み込む前に軽いダミーの白い画像を読み込んで表示しておき、その後に容量の大きい画像を読み込むというシステムのようですが、ダミーの画像しか読み込まれないことが原因のようです。

そのため、「Lazy Load」を停止するか削除すれば解決します。

テーマによっては、「Lazy Load」のプラグインと同等の機能がテーマ自体に含まれている場合もありますので確認してみてください。

私は「Simplicity」というテーマを使っていますが、Simplicityの場合はテーマに「Lazy Load」の機能が含まれていますので、、「外観」の中の「カスタマイズ」で、「画像」を項目を選択し「Lazy Load」の有効設定にチェックが入っていたら、外すようにしましょう。

Lazy Loadは容量の大きい画像ファイルの読み子みを遅らせることで、サイトの表示速度を速くする機能がありますが、私の場合は停止しても大きな影響はありませんでした。

「PageSpeed Insights」で確認しても、最適化の点数はほとんど変わりません。

こちらもCheck！

ブログなどのWebサイトの表示速度を測定する方法

最近では、通信回線自体の高速化が進んでいるので、そこまで重い画像を使っていなければほとんど影響はないと思います。

ただ、高画質の画像を大量に用いている場合などは、関係してくる可能性もありますので、画像の圧縮など別の対策を検討しましょう。

自分の記事を投稿する場合は、特定の条件下でのみ表示崩れが起きる可能性もあるので、念のために、WordPressからログアウトした状態でも確認してみましょう。

確認の手間は増えますが、画像が表示されないリスク、デメリットを考えたら、確認した方が確実です。

また、サイトによっては「Lazy Load」の機能は重宝するかもしれませんが、画像が表示されないほうがマイナスになります。

WordPressの表示速度はいろんな方法で改善できますので、別の方法を検討しましょう。