YouTubeの埋め込みでホームページが重い｜押されるまで動画を読まない形

「お店の紹介動画をトップページに貼ったらスマホで開くのが遅くなった」という店主さんは多いです。YouTubeの埋め込みが重いのは動画のせいではなく、再生されなくても最初にプレーヤー（動画を再生する画面と操作ボタンの一式）を読み込むためです。押されるまでプレーヤーを読まない形に替えると、ページを開いたときに読む量を大きく減らせます。

web.devのiframeの遅延読み込みの説明（2024年9月更新）には、画面の外にあるYouTubeの埋め込みを後から読むようにすると最初の読み込みで約500KBを減らせると書かれています。

この記事では埋め込みが重くなる理由と軽くする2つの方法が分かります。最後に動画の置き方を替えるかどうかを決める表も載せています。

YouTubeの埋め込みは再生しなくても約500KBを読み込む

YouTubeの埋め込みは、ページを開いた時点でプレーヤーの中身をまとめて読み込みます。Chrome for Developersのページの速さを測る道具（Lighthouse）の説明（2020年12月時点）では、プレーヤーの重さは540KBで見た目だけの軽い代わりなら3KBで済むと書かれていました。

この重さは動画を再生した人だけでなく、再生しないで帰る人にも同じようにかかります。トップページの下の方に動画を置いている場合も、動画まで画面を動かさない人のスマホにプレーヤーが読み込まれます。

なお540KBは2020年の測定なので今のプレーヤーの重さとは違う場合があります。この数字を出していた項目は2026年11月時点のLighthouse 13では外れていますが、プレーヤーを最初に読み込む点は変わっていません。

YouTubeの埋め込みは再生されなくても最初にプレーヤーを読み込むので置いただけでページが重くなります。

押されるまで動画を読まない方法は2つある

YouTubeの埋め込みを軽くする方法は「画面に近づくまで読まない」と「押されるまで読まない」の2つです。どちらが合うかは動画がページのどこにあるかで決まります。

画面に近づくまで読まない遅延読み込み

埋め込みのコード（iframe）に loading="lazy" を付けると、ブラウザは動画が画面に近づくまでプレーヤーを読み込みません。web.devの説明ではChrome・Edge・Firefox・Safariの主なブラウザがこの書き方に対応しています。

WordPressは5.7から本文の中の幅と高さが入ったiframeに自動でこの書き方を付けています（WordPress公式の開発者向けのお知らせ・2021年2月）。対象は本文と抜粋とテキストのウィジェットの中だけなので、テーマやページビルダー（画面を見ながらページを作る追加の機能）でトップページの一番上に置いた動画には付きません。

また画面の一番上にある動画は開いた瞬間から見えているので、遅延読み込みを付けても最初に読み込まれます。

押されるまで読まないファサード

ファサード（見た目だけの軽い代わり）は、最初は動画のサムネイル画像と再生ボタンだけを出して押されたときに本物のプレーヤーを読み込む形です。Lighthouseの説明では lite-youtube-embed など公開されている4つのプログラムが紹介されています。

WordPressなら WP YouTube Lyte のようなプラグイン（機能を足す追加のソフト）でも同じ形にできます。WordPress公式のプラグインのページでは2026年11月時点で有効インストール数は2万以上で、最終更新は3か月前でした。

画面の下の方にある動画は遅延読み込みで足り、一番上にある動画は押されるまで読まない形にすると軽くなります。

押されるまで読まない形は再生の前に少し待つ

押されるまで読まない形にすると、サムネイルを押してからプレーヤーを読み込むので押した直後に少し間が空きます。ページを開いたときの重さを減らす代わりに再生の前の待ち時間が少し増える形です。

音を消して自動で流している背景の動画は、この形にすると最初は止まった画像になります。動画が流れていること自体を見せたいなら、YouTubeの埋め込みのまま置き方だけを替えても狙いどおりにはなりません。その場合は動画の役割から考え直す必要があります。

押されるまで読まない形は説明の動画に向いていて背景で流す動画には向いていません。

動画の置き方を替えるかの判断の表

次の3つを確かめると今の置き方のままでいいか替えるかが決まります。

3つとも今のままでいい側なら替えなくて大丈夫です。動画が一番上にあるか loading="lazy" が付いていないなら、押されるまで読まない形に替えてください。背景の動画は置き方ではなく動画の役割から見直します。

御社が今日やること

1. スマホでトップページを開き動画が一番上にあるか下の方にあるかを確かめる
2. パソコンのChromeでページの何もない所を右クリックして「ページのソースを表示」を選び「youtube.com/embed」を検索して同じ行に loading="lazy" があるかを見る
3. PageSpeed Insightsにトップページのアドレスを入れてスマホの結果をスクリーンショットで残しておく
4. WordPressなら動画が本文の中に貼られているかテーマやページビルダーで置かれているかを確かめる

やりがちな失敗は、今の速さを残さないままプラグインを入れて良くなったかが分からなくなることです。プラグインを入れる前には必ずバックアップを取ってください。自分で確かめるのが難しければ無料サイト診断でスマホでの表示の速さも見られます。動きの多いページを軽くするスマホで遅くしないための確かめ方は別の記事で紹介しています。

弊社がやっていること

弊社ではこれまで70社ほどの保守を引き継いできました。引き継ぎではログインする前に外から見える状態を確かめ、その中にスマホでの表示も入っています。

動画の置き方を替えるときは何かを触る前にファイルとデータベースを丸ごとバックアップに取ります。そのあと試しの環境で表示が崩れないかを確かめてから本番に反映します。

動画が1本だけでページの下の方にあり loading="lazy" も付いているなら、弊社に頼む必要はありません。背景で流す動画は置き方を替えても狙いどおりにならないので、先に動画で何を見せたいかを決めてからご相談ください。

作業の費用は弊社の料金の一覧に載せています。動画の置き方で迷ったら相談の窓口からお知らせください。初回の30分は無料です。