サイトアイコン moimoi days

なぜかSafariでだけWordPressの画像が表示されない時の対処法(Lazy Load)

wordpress-safari-picture

Safariで当ブログを開いた時、画像が全く表示されていないという現象を確認しました。

こんな感じで、本来画像が出ているところが真っ白になってしまっていました。

ChromeやFirefoxなど、別ブラウザだと全く問題ない状態…。
前見たときは特別問題なかったはずなのですが…。

ということで、結論から言うと私の場合はLazy Loadのプラグインが原因で、無効化したら治りました。

Lazy Loadって何?

わざわざプラグイン入れている方であれば釈迦に説法でしょうが、いつの間にかインストールしていた場合もあるかもしれないので一応説明です。

Lazy Loadとは、画面上に表示するまで読み込みを遅らせる処理のことです。日本語訳だと「遅延読み込み」なのでそのまんまですね。

ページの最後まで一気に画像を読み込むと、最後まで読まない場合は余分に通信量を食ってしまいますし、ファイルサイズによっては動作がめちゃくちゃ重くなってしまうのでそれを防止するための仕組みです。考えた人えらい!良心的!

WordPressにもLazy Loadしてくれるプラグインが存在するので、これを導入していたのが原因だったようです。画像関連のプラグインを片っ端から無効化して確認していたところ、Lazy Loadのプラグインを無効化した瞬間に解消したので「あっ…」ってなりました。

Lazy load your images and iframes, replace Youtube videos by a preview thumbnail.
Lazy Load – WordPress.org 日本語

調べてみると、WordPress上でLazy Loadをネイティブ対応するみたいな記事もあったので、今後はプラグインも不要になりそうと判断し、思い切って削除しちゃいました。

ネイティブ Lazy-load を WordPress 5.5 が標準機能として搭載する。
WordPress 5.5がネイティブLazy-loadをサポート。画像にloading=”lazy”を自動追加… – 海外SEO情報ブログ

そうすると、Safariでも問題なく画像を読み込むようになりました!↓

まとめ:Lazy Load以外の可能性もあるぞ!

ということで、今回はLazy Loadのせいでした!
といっても具体的にどう影響を及ぼしていたかまでは調べきれませんでしたが、致命的な影響が出るような類のものではないので、今回はここまでで終了です。

他にも、画像ファイル名が日本語になっていると上手く読み込めない場合もあるそうです。いろんな現象があるものですね…。

自分が投稿したWordPressの記事をSafariから見たとき、アイキャッチ画像を設定したにも関わらずサムネイルが表示されていないことがある。SafariはMac・iPhoneユーザーにとって主要なブラウザであり、Safari…
「SafariだとWordPressのサムネイルが表示されない」問題を解決する – Qiita – Qiita

おそらくこれで大体の人が当ブログへ快適にアクセスできるはず!

同様の現象でお悩みの方へご参考になれば幸いです〜!それでは!

モバイルバージョンを終了