WebPをCocoonが読み込まない原因はLazy load機能をオンしてたからだった【WordPress】

Googleが開発した次世代の画像規格WebPを当ブログでも先日、導入しましたトラブルが起きたので記事として記録を書いておきます

導入後にちゃんとWebPが表示されているか、ChromeのDevツールやWebP Highlighterを使って確認するがWebPで表示される部分もあるが、なぜか主な画像は今まで通りのJPEGやPNGで表示されたままになっている

原因は調べたが結果から言うと、Cocoonの高速化設定にある「Lazy Loadを有効にする」をオンにしていたからだった


▲オフにするとWebPがちゃんと表示される

他にも遅延読み込み系でWebPが表示できないトラブルにあってる人がいた

最速で解決!EWWW Image OptimizerでWEBP(緑)にする方法

上のブログだと「a3 Lazy Load」というプラグインが原因になっていたらしい

解決方法としてEWWW Image Optimizerプラグインにも同様の機能があるのでそれをオンにしたら治ったとのこと

上のブログ記事を参考にして僕もCocoonのLazy Load機能を切って、EWWWプラグインの方をオンにしてみる


▲タブ名が変わっていて簡単モードの下に遅延読み込み設定があった

すると、今度は画像そのものがブログでまったく表示されなくなってしまった、また何か衝突してトラブルが起きてる

そちらを切って、Jetpackにも遅延読み込み機能があったなと思い出しそちらを試してみる

これはこれでオンにしても確認したらどうも遅延読み込み機能が機能してなく、またなにかでトラブルが起きてるっぽい(たぶんCDNもオンにしないと使えない)

結論としてCocoonのLazyLoadを今まで通りオンにして運用することにした

他の遅延読み込み系プラグインをなにか色々と試してみるのも考えたが面倒だったし、これでもWebPは一部表示してくれてるしね

PageSpeed Insights等で一応、スコアを確認したが遅延読み込みをオフにしてWebPで全ての画像で表示したときと、オンにして従来通りの画像を遅延表示させたときとでスコアに違いはなかった

だからスコア的にはどっちでも良さそうだったのだけど、個人的好みとしてページを開いたとき、まだ見てない画像まで一気に読み込まれて通信帯域を使うページだといやだったでオフにしておいた

追記:2020/09/22

最新のWordPressではLazy Load機能が標準搭載される仕様になったようです

それにより9月初めのCocoonアップデートよりLazy Load機能も変更され、そのWordPressの方をデフォルトで使うようになってるとのことです

設定項目にLazy Load機能のオンオフは残ったままにはるそうですが、標準Lazy Loadが機能しない部分をカバーする補助的なものになるそうで、今後の動向次第では廃止するとか

つまり、わざわざ画像読み込み遅延系プラグインをインストールする必要も難しいことを考える必要はなく勝手にやってくれるようになったんですね

Cocoon 2.2.3公開。WordPress5.5デフォルトのLazy Loadが優先されるように調整。 | Cocoon

WordPress 5.4のままだったので早速5.5にアップデートして試してみたが普通にWebPで読み込んでくれてます

ただ5.4以前のLazy Load(Cocoon搭載)とは読み込みタイミングが違うように感じられますね

けどPageSpeedでスコアチェックしたら同じか、やや良くなってるかも?

コメント

タイトルとURLをコピーしました