YouTubeやFacebookに『loading=”lazy”』を追加するだけで「遅延読み込み（ネイティブlazy-load（レイジー・ロード））」できる！
iframeもYouTube埋め込みもFacebookボタンも簡単に遅延読み込み。HTMLに14文字追加するだけ
ネイティブlazy-load（レイジー・ロード）は、JavaScriptのライブラリなしで遅延読み込みを実現できる仕組みだ。画像（imgタグ）またはiframe（iframeタグ）にloading=”lazy”属性を追加するだけで実装できる。
「遅延読み込み」とは、ページ表示を高速化しUXを改善するための挙動。ページの初期表示では画像やiframeを読み込まず、近くまでスクロールした時点で読み込むようにする。
グーグルによれば、iframeを遅延読み込みさせることで次のような効果が出たそうだ（数値はすべて中央値）：
●データ量を2%～3%削減
●First Contentful Paint (FCP) の時間を1%～2%短縮
●First Input Delay (FID) を95パーセンタイルで2%改善
iframeのネイティブLazy-loadのコードを確認しておこう。
<iframe src=”https://example.com”
loading=”lazy”
width=”600″
height=”400″></iframe>
iframeタグの中にloading=”lazy”を追加するだけだ。
YouTube動画の場合
<iframe loading=”lazy” width=”560″ height=”315″ src=”
” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
▼実際に自分のYouTube動画を埋め込んでみました。
↓
▼これが『loading=”lazy”』を追加したものです。
Facebookの場合
こちらは、loading=”lazy”を追加するのではなくコードをカスタマイズする。data-lazyを追加する。
<div class=”fb-like”
data-href=”https://example.com/your-page.html”
data-width=””
data-layout=”standard”
data-action=”like”
data-size=”small”
data-share=”true”
data-lazy=”true”>
</div>
※値にはtrueを指定する
SEOコンサルタントのまとめ
「遅延読み込み（ネイティブlazy-load（レイジー・ロード））」は今後重要というか、当たり前になってきますね。