YouTubeの埋め込み方法比較

YouTubeの埋め込み方法として、

・ページの表示と同時に読み込む（通常のembed方式）
・クリックされたら読み込む（Facade：ファサード 方式）

の2パターンがあると知り、どれくらいLighthouseのスコアが違うかテストしてみました。

比較条件・ページ

通常の埋め込み（embed方式）

YouTube通常埋め込み

2025.3.3

以下のコードで実装 <iframe width="560" height="315" src="https://www.youtube.com/embed/-E3_jJc5ous?si=7qTPu-ZRqKWswG3E" title="YouTube video player" framebo...

Facade（ファサード）方式

YouTubeファサードテスト

2025.3.3

▶ 再生 document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll(".youtube-wrapper").forEach(wrapper => { wrapper.addE...

比較結果

TBT

• embed方式：+12
• ファサード方式：+17

LCP

• embed方式：+0
• ファサード方式：+4

と、若干スコアが上がっています。

今回は「ファーストビューでいきなり動画がある」というやや特殊なページ構成の場合の比較でしたが、高いスコアを目指すなら形式の方が良い傾向がありそうです。