2024 年中途入社の福原です。
私の所属しているグループでは、毎週チーム全員で時間を設けて、メインとなるページのサイトパフォーマンスを監視・改善する活動を行っています。
今回はその活動の一環で、新築分譲戸建の物件詳細ページのLCPについて、改善を行った結果を共有します。
LCP は、ビューポート内に表示される最大の画像、テキスト ブロック、または動画のレンダリング時間
課題特定
まずは Chrome の Lighthouse を使って計測し、数値の劣化原因を探りました。
指摘の中で最も影響が大きそうだったのは「適切なサイズの画像を使用していない」という点でした。
今回のページでは、カルーセル内に比較的大きい画像とサムネイル用の小さい画像を表示しています。
適切な画像サイズに修正することで、大きな効果が得られると考えました。
改善内容
適切な画像サイズの指定
LIFULL HOME'S には画像を適切なサイズに圧縮したり、WebP 形式に自動変換するしくみがありますが、 今回の対象ページでは使用されていませんでした。
修正内容としては変数名の変更だけでしたが、それぞれに適切なサイズの画像を読み込むようになりました。
preload の削減
LCP の改善策として頻出する「preload」ですが、カルーセル内のすべての画像を優先的に読み込んでいたため、逆にページの初期表示が遅くなるケースがありました。
preload は 要素の rel 属性の値で、その HTML の
の中で読み取りリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み取りを始めたい、すぐに必要なリソースを指定することができます。
物件によっては 30 ～ 40 枚という大量の画像が表示されることもあるため、 優先して読み込むのは LCP の対象となる画像のみに絞ることにしました。
結果
今回の対応により、LCP が約 42%改善しました。
データ可視化ツールの Grafana で LCP を確認すると、ガクッと下がっていることがわかります
実際の画面を見ても画像の表示が速くなったと体感できるレベルでした。
まとめ
今回紹介した事例は、すでに提供されていた画像最適化に合わせたことが大きな改善要因のため、負債解消の意味合いが強いと感じています。
サイトパフォーマンスの改善はまだまだ継続していく予定のため、 次回は再現性のある事例を紹介できるよう、日々の業務に努めてまいります。
LIFULL ではともに成長できるような仲間を募っています。 よろしければこちらのページもご覧ください。
