iframeタグ内にloading属性のlazyを指定して動画などの埋め込みも遅延読み込みする方法

iframeタグ内にloading属性のlazyを指定して動画などの埋め込みも遅延読み込みする方法
関連キーワード
デザイン

これまでimgタグでは対応していたloading属性を使った遅延読み込みですが、iframeでも対応したそうです。

遅延読み込みができるようになると、スクロールしないと見えない位置に埋め込んでいるiframeを、記事を開いた時には読み込まないようにできるため、ページを開くスピードをあげることができます。

ちょろっと書き足すだけで簡単に実装できますので、ぜひお試しください。

iframeの遅延読み込み

参考にしたのはこちらの記事です。

iframeで埋め込んだものを遅延読み込みさせるためには、iframeの中にloading="lazy"を追記するだけです。

<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/P74vP1EAV9g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

WordPressの場合はYouTubeのURLを貼り付けるだけで埋め込みにできてしまうため、loading="lazy"を追記するためだけにコードを書き直さないといけないかもしれません。

imgタグにloading属性を追記するには

imgタグにloading="lazy"を追記する方法について下記の記事で解説しています。

WordPressで全ての記事のimgタグにloading="lazy"を簡単に追記できる方法をご紹介してますので、詳しくはこちらをご覧ください。

WordPressの記事内のimgタグにloading="lazy"を追記して読み込みを高速化する方法
WordPressの記事内のimgタグにloading=”lazy”を追記して読み込みを高速化する方法
続きを読む

このコードを元に書き換えたらiframeにも対応できそうな気がしますので、また後日実際に試してみてうまくいったらコードを追記しますね。

loading属性のブラウザ対応状況

この記事執筆現在では、IEはもちろん対応してませんが、Safariが未対応なんですよね。

とはいえ、対応してなくてもコードを書いたことでマイナスになることはないので、Chrome・Firefox・Edgeなどのブラウザのために追記しておくと良いと思います。

最後に

YouTubeをブログに埋め込むことが増えてきてますので、なるべく遅延読み込みできるようにしておきたいですよね。

コード自体は簡単ですので、ぜひお試しください。

キーワード
デザイン