パフォーマンス最適化

概要

フロントエンド、バックエンド、データベース、モバイル全体のパフォーマンス最適化を包括的に支援するスキルです。

実行フロー

Step 1: 現状測定とベースライン確立

計測対象

• フロントエンド: LCP、FID、CLS、FCP、TTI
• バックエンド: API応答時間（p50, p95, p99）
• データベース: クエリ実行時間、スロークエリ
• モバイル: 起動時間、フレームレート、メモリ使用量

Step 2: ボトルネック特定

プロファイリング

• CPU使用率: ホットパス特定
• メモリ: アロケーションパターン、リーク検出
• ネットワーク: ウォーターフォール分析
• I/O: DB クエリ、ディスク読み書き

Step 3: 最適化戦略

クイックウィン（数時間）

• 圧縮の有効化（gzip/brotli）
• インデックスの追加
• 基本的なキャッシュ
• 画像最適化（WebP）

中期的改善（数日）

• コード分割
• CDNの導入
• 遅延ロード実装

大規模改善（数週間）

• データフロー再設計
• 読み取りレプリカ追加

Step 4: プラットフォーム別最適化

フロントエンド

• クリティカルレンダリングパス最適化
• バンドル最適化（Tree Shaking、コード分割）
• 画像最適化（WebP、srcset、lazy）
• キャッシュ戦略（Service Worker）

バックエンド

• N+1問題の解消
• Redis/Memcachedキャッシュ
• 非同期処理、バックグラウンドジョブ
• APIペイロード最適化

データベース

• インデックス戦略（カバーリング、複合）
• 実行計画分析（EXPLAIN）
• コネクションプール設定

モバイル

• 過剰な再レンダリング削減
• バンドルサイズ最小化
• オフラインファースト

パフォーマンス目標

Web Vitals

バックエンド

• API応答: p95 < 200ms
• DBクエリ: p95 < 50ms
• CPU使用: < 70%

出力成果物

1. ベンチマークレポート: 現状と目標値
2. ボトルネック一覧: 優先度付き改善項目
3. 最適化提案: クイックウィン/中期/長期
4. パフォーマンスバジェット: リソース制限値

ベストプラクティス

1. 計測第一: データに基づいて最適化
2. ボトルネックに集中: 80/20の法則
3. 段階的改善: 1つずつ変更、効果を測定
4. ユーザー中心: 体感パフォーマンス重視
5. バランス: 開発速度とのトレードオフ

関連ファイル

• CHECKLIST.md - 最適化チェックリスト
• BENCHMARKS.md - ベンチマーク手法