フロントエンドのパフォーマンスは、ユーザー体験だけでなくSEOにも影響します。ここではNext.jsで効果の大きい改善策を優先度順に紹介します。

1. レンダリング戦略を使い分ける

静的な情報はSSG、パーソナライズはSSR/RSC、頻繁に変わらないページはISRで再生成。全ページをCSRで組むのは避けましょう。

2. 画像を最適化する

next/imageで自動リサイズ・遅延読み込み・WebP変換を行うだけで、LCPが大きく改善します。ヒーロー画像にはpriorityを付けます。

3. バンドルを削る

  • 重いライブラリは動的import（next/dynamic）で遅延読み込み
  • moment.js→date-fnsのように軽量な代替を選ぶ
  • @next/bundle-analyzerで肥大化の原因を可視化

4. 不要な再レンダリングを止める

useMemo/useCallbackは万能ではありませんが、リストや重い計算では効果的です。まずはReact DevTools Profilerでボトルネックを特定してから手を入れます。

計測なくして最適化なし

Lighthouseとreal user monitoringで数値を取り、推測ではなくデータに基づいて改善を回しましょう。