iframeのネイティブLazy-loadがウェブ標準に、<iframe>タグにloading=lazy属性を追加するだけで遅延読み込み可能に

[レベル: 上級]

<iframe> のネイティブ Lazy-load がウェブ標準になりました

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 をサポートしています。

Safari は、実験的な機能としてネイティブ Lazy-load サポートを有効にできます。
近いうちに標準機能になることが期待できます。

ネイティブ Lazy-load はブラウザがサポートしていなければ、遅延読み込みせずに通常どおりに読み込むだけです。
何らかの悪影響が発生することはありません。

Google 検索ではネイティブ Lazy-load が推奨の遅延読み込み方法の 1 つになっています。
ネイティブ Lazy-load は非常に簡単に実装できるページ読み込み高速化の手段です。
ウェブ標準になった今、画像にも iframe にも使わない手はありません。

B!

Ads

最近の投稿

  • カテゴリー