ホームページに動画を埋め込むと重い？原因と軽くする方法を解説

ホームページに動画を投稿したあと、表示が遅くなること、ページを開くまで「表示」が遅くなることがあります

 

動画は画像やテキストよりもデータ量が多いため、使い方はページ表示に大きく影響します

 

特に、容量の大きい動画をそのままアップロードしていたり​​、必要以上に高い解像度で配信していたり​​すると、表示速度が低下しやすくなります。

 

また、YouTubeなどの外部サービスを利用しているからといって、必ず軽くなるわけではありません。

 

動画をウェブページ上に読み込むと、ケースになります

 

動画を削除しなくても、ファイルを圧縮したり、解像度を見直したり、埋め込み方法を変更したりすることで改善できる可能性があります。

 

ホームページにインストールする動画が重くなる原因と、表示を非表示にする原因と、

ホームページ制作に関するお悩みはお気軽にご相談ください。

ホームページに埋め込んだ動画が重くなる原因

ホームページに動画を埋め込んだことで表示が重くなる主な原因は、動画ファイルの容量、解像度、埋め込み方法の3つです。

 

単純に「動画だから重い」と考えるのではなく、どこに問題があるのかを切り分けることが重要です。

 

まずは、次のポイントを確認してみましょう。

重くなる主な原因	確認したいポイント
動画ファイルの容量が大きい	編集後の動画をそのままアップロードしていないか
動画の解像度が高すぎる	表示サイズに対して4Kなど過剰な画質になっていないか
埋め込み・ホスティング方法が適していない	自社サーバーへの直接配置や外部プレーヤーの負荷を確認する

 

原因によって有効な対策は変わります。

動画ファイルの容量が大きい

動画が重くなる原因として、まず確認したいのがファイル容量です。

 

動画は静止画と比べて多くのデータを含んでいます。

 

数秒程度の動画でも、保存方法によっては数十MB以上になることがあります。

 

長時間の動画や高画質な動画では、さらに容量が増えます。

 

大容量の動画ファイルをWebページ上で読み込ませると、その分だけ通信量も増えます。

 

通信環境が安定したパソコンでは気にならなくても、スマートフォンや通信速度が遅い環境では表示までに時間がかかることがあります。

 

特に注意したいのが、編集後の動画をそのままアップロードするケースです。

 

動画編集ソフトから書き出したデータは、映像制作や保存用途を前提に高い品質で設定されている場合があります。

 

ホームページで表示するには過剰な品質になっていることも少なくありません。

 

たとえば、トップページの背景として数秒流すだけの動画に、長尺動画と同じ設定を使う必要はありません。

 

サイト上での用途に合わせて容量を調整することが大切です。

 

また、動画を複数掲載している場合は、一つひとつの容量が小さくても合計すると大きな負荷になります。

 

動画ファイルのサイズだけでなく、1ページ全体でどれくらいのデータを読み込んでいるのかも確認しましょう。

動画の解像度が高すぎる

必要以上に高い解像度で動画を掲載している場合も、ページが重くなる原因になります。

 

解像度とは、映像を構成する画素数のことです。

 

一般的に解像度が高くなるほど細かな映像を表示できますが、ファイル容量も大きくなりやすくなります。

 

4K動画などは高精細ですが、ホームページ上で必ず4Kが必要とは限りません。

 

たとえば、ページ内に横幅500px程度で表示する動画に対して、非常に高い解像度の元データをそのまま読み込ませても、ユーザーが感じる画質の差は小さいことがあります。

 

その一方で、通信量だけは増えます。

 

スマートフォンでは画面自体が小さいため、必要以上に高い解像度で配信してもメリットを感じにくいケースがあります。

 

特にファーストビューに動画を配置している場合は注意が必要です。

 

ページを開いた直後から大容量の高解像度動画を読み込むと、最初に表示したいテキストや画像まで遅くなる可能性があります。

 

動画の用途や表示サイズを確認し、それに適した解像度へ調整しましょう。

 

ただし、単純に解像度を下げればよいわけではありません。

 

商品紹介や施工事例など、映像の細部が重要なコンテンツでは、画質を落としすぎると魅力が伝わらなくなることがあります。

 

必要な画質を残しながら、過剰な解像度を避けることがポイントです。

動画の埋め込み・ホスティング方法が適していない

動画ファイルそのものだけでなく、どのように配信しているかも表示速度へ影響します。

 

代表的な方法には、動画ファイルを自社のサーバーへ直接アップロードする方法と、YouTubeなどの外部動画配信サービスを利用する方法があります。

 

自社サーバーから動画を直接配信すると、ユーザーがページへアクセスするたびにサーバーから動画データを送る必要があります。

 

容量が大きい動画やアクセス数が多いページでは、サーバーへの負荷が大きくなる可能性があります。

 

一般的なレンタルサーバーでは、大容量動画の配信を前提としていないケースもあります。

 

そのため、サーバー性能によってはページ全体の表示に影響することがあります。

 

一方、YouTubeなどの外部サービスを利用すれば、動画ファイル自体は外部サービス側から配信されます。

 

自社サーバーから大容量の動画ファイルを直接配信する必要はありません。

 

ただし、外部サービスを使えば必ずページが軽くなるわけではありません。

 

動画プレーヤーを表示するために、iframeやJavaScriptなどの追加データを読み込むからです。

 

1ページに複数の動画プレーヤーを埋め込んでいる場合は、その負荷が積み重なることもあります。

 

動画が重いと感じた場合は、ファイルサイズだけを見るのではなく、現在どの方法で埋め込んでいるのかも確認する必要があります。

ホームページに埋め込む動画を軽くする方法

ホームページの動画が原因で表示速度が低下している場合、まず取り組みやすいのが動画ファイル自体の最適化です。

 

容量、解像度、配信方法を見直すだけでも改善することがあります。

 

対策の優先順位は、次のように考えると整理しやすいです。

• 動画ファイルを圧縮する
• 解像度をWeb表示に合わせる
• 自社サーバーへの直接配置を見直す
• 必要に応じて外部動画サービスを利用する
• 改善しきれない場合は遅延読み込みを検討する
• 再生時だけ動画を読み込む方法も検討する

 

一度にすべて変更する必要はありません。

 

まずは容量と解像度から確認し、それでも重い場合に埋め込み方法を見直すと進めやすくなります。

動画ファイルを圧縮する

大容量の動画を使用している場合は、最初に圧縮を検討しましょう。

 

動画圧縮とは、画質への影響を抑えながらファイル容量を小さくする処理です。

 

動画には、Webサイトでの表示には必要以上の情報が含まれていることがあります。

 

その部分を減らすことで、見た目を大きく変えずに容量を削減できる場合があります。

 

動画を書き出す際には、ビットレートの設定もファイル容量へ影響します。

 

ビットレートが高いほど多くの映像情報を保持できますが、容量も大きくなります。

 

逆に低くしすぎると、動きの激しい部分で映像が荒れたり、ブロック状のノイズが目立ったりすることがあります。

 

そのため、容量だけを最小化するのではなく、実際のホームページ上で確認しながら調整することが大切です。

 

圧縮前と圧縮後の動画を見比べて、ユーザーが気になるほど画質が落ちていないか確認しましょう。

 

トップページの背景動画などは、商品紹介動画ほど細部を見せる必要がないため、比較的圧縮しやすいケースがあります。

 

一方、商品そのものを詳しく確認してもらう動画では、ある程度の画質を残した方がよいでしょう。

 

動画ごとの目的に合わせて設定を変えるのがポイントです。

 

すでにホームページへ動画を掲載している場合でも、圧縮済みファイルへ差し替えることで改善できる可能性があります。

 

「動画を使うか、使わないか」の二択ではありません。

 

まずは容量を最適化できないか確認してみましょう。

動画の解像度や容量を最適化する

動画圧縮と合わせて確認したいのが解像度です。

 

動画を高画質で撮影していても、ホームページに掲載するときはWeb表示に適したサイズへ変更できます。

 

とはいえ、サイト上では小さく表示されている動画ですが、元は4Kのままです。ケースがあります

 

この場合、ユーザーが実際に見るサイズ以上のデータを読み取っている可能性があります。

 

表示サイズに対して適切な解像度へ変更すれば、容量を抑えられます。

 

スマートフォンからの閲覧も考慮しましょう。

 

パソコンでは大きいですが、動画でも、スマートフォンでは画面幅を狭くすることができます

 

すべての端末へ同じ巨大な動画ファイルを読み込める必要があるのか​​を検討します。

 

動画に不要な前後部分が残っている場合は、削減するだけでも容量を考慮します。

 

特に背景動画では、長時間の映像を掲載する必要がないケースが多いです。

 

数秒程度の映像を繰り返し表示するだけでも、十分に雰囲気を伝えられる場合があります。

 

ビットレート、セグメントの調整、サイト上での適切な品質の実現

外部の動画配信を行う

自社サーバーへ動画を直接アップロードしている場合は、外部の動画配信サービスへの事前の方法もあります。

 

代表的なのがYouTubeなどの動画サービスです。

 

外部サービスを利用する場合、動画データそのものを自社サーバーから配信する必要はありません。

 

アクセス数が増えた場合でも、大容量動画の通信処理をすべて自社サーバーで受ける必要はありません。

 

動画配信に適した環境が利用できるポイントも特典です。

 

ただし、YouTubeなどを考慮して、動画による負荷が完全になくなるわけではありません。

 

表示のために外部要素を読み込みます

 

そのため、ページ内に動画を何本も設置している場合は、外部サービスを利用していても重くなる可能性があります。

 

直接動画を配信している場合は、外部サービスへの切り替えを検討する。

 

すでに外部サービスを利用している場合は、次に読み込みタイミングを見直します。

 

このように、現状の埋め込み方法に合わせて対策を選ぶことが重要です。

 

外部動画サービスには、サービス関連のロゴや関連動画、広告などの仕様があります

 

サイトのデザインや用途に合うかも含めて判断しましょう。

動画をクリックするまで読み込まない方法も有効

動画ファイルを圧縮してもホームページが重い場合は、動画プレイヤーを読み込むタイミングを考える方法があります。

 

ページをそのまま瞬間にすべての動画をそのままに

 

ユーザーが実際に動画を見るタイミングまで、一部の読み込みを遅くすることで初期表示を軽くできる可能性があります。

 

特にYouTubeなどの外部動画を複数検討しているページでは、検討しやすい方法です。

iframe を読み込む

YouTubeなどの外部動画は、iframeを使ってホームページへ埋め込むケースがあります。

 

通常の埋め込みでは、ページを開いた段階で動画プレイヤーに必要なデータの読み込みが起こります。

 

そこで利用できるのが遅延ダウンロードです。

 

遅延読み込みとは、ユーザーが最初に見る必要のないコンテンツを、必要になるまで読み込まない仕組みです。

 

画面の下にある動画を、ページを、さらに瞬間的に、さらにその位置へ近づいたため、読み込む方法が存在します

 

初期表示で必要な通信を省略するために、ページ上部の要素を優先します

 

以前の記事の後半にYouTube動画を3本掲載している場合、ユーザーがまだ最初の文章を読んでいる段階ですべてのプレイヤーを読み込む必要はありません。

 

必要になったので読み込んでいますが、最初に表示を反映させることができます

 

ただし、すべての動画を遅延読み込みすればよいわけではありません。

 

ページを開いたすぐに表示される重要な動画の場合、読み込みが遅れることで逆にユーザー体験が大きくなる可能性があります。

 

動画がページ内のどこに配置されているかを見ながら判断しましょう。

サムネイルを先に表示して再生時だけ動画を読み込む

さらに読み込み負荷を抑えたい場合は、最初から動画プレーヤーを表示しない方法があります。

 

ページを開いた時点では、動画のサムネイル画像と再生ボタンだけを表示します。

 

ユーザーが再生ボタンをクリックしたタイミングで、YouTubeなどの動画プレーヤーへ切り替えます。

 

この方法なら、動画を見ないユーザーに対してプレイヤーの読み込みを行う必要はありません。

 

動画が複数のページでは特に効果を期待できます。

 

ちなみに、制作事例ページに10本の動画を掲載しております。

 

通常の埋め込みでは、それぞれの動画プレーヤーに関連する処理が発生します。

 

しかし、最初はサムネイル画像のみお待ちしておりますが、実際に再生された動画だけを読み込めます。

 

サムネイル画像は動画プレーヤーよりも軽いため、初期表示の負荷を抑えやすくなります。

 

見た目も一般的な動画プレーヤーに最適なことが可能です。

 

再生ボタンを画像の中央に置いたら、ユーザーも動画を考えていることになります

 

ただし、サムネイル画像特有が大容量では意味がありません。

 

画像もウェブページ上の要素を圧縮し、サイズを調整します

 

また、クリック後に動画が表示されるまで不自然に時間がかかるかも確認します。

 

ユーザーが操作した後の動きまで考慮して最適化することが重要です。

 

動画をすぐに読み取れない方法は、「動画を消したくないがページは軽くしたい」という場合に有効です。

 

動画の圧縮のみ改善できないため、読み込み方法を実装します

まとめ｜ホームページの動画が簡単に容量と方法を見る直そう

ホームページに埋め込み動画が重い場合は、まずは動画ファイルの容量、解像度、埋め込み方法を確認しましょう。

 

編集後の大容量動画をそのまま掲載していたり​​、表示サイズに対して解像度が高すぎたりすると、必要以上のデータを読み込んでいる可能性があります。

 

動画を圧縮し、実際の表示環境に合った解像度へ調整することで、視聴をしながら容量を削減できる場合があります。

 

自社サーバーから直接動画を配信している場合は、YouTubeなど外部の動画配信サービスを利用する方法もあります。

 

、外部に展開する場合でも展開を加速することは可能です

 

圧縮だけで改善しない場合は、iframeの遅延読み込みや、サムネイルを先に表示してクリック後にプレイヤーを読み込む方法も検討しましょう。

 

動画を掲載することと、ホームページの表示速度を両立させることは可能です。

 

動画をすぐに削除するのではなく、容量と読み込み方法の両方から原因を確認し、必要な対策を選ぶことが大切です。