【ITニュース解説】🚀 Introducing EmbedLite. A Drop-In, Privacy-Friendly Replacement for YouTube Embeds

システムエンジニアを目指す皆さんがWebサイトを構築する際、コンテンツとして動画を掲載することは非常に一般的である。特にYouTubeの動画は、その手軽さから多くのサイトで利用されている。通常、YouTubeの動画を自分のWebサイトに埋め込むには、「iframe」というHTMLのタグを使う。このiframeは、Webページの中に別のWebページを窓のように表示するための仕組みだ。しかし、このYouTubeの動画埋め込みには、実はサイトの利用者や運営者にとって見過ごせないいくつかの問題がある。

具体的な問題としてまず挙げられるのは、Webサイトの表示速度が大きく低下することだ。皆さんのWebサイトにYouTubeの動画をiframeで埋め込むと、動画を再生していなくても、YouTubeやGoogle、さらに広告配信で使われるDoubleClickといった複数のドメインから、数百キロバイトにも及ぶ大量のJavaScriptプログラムが読み込まれてしまう。これらのプログラムは、動画プレイヤーの準備や、ユーザーの行動を追跡するためのものだ。これにより、サイトが表示されるまでに必要な通信（ネットワークリクエスト）が増え、ページの読み込みが遅くなる。特に、Webサイトの中で最も重要なコンテンツが表示されるまでの時間を示す「Largest Contentful Paint（LCP）」という指標が遅延し、ユーザーがサイトを閲覧し始めるまでの待ち時間が長くなってしまう。これは、ユーザー体験の悪化に直結する。

さらに深刻なのは、プライバシーに関する問題である。YouTubeの埋め込みは、ユーザーが動画を再生しなくても、追跡用のピクセルやCookie（ウェブサイトがブラウザに保存する小さなデータ）を読み込むことがある。これらの技術は、ユーザーの閲覧履歴や行動を収集し、Googleなどの第三者企業に情報を送信する可能性がある。つまり、動画をクリックして再生しなかったとしても、サイトを訪れた人のデータが収集され、プライバシーが侵害される恐れがあるのだ。もし皆さんのWebサイトに複数のYouTube動画を埋め込んでいる場合、これらの問題は動画の数だけ積み重なり、サイトのパフォーマンスとプライバシーリスクをさらに悪化させることになる。

このような問題を解決するために開発されたのが「EmbedLite」という仕組みだ。EmbedLiteは、YouTubeの重いiframeに代わる、軽量でプライバシーに配慮したオープンソースの代替ソリューションである。その名の通り、YouTubeの埋め込みを「Lite（軽量）」にすることが目的だ。

EmbedLiteがどのように機能するかというと、WebサイトにYouTube動画を埋め込む際に、実際のYouTubeプレイヤーの代わりに、動画の「サムネイル画像」と「再生ボタン」だけの非常に軽量なプレースホルダーを表示する。このプレースホルダーは、必要最小限のHTMLとCSSだけで作られており、外部のJavaScriptやトラッキングのためのCookieを一切読み込まない。ユーザーがこのプレースホルダー上の再生ボタンを実際にクリックするまで、実際のYouTubeプレイヤーは一切読み込まれない。つまり、ユーザーが動画を再生したいという意思を示して初めて、YouTubeの本格的なiframeが読み込まれる「遅延ロード」の仕組みを採用しているのだ。

この仕組みのおかげで、EmbedLiteを利用すると、Webサイトは劇的に高速化する。ページを最初に読み込む際に余計なデータがほとんど発生せず、サイトの重要なコンテンツがすぐに表示されるようになるため、LCPなどのパフォーマンス指標が大幅に改善される。また、外部スクリプトやCookieがユーザーの同意なしに読み込まれることがなくなるため、ユーザーのプライバシーがしっかりと保護される。これは、Webサイトの利用者にとって大きな安心材料となる。

EmbedLiteの使い方は非常に簡単である。皆さんが既存のYouTube埋め込みコードを使っている場合、通常は<iframe>タグのsrc属性にhttps://www.youtube.com/embed/...のようなURLが指定されているはずだ。これを、https://www.embedlite.com/embed/...のようにEmbedLiteのドメインに置き換えるだけで、すぐにEmbedLiteの機能を利用できる。YouTubeの動画IDはそのまま引き継がれるため、どの動画を埋め込むかも変更不要だ。さらに、YouTubeの埋め込みで通常利用するcontrols=0（コントロール非表示）やmute=1（ミュートで開始）、start=30（30秒から開始）といった各種パラメータも、EmbedLiteのURLにそのまま追加して利用できる。動画のタイトルを独自に設定することも可能だ。

この変更は、Webサイトに驚くほど大きなメリットをもたらす。まず、ページの読み込み速度が向上することで、GoogleがWebサイトの健全性を評価する指標である「Core Web Vitals」のスコアが改善される。Core Web Vitalsの改善は、検索エンジンのランキングにも影響するため、サイトの「SEO（検索エンジン最適化）」にも有利に働く。つまり、より多くの人々にサイトを見つけてもらいやすくなるのだ。そして最も重要なのは、ユーザーが安心してサイトを利用できることだ。不要なトラッキングを避け、プライバシー保護をユーザーの手に委ねることで、サイトの信頼性を高めることができる。

EmbedLiteはオープンソースプロジェクトとしてGitHubで公開されている。これは、そのソースコードが誰でも自由に閲覧、利用、改変、配布できることを意味する。もし皆さんが自分のサーバーやクラウドサービスでEmbedLiteをホストしたい場合でも、Cloudflare Pages、Vercel、Netlifyといった静的ファイルホスティングサービスを利用して簡単に実現できる。これにより、完全に自分のコントロール下でEmbedLiteを運用することが可能になる。

このようにEmbedLiteは、YouTubeの動画埋め込みという、一見すると些細な部分の改善でありながら、Webサイトのパフォーマンス、プライバシー、SEOという、サイト運営における非常に重要な三つの要素に大きな好影響を与える。システムエンジニアを目指す皆さんにとって、Webサイトを構築する際には、単に機能を実現するだけでなく、ユーザー体験やパフォーマンス、そしてプライバシーといった多角的な視点から最適化を追求する意識が非常に重要になる。EmbedLiteのようなツールは、まさにそのような課題に対するスマートな解決策の一つとして、大いに参考になるだろう。