performance

パフォーマンス

このスキルでは、パフォーマンス分析、最適化、負荷テスト、ストレステスト、キャパシティプランニング、フレームワーク固有のパフォーマンスパターンなど、包括的なパフォーマンス機能を提供します。

このスキルを使うタイミング

• パフォーマンスのボトルネックを特定するとき
• メモリリークやメモリ使用量の増加を調査するとき
• 遅いデータベースクエリを最適化するとき
• フロントエンドのパフォーマンス（Core Web Vitals、バンドルサイズ）を分析するとき
• パフォーマンス監視を設定するとき
• デプロイ前にパフォーマンス監査を実施するとき
• 負荷テストのシナリオを作成するとき
• ストレス下でのパフォーマンスを分析するとき
• 負荷時のシステムのボトルネックを特定するとき
• キャパシティを計画するとき
• パフォーマンスのベンチマークを設定するとき
• React のレンダリングパフォーマンスを最適化するとき
• バンドルサイズを縮小するとき
• Core Web Vitals（LCP、FID、CLS）を改善するとき
• React アプリのメモリリークを修正するとき
• 高度な React パターンを実装するとき

このスキルでできること

1. パフォーマンスプロファイリング：CPU、メモリ、ネットワークのパフォーマンスを分析します
2. ボトルネックの特定：具体的なパフォーマンスの問題を特定します
3. メモリ分析：メモリリークやメモリ使用量の増加を検出します
4. データベースの最適化：遅いクエリや最適化の機会を特定します
5. フロントエンド分析：バンドルサイズ、レンダリングパフォーマンス、Core Web Vitals を分析します
6. 負荷テスト：負荷テストのシナリオを作成して実行します
7. ストレステスト：限界点と制約を特定します
8. キャパシティプランニング：スケーラビリティとキャパシティを分析します
9. React の最適化：React のレンダリング、バンドルサイズ、Core Web Vitals を最適化します
10. 監視の設定：パフォーマンスの監視とアラートを作成します

使い方

パフォーマンスを分析する

Analyze the performance of this application and identify bottlenecks

Profile the memory usage and find any leaks

負荷テストを作成する

Create load test scenarios for this API

Test performance under 1000 concurrent users

React アプリを最適化する

Optimize this React app for better performance

Analyze bundle size and reduce it

分析領域

アプリケーションのパフォーマンス

追跡する指標：

• 応答時間とレイテンシ
• スループット（1 秒あたりのリクエスト数）
• エラー率
• CPU 使用率
• メモリ使用パターン

よくある問題：

• 遅い API エンドポイント
• CPU 使用率の高さ
• メモリリーク
• 非効率なアルゴリズム
• ブロッキング処理

データベースのパフォーマンス

分析の焦点：

• 遅いクエリの特定
• インデックスの不足
• N+1 クエリの問題
• コネクションプールの枯渇
• ロック競合

ツール：

• クエリ実行計画（EXPLAIN ANALYZE）
• スロークエリログ
• データベース監視ツール
• コネクションプールの指標

フロントエンドのパフォーマンス

Core Web Vitals：

• Largest Contentful Paint（LCP） < 2.5s
• First Input Delay（FID） < 100ms
• Cumulative Layout Shift（CLS） < 0.1

バンドル分析：

• バンドルサイズの最適化
• コード分割の機会
• 未使用コードの削除
• アセットの最適化

React のパフォーマンス

レンダリングの最適化：

• コンポーネントのメモ化には React.memo を使用
• 負荷の高い計算のメモ化には useMemo を使用
• 関数のメモ化には useCallback を使用
• 長いリストには仮想化を使用
• コード分割と遅延読み込み

バンドルの最適化：

• ルートごとのコード分割
• コンポーネントの遅延読み込み
• ツリーシェイキングによる未使用コードの除去
• 動的インポート
• バンドル分析

パフォーマンステスト

負荷テスト

目的：想定される負荷の下でシステムをテストします
指標：応答時間、スループット、エラー率
ツール：k6、Artillery、JMeter、Locust

例（k6）：

import http from 'k6/http';
import { check } from 'k6';

export const options = {
  stages: [
    { duration: '2m', target: 100 }, // Ramp up
    { duration: '5m', target: 100 }, // Stay at 100
    { duration: '2m', target: 200 }, // Ramp up to 200
    { duration: '5m', target: 200 }, // Stay at 200
    { duration: '2m', target: 0 },   // Ramp down
  ],
};

export default function() {
  const res = http.get('https://api.example.com/users');
  check(res, {
    'status is 200': (r) => r.status === 200,
    'response time < 500ms': (r) => r.timings.duration < 500,
  });
}

ストレステスト

目的：限界点を見つけます
指標：最大容量、障害発生点
アプローチ：障害が発生するまで負荷を段階的に増やします

キャパシティプランニング

目的：必要なリソースを判断します
指標：リソース使用率、スケーリング要件
分析：現在のキャパシティと将来のニーズを比較します

分析プロセス

1. ベースラインを設定する

現在のパフォーマンスを測定する：

• 応答時間のパーセンタイル（p50、p90、p95、p99）
• スループット指標
• エラー率
• リソース使用率（CPU、メモリ、ネットワーク）

目標を設定する：

• 許容可能なパフォーマンスのしきい値を定義します
• SLA の目標を設定します
• 重要な経路を特定します

2. ボトルネックの特定

プロファイリング手法：

• CPU プロファイリングで処理時間の長い関数を特定する
• メモリプロファイリングでメモリリークを特定する
• ネットワーク分析で API 呼び出しを調べる
• データベースクエリを分析する

ボトルネックのパターン：

• 単一の遅い処理（アルゴリズムの計算量）
• 多数の小さな処理（N+1 クエリ）
• リソースの競合（ロック、接続プール）
• メモリリーク（徐々に増加）

3. 根本原因の分析

調査手順：

1. 遅い処理を特定する
2. パフォーマンスを測定する
3. 遅い原因を分析する
4. 最適化の機会を確認する
5. 修正によってパフォーマンスが向上することを検証する

4. 最適化の推奨事項の提示

推奨事項に含める内容：

• 具体的なコード変更
• 変更前後のパフォーマンス指標
• 実装手順
• 期待される効果
• リスク評価

例

例 1：API パフォーマンス分析

入力：API エンドポイント /api/users の処理が遅い

出力：

## Performance Analysis: /api/users

### Current Performance
- **Average Response Time**: 2.3s
- **P95 Response Time**: 4.1s
- **Throughput**: 45 req/s
- **Error Rate**: 2%

### Bottleneck Identified
**Issue**: N+1 query problem in user data fetching
- **Location**: `src/routes/users.js:34`
- **Pattern**: One query for users, then N queries for each user's posts

### Root Cause
```javascript
// Current implementation
const users = await db.users.findAll();
for (const user of users) {
  user.posts = await db.posts.findByUserId(user.id); // N+1 queries
}

最適化

// Optimized with eager loading
const users = await db.users.findAll({
  include: [{ model: Post, as: 'posts' }] // Single query with JOIN
});

期待される効果

• 応答時間：2.3s → 0.3s（87% 改善）
• データベースクエリ：101 → 1（99% 削減）
• スループット：45 → 200+ req/s

### Example 2: React Component Optimization

**Input**: Optimize expensive component

**Output**:
```markdown
## React Performance: Component Optimization

### Issue
Component re-renders on every parent update, even when props haven't changed.

### Optimization
```javascript
// Before: Re-renders unnecessarily
function ExpensiveComponent({ data, config }) {
  const processed = data
    .filter(item => item.active)
    .map(item => processComplex(item, config));

  return <Chart data={processed} />;
}

// After: Memoized to prevent unnecessary re-renders
const ExpensiveComponent = React.memo(({ data, config }) => {
  const processed = useMemo(() => {
    return data
      .filter(item => item.active)
      .map(item => processComplex(item, config));
  }, [data, config]);

  return <Chart data={processed} />;
});

効果

• 再レンダリングを 100% → 5% に削減
• パフォーマンスが 80% 向上

## Reference Files

For framework-specific performance patterns and detailed guidance, load reference files as needed:

- **`references/framework_patterns.md`** - Performance patterns for Node.js, React, databases, APIs, frontend, and monitoring strategies (from performance-analysis)
- **`references/react_patterns.md`** - React-specific performance optimization patterns, memoization strategies, bundle optimization, and Core Web Vitals improvements
- **`references/load_testing.md`** - Load testing and stress testing patterns, tools, scenarios, and capacity planning strategies
- **`references/PERFORMANCE_ANALYSIS.template.md`** - Performance analysis report template with load profiles, bottlenecks, and recommendations

When analyzing performance for specific frameworks or conducting load tests, load the appropriate reference file.

## Best Practices

### Performance Analysis Approach

1. **Measure First**: Always establish baseline metrics
2. **Profile Before Optimizing**: Identify actual bottlenecks
3. **Optimize Incrementally**: Make one change at a time
4. **Verify Improvements**: Measure after each optimization
5. **Monitor Continuously**: Set up ongoing performance monitoring

### Common Optimizations

**Application:**
- Optimize algorithms (reduce complexity)
- Add caching layers
- Use connection pooling
- Implement request batching
- Add rate limiting

**Database:**
- Add appropriate indexes
- Optimize queries (avoid N+1)
- Use query result caching
- Implement read replicas
- Optimize connection pooling

**Frontend:**
- Code splitting and lazy loading
- Image optimization
- Bundle size reduction
- Minimize re-renders
- Optimize asset loading

**React:**
- Measure before optimizing
- Memoize strategically (don't over-memoize)
- Code split by route and feature
- Lazy load components on demand
- Monitor performance metrics

### Monitoring Setup

**Key Metrics:**
- Response time percentiles
- Error rates
- Throughput
- Resource utilization
- Custom business metrics

**Alerting:**
- Alert on performance degradation
- Alert on error rate spikes
- Alert on resource exhaustion
- Alert on SLA violations

## Related Use Cases

- Performance audits
- Optimization projects
- Capacity planning
- Performance regression detection
- Production performance monitoring
- Load testing analysis
- React app optimization
- Bundle size reduction
- Core Web Vitals improvement
- Memory leak fixes
- Rendering performance optimization