なぜLighthouseスコアが重要なのか
Lighthouseスコアは単なる数字ではありません。Google検索順位に直接影響し、ユーザー離脱率とも密接な関係があります。
5つのコア最適化
1. next/imageで画像最適化
すべての画像をnext/imageコンポーネントに置き換えましょう。自動でWebP変換、遅延読み込み、レスポンシブサイズ調整を処理します。
2. フォント最適化
next/fontを使用するとフォントファイルをビルド時に最適化し、FOUT/FOIT問題を解決します。
3. 動的インポートでコードスプリッティング
初期ロードに不要なコンポーネントはnext/dynamicで遅延ロードします。
4. サーバーコンポーネント活用
Next.js App RouterのサーバーコンポーネントはクライアントにJavaScriptを送信しません。
5. ISRでキャッシング戦略
頻繁に変更されないページにはISRを適用します。
結果
この5つを適用すれば、ほとんどのNext.jsプロジェクトでLighthouse Performance 90+を達成できます。