- YouTube埋め込みは約1.3MBあり、複数の埋め込み間でリソースを共有しない
<lite-youtube> Webコンポーネントを使えば約100kまで削減でき、リソースを共有しつつ機能も犠牲にしない
YouTube動画の埋め込み
- YouTube動画はWebサイトに埋め込める
- YouTubeのShareメニューで**< > Embed**オプションを選ぶと、
<iframe>を含むHTMLコードが提供される
<iframe>はパフォーマンス面では望ましくないが、保護されたサードパーティーコンテンツには適している
パフォーマンス改善の提案
loading="lazy"属性を追加し、動画が見えていないときはすぐに読み込まれないようにする- インラインスタイルを追加して、動画の元の比率を保ちつつレスポンシブにする
現在のYouTube埋め込みの問題点
- YouTube埋め込みが1つだけあるページでも、32件のリクエスト、1.3MBのデータ転送、2.76秒の読み込み時間が発生する
- 複数の埋め込み間でリソースを共有しないため、埋め込み数が増えるほど転送量が線形に増加する
見た目と機能
- YouTube埋め込みは動画の「ポスター」画像、動画タイトル、大きな再生ボタンを提供する
- こうした機能は、多くのリソースを使わなくても実装できる
なぜこの方式なのか？
- 軽量な埋め込みをテストしたところ、エンゲージメントが低下したという報告がある
- しかしこれは直感に反する結果であり、さらに深い検討が必要だ
- 多くのリソースを消費することは、環境面でも問題になる
解決策: 別の方法で埋め込み体験を再現する
- GoogleのPaul Irishが作成した
lite-youtube-embed Webコンポーネントがある
- このコンポーネントは視覚的パフォーマンスに重点を置き、約224倍高速にレンダリングされる
- 標準の埋め込みと同じ機能を提供しつつ、速度、効率、デフォルトのプライバシーを向上させる
Lite YouTube Embedの使い方
- Webコンポーネントを初期化するJavaScriptを読み込む
- 使用する
- npmからインストールするか、プロジェクトにコピーして使える
- CDNからリンクして使うこともできる
代替案
- Shadow DOM版（スタイル保護、スタイリングは難しい）
- 自前で実装
- Raymond Camden: YouTube埋め込みWebコンポーネントの構築（VanillaおよびWebC版）
- Adrian Roselli: YouTubeおよびVimeo Webコンポーネント
- Mux:
<youtube-video>（DOM APIに一致）
- React移植版およびNext.js公式版
GN⁺のまとめ
- YouTube埋め込みは多くのリソースを使い、パフォーマンスに悪影響を与える
lite-youtube-embedのようなWebコンポーネントを使えば、パフォーマンスを大幅に改善できる- 環境面でもポジティブな影響が期待できる
- 似た機能を提供する他のWebコンポーネントも検討に値する
2件のコメント
lite-youtube-embed - より高速な YouTube 埋め込み
Hacker Newsの意見
コミュニティフォーラムのプラットフォームで YouTube 埋め込みを検出し、クリックされるまで読み込まれないプロキシサムネイルに置き換えている
著者は軽量版がエンゲージメントを下げるとは信じていない
別のプレイヤーがユーザーに異なる扱いをするのは驚くことではない
これは、開発者がユーザーがソフトウェアをどう使うかを正確には知り得ないという誤った信念の一例である
ブロガーが GitHub Gist 埋め込みを使わないようにする必要がある
埋め込み全体の重さを減らし、UX を改善する1つの方法は広告をブロックすることだ
ublock ユーザー向けのクライアント側ソリューションとして click 2 load を使える
軽量埋め込みがエンゲージメントを低下させるというテスト結果がある
埋め込み動画は、YouTube サーバー上のファイルを指す
<video>要素であり得る埋め込み数が増えるほど、重さは線形に増加する
lite youtube embed の代替として、自分のソリューションを共有する