1. このページの目的
YouTube Lite Embed を使って YouTube 動画を埋め込む (facade という手法である)。
このライブラリを使うと、YouTube動画のサムネイルだけ表示して、動画のデータは取得しない。そのためページ読み込みのパフォーマンスが高い。
2. デモ
YouTube Lite Embed を使った場合（カスタム要素）
YouTube の標準埋め込みコードを使った場合 (iframe)
loading="lazy"がある場合とない場合とでも比較する。
3. コード
YouTube Lite Embed を使った場合（カスタム要素）
HTML
<link rel="stylesheet" href="./lite-yt-embed.css" />
<script defer src="./lite-yt-embed.js"></script>
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)" style="width:560px"></lite-youtube>
- lite-yt-embed.css
- lite-yt-embed.js
- カスタム要素を作成して利用している(Web Components)。
width:560pxを指定しないと、幅が 720px になり、元の埋め込みのサイズと違ってしまう。<script>タグにdeferをつけないとパフォーマンスに大きな悪影響がある。
YouTube の標準埋め込みコードを使った場合 (iframe)
HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/ogfYd705cRs"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
4. 結果
YouTube Lite Embed を使った場合（カスタム要素）
- サムネイル画像 (https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg) は Load イベントの前に読み込まれる。
- PSI (PageSpeed Insights) で高得点がとれる。なので当然 Lighthouse でも高得点がとれる。
YouTube の標準埋め込みコードを使った場合 (iframe)
- YouTube のHTML, CSS, JSファイルをいくつも読み込む必要がある。
- Load イベントの発生がかなり遅れる。DCL, FP, FCP, LCP は割とすぐ発生する。
loading="lazy"を指定すれば、Lighthouse で高得点がとれる。しかし、PSI では高得点がとれない。回線速度が遅くなると、大きな差になるのだろう。
5. 考察
- パフォーマンスを考えると、YouTube Lite Embed を使うべきである。