Skip to content

パフォーマンス設計

初期表示の最適化

  • コード分割(Route-based Code Splitting): ポータル単位 + 画面単位
  • 画像の遅延読み込み(loading="lazy"
  • クリティカルCSSのインライン化

ランタイムパフォーマンス

  • 仮想スクロール(大量データ一覧: 従業員一覧等)
  • メモ化(React.memo, useMemo, useCallback
  • バンドルサイズの監視(CI/CDで自動計測、閾値超過時に警告)

パフォーマンスバジェット

指標閾値
初期ロードJS(gzip後)≤ 300KB
LCP≤ 1.5秒
INP≤ 200ms
CLS≤ 0.1

→ 満たす要件: PE-001 パフォーマンスQA-001 パフォーマンス監視