画像を遅延表示させる方法として、jQuery プラグイン Lazy Loadは有名ですが、
なんと、HTMLの最新仕様で同じギミックが実装できる「loading属性」というのがあるそうです！
驚きました！

Lazy loadingを可能にするloading属性

画像がビューポート外にある時は読み込みを実行せず、ビューポートに近づいた時に画像の読み込みを開始する、ページの表示速度を評価するクロール対策として最適化するとのことです。

概要

実装方法

これまではJavaScriptが必要でしたが、ついにimgやiframe要素であればloading=”lazy”を付与するだけで実装できるそうです！便利！

<!-- 画像に適用する場合 -->
<img src="pic.png" alt="イメージサマリー" loading="lazy">

<!-- iframeに適用する場合 -->
<iframe src="demo.html" loading="lazy"></iframe>

画面外では読み込みが発生せず、画面内に要素が入りそうになった時に読み込みが発生するのでパフォーマンスが向上します。

対応ブラウザ

残念ながら、一部のブラウザは非対応です。
今後のアップデートに期待ですね！

※対応ブラウザの表はIEはバージョン11で、その他は最新バージョンの対応状況です（2020年9月8日現在）