ホームページに動画を載せたいけれど、ページが重くなるのが心配だ。立ち上げの時期に、そう迷う方は少なくありません。重さの心配の多くは、動画を「いつ読み込むか」と「どれだけ場所を取るか」を決めておけば小さくできます。この記事では、GoogleとChromeの公式情報をもとに、載せる前に決めておきたい5つのことを整理します。

読み終えると、動画の置き場所の選び方と、重くしない埋め込み方が分かります。自動再生の扱いと、検索で動画として見つけてもらう条件にも触れます。本文の内容は、2026年10月21日に公式ページで確認したものです。

まず、動画がページの重さにつながる理由を押さえておきます

はて、動画を1本置くだけで、なぜページ全体が遅くなるのでしょうか。ページを開いた瞬間に、動画を再生する部品までまとめて読み込まれるからですね。

web.dev（Googleの開発者向けサイト）は、その大きさを具体的に示しています。YouTube の埋め込みを後から読み込む形にすると、最初の読み込みで約500KBを節約できるそうです。

同じページでは、Chrome の公式サイトでの例も紹介されています。画面の外にある YouTube の埋め込みを後回しにしたところ、操作できるまでの時間（TTI）が10秒短くなったという内容です。

出典：web.dev「iframe の遅延読み込み」（2026年10月21日確認）

ページの速さは、見る人の使い心地だけの話ではありません。Google 検索セントラルでは、表示の速さや画面の安定性を測る指標を「Core Web Vitals（コアウェブバイタル）」と呼んでいます。

Core Web Vitals は、Googleのコアランキングシステムが考慮する要素の1つだと説明されています。「良好」の目安は、表示の速さ（LCP）が2.5秒以内です。反応の速さ（INP）は200ミリ秒未満、画面のずれ（CLS）は0.1未満とされています。

出典：Google 検索セントラル「Core Web Vitals と Google 検索の検索結果について」（2026年10月21日確認）

それではまず、1つめの決めごとから見ていきましょう。

1つめ。動画を自社のサーバーに置くか、YouTubeなどから埋め込むかを決めます

動画の載せ方は、大きく2つに分かれます。動画ファイルを自社のサーバーに置く形と、YouTube などに上げた動画をページに埋め込む形です。

Google 検索セントラルは、video・embed・iframe・object のどれかで動画を参照するよう案内しています。そうすると、Googleが動画を見つけやすくなるという説明です。自社のサーバーに置くなら video、YouTube の埋め込みなら iframe を使う形ですね。

出典：Google 検索セントラル「動画の SEO に関するベスト プラクティス」（2026年10月21日確認）

2つの形で、公式に書かれている違い

公式ページで確認できる違いを、表にまとめます。

項目	自社のサーバーに置く	YouTubeから埋め込む
使うHTML要素	video（source の src に動画ファイルのURLを指定）	iframe（src にプレーヤーのURLを指定）
載せる手順	動画ファイルを置き、要素を書く。サムネイルは poster 属性で指定する	動画の「共有」から「埋め込む」を選び、コードを貼る
気をつけたい点	動画ファイルとサムネイルに、変わらないURLを使う	年齢制限のある動画は埋め込み先で見られず、YouTube へ移動する

YouTube の埋め込みの手順と制限は、YouTube ヘルプに書かれています。同じページでは、プライバシー強化モードという機能も紹介されています。

プライバシー強化モードとは、埋め込んだ動画の視聴情報を、見た人の YouTube の閲覧体験に反映させない機能です。埋め込みコードのドメインを、youtube.com から youtube-nocookie.com に変えるだけで使えます。

出典：YouTube ヘルプ「動画や再生リストを埋め込む」（2026年10月21日確認）

こう考えると判断しやすい

ここからは事実ではなく、判断の見方です。動画を YouTube でも公開する予定なら、埋め込みを選ぶと管理する場所が1つで済みます。

一方、YouTube に出したくない動画や、背景に流す短い映像もあります。そうした動画なら、自社のサーバーに置く形が合っているのではないでしょうか。

何に使う動画かがまだ決まっていないなら、撮影の前に整理しておくと迷いが減ります。用途の決め方は、動画撮影を依頼する前に、決めておきたい5つのことで書いています。

2つめ。画面の下にある動画は、近づいてから読み込む設定にします

続いて、いちばん効き目の大きい決めごとです。開いた時点で見えない位置の動画は、見る人がそこまでスクロールしてから読み込めば十分ですね。

この「後から読み込む」仕組みを、遅延読み込みと呼びます。iframe に loading="lazy" という属性を書き足すと、画面外の読み込みが後回しになります。

web.dev では、追加のプログラムが要らず、主要なブラウザで使える方法として紹介されています。ほとんどの場合は、このブラウザ標準の方法が推奨されています。

出典：web.dev「iframe の遅延読み込み」（2026年10月21日確認）

属性を書かなかった場合は、すぐに読み込む扱いになります。コピーした埋め込みコードに、この属性が入っているかを一度確かめておくと安心です。

ページを開いてすぐ見える動画には、付けなくてかまいません

遅延読み込みは、画面の外にある動画のための設定です。ページの最上部に置く動画は、開いた瞬間から見えるので、後回しにする意味がありません。

最上部の動画は通常どおり読み込みます。2本目以降や、ページの下のほうにある動画にだけ付ける、と分けると整理しやすいですね。

見た目だけ先に出しておく「ファサード」という方法もあります

Chrome の公式ドキュメントには、さらに軽くする方法も載っています。本物のプレーヤーの代わりに、見た目だけをまねた軽い部品を置いておく方法です。

この部品をファサードと呼び、クリックされた時点で本物のプレーヤーに差し替えます。YouTube の例では、ファサードは約3KB、本物のプレーヤーは約540KBと書かれています。

ただし、ファサードでは本物の埋め込みのすべての機能は使えません。遅延読み込みにすると、自動再生が正しく動かない場合があることも書かれています。

このページの冒頭には、診断ツール Lighthouse の第13版でこの診断項目が削除された、という注記もあります。導入を考えるのは、まず loading="lazy" で足りるかを見てからでよいと思います。

出典：Chrome for Developers「ファサードでサードパーティのリソースを遅延読み込みする」（2026年10月21日確認）

ここまで読んで、自社のサイトはどうだろうと気になった方は、LINEから気軽に聞いてください。
LINEで相談する

3つめ。動画の枠の大きさを、先に確保しておきます

3つめは、画面のずれの話です。読んでいる途中で急に文章が下へずれて、読んでいた場所を見失ったことはありませんか？

これは、あとから読み込まれた動画や画像が場所を取り、下の文章を押し下げるために起きます。このずれを数値にしたものが、先ほど触れたCLSですね。

web.dev では、CLSのよくある原因として「サイズのない広告、埋め込み、iframe」を挙げています。対策は、動画の要素に width と height を書くか、CSSの aspect-ratio で場所を予約することです。

画面幅に合わせて伸び縮みさせたい埋め込みには、aspect-ratio を使う方法が案内されています。スマートフォンでの表示を考えるなら、こちらが扱いやすいと思います。

出典：web.dev「Cumulative Layout Shift を最適化する」（2026年10月21日確認）

遅延読み込みと枠の確保は、セットで考えておきたいものなのです。後から読み込む以上、読み込まれるまでの間も場所を空けておかないと、ずれが起きるからですね。

4つめ。自動再生させるなら、音を消すことが前提になります

ページを開いたら動画が流れる、という見せ方を考えている方もいると思います。ここで知っておきたいのが、ブラウザ側の決まりです。

Chrome では、音を消した状態の自動再生は常に許可されます。音声付きの自動再生は、見る人がサイトをクリックやタップで操作したあとなど、条件を満たした場合に限られます。

YouTube のように別のドメインから埋め込んだ動画は、もう一段の手続きが要ります。埋め込む側のページが allow="autoplay" で、自動再生の許可を渡す必要があるのです。

同じページでは、動画が再生されると決めつけないよう勧めています。再生できなかったときは、再生ボタンを表示する作りにしておくということですね。

出典：Chrome for Developers「Chrome の自動再生ポリシー」（2026年10月21日確認）

YouTube ヘルプには、埋め込みのURLに「&autoplay=1」を加えると自動再生になると書かれています。ただし、自動再生による再生は視聴回数に数えられません。再生回数を伸ばしたい動画なら、自動再生にしないほうが目的に合いますね。

5つめ。検索で動画として見つけてもらいたいなら、その動画のためのページを用意します

最後は、検索結果での見え方です。トップページに埋め込んだ会社紹介の動画が、検索結果に「動画」として出るかというと、そうとは限りません。

Google 検索セントラルでは、動画ごとに専用の視聴ページを作るよう案内しています。視聴ページとは、1本の動画を見せることを主な目的にしたページのことです。

動画を紹介するブログ記事や、動画がおまけの位置にあるページは、視聴ページに含まれないと書かれています。同じページには、ほかにも次のような条件が並んでいます。

• 見る人のクリックやスワイプがなくても、動画が読み込まれるようにする
• サムネイルは60×30ピクセル以上で、大きいほど好ましい
• 動画ファイルとサムネイルには、動画ごとに固有で変わらないURLを使う
• 構造化データ（VideoObject）を書く場合は、実際の動画の内容と一致させる

出典：Google 検索セントラル「動画の SEO に関するベスト プラクティス」（2026年10月21日確認）

1つめの条件は、2つめで触れたファサードとぶつかる点に注意が必要です。クリックするまでプレーヤーが読み込まれない作りは、検索で拾ってほしいページには向かないということですね。

すべての動画を検索に出す必要はありません。雰囲気を伝える動画は速さを優先し、見つけてもらいたい解説動画は専用ページを作る、と役割で分けると判断しやすくなります。

サムネイルそのものの作り方は、動画の冒頭数秒とサムネイルの作り方。最後まで見てもらうために整えることにまとめています。

よくある質問

動画を1本載せるだけで、検索順位は下がりますか？

動画を載せたこと自体で順位が下がる、という説明は公式情報にはありません。Google 検索セントラルは、表示の速さや画面の安定性を表す Core Web Vitals を、ランキングで考慮する要素の1つとしています。画面の外の動画を遅延読み込みにし、枠を確保しておくと、こうした指標への影響を抑えやすくなります。

YouTubeの埋め込みコードは、そのまま貼っても大丈夫ですか？

YouTube ヘルプのとおり、「共有」から「埋め込む」を選んでコードを貼れば載せられます。ページの下のほうに置く場合は、コードに loading=”lazy” が入っているかを確かめてください。視聴情報の扱いが気になる場合は、ドメインを youtube-nocookie.com に変えるプライバシー強化モードも使えます。

トップページの背景に動画を流したいのですが、注意点はありますか？

Chrome では、音を消した状態の自動再生は常に許可されますが、音声付きの自動再生は条件を満たさないと止められます。背景に流す動画は、音を消しておくことが前提です。あわせて枠の大きさを先に確保し、読み込みのときに画面がずれないようにしておきます。

会社紹介の動画を、検索結果に動画として出したいです。何をすればよいですか？

Google 検索セントラルでは、動画ごとに専用の視聴ページを作るよう案内しています。トップページに埋め込んだだけでは、視聴ページとして扱われるとは限りません。紹介動画のためのページを用意し、クリックしなくても動画が読み込まれる作りにしておくことが出発点です。

まとめ

• 動画は、自社のサーバーに置いても YouTube から埋め込んでも、Googleが見つけられる書き方がある
• 画面の外にある動画は loading="lazy" で、見る人が近づいてから読み込む
• 動画の枠は width と height、または aspect-ratio で先に確保し、画面のずれを防ぐ
• 自動再生は音を消すことが前提。YouTube の自動再生は視聴回数に数えられない
• 検索で動画として見つけてもらいたいなら、その動画のための視聴ページを用意する

載せるかどうかより、どの動画にどの役割を持たせるかを先に決めておくと、重さの問題はずっと扱いやすくなります。

参考にした公式情報

いずれも2026年10月21日に確認しました。

• Google 検索セントラル「動画の SEO に関するベスト プラクティス」
• Google 検索セントラル「Core Web Vitals と Google 検索の検索結果について」
• web.dev「iframe の遅延読み込み」
• web.dev「Cumulative Layout Shift を最適化する」
• Chrome for Developers「ファサードでサードパーティのリソースを遅延読み込みする」
• Chrome for Developers「Chrome の自動再生ポリシー」
• YouTube ヘルプ「動画や再生リストを埋め込む」

ワクワクラボでは、立ち上げ時のホームページ制作で、動画の置き場所や埋め込み方の設計から対応しています。
「この動画はどこに載せるのがよいのだろう」という段階でも大丈夫です。

お問い合わせフォーム
LINEで相談する