[レベル: 上級]
<iframe> のネイティブ Lazy-load がウェブ標準になりました。
Native lazy-loading for <iframe> was added to the HTML standard today: https://t.co/KgO8lIBdEK
Thanks @domfarolino for the heavy lifting with spec & tests 🎉 https://t.co/GLy6qHE7l5
— Simon Pieters (@zcorpan) July 8, 2020
YouTube 動画でネイティブ Lazy-load
ネイティブ Lazy-load は、loading=lazy 属性を追加するだけで遅延読み込みを可能にします。
専用の JavaScript は不要です。
ブラウザの標準機能として Lazy-load をサポートします。
もとともは Chrome の独自機能として Google が開発しました。
Chrome 76 で正式機能として実装されました。
その後、今年（2020年）2 月には Google 独自の機能からウェブ標準の機能へと発展しています。
しかしながら、ウェブ標準の対象になっていたのは <img> タグつまり画像での loading 属性でした。
ネイティブ Lazy-load は <iframe> タグでも機能するように最初から設計されています。
<img> タグに比べると、<iframe> タグでのネイティブ Lazy-load の利用率はずっと低いようです。
今はウェブ標準になったので、もっと積極的に利用して構いません。
iframe の使用頻度は画像よりもずっと低いと思われます。
でもたとえば、YouTube の動画をコンテンツとして掲載するときにはネイティブ Lazy-load を使うことができます。
YouTube 動画は iframe で埋め込むからです。
loading="lazy" をコードに追加するだけで、YouTube 動画を遅延読み込み対応にできます。
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/dAeRLFR3E1M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
ページの上の方に動画を設置したときは遅延読み込みしませんが、下の方に設置したときは遅延読み込みし、表示速度アップに役立つでしょう。
なお、メジャーなブラウザとしては次が、loading 属性によるネイティブ Lazy-load をサポートしています。
- Chrome (PC & Android)
- Firefox (PC)
- Edge
Safari は、実験的な機能としてネイティブ Lazy-load サポートを有効にできます。
近いうちに標準機能になることが期待できます。
ネイティブ Lazy-load はブラウザがサポートしていなければ、遅延読み込みせずに通常どおりに読み込むだけです。
何らかの悪影響が発生することはありません。
Google 検索ではネイティブ Lazy-load が推奨の遅延読み込み方法の 1 つになっています。
ネイティブ Lazy-load は非常に簡単に実装できるページ読み込み高速化の手段です。
ウェブ標準になった今、画像にも iframe にも使わない手はありません。