[レベル: 上級]
Chrome がネイティブ Lazy-load を適用する際のしきい値を Google は改良しました。
ネイティブ Lazy-load を適用する画像/iframe のビューポートからの距離を従来よりも短くしました。
つまり、ネイティブ Lazy-load がより適用されやすくなります。
3000px から 1250px へ短縮
これまでは、ビューポート（スクリーンに見えている領域）から 3000px 以上離れている画像と iframe がネイティブ Lazy-load の機能により Chrome は遅延読み込みしました。
これからは 1250px になります。
少し乱暴な言い方をすると、以前は、たとえ見えていなくてもページのずっと下にないと画像は遅延読み込みされませんでした。
改良後は、そんなに下になくても遅延読み込みされます。
したがって、より多くの画像（と iframe）が遅延読み込みの対象になるので、ページの読み込み速度が改善される機会が増えます。
一般的に利用されている Lazy-load 用の JavaScript ライブラリ、たとえば LazySizes とほぼ同等の動作をするようになったということです。
最新版の Chrome 85 から旧バージョンの 79 までさかのぼって、この変更が適用されます。
なお 3000px ⇒ 1250px は 4G のような高速回線の場合です。
3G のような低速回線では 4000px ⇒ 2500 px になります。
ビューポートしきい値の変更は今のところ Chrome だけに限られます。
しかし、ネイティブ Lazy-load は画像、iframe ともにウェブ標準になっており、Chrome 以外のブラウザにも実装されています。
ほかのブラウザでもしきい値を変更するように Google は呼びかけています。
画像のサイズを指定する
しきい値の改良をアナウンスすると同時に、ネイティブ Lazy-load の利用に関して Google はいくつか追加情報を提供しています。
まず、<img> タグの画像には必ず width 属性と height 属性を付けます。
理由は CLS を防ぐためです。
width と height がなくても、ネイティブ Lazy-load は機能しますが、レイアウトのズレを防止するためにも付けることが推奨されます。
width/height が CSL 防止に役立つ理由は Web担当者Forum の連載コラムで解説しました。
ビューポート内の画像にはネイティブ Lazy-load しない
初めからビューポートに表示される画像と iframe にはネイティブ Lazy-load を使わないのが理想です。
最初から表示すべきなのに遅延読み込みが指定されていると、ブラウザに余分な処理が必要になります（具体的には IntersectionObserver の介入）。
「表示を待てと命令されたけど、すぐに表示していいんじゃん！」というようなイメージですかね。
実質的には、Chrome では問題になるような不都合は発生しないものの、可能であれば、最初からビューポートに表示する要素には loading=lazy を追加しないのが推奨です。
JS の Lazy-load と併用
ネイティブ Lazy-load をサポートしないブラウザは、loading=lazy を無視します。
遅延読み込みは起こらず、通常どおりに画像や iframe を読み込みます。
すべてのブラウザで Lazy-load したい場合は、フォールバックとして、Lazy-load 用の サードパーティ製 JavaScript ライブラリを利用する必要があります。
その JavaScript が設定するしきい値が ネイティブ Lazy-load よりも大きければ、ネイティブ Lazy-load 側のしきい値に Chrome は従います。
JavaScript のしきい値のほうが小さければ、JavaScript 側のしきい値に Chrome は従います（しきい値に従うだけであって、実際の画像がどのタイミングで表示されるかは設定にもよる）。
そのほかにも、多くの FAQ を掲載しています。
特に開発系の方は読んでおくといいでしょう。
ネイティブ Lazy-load がどんどん使いやすくなっています。
あなたはもう実装していますか？