iframeのネイティブLazy-loadがメジャーなブラウザで標準の機能になりました。
2020年の2月にはすでにこの仕様になっていたようなのですが、最近知りました・・・。
主要ブラウザでは、画像表示部分のHTMLタグにloading=lazy属性を追加するだけで遅延読み込み可能になる、というものです。
専用の JavaScript は不要です。
ブラウザの標準機能として Lazy-load をサポートします。
もとともは Chrome の独自機能として Google が開発しました。
Chrome 76 で正式機能として実装されました。
その後、今年（2020年）2 月には Google 独自の機能からウェブ標準の機能へと発展しています。
専用の JavaScript は不要です。
ブラウザの標準機能として Lazy-load をサポートします。
なお、メジャーなブラウザとしては次が、loading 属性によるネイティブ Lazy-load をサポートしています。
Chrome (PC & Android)
Firefox (PC)
Edge
Safari は、実験的な機能としてネイティブ Lazy-load サポートを有効にできます。
近いうちに標準機能になることが期待できます。
ネイティブ Lazy-load はブラウザがサポートしていなければ、遅延読み込みせずに通常どおりに読み込むだけです。
何らかの悪影響が発生することはありません。
ウェブ標準の対象になっていたのは タグつまり画像での loading 属性でした。
しかし驚くべきは、ネイティブ Lazy-load が、iframeタグをサポートするというものです。
iframeタグの記述箇所に、以下のようにloading=”lazy”を追記するだけ！
<iframe loading="lazy" ・・・・>iframeタグは、cssで制御しづらかったりして、できればあまり使いたくないんですが、
たまーに使わざるをえないケースがいまだに発生するんですよね。。。YouTubeの埋め込みとか、Google Mapの埋め込みとか、あとはアフィリエイトの埋め込みとか、インスタウィジェットのAPIとかでも。。。
今回の進化で、こうしたケースで積極的に使用してみようと思います。
参考：https://www.suzukikenichi.com/blog/native-lazy-loading-for-iframe-added-to-the-web-standard/
