Next.js で LCP を改善した過程

問題と背景

メインランディングの LCP が 3.8 秒と計測された。largest-contentful-paint 指標を基準にボトルネックを追跡した。

解決の過程

ヒーロー画像に priority を付与し、フォントの preload を整理した。critical-rendering-path の観点からレンダーブロッキングリソースを減らした。

結果

LCP が 2.1 秒まで改善された。

学んだ点

リソースの優先度が体感パフォーマンスに大きな影響を与える。