LCPを1秒切るためにやった7つのこと

クリームソーダ屋さんのECサイトで、LCP(Largest Contentful Paint)を 2.8秒 → 0.9秒 まで改善した記録です。特別なことはしていません。地味なことを7つ、丁寧にやっただけです。

1. ヒーロー画像を AVIF にして幅ごとに出し分ける

いちばん効きました。JPEG 480KB → AVIF 62KB。<picture> と srcset で端末幅に合わせて配信します。

2. フォントは font-display: swap + サブセット化

日本語フォントは重いので、使う文字だけに絞ったサブセットを用意。テキストが遅れて出る問題は swap で回避。

3. Above the fold のCSSをインライン化

初期表示に必要な最小限のCSSだけを HTML に埋め込み、残りは非同期で読み込みます。

4. サードパーティスクリプトを defer または遅延実行

解析タグ・チャットウィジェットは、ユーザー操作か3秒後に読み込むようにしました。

5. 画像に width / height を必ず付ける

CLS 対策ですが、レイアウト計算が減って LCP にも効きます。

6. CDN のエッジキャッシュを効かせる

商品ページは ISR で生成し、エッジで配信。オリジンまで取りに行くのは在庫APIだけに。

7. 計測を自動化する

Lighthouse CI を PR ごとに走らせ、スコアが下がったらマージできないように。改善は「維持」してこそです。

速いサイトは、それだけで「ちゃんとしてる」と感じてもらえます。炭酸と同じで、抜けないうちに届けるのが大事。