サムネ画像を表示して、YouTube動画を遅延読み込みする
GoogleSEO: Some third-party resources can be lazy loaded with a facade
Total Blocking Time(TBT)を短くするのに役立つ
例えば、YouTube動画などを埋め込んでいるページを読み込むとき
ページのload時にYouTube動画など、thrid partyのものがあると時間がかかる
必ずしもuserが再生するとは限らない動画のloadに時間がかかるのは勿体ない
そこで、lazy loadする
ページのload時は、サムネだけを読み込む
userが、そのサムネにマウスオーバーした時に実際に読み込む
YouTube動画以外にも、ページの右下に表示されるchatのwidgetとか
React用のlibrary
react-lite-youtube-embed
github
https://github.com/ibrahimcesar/react-lite-youtube-embed/issues/50
スマホでは2回クリックしないと再生できない
ファサードを使用したサードパーティリソースの遅延読み込み
Lazy load embedded YouTube videos | CSS-Tricks - CSS-Tricks
何のlibraryも使わずに実現している
過去にやったもの
/mrsekut-private/2022/6/21 サムネ画像を表示してみたが、あまり効果が出なかった