loading=”lazy”が使えるのはimgタグとiframeタグ、videoタグには使えない
“https://www.youtube.com/embed/16RxJwNwvfQ”
Youtubeの動画のURLをWordPressの投稿画面に貼り付けると下のような感じで自動的に動画の埋め込みに変換してくれる
iframeタグ
これは、URLをこんな感じのhtmlに自動的に変換してくれているから
<iframe loading=”lazy” class=”youtube-player” width=”1256″ height=”707″
src=”https://www.youtube.com/embed/16RxJwNwvfQ”></iframe>
lazyload
WordPressには標準機能でimgタグやiframeタグにloading=”lazy”を追加してくれるので、自分で書かなくてもOK
loazyloadというのは動画がページの表示範囲に入ってくるまでは動画を読み込みしないための設定
たとえば、1つの記事に100個のYoutube動画を貼り付けたとして、100個の動画を一斉に読み込むとページの表示速度がめちゃめちゃ遅くなる
最初は動画を読み込まないようにしておいて、ユーザーが動画の位置までページをスクロールしたときにようやく動画の読み込みを始める、それがlazyload
videoタグの場合
loading=”lazy”代わりにpreloadというのがある
preload=”none”を設定してやると動画を読み込まない
(ユーザーが再生ボタンを押したときに動画の読み込みを開始)
という設定になるので、lazyloadに近い働きをする
コメント