なぜ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 | 最大コンテンツ描画 | 2.5秒以内 | 画像最適化・サーバーレスポンス短縮・レンダリングブロック削除 |
| CLS | 累積レイアウトシフト | 0.1未満 | 画像・広告に幅高さ明示、font-display: optional |
| INP | インタラクション応答性 | 200ms以内 | JS実行時間削減・タスク分割・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活用
適切なキャッシュ設定でサーバー負荷を下げ、ユーザーへのレスポンスを高速化します。
| 対象 | キャッシュ戦略 |
|---|---|
| Static Assets | 長期キャッシュ（Cache-Control: max-age=31536000, immutable） |
| ISR ページ | stale-while-revalidate（revalidate 秒数指定） |
| API レスポンス | fetch のキャッシュオプション（revalidate / no-store） |
CDNの活用：
VercelはエッジCDNを標準搭載しています。世界中のエッジノードからコンテンツを配信することで、地理的に遠いユーザーへのレイテンシを大幅に削減できます。CloudflareをVercelの前段に置く構成も有効です。
