ホームページに動画を埋め込むと、商品やサービスの魅力を写真や文章よりも分かりやすく伝えられます。一方で、埋め込み方によってはページの表示速度が落ち、ユーザーが動画を見る前にページを離れてしまうこともあります。
このページでは、ホームページに動画を埋め込む方法と、表示速度を落とさない動画の載せ方を紹介します。動画の容量や読み込むタイミング、置き場所など、動画を埋め込む前に知っておきたい内容をまとめているので、動画の掲載を検討している方は参考にしてください。あわせて、当社が行っている動画の表示速度対策も紹介します。
ホームページに動画を埋め込む方法
ホームページに動画を埋め込む方法は、大きく分けて自社サーバーに動画を置く方法と、動画配信サービスの動画を埋め込む方法の2つがあります。どちらで埋め込むかによって、表示速度への影響の出方も変わります。
自社サーバーに動画をアップロードして埋め込む
自社サーバーに動画をアップロードして埋め込む方法は、MP4などの動画ファイルをホームページのサーバーに置き、ページに直接表示させる方法です。
WordPressなら、メディアライブラリに動画をアップロードし、動画ブロックで選ぶだけでページに埋め込めます。広告や関連動画が表示されず、ファーストビューの背景動画のようにデザインに合わせた見せ方ができるのが特徴です。
表示速度への影響は、動画の容量と読み込むタイミングによって大きく変わります。容量の大きい動画を自動再生で置くと、ページを開いた時点で動画ファイルの読み込みが始まり、表示速度が落ちる原因になります。反対に、容量を抑えたうえで再生されるまで読み込まない設定にしておけば、ページを開いたときの負担はほとんどありません。
YouTubeなどの動画配信サービスの動画を埋め込む
YouTubeやVimeoなどの動画配信サービスの動画を埋め込む方法は、動画配信サービスに動画をアップロードし、その動画をホームページに表示させる方法です。
YouTubeなら動画の「共有」から「埋め込む」を選ぶと埋め込みコードが表示され、Vimeoなら動画の「共有」ボタンから埋め込みコードをコピーできます。どちらもそのコードをページのHTMLに貼り付けると動画が表示され、WordPressなら埋め込みブロックに動画のURLを貼り付けるだけで表示できます。
動画の配信は動画配信サービス側で行われるので、自社サーバーに負担がかからず、ユーザーの通信環境に合わせて画質も自動で調整されます。
一方で、埋め込んだ動画が再生されなくても、ページを開いた時点で動画配信サービスのプレーヤーが読み込まれるので、何も対策をしないと表示速度が落ちやすくなります。表示速度に影響するのはこのプレーヤーの読み込みで、アップロードした動画の容量ではありません。
YouTubeは再生後に関連動画が表示され、動画によっては広告が流れることもありますが、YouTubeやGoogleの検索結果にも動画が表示されるので、サイト以外からのアクセスも見込めます。Vimeoは広告が表示されないので、会社やサービスの紹介動画を落ち着いて見せたい場合に向いています。
当社では、ホームページに動画を埋め込むときは動画配信サービスの利用を推奨しています。表示速度を意識した載せ方をしていれば、これまで当社が制作したホームページで動画の埋め込みが問題になったことは基本的にありません。動画ファイルをサーバーに置かないので、サーバーの容量を圧迫しない点も便利です。
動画の埋め込みで表示速度を落とさない載せ方
ここでは、ホームページに動画を埋め込むときに表示速度を落とさないための載せ方を紹介します。実際に当社が行っている対策の方法は、次の当社が行う動画の表示速度対策で紹介します。
動画の容量を圧縮する
自社サーバーに動画を置く場合は、アップロードする前に動画の容量を圧縮しておくことが表示速度を落とさない基本です。スマートフォンやビデオカメラで撮影した動画は、そのままだと数百MBになることも珍しくありません。容量の大きい動画は読み込みに時間がかかり、特に通信環境が安定しないスマートフォンでは、動画が再生されるまで長く待たせることになります。
圧縮は、動画編集ソフトや動画の圧縮ツールで行います。ファイル形式は多くのブラウザで再生できるMP4にし、ホームページで見せる大きさに合わせて解像度を下げるだけでも容量は大きく減ります。背景動画のように音を使わない動画なら、音声を削除するとさらに軽くできます。
なお、YouTubeやVimeoなどの動画配信サービスに上げる動画は、アップロード後に動画配信サービス側で配信用の形式に変換されるので、事前に圧縮しても表示速度は変わりません。圧縮すると画質が落ちやすくなるので、元の画質のままアップロードするのが基本です。
画面に表示されるまで動画を読み込まない
ページの下のほうにある動画は、ユーザーがスクロールして画面に表示されるまで読み込まない設定にしておくと、ページを開いたときの表示速度を落とさずに済みます。ページを開いた時点ですべての動画を読み込むと、ユーザーがまだ見ていない動画のためにページの表示が遅くなります。
YouTubeやVimeoなどの動画配信サービスの動画は、埋め込みコードに loading=”lazy” という属性を付けるだけで設定でき、WordPressなら本文に埋め込んだ動画には基本的に自動で付きます。
ただし、ファーストビューにある動画はページを開いた時点で画面に表示されるので、この方法では表示速度を改善できません。
ファーストビューに容量の大きい動画を置かない
ファーストビューに置いた動画は、ページを開いた直後に読み込まれるので、読み込みを遅らせる方法が使えません。容量の大きい動画を置くと、ページの最初の表示そのものが遅くなり、ユーザーが内容を見る前に離れてしまう原因になります。
ファーストビューに動画を置く場合は、数秒から十数秒程度の短い動画を繰り返し再生する形にして、容量をできるだけ小さく抑えます。長い動画や画質を重視したい動画は、ファーストビューではなくページの下のほうに置き、再生ボタンが押されるまで読み込まない形にするほうが表示速度を落とさずに済みます。
また、動画が読み込まれるまでの間に表示する画像を設定しておくと、動画の読み込み中も画面が空白にならず、ユーザーを待たせている印象を減らせます。
再生ボタンが押されるまで動画を読み込まない
動画の場所にサムネイル画像と再生ボタンだけを表示しておき、ユーザーが再生ボタンを押したときに動画を読み込む方法です。動画を見ないユーザーには動画のデータを読み込ませないので、ページの表示速度への影響を最小限に抑えられます。
自社サーバーに置いた動画なら、動画のコードに preload=”none” とサムネイル画像を指定するだけで設定できます。YouTubeやVimeoなどの動画配信サービスの動画は、埋め込んだままでは再生前にプレーヤーが読み込まれるので、サムネイル画像に置き換えるコードを追加するか、プラグインの機能を使って対応します。
自動再生にする背景動画には使えませんが、会社紹介やサービス説明のように、ユーザーが自分で再生して見る動画にはこの方法が最も効果的です。
1ページに動画を埋め込みすぎない
1ページに埋め込む動画の数が増えるほど、読み込むデータも増えて表示速度は落ちやすくなります。特にYouTubeやVimeoなどの動画配信サービスの動画は、1本ごとにプレーヤーを読み込むので、何本も並べると対策をしていても重くなりがちです。
紹介したい動画が多い場合は、本当に見てほしい動画だけをページに埋め込み、ほかの動画はページを分けて掲載します。動画の一覧を作る場合は、サムネイル画像だけを並べてクリックで動画を表示する形にするか、YouTubeのチャンネルへリンクする形にすると、表示速度を落とさずにたくさんの動画を紹介できます。
当社が行う動画の表示速度対策
動画の表示速度を落とさないための基本的な対策は、上で紹介した載せ方になります。ここでは、それらの対策を当社がホームページ制作でどのように行っているかを紹介します。
WordPressならプラグインを実装する
WordPressで制作するホームページでは、動画の表示速度対策にプラグインを使います。たとえば、YouTubeやVimeoなどの動画を再生ボタンが押されるまでサムネイル画像に置き換えるプラグインを入れれば、コードを書かなくても表示速度の対策ができます。予算をかけずに始めたい場合は、まずプラグインで対応できるかを確認するのがおすすめです。
ただし、当社はプラグインの数をできるだけ増やさないことに力を入れています。プラグインが増えると、プラグイン自体の読み込みでページが重くなったり、プラグイン同士が干渉して不具合が起きたりする原因になります。動画の表示速度対策でも、本当に必要なプラグインだけを選んで導入しています。
プラグインで対応できない対策は当社が個別に行う
プラグインの数を絞ると、プラグインだけでは対応できない部分が出てきます。
当社では、そうした部分を独自のコードで補っています。たとえば、自社サーバーに置いた動画を画面に表示されたときに読み込ませる設定や、再生ボタンが押されるまで動画を読み込まない設定は、ホームページに合わせてコードを書いて対応します。
どこまでをプラグインで行い、どこからをコードで対応するかは、ホームページの制作方法や動画の使い方に合わせて判断しています。
また、動画の容量の圧縮はプラグインでは行えないので、アップロードする前に別で行っています。ホームページで見せる大きさに合わせて圧縮してから埋め込むことで、自社サーバーに置く動画でも表示速度を落とさずに掲載できます。
まとめ
ホームページに動画を埋め込むときは、どの方法で埋め込むかよりも、動画の容量と読み込むタイミングを意識することが表示速度を落とさないポイントです。
当社では、動画配信サービスの利用を基本にしながら、プラグインは必要なものだけに絞り、足りない部分は独自のコードで対策しています。ホームページ制作やリニューアルで動画を使いたい場合も、御社のホームページの制作方法や動画の使い方をヒアリングしたうえで、表示速度を落とさない載せ方をご提案します。
動画を使ったホームページ制作をお考えの際は、お気軽にご相談ください。
