「動画を増やしたら、サイトが重くなった気がする」——公開前に“重さ”まで確認するために始めたこと

「採用ページに動画を増やしたら、なんだかサイトが重くなった気がする」

「見た目は問題ないのに、最初の表示が少し遅いと言われる」

「動画を入れたいけれど、ページの表示速度まで確認しきれていない」

Webサイトを運用している現場では、こうした声を聞くことがあります。

動画は、サービス紹介や採用ページ、施設紹介などでとても頼りになる表現です。写真やテキストだけでは伝わりにくい雰囲気を届けられますし、ページ全体の印象も良くなります。

一方で、動画を増やすほど、ページは重くなりやすくなります。

しかも厄介なのは、表示が崩れていない限り、その重さに気づきにくいことです。リンク切れや画像切れのように目で見てすぐ分かる問題ではないため、公開前チェックから漏れてしまうことがあります。

Chrome 148では、これまで画像やiframeに使われていた loading="lazy" が、<video> と <audio> にも使えるようになりました。動画や音声の読み込み、自動再生を、要素が画面に表示される直前まで後回しにできる機能です。

この機能を知って、私たちが改めて考えたのは、技術的な書き方そのものよりも、

「動画をたくさん載せたページの“重さ”を、公開前に誰が確認しているのか」

ということでした。

この記事では、動画を多く使うWebサイトで、公開前にどのような確認をするとよいのか。私たちがチェックリストや修正依頼の運用に組み込んだ手順を、自社ブログ向けに整理して紹介します。

なぜこの課題が起きるのか

動画を使ったページが重くなる理由は、単に「動画ファイルが大きいから」だけではありません。

Webサイト運用の現場では、見た目の確認と表示速度の確認が別々に扱われやすいことも、課題を見落とす原因になります。

背景1：見た目が崩れていないと「問題なし」と判断されやすい

採用ページや施設紹介ページに動画を追加したとき、まず確認するのは見た目です。

動画が表示されているか。レイアウトが崩れていないか。リンクが切れていないか。スマートフォンでも見られるか。

これらはもちろん大切です。

ただ、動画の重さは、見た目のチェックだけでは拾いきれません。

ページとしてはきれいに表示されていても、開いた瞬間に複数の動画を読み込もうとしていれば、最初の一画面が表示されるまでに時間がかかることがあります。訪れた人にとっては、その数秒のもたつきが離脱のきっかけになることもあります。

つまり、「表示されている」と「軽く表示できている」は別物です。

この違いを、公開前チェックの段階で意識できるかどうかが重要になります。

背景2：下のほうにある動画まで最初に読み込んでしまう

動画をいくつも載せたページでは、まだ画面に見えていない動画まで、ページを開いた瞬間に読み込もうとすることがあります。

たとえば、ファーストビューには表示されていない動画。ページの中盤や下部にある動画。スクロールして初めて見る動画。

これらまで最初に読み込んでしまうと、ユーザーが最初に見る画面の表示に影響が出る可能性があります。

Chrome 148で <video> や <audio> にも loading="lazy" が使えるようになったことで、こうした動画や音声の読み込みを、表示直前まで後回しにしやすくなりました。

ただし、機能が使えるようになっただけでは、運用は変わりません。

大切なのは、「どの動画をすぐ読み込むべきか」「どの動画は後回しでよいか」を、公開前に確認する手順として持つことです。

解決するためのSTEP

私たちは、動画を使うページの公開前チェックに「重さ」を見る項目を加えました。

ここでは、Webサイト運用の現場で取り入れやすいように、3つのSTEPで整理します。

STEP 1：現状を可視化する

まず見るべきなのは、ページ内の動画や音声がどこにあり、どのタイミングで読み込まれているかです。

公開前チェックでは、少なくとも次のような観点を確認します。

• 最初の画面に表示される動画か
• スクロール後に表示される動画か
• 自動再生が本当に必要な動画か
• PCとスマートフォンの両方で、最初の表示が重くないか
• 動画以外に、画像切れやリンク切れなどの異常が起きていないか

特に大事なのは、最初の画面に映らない動画まで、最初に読み込もうとしていないかを確認することです。

この確認を毎回、人の記憶だけに頼ると抜け漏れが起きやすくなります。そこで私たちは、MONJI+のチェックリスト機能に、表示速度に関わる項目を追加しました。

たとえば、次のような項目です。

1. 最初の画面に映らない動画・音声に、遅延読み込み（loading="lazy"）を設定したか
2. すぐ見える位置の動画と、後回しでよい動画を分けたか
3. 自動再生が必要な動画と、そうでない動画を仕分けたか
4. PC・スマートフォンのそれぞれで、最初の表示の重さを確認したか

このようにチェック項目として明文化しておくと、担当者が変わっても同じ観点で確認しやすくなります。

STEP 2：月次運用として記録・一覧化する

重いページを見つけたら、その場で修正依頼に落とします。

「あとで軽くしよう」と思っても、日々の運用の中ではどうしても流れてしまいます。だからこそ、気づいたタイミングで、1件ずつ担当者と期日を付けて残すことが大切です。

私たちは、MONJI+上で重さに関する気づきを修正依頼として管理しています。

たとえば、

• このページの下部にある動画は遅延読み込みにしたい
• この動画は自動再生ではなくクリック再生でよさそう
• スマートフォン表示で最初の読み込みが重い
• 動画追加後に離脱の変化を確認したい

といった内容を、ページ単位で残していきます。

制作を委託先に任せている場合も、公開リンクで対応中の修正依頼だけを共有すれば、「このページのこの動画が重い」という課題を具体的に渡しやすくなります。

また、動画を使ったページでは、画像切れやリンク切れなども一緒に確認したいところです。私たちは、MONJI+のWebサイト異常検知機能を使い、見つかった異常を修正依頼に回す運用もしています。

動画の重さだけを単発で見るのではなく、Webサイト全体の運用チェックの中に組み込むことが、続けやすさにつながります。

STEP 3：数カ月分の実績をもとに交渉・提案する

修正して終わりにしないことも大切です。

動画の読み込みを見直したあと、私たちはGoogleアナリティクス連携で、そのページの離脱がどう変わったかを同じプロジェクト内から確認しています。

もちろん、離脱の変化は動画の重さだけで決まるものではありません。

ページ内容、流入経路、季節要因、ユーザーの目的など、さまざまな要素が関係します。だからこそ、「動画を軽くしたから必ず改善する」と断定するのではなく、修正した内容と数字の動きをセットで振り返るようにしています。

あわせて、どの動画を、いつ、何のために載せたのかはWikiに残します。

次にページを見直すとき、

• この動画は採用向けに必要だった
• この動画はサービス理解のために残した
• この動画は下部にあるので遅延読み込みにした
• この動画は今後差し替え候補にする

といった判断の履歴があると、次回の改善が進めやすくなります。

Webサイト運用では、「そのときの判断理由」が残っていないために、後から見直しづらくなることがよくあります。動画のように重さと見栄えのバランスが必要な要素ほど、判断の記録を残しておく意味があります。

実際に起きた変化

公開前チェックに「動画の読み込みを後回しにできているか」を加えたことで、私たちの中では確認の観点が変わりました。

以前は、動画を載せたページを見るときに、どうしても「表示されているか」「レイアウトが崩れていないか」が中心になっていました。

しかし今は、

• 最初に読み込む必要がある動画か
• 後から読み込んでもよい動画か
• 自動再生が必要か
• スマートフォンでも重くないか
• 修正後に数字の動きを確認できるか

まで見るようになっています。

また、重いと感じたページをその場で修正依頼にすることで、「気づいたけれど対応されない」状態を減らしやすくなりました。

動画を使うこと自体が悪いわけではありません。むしろ、伝えたい内容によっては動画が必要なページもあります。

大切なのは、動画を増やすときに、見栄えだけでなく表示の軽さも一緒に確認することです。

注意点・限界

一方で、仕組みを入れればすべて自動で解決するわけではありません。

表示の重さという事実は、チェックや計測によって見つけやすくなります。けれど、どの動画を残すのか、どこまで軽くするのかは、最終的には人が判断する必要があります。

たとえば、ページの目的によって判断は変わります。

採用ページであれば、職場の雰囲気を伝える動画が重要かもしれません。施設紹介ページであれば、文章よりも動画のほうが伝わりやすい場面もあります。一方で、下部にある補足的な動画であれば、遅延読み込みにしたり、表示方法を見直したりできるかもしれません。

ツールは、重さや異常を見つける手助けをしてくれます。

ただし、「この動画は残す」「これは後回しにする」「これは削る」という判断は、そのページで何を伝えたいのかを知っている人が握る必要があります。

私たちは、重さを見つける作業は仕組みに任せ、最後の判断は自分たちで行う、という線引きを大切にしています。

現場から生まれたWebサイト運用支援プラットフォーム【MONJI+】

ここまで紹介してきたように、動画を使うWebサイトでは、公開前のチェック項目を増やすだけでなく、見つけた課題を修正依頼にし、対応後の変化を確認し、判断の履歴を残すことが大切です。

こうしたWebサイト運用の現場で感じてきた課題を解決するために生まれたのが、Web運用プラットフォームMONJI+です。

MONJI+は、Webサイト運用に携わる「人」を1つの「チーム」にまとめ、Webサイト運用のあらゆるフェーズを横断して、課題を解決するプラットフォームです。

私たちは、最初から“完成されたプロダクト”を開発することを目指していません。

本当に向き合うべき課題はWebサイト運用の現場にあり、だからこそ私たちは、現場のリアルな声と向き合い続けてきました。

一つひとつの声を受け止めながら、小さな違和感を解消するアップデートを重ね、現場の課題から新たな機能も生まれてきました。

そうした積み重ねを経て、MONJI+は世界77ヶ国のユーザーさまに支えられる存在となりました。

▼MONJI+について、詳しくはこちらをご覧ください
https://monji.tech/ja/plus/

Webサイト運用の現場で働く人が、誇りを持って「この仕事が好きだ」と言える世界。

▼その実現のために、あなたの声をお待ちしております
https://monji.tech/ja/plus/co-creation/

まとめ

動画を増やしたページは、見た目が崩れていなくても、最初の表示が重くなっていることがあります。

Chrome 148で <video> と <audio> にも loading="lazy" が使えるようになったことで、最初の画面に表示されない動画や音声の読み込みを後回しにしやすくなりました。

ただし、機能を知っているだけでは、Webサイト運用は変わりません。

大切なのは、公開前チェックの中に「動画の重さを見る」項目を入れることです。

私たちは、チェックリストに表示速度に関わる確認項目を加え、重いページは修正依頼として残し、修正後はGoogleアナリティクス連携で数字の動きを確認するようにしています。さらに、どの動画をなぜ載せたのかをWikiに残すことで、次回の見直しにもつなげています。

動画は、Webサイトの表現力を高めてくれる大切な要素です。

だからこそ、「載せる」だけで終わらせず、「軽く見せられているか」「目的に合っているか」まで確認することが、これからのWebサイト運用ではより重要になると感じています。