「サービスの紹介動画をトップページに載せたいけれど、サイトが重くなるのが心配……」
動画は情報の伝達力が非常に高い一方で、Webサイトの表示速度を著しく低下させる原因にもなります。第7回で「画像の軽量化」について触れましたが、動画の扱いはさらに慎重に行う必要があります。今回は、速度を落とさずに動画を活用するための「ベストプラクティス」を解説します！
1. 基本は「YouTube」や「Vimeo」を介して埋め込む
最もやってはいけないのは、WordPressのサーバーに巨大なMP4ファイルを直接アップロードし、そのまま再生させることです。
- 理由： 自社サーバーに負荷がかかり、同時アクセスが増えると再生が止まったり、サイト全体が表示されなくなったりします。
- 解決策： YouTubeやVimeoにアップロードし、その「埋め込みコード」を利用しましょう。動画配信の負荷を外部サービスに肩代わりさせるのが、現代のWeb制作の鉄則です。
2. 「YouTubeの遅延読み込み」を徹底する
YouTubeを普通に埋め込むと、動画を再生していない状態でも裏側で大量のスクリプト（プログラム）が読み込まれ、サイトの初期表示が遅くなります。
- ファサード（偽の入り口）の使用： 動画の再生ボタンを押すまでは「ただの画像」を表示させておき、クリックした瞬間に初めて動画を読み込む仕組みです。
- WordPressでの対策： 「WP YouTube Lyte」などのプラグインを使うか、最新のブロックエディタの標準機能を活用して、遅延読み込みを有効にしましょう。
3. 背景動画（オートプレイ）を使う際の注意点
トップページなどの背景で動画を自動再生させる場合は、YouTubeではなく自社サーバーに置く方がスムーズな場合があります。その際は以下の設定を必ず守りましょう。
- 容量は「2MB以下」を目指す： 1分以上の長い動画は厳禁です。10〜15秒程度のループ動画にし、徹底的に圧縮しましょう。
- 音声は必ずカット（Muted）： 音声データが含まれるだけでファイルサイズが大きくなります。背景動画に音は不要です。
- スマホでは「静止画」に切り替える： モバイル回線で動画を強制的に読み込ませるのはユーザーに不親切です。スマホ表示の際は、軽量な「代替画像」に切り替える設定（ポスター画像設定）を強く推奨します。
4. 次世代形式「WebM」の活用
画像にWebP（ウェッピー）があるように、動画にもGoogleが開発した「WebM（ウェブエム）」という軽量な形式があります。MP4よりも高い圧縮率を誇るため、自社サーバーから配信する場合はWebM形式をメインに採用しましょう。
まとめ：動画の「重さ」を賢くコントロールしよう
動画は強力な武器ですが、ユーザーを「待たせる」原因になっては逆効果です。
- 基本はYouTubeなどの外部プラットフォームを利用する
- 初期表示を速くするために「遅延読み込み」を設定する
- 背景動画は徹底的に短く、軽く、音声を消す
- スマホユーザーには画像を表示する配慮を忘れない
快適な表示速度を保ちながら、動画の持つ「伝える力」を最大限に引き出しましょう！
株式会社ガイネット代表取締役 趣味は神社仏閣巡り 初めてホームページを作ったのは20年以上前。そこから2社ほどで修行し33歳でフリーランスに、色々あって今さら法人設立。WEBとデザインの何でも屋であり書家でありYouTuberです。
