何が問題だったのか？
前回の記事で「モバイルとPCで読んでいた場所がズレる問題」を解決しました。
しかし、次に立ちはだかったのは、ページの“速さ”を測る指標、LCP（Largest Contentful Paint）です。
LCPという言葉を初めて聞く方もいるかもしれませんが、簡単にいうと「ページを開いたときに、一番大きな要素が表示されるまでの時間」です。
この時間が長いと、せっかくデザインが良くても「重たいサイトだな…」という印象になり、ユーザーは離脱してしまいます。
私たちのwebマニュアルは、写真やアニメーションなど、ビジュアル面にこだわったデザインを取り入れています。
ところが、そのこだわりが裏目に出てしまいました。
ページを開くときに、
- デザインや動きを作るCSSやJavaScriptが大量に動く
- 大きな画像を読み込む
- さらに、コンテンツをまとめたデータを読み込んでから表示
…という仕組みになっており、どうしても表示まで時間がかかっていました。
実際に計測すると、LCPは4.18秒。
Googleが推奨する「2.5秒以内」を大きくオーバーしていたのです。
どうやって改善したの？
ここでやったことは、とてもシンプルです。
「ユーザーが最初に目にする部分を、とにかく早く表示する」という考え方に切り替えました。
例えば…
- 最初に見える部分のデザインを最優先で読み込む
- 大きな画像は軽量化し、読み込みを早める
- アニメーションはページが出た後に動かす
さらに、画像には「優先して読み込んで！」という指示を加えたり、CSSとJavaScriptの読み込み順も見直しました。
細かなことですが、こうした調整の積み重ねが、最終的な体験を左右します。
結果は…
改善前：4.18秒 → 改善後：0.35秒
まるで別サイトのように「パッ」と表示されるようになり、Googleの評価も“不良” → “優良”に変わりました。
数字だけでなく、実際に開いてみると、その違いは一目瞭然です。
なぜこんなにこだわるのか？
Webマニュアルに訪れる方は、情報を探しています。
だからこそ、表に見えないこうした工夫こそが、ユーザー体験の本質だと考えています。
次回予告
「どうやって0.35秒まで改善できたの？」
次回は、実際に行った工夫を、もう少し具体的にご紹介します。
この記事は、採用サイトのUI・UX設計に携わる制作チームによって書かれています。
実際に私たちが開発・運用している採用サイトでは、
細部にこだわった設計を数多く取り入れています。
もしご興味があれば、以下からデモサイトをご覧いただけます。