なぜWebパフォーマンスが重要なのか
Webパフォーマンスはユーザー体験・SEO・ビジネス成果に直接影響します。Googleの調査によると、ページの読み込み速度が1秒遅くなるごとにコンバージョン率が7%低下するという結果があります。また、2021年からGoogleはCore Web VitalsをSEOの検索順位の重要な指標として採用しており、パフォーマンスがSEOに直結しています。
本記事では、現代のWebアプリケーション（特にNext.jsで構築されたサイト）のパフォーマンスを改善するための実践的な手法を解説します。
Core Web Vitalsの理解と計測
Googleが定義するCore Web Vitalsの3指標を理解することがパフォーマンス改善の出発点です。
LCP（Largest Contentful Paint）：最大コンテンツ描画
ページの主要コンテンツ（ヒーロー画像・見出し等）が表示されるまでの時間。目標：2.5秒以内。改善方法：画像の最適化・サーバーレスポンス時間短縮・レンダリングブロックリソースの削除。
CLS（Cumulative Layout Shift）：累積レイアウトシフト
ページ読み込み後の予期しないレイアウト変動量。目標：0.1未満。改善方法：画像・広告に幅・高さを明示、フォントの変化によるシフトを防ぐ（font-display: optional等）。
INP（Interaction to Next Paint）：インタラクション応答性
ユーザーの操作（クリック・タップ等）に対するUIの応答速度。目標：200ms以内。改善方法：JavaScriptの実行時間削減・長いタスクの分割（Scheduler API）・仮想化（Virtual Scrolling）。
計測ツール：Chrome DevTools（Performanceタブ・Lighthouseタブ）・PageSpeed Insights・web-vitalsライブラリ（リアルユーザーモニタリング）・Vercel Analytics
画像最適化｜LCP改善の最重要施策
画像はWebページの最大のパフォーマンスボトルネックです。Next.jsのnext/imageを使った最適化方法を解説します。
next/imageの最適化機能：
・WebP・AVIF形式への自動変換（ファイルサイズ大幅削減）
・レスポンシブサイズの自動生成（sizes属性）
・遅延読み込み（デフォルトで有効）
・fetchpriority="high"でLCPの主要画像を優先読み込み
LCP画像の最適化ポイント：
①ヒーロー画像はpriority={true}を設定して優先的に読み込む
②srcSet・sizesを正しく設定してデバイスに最適なサイズを提供
③Next.jsのremotePatterns設定で外部ドメインの画像も最適化
JavaScriptバンドルの最適化
JavaScriptのバンドルサイズはTTI（インタラクティブになるまでの時間）とINPに大きく影響します。
動的インポート（Code Splitting）：
モーダル・タブコンテンツなど初期表示に不要なコンポーネントはdynamic importで遅延読み込みします。
const HeavyComponent = dynamic(() => import('./HeavyComponent'), { loading: () => <Spinner /> });
サードパーティスクリプトの最適化：
next/scriptのstrategy属性を使ってGoogleAnalytics・チャットツールなどのサードパーティスクリプトの読み込みタイミングを制御します。afterInteractiveまたはlazyOnloadを使うことで、初期表示への影響を最小化できます。
キャッシュ戦略・CDN活用
適切なキャッシュ設定でサーバー負荷を下げ、ユーザーへのレスポンスを高速化します。
Next.jsのキャッシュ戦略：
・Static Assets（画像・CSS・JS）：長期キャッシュ（Cache-Control: max-age=31536000, immutable）
・ISRページ：stale-while-revalidate戦略
・APIレスポンス：fetch キャッシュオプション（revalidate・no-store）
CDNの活用：
VercelはエッジCDNを標準搭載しています。世界中のエッジノードからコンテンツを配信することで、地理的に遠いユーザーへのレイテンシを大幅に削減できます。CloudflareをVercelの前段に置く構成も有効です。