justinribeiro/lite-youtubeでYouTube埋め込みのパフォーマンスを改善する
概要
最近よかった曲のまとめとしてYouTubeのiframe埋め込みを貼りまくったブログ1を書いているが、素直に埋め込みを入れるとページロード時に大量のリクエストが走るのでパフォーマンスがたいへん2悪化する。
Googleからもいろいろと対応策が紹介されていて、その中にある @justinribeiro/lite-youtube というパッケージを使うとパフォーマンスを100点近くまで改善できる。
やりかた
@justinribeiro/lite-youtube を入れて <lite-youtube> カスタム要素 (custom element) を使う。こいつが特定のタイミングまでiframe読み込みを遅延するようにふるまう。
<lite-youtube videoid="w7HRowQMyLA" autoload />
デフォルトではクリックすることでロードされるが、autoload 属性をいれることでIntersectionObserverを使って画面に入ったとき読み込まれるようにできる。
なお遅延読み込み全般の考慮ポイントとして、要素の高さが静的に決定されるようにしないとレイアウトシフトを起こしてCLS指標が悪化するのに注意。直接高さを設定してもよいし、max-width と aspect-ratio を組み合わせてもよい。
loading="lazy" との違い
<iframe> 要素に loading="lazy" を指定することでも遅延読み込みが可能で、仕様と実装から読み解くHTMLのloading属性 - dwango on GitHub によれば内部的にIntersectionObserverを使うように仕様で指定されており、違いがなくブラウザ組み込みのぶん loading="lazy" のほうがよくみえる。
しかしさらにこの記事から引くとビューポートからどの程度の距離 (rootMargin) をもって「交差」（intersect）したとするかについては実装依存であり、特にBlink (Chromium) の値はかなり大きく、実際にiframeが画面上に出現するよりも余裕をもって読み込みが始まることになる。おそらくこのため、loading="lazy" を導入したときも劇的なパフォーマンス改善にはならなかった3。一方で @justinribeiro/lite-youtube では rootMargin は 0 であり、ギリギリまで読み込みをケチることができ、LCP数値の向上にはこちらの効果が大きい。