現役エンジニア (メーカー勤務10年 → 某大手電機会社 勤務)
子供の頃RPGツクールに触れて独学でプログラミングを習得
AI研究、ゲーム、キャンプが生きがい
こんにちは、ちょらすかです。
WordPressの設定をいじっていたところ、ブログを開いても画像が読み込まれなくなる現象が
発生してしまいました。
その後一応設定を戻して画像が表示されるようにはなったのですが、釈然としなかったため
調査した発生原因とちょっとした検証の結果をまとめ記事にしてみました。
同じ現象が発生して困っている方の助けになれば幸いです。
Cocoon環境でEWWW Image Optimizerの遅延読み込みをONすると画像が表示が消えた
こちらがCocoon環境下でEWWW Image Optimizerの遅延読み込み機能をONしたときの
ブログの様子です。
ご覧のように記事のアイキャッチやアイコンが表示されていません。(赤枠の場所)
実はこのときCocoonの遅延読み込み機能とEWWW Image Optimizerの遅延読み込み機能の
両方がON状態となっていたのです。
ちなみにEWWW Image Optimizerの遅延読み込みは以下の場所で設定できます。
Cocoon 2.2.3 から遅延読み込み機能を搭載している
Cocoonユーザー方ならご存知かもしれませんが、Cocoon 2.2.3 から遅延読み込みに対応しています。
だからSEO対策で遅延読み込みを導入したい場合はCocoon単体で対応可能なんですね。
詳細はCocoonの公式ページからご確認ください。
>> Cocoon 2.2.3公開。WordPress5.5デフォルトのLazy Loadが優先されるように調整。
Cocoonの遅延読み込みをOFFしても結局ダメ
ではCocoonの遅延読み込みをOFFしてEWWW Image Optimizerの遅延読み込みをONすれば画像は表示されるのでしょうか?
という訳でチェックを外してCocoonの遅延読み込みをOFFします。
結果として、変わらず画像は表示されませんでした。
画像が表示されなくなる原因は?
画像が表示されなくなる原因は分かりませんでした。
ただ調査の結果、どうも遅延読み込みとWebPの相性が悪そうだということが分かりました。
Webp(ウェッピー)とはGoogleが開発した高圧縮率の次世代の静止画フォーマットです。
出典:株式会社内藤一水社
EWWW Image OptimizerはWebPへの変換機能を搭載しており、この機能をONした場合WebP対応ブラウザで画像をWebPに変換するようです。
他ブログでも「遅延読み込み」と「WebP」に関連したプラグイン導入や設定変更をしたときに当ブログと同じように画像が表示されなくなった現象が発生していたようでした。
まとめ CocoonユーザーはCocoonの遅延読み込み機能を利用しよう
今回は遅延読み込み機能の競合によるトラブルについてまとめてみました。
WordPressを利用しているとついつい便利なプラグインを見つけてダウンロードしてしまいますが
こういうトラブルにつながることもありますし、今後導入するプラグインは厳選していこうと思いました。
SEO対策しようとしたのに、むしろマイナス評価になるところでした・・・
コメント