【実録】動画を使った採用LPを、スマホで高速表示する技術

「採用サイトには、職場の雰囲気が伝わる動画を使いたい」
そう考える企業様は多いですが、実はそこには大きな落とし穴があります。

動画を入れた途端、サイトが重くなり、スマホでの表示が遅くなる。
結果として、せっかくアクセスしてくれた求職者が、中身を見る前に離脱してしまうのです。

今回は、先日公開した「堀田建設株式会社様」の採用LPで実際に起きた「表示速度の大幅低下」と、そこから「劇的に改善」させるために行ったプロの施策を公開します。

衝撃の事実：動画を入れただけで激遅に

今回のLPでは、ファーストビュー（一番最初に開く画面）に、現場の臨場感を伝えるための動画背景を採用しました。

PCで見ると非常に没入感があり、ブランドイメージを高める効果があります。
しかし、そのままの状態でGoogleのスピードテスト（PageSpeed Insights）を行った結果がこちらです。

これはいけません。
一般的に、スマホでの読み込みに3秒以上かかると、半数以上のユーザーが離脱すると言われています。
原因は明らかでした。「スマホでも裏側で重たい動画ファイルを読み込もうとしていた」からです。

市販のホームページ作成ツールや、一般的なWordPressテンプレートでは、
「動画を貼る」という機能はあっても、「スマホのときだけ動画の通信を完全に遮断する」といった高度な制御まではできないことがほとんどです。

その結果、「見た目はいいけど、遅すぎて誰も見ないサイト」が完成してしまいます。

そこで今回、私たちが実装したのが「ハイブリッド読み込み」という技術です。

単に「隠す（display: none）」だけでは、ブラウザは裏で動画をダウンロードしてしまいます。
今回は「Critical CSS」という技術を使い、「スマホなら、そもそも動画の存在をブラウザに教えない」レベルでの制御を行いました。

この施策を適用した直後の再計測結果がこちらです。

スマホでのページ表示が、体感的に劇的に速くなりました。
重たい動画ファイル（1.5MB以上）の読み込みを完全に遮断したことで、スマホユーザーの離脱率を大幅に改善できます。

見た目のデザインや訴求力は一切落とさず、裏側の技術だけでこれだけの差が生まれます。
これが、私たちが提供する「Webとしくみをつくる」の品質です。

どんなに素晴らしい動画も、素晴らしいコピーも、
表示される前に画面を閉じられてしまっては、存在しないのと同じです。

特に採用ターゲットとなる若手層（Z世代）は、スマホでの閲覧がほぼ100%。
彼らの「1秒」を奪わないことこそが、エントリー数を増やす最初の一歩です。

「うちは動画を使ってるけど、大丈夫かな？」
「せっかく作ったサイト、もしかして重くないかな？」

もしそう思われたら、一度ご相談ください。
御社のサイトが「資産」として正しく機能しているか、診断させていただきます。

「見た目」だけでなく「中身」も強いサイトだけが、採用を成功させます。
LINEでURLを送っていただければ、簡易診断を行います。