年々、Webサイト（HP）に動画を埋め込むことが一般的になり、
その効果を実感されている方も多いのではないでしょうか。
一方で、次のようなお悩みを抱えているケースも少なくありません。
- 動画を埋め込んでいるが、ページがかなり重い
- 読み込みに時間がかかり、表示されるまで待たされる
- PageSpeed Insights のスコアが悪く、改善したいが方法が分からない
このようなお困りごとはありませんか？
解決方法はいくつかあります
解決方法はいくつかあります。代表的な施策は次の4つです。
- 自動再生からクリック再生に変更する
→自動再生は読み込み負荷が高くなりやすいため、クリックして再生する方式に変えるだけでも軽量化できます。 - 「Lite YouTube Embed」を使う
→オープンソースのJavaScriptライブラリを利用し、サムネイル（画像）を表示して、クリック時にYouTubeプレイヤー（iframe）を読み込む方式です。 - HTML＋JavaScriptで同様の挙動を手動実装する
→ライブラリを使わず、サムネイル表示 → クリック時にiframeを生成して読み込む方式です。 - 埋め込みをやめてリンクボタンにする
→YouTubeへのリンク（テキスト／ボタン）に置き換えることで、最も軽量にできます。
これらの施策があります。
それでは、ひとつずつ見ていきましょう。
通常の YouTube 埋め込みが重い理由
通常、YouTube動画をWebサイトに埋め込むと、以下のような iframe が生成されます。
<iframe src="https://www.youtube.com/embed/XXXX"></iframe>この iframe がページ内に配置された瞬間、裏側では次のような処理が即時に実行されます。
- YouTubeプレイヤーJS
- 広告関連JS
- トラッキング
- フォント
- Cookie判定
つまり、iframe が DOM に存在した瞬間に、これらすべてのリソースが読み込まれる状態になります。
これが、YouTube動画をページに埋め込むと表示速度が遅くなりやすい主な理由です。
「自動再生」から「クリック再生」に変更する
結論から言うと、
自動再生よりも「クリックしないと再生されない動画」のほうが、確実に軽量化できます。
理由を噛み砕いて説明します。
自動再生の場合、ページの初回表示時に動画を即座に読み込む処理が行われます。
具体的には、ページを開いた瞬間に次のような要素が一気に読み込まれます。
- 動画プレイヤー
- 動画データ（少なくとも冒頭）
- 音声制御・再生制御
その結果、ページの初期表示に負荷がかかり、表示速度に悪影響が出やすくなります。
一方でクリック再生は「最初は画像とボタンだけ」です。
初期表示ではサムネ画像（＝普通の画像）と再生ボタンだけを読み込み、
動画本体はクリックされた時点で初めてロードしますので、初期表示がかなり軽くなります。
一方、クリック再生の場合は初期表示では画像と再生ボタンのみが表示されます。
初期表示時に読み込まれるのは、サムネイル画像（＝通常の画像ファイル）と再生ボタンだけで、
動画本体はユーザーがクリックした時点で初めて読み込まれるため、初期表示を大幅に軽くすることができます。
また、Googleの評価基準の観点から見ても、クリック再生は安全な選択肢です。
自動再生動画はユーザー体験を損ないやすく、特にモバイル環境では敬遠される傾向があります。
クリック再生はUX（ユーザー体験）の面でも評価が高く、Googleが定めるWebページのユーザー体験指標である「Core Web Vitals（コア ウェブ バイタル）」の観点から見ても、無難かつ推奨される方法と言えます。
Lite YouTube Embedというオープンソースの JavaScript を使う
結論から言うと、
「サムネイル＋クリック時に iframe を読み込む方式」を、外部 JavaScript で実現する方法です。
見た目は、一見すると通常のYouTube動画が埋め込まれているように見え、再生ボタンも表示されます。
しかし、裏側の仕組みは大きく異なります。
初期表示時には、表示されているのはただの画像（サムネイル）のみで、
YouTubeの iframe は存在していません。
ユーザーが再生ボタンをクリックした瞬間に、iframe が動的に生成され、初めて動画が読み込まれる仕組みです。
通常のリンク形式の場合、クリックするとYouTubeのサイトへ遷移してしまい、
Webサイト（HP）から離脱されてしまいます。
一方で、この iframe遅延読み込み方式では、
クリック後もページ内でそのまま動画が再生されるため、
サイト滞在時間や共感度、コンバージョン率に大きな差が出やすくなります。
また、初期ロード時に読み込まれるのは画像のみのため表示が非常に軽く、
UX（ユーザー体験）の面でも安心感があります。
SEOや Core Web Vitals の観点から見ても、評価を下げにくい設計です。
iframe 自体が初期表示では存在せず、クリック時に初めて生成されるため、
PageSpeed Insights や LCP（Largest Contentful Paint）が大きく改善するケースも多く見られます。
この仕組みを簡単に実装できるライブラリとして、
「Lite YouTube Embed」 というオープンソースの JavaScript ライブラリがあります。
公式リポジトリはこちらです。https://github.com/paulirish/lite-youtube-embed
ライセンスについて（安心ポイント）
Lite YouTube Embed は Apache License 2.0 で提供されています。
- 商用・非商用を問わず利用可能
- 無料で使用可能
- ソースコードの改変も可能
- クレジット表記は基本的に不要
そのため、ビジネス用途のWebサイトでも問題なく利用できます。
【注意点】Wixなどノーコードサイトの場合
Wix などのノーコードサイトでは、Lite YouTube Embed の公式コードをそのまま使うことができない場合があります。
理由としては、Wixでは外部ライブラリを自由に読み込む仕組みがなく、
JavaScriptは HTML埋め込みブロックや Wix独自の開発機能（Velo）内でしか扱えないためです。
また、Wixにはサーバーへ直接ファイルをアップロードする仕組み（FTP）がないため、
ライブラリの JavaScript ファイルを設置することもできません。
Velo を使って実装する方法もありますが、Wixの開発者向け機能を利用するため、
JavaScriptやソースコードに慣れていない場合はやや難易度が高くなります。
なお、外部CDNをHTML埋め込み内で読み込む方法は、
Wix側の制限により 動作が不安定になるケースがあるため、あまりおすすめできません。
Wixを利用している場合は、
HTML＋JavaScriptをページ内に直接記述する方法をおすすめします。
WordPressを使用している場合は、
「WP YouTube Lyte」 というプラグインを利用する方法もあります。
通常の iframe 埋め込みをやめ、クリック時に iframe を生成する（HTML＋JavaScript）
前述の方法が使えない場合におすすめなのが、
「HTML埋め込みで手動実装する方法」です。
この方法では、Wix などのノーコードツールに用意されている
「カスタムHTML」ブロックを使い、必要なコードだけを直接記述して動かします。
使い方について
以下のコード内にある XXXXXXXXXXXXXX の部分を、
ご自身のYouTube動画の 動画ID に置き換えてください。
YouTubeのURLは次の形式になっています。
https://www.youtube.com/watch?v=【動画ID】この 【動画ID】 の部分を使用します。
サンプルコード（HTML＋JavaScript）
<div id="yt-test" style="
width:100%;
aspect-ratio:16/9;
background:#000 url('https://img.youtube.com/vi/XXXXXXXXXXXXXX/hqdefault.jpg') center/cover;
cursor:pointer;
position:relative;
">
<!-- YouTube風 再生ボタン -->
<div style="
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
filter: drop-shadow(0 6px 20px rgba(0,0,0,.45));
">
<svg viewBox="0 0 68 48" width="68" height="48">
<path d="M66.52 7.43a8.27 8.27 0 0 0-5.82-5.82C55.88 0 34 0 34 0S12.12 0 7.3 1.61a8.27 8.27 0 0 0-5.82 5.82C0 12.25 0 24 0 24s0 11.75 1.48 16.57a8.27 8.27 0 0 0 5.82 5.82C12.12 48 34 48 34 48s21.88 0 26.7-1.61a8.27 8.27 0 0 0 5.82-5.82C68 35.75 68 24 68 24s0-11.75-1.48-16.57z"
fill="#FF0000"/>
<path d="M45 24 27 14v20z" fill="#fff"/>
</svg>
</div>
</div>
<script>
document.getElementById('yt-test').onclick = function(){
this.innerHTML =
'<iframe src="https://www.youtube.com/embed/XXXXXXXXXXXXXX?autoplay=1&rel=0" ' +
'style="width:100%;height:100%;" ' +
'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
};
</script>
通常のYouTube埋め込み（iframe直置き）
通常のYouTube埋め込み（iframe直置き）では、
- iframe を初期表示時から読み込む
- ページが重くなりやすい
- PageSpeed Insights のスコアが下がりやすい
といった問題が起こりがちです。
HTMLコードで実装が以下
一方、上記のHTML実装では、
- CSS・JavaScriptを HTMLブロック内に直書き
- クリック時にのみ iframe を生成
- サーバーにJSファイルを保存する必要なし
という構成になります。
Wixの標準「YouTubeブロック」は iframe をそのまま埋め込む仕様のため、
初期読み込みが重くなり、PageSpeed スコアが下がりやすい傾向があります。
しかし、この方法であれば、
「カスタムHTML」ブロックにコードを貼るだけで、
クリック時に読み込まれる軽量な動画埋め込みを実現できます。
Lite YouTube Embedとの関係
この方法は Lite YouTube Embed とは別の実装ですが、
目的としている点は同じです。
- 初期表示では iframe を読み込まない
- クリック時に iframe を生成する
- 表示速度とUXを改善する
見た目や動きもほぼ同等のため、
ノーコード環境では実用的な代替手段としておすすめできます。
埋め込みをやめてリンクボタンにする（最も軽量な方法）
表示速度を最優先する場合、
そもそも動画を埋め込まないという選択肢も有効です。
YouTube動画をページ内に埋め込む代わりに、
- テキストリンク
- ボタンリンク
- サムネ画像＋リンク
といった形で、YouTubeへ遷移させる方法です。
この場合、ページ内では動画プレイヤーやiframeを一切読み込まないため、
初期表示の負荷はほぼゼロになります。
ただし、クリックするとYouTubeのサイトへ移動するため、
- ページから離脱してしまう
- 滞在時間やコンバージョンにつながりにくい
といったデメリットもあります。
そのため、
- 表示速度を最優先したいページ
- 補足的に動画を紹介したいだけのページ
- ランディングページ以外の下層ページ
などでは有効ですが、
サービス紹介や訴求を目的としたページでは慎重に判断する必要があります。
まとめ
Webサイトに動画を埋め込む機会は年々増えていますが、
埋め込み方を間違えると、表示速度やユーザー体験を大きく損なってしまいます。
今回ご紹介したように、
- 自動再生をやめてクリック再生にする
- iframeを初期表示で読み込まない設計にする
- ライブラリやHTML実装を使い分ける
- 場合によっては埋め込み自体をやめる
といった施策を行うことで、
ページ表示速度は劇的に改善するケースが多くあります。
とはいえ、
- どの方法を選べばいいのかわからない
- 社内にWeb担当者がいない
- 実装や検証に手が回らない
といった理由で、対応が後回しになってしまうことも少なくありません。
弊社では、
Web広報・Web改善を外注できるサービスを提供しており、
今回ご紹介したような表示速度改善や動画活用の最適化も含めて対応可能です。
「動画を活かしたいが、サイトが重くなるのは避けたい」
「PageSpeed Insightsのスコアを改善したい」
そんなお悩みがありましたら、
まずは無料相談にてお気軽にご相談ください。
