[レベル: 上級]
Google Chrome 76 がネイティブ lazy-load をサポートするようになりました。
JavaScript のライブラリを利用することなく、ブラウザの標準機能として画像の遅延読み込みが可能になります。
ネイティブ lazy-load は開発版 Chrome (Canary) で試験運用されていました。
自動で遅延読み込み
次の動画は子猫の画像だけを掲載したデモ用ページをスクロールした様子です。
デベロッパーツールの Network パネルで見ると、スクロールに応じて画像が順に読み込まれているのがわかります。
この遅延読み込みは JavaScript で実装しているわけではなく、Chrome の標準機能として実装された lazy-load の機能で実現しています。
loading 属性でネイティブ lazy-load
ネイティブ lazy-load を利用するには、 <img> タグに loading 属性を追加します。<iframe> タグでも loading 属性は機能します。
3種類の値を loading 属性に設定できます。
loading="lazy":lazyは lazy-load を必ず適用させます。Viewport（スクリーンに見えるエリア）に画像が近づくと画像を読み込みますloading="eager":eagerは lazy-load を適用せずに、ページのロードと同時にコンテンツを読み込みますloading="auto":autoは lazy-load するかどうかの判断をブラウザに任せます。
loading 属性の値が設定されていないとき (loading 属性だけのとき) は、loading="auto" が適用されます。
全体のコード例です。
<img src="lazy-cat.png" loading="lazy" alt="かわいいネコ" height="700" width="1200" />SEO に与える影響は？
SEO に与える影響を気にかける人がいるかもしれません。
影響はありません。
loading 属性をサポートしないブラウザ（Chrome 以外や Chrome 75 以下）は、loading 属性を無視し、単なる img タグとして扱います。
画像の表示に悪影響を与えることはありません。
Googlebot がサポートするかどうかも関係ありません。IntersectionObserver を実装して lazy-load を構成してる場合と同様に、（非常に高い）Viewport に収まる画像を Googlebot は一度に取得します。
Googlebot にはスクロールという概念がないので、lazy-load という動きがそもそも存在しません。
通常の画像としてクロール・インデックスします。
ネイティブ lazy-load が SEO に影響を与えるとしたら、Chrome ユーザーの実際のパフォーマンスデータを用いる CrUX のレポートデータが改善する可能性があることでしょうか（改善したとしたら良い影響ですね）。
Chrome 以外のブラウザが loading 属性をサポートするようになったら、JavaScript での実装が不要になります。
Google 以外のブラウザベンダーがサポートすることを期待し、Chrome でのネイティブ lazy-load を当面は活用しましょう。