Webパフォーマンス とは？

Googleが定義したWebページのユーザー体験指標で、3つの数値からなる。①LCP（Largest Contentful Paint）：メインコンテンツの表示完了時間（2.5秒以内が良好）、②INP（Interaction to Next Paint）：ユーザー操作への応答速度（200ms以内が良好）、③CLS（Cumulative Layout Shift）：レイアウトのズレ（0.1以内が良好）。2024年からINPがFIDに代わったよ

効果が大きい順に、①画像の最適化（WebP/AVIF形式、適切なサイズ、lazy loading）、②不要なJavaScriptの削除とコード分割、③CDNの活用、④ブラウザキャッシュの設定、⑤フォントの最適化（display: swap、サブセット化）。まずLighthouseでスコアを測定して、低いスコアの項目から攻めようね

「ページの総重量は400KB以内」「LCPは2秒以内」のように、パフォーマンスに上限を設定すること。CIに組み込んで、バジェットを超えたらビルドを失敗させる。lighthouseciやbundlesizeなどのツールで自動チェック。バジェットなしだと「気づいたら3MBのページ」になりがちだから、最初に設定しておくのが大事だよ

SSG（静的生成）が最速。ビルド時にHTMLを生成するからCDNで配信できる。ブログや用語集に最適。SSR（サーバーレンダリング）はリクエスト時にHTMLを生成。ユーザーごとに異なるコンテンツに向く。CSR（クライアントレンダリング）は初回表示が遅いがインタラクション後は高速。ISR（増分的静的再生成）はSSGとSSRの良いとこ取りだよ