ReactでYouTube埋め込むとLighthouseスコア低下する問題の改善手法まとめ

YouTube埋め込みって、するだけでLighthouseスコアが低下して悲しい気持ちになりますよね。なので研究としてLighthouseスコアを低下させない対策を調べたり試しました。最終的に、特定のケースでのみ低下不可避という結論に至りました。 結論 YouTube埋め込みがファーストビューにあり、スマホ対応も必須な場合、Lighthouseスコアの低下は避けられない ※もし回避する方法を見つけている方がいれば教えてください 検証結果 以下のサイトとGitHub Repoに公開済みです。サイト内、コード内に説明は特に無いので本記事の内容と合わせて見ていただければと思います。 前提知識 YouTubeをiframeで埋め込んだだけで、Lighthouseのスコアは大幅に低下する Playerに関するJavaScriptがダウンロードされ、LCPに影響するため しかもファイル数も多く、1ファ

[diveintounlimit]

“結論 （中略）避けられない”