affaan-m--everything-claude-code/docs/ja-JP/rules/web/performance.md

このファイルは common/performance.md を Web 固有のパフォーマンスコンテンツで拡張します。

Web パフォーマンスルール

Core Web Vitals 目標

メトリクス	目標
LCP	< 2.5秒
INP	< 200ms
CLS	< 0.1
FCP	< 1.5秒
TBT	< 200ms

バンドルバジェット

ページタイプ	JS バジェット（gzip 圧縮後）	CSS バジェット
ランディングページ	< 150kb	< 30kb
アプリページ	< 300kb	< 50kb
マイクロサイト	< 80kb	< 15kb

ローディング戦略

1. 正当な場合、クリティカルなアバブ・ザ・フォールド CSS をインライン化する
2. ヒーロー画像とプライマリフォントのみをプリロードする
3. 非クリティカルな CSS や JS を遅延読み込みする
4. 重いライブラリを動的インポートする

const gsapModule = await import('gsap');
const { ScrollTrigger } = await import('gsap/ScrollTrigger');

画像最適化

• 明示的な width と height
• ヒーローメディアのみに loading="eager" と fetchpriority="high"
• ビロウ・ザ・フォールドのアセットには loading="lazy"
• フォールバック付きで AVIF または WebP を優先する
• レンダリングサイズを大幅に超えるソース画像を配信しない

フォント読み込み

• 明確な例外がない限り、フォントファミリーは最大2つ
• font-display: swap
• 可能な場合はサブセット化する
• 本当にクリティカルなウェイト/スタイルのみをプリロードする

アニメーションパフォーマンス

• コンポジタフレンドリーなプロパティのみをアニメーションする
• will-change は狭い範囲で使用し、完了時に削除する
• シンプルなトランジションには CSS を優先する
• JS モーションには requestAnimationFrame または確立されたアニメーションライブラリを使用する
• スクロールハンドラの乱発を避ける。IntersectionObserver または行儀の良いライブラリを使用する

パフォーマンスチェックリスト

• すべての画像に明示的なサイズがある
• 意図しないレンダーブロッキングリソースがない
• 動的コンテンツによるレイアウトシフトがない
• モーションがコンポジタフレンドリーなプロパティにとどまっている
• サードパーティスクリプトが async/defer で読み込まれ、必要な場合のみ使用されている