下記はLazy loader(js)を入れたページです。
https://moyamoya-design.com/img-speed-test/lazy-loader/
スクロールすると最初はぼやけた感じで出ていた画像が徐々に表示されているのが分かると思います。さらにデベロッパーツールのNetworkで見ると、画像がスクロールされると読み込まれInitiatorを見てもきちんとLazy loaderのjsから呼び出されています。
続いて、下記はLazy loader(js) + srcsetの組み合わせです。
https://moyamoya-design.com/img-speed-test/lazy-loader-imgset/
こちらもスクロールすると最初はぼやけた感じで出ていた画像が徐々に表示されているのが分かると思います。
しかし、じつはこれはLazy loaderが効いているように見えて効いていません。
デベロッパーツールのNetworkを見ると効いていないことが分かります。原因は、ここで使用しているLazy loaderのjsには「srcsetに対応する記述がない」ことです。srcset用の記述もする必要があります。
世の中にあるLazy loaderのWPプラグインや、ネット上に公開されているJSはsrcsetに対応・非対応が混在しているため(自分が主観的に感じただけですが)、効いているように見えるだけ、ということに気づかない可能性があるかもしれません・・。
「入れたつもりが効いていなかった」とならないようにデベロッパーツール等で確認が必須だと感じました。
JSあるあるですが、1から自分で作っていないものを中身を知らずに使うのは危険ですね。。
