妃魔人からひと言Ⅱ遅延読み込みを
検証したよ遅いことがいいことも パート2です。

画像遅延読み込み方法を比較してみました。

画像遅延読み込みの一回目では、ベストプラクティスと思われるloading属性を使用する方法の紹介と、
その方法がブラウザによっては対応していなかったり、実装するのにコードを追加する手間がかかること、また読み込むタイミングによってはCLS値が高くなるのではという懸念があるということ。
そのためオリジナルの遅延読み込みシステムをJSで開発したと記述しました。
オリジナル開発のシステムでは問題なくGoogle PageInsightsで90点以上でてるのと実際に遅延読み込みが機能しているので、当サイトではベストプラクティスとしていました。
ただ、loading属性の実際の読み込み時間、スクロールされて読み込まれるタイミングなど、スマホでの対応が気になったのでそれらを比較テストしてみることにしました。
テスト用のファイルには、
・ドキュメントを読み込み、その時間を計測するJSを設置。
　内容はJSで読み込み開始からreadyStateプロパティの「complete」イベントが発生するまでの時間を計測。
・画像は前回使用した横8,000px、縦10,000pxに画像を使用

上記ファイルにそれぞれ2種類の画像遅延シルテムを設置しそれぞれの
1.ドキュメントが読み込み完了するまでの時間比較。
2.遅延されている画像がスクロールされて表示される状況になった時の読み込みタイミングの比較。CLS値が高くないかなどの比較。
を検証します。
また、検証するデバイスはPCではなくスマホで検証します。
キャッシュも毎回クリアして計測。

対策なし：https://labo.studio-happyvalley.com/readyState/mobile/
Loading=lazy 対策あり：https://labo.studio-happyvalley.com/readyState/loadingAtt/
SHV仕様JS｜NET：https://labo.studio-happyvalley.com/readyState/php/

検証結果

◎対策なし
・読み込み時間： 約5秒前後
・スクロール時の画像表示タイムラグ： 無し

◎Loading=lazy
・読み込み時間： 10~60 millisecond
・スクロール時の画像表示タイムラグ： 無し

◎SHVオリジナル画像遅延システム
・スクロール時の画像表示タイムラグ： 無し
・読み込み時間： 700~800 millisecond

結果を見ると、Loading属性= lazyの圧勝でした。読み込み時間は10ミリ秒前後、たまに60ミリ秒。
スクロール時もタイムラグなく画像が表示されます。
当サイトオリジナルの画像遅延システムは読み込み完了に約750ミリ秒、と約10倍かかっています。
まあ、これはCLS値を高くしないために本画像をサムネイル画像と差し替えたりしているので仕方がない面もあります。

そこでCLSの面で気になるのは11ブロックあったテキストパートをもっと短くした場合どうなるか？
テキストブロックを2ブロックまで少なくしてもスケロール時に遅延なく読み込むか検証してみました。
が、残念なことに 、その結果もほぼ同様でした。

結論

つまり、スマホのiOS15.4未満を無視してもいいならloading属性でOK。
古いバージョンも対応せざるを得ない場合は、JSなどで遅延読み込み。
がベストプラクティスなようです。
そもそもLoading属性= lazyを使用しても、iOS15.4未満では画像を読み込まないわけでは無く時間がかかるというだけなので問題ないかと思われます。