前回のおさらい
前回では「LCP（Largest Contentful Paint）の重要性」と「改善で得られる効果」についてお話ししました。
今回は、実際にLCPを4.18秒から0.35秒まで短縮した具体的な方法をご紹介します。
LCP改善のカギは3つ
ページの速さを決める要素は、大きく分けて次の3つです。
- 1. 表示の優先度をコントロールすること
- 2. 画像を最適化すること
- 3. アニメーションのタイミングを工夫すること
この3つを徹底的に見直すことで、体感スピードは驚くほど変わります。
実際にやった3つの工夫
1. 重要な部分を最優先で読み込む
ページを開いた瞬間に見える要素（いわゆる“ファーストビュー”）を最初に読み込むよう調整しました。
具体的には、ヘッダーやタイトルのスタイルを含むクリティカルCSSをインライン化し、ブラウザがすぐに描画できる状態を作ります。
さらに、画像やフォントは<link rel="preload">で優先的に読み込む設定を追加。これにより「必要なものから順番に表示される」仕組みを実現しました。
2. 大きな画像の軽量化と読み込み指示
LCPの対象になりやすいのが、ページ上部にある大きな画像です。
ここはWebP形式への変換で容量を削減し、表示の負担を軽くしました。さらに、ブラウザに「この画像は最優先で読み込んで」と伝えるため、fetchpriority="high"を追加。
ほんの数百ミリ秒の差ですが、この積み重ねが大きな違いを生みます。
3. アニメーションは後から実行
デザイン演出のために使っているアニメーション（JavaScriptやGSAP）は、ページ表示のスピードを妨げる原因にもなります。
そこで、表示後にアニメーションを開始するよう制御を変更。ユーザーが「ページが出るまで待つ」ことを防ぎ、見た目と速さの両立を実現しました。
改善の結果
改善前：4.18秒 → 改善後：0.35秒
数字だけでなく、体感スピードは「待つ」から「パッと表示」へ大きく変わりました。
なぜここまでやるのか？
ユーザーは情報をすぐに求めています。ほんの数秒の違いで「読む気がなくなる」こともあります。
だからこそ、見えない裏側でこうした工夫を積み重ねることが、応募者にストレスを与えない採用サイトやWebマニュアルを実現するポイントなのです。
この記事は、採用サイトのUI・UX設計に携わる制作チームによって書かれています。
実際に私たちが開発・運用している採用サイトでは、
細部にこだわった設計を数多く取り入れています。
もしご興味があれば、以下からデモサイトをご覧いただけます。