optimizing-performance
Web/モバイル/バックエンド全体のパフォーマンス最適化を支援します。Core Web Vitals 改善、データベースクエリ最適化、インフラリソース最適化を提供します。パフォーマンス改善、ページ速度向上が必要な場合に使用してください。
When & Why to Use This Skill
This Claude skill provides a comprehensive framework for full-stack performance optimization across web, mobile, and backend environments. It enables developers to systematically measure Core Web Vitals, identify database bottlenecks, and implement infrastructure-level improvements. By focusing on both technical metrics and user-centric performance, it helps teams enhance page speed, improve SEO rankings, and ensure system scalability.
Use Cases
- Core Web Vitals Optimization: Diagnose and fix LCP, FID, and CLS issues to improve Google Search rankings and user retention.
- Database Performance Tuning: Analyze slow queries and execution plans to implement effective indexing, caching, and connection pooling strategies.
- Backend Latency Reduction: Identify and resolve N+1 query problems and optimize API payloads to achieve p95 response times under 200ms.
- Mobile App Fluidity: Minimize bundle sizes and reduce excessive re-rendering to improve app startup times and memory efficiency.
- Infrastructure Resource Management: Optimize CPU and I/O usage to reduce operational costs while maintaining high availability during traffic spikes.
| name | optimizing-performance |
|---|---|
| description | Web/モバイル/バックエンド全体のパフォーマンス最適化を支援します。Core Web Vitals 改善、データベースクエリ最適化、インフラリソース最適化を提供します。パフォーマンス改善、ページ速度向上が必要な場合に使用してください。 |
パフォーマンス最適化
概要
フロントエンド、バックエンド、データベース、モバイル全体のパフォーマンス最適化を包括的に支援するスキルです。
実行フロー
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
| メトリクス | Good | Poor |
|---|---|---|
| LCP | <2.5s | >4s |
| FID | <100ms | >300ms |
| CLS | <0.1 | >0.25 |
バックエンド
- API応答: p95 < 200ms
- DBクエリ: p95 < 50ms
- CPU使用: < 70%
出力成果物
- ベンチマークレポート: 現状と目標値
- ボトルネック一覧: 優先度付き改善項目
- 最適化提案: クイックウィン/中期/長期
- パフォーマンスバジェット: リソース制限値
ベストプラクティス
- 計測第一: データに基づいて最適化
- ボトルネックに集中: 80/20の法則
- 段階的改善: 1つずつ変更、効果を測定
- ユーザー中心: 体感パフォーマンス重視
- バランス: 開発速度とのトレードオフ
関連ファイル
- CHECKLIST.md - 最適化チェックリスト
- BENCHMARKS.md - ベンチマーク手法