# Performance Optimization

> Webアプリケーションのパフォーマンス分析と最適化。 フロントエンド、バックエンド、データベースの最適化戦略。 パフォーマンス改善、速度最適化、ボトルネック解消時に使用。

- Skill: `atomic-kanta-sasaki/performance-optimization` (Agent Skill)
- Install (CLI): `npx skillmds@latest add atomic-kanta-sasaki/performance-optimization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/atomic-kanta-sasaki/performance-optimization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: atomic-kanta-sasaki (https://skillmd.com/u/atomic-kanta-sasaki)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/atomic-kanta-sasaki/performance-optimization

---


# Performance Optimization Skill

## Overview
Webアプリケーション全体のパフォーマンス最適化を支援します。

## Performance Checklist

### Frontend

#### 初期ロード
- [ ] コード分割（Route-based, Component-based）
- [ ] ツリーシェイキング有効化
- [ ] 画像最適化（WebP, lazy loading, srcset）
- [ ] フォント最適化（subset, preload, display: swap）
- [ ] Critical CSS インライン化
- [ ] Preconnect/Prefetch 設定

#### ランタイム
- [ ] 不要な再レンダリング防止（memo, useMemo, useCallback）
- [ ] 仮想スクロール（大量リスト）
- [ ] デバウンス/スロットル（入力処理）
- [ ] Web Worker（重い計算処理）

### Backend

#### API
- [ ] レスポンス圧縮（gzip/brotli）
- [ ] 適切なキャッシュヘッダー
- [ ] ページネーション実装
- [ ] 不要なフィールド除外（GraphQL or sparse fieldsets）
- [ ] N+1クエリ解消

#### キャッシュ戦略
```
L1: アプリケーションメモリ（最速、容量小）
L2: Redis/Memcached（高速、共有可能）
L3: CDN（静的コンテンツ）
L4: ブラウザキャッシュ
```

### Database

- [ ] 適切なインデックス設計
- [ ] クエリ実行計画の確認（EXPLAIN ANALYZE）
- [ ] 接続プール設定
- [ ] 読み取りレプリカ活用
- [ ] クエリ結果キャッシュ

## Optimization Patterns

### 1. N+1 クエリ解消

```python
# ❌ N+1問題
users = User.query.all()
for user in users:
    orders = Order.query.filter_by(user_id=user.id).all()  # N回実行

# ✅ Eager Loading
users = User.query.options(joinedload(User.orders)).all()

# ✅ DataLoader パターン（GraphQL）
@dataloader
async def load_orders(user_ids):
    orders = await Order.query.filter(Order.user_id.in_(user_ids)).all()
    return group_by_user_id(orders, user_ids)
```

### 2. キャッシュ実装

```python
from functools import lru_cache
from redis import Redis

# メモリキャッシュ
@lru_cache(maxsize=1000)
def get_config(key: str) -> str:
    return db.query(Config).filter_by(key=key).first().value

# Redisキャッシュ
class CacheService:
    def __init__(self, redis: Redis, default_ttl: int = 3600):
        self.redis = redis
        self.default_ttl = default_ttl
    
    async def get_or_set(
        self, 
        key: str, 
        factory: Callable, 
        ttl: int = None
    ):
        cached = await self.redis.get(key)
        if cached:
            return json.loads(cached)
        
        value = await factory()
        await self.redis.setex(
            key, 
            ttl or self.default_ttl, 
            json.dumps(value)
        )
        return value

# 使用例
user = await cache.get_or_set(
    f"user:{user_id}",
    lambda: db.get_user(user_id),
    ttl=300
)
```

### 3. バッチ処理

```python
# ❌ 1件ずつ処理
for item in items:
    db.insert(item)
    db.commit()

# ✅ バッチ処理
BATCH_SIZE = 1000
for i in range(0, len(items), BATCH_SIZE):
    batch = items[i:i + BATCH_SIZE]
    db.bulk_insert(batch)
    db.commit()
```

## Monitoring Metrics

| メトリクス | 目標値 | 測定方法 |
|-----------|--------|---------|
| LCP | < 2.5s | Lighthouse, RUM |
| FID | < 100ms | Lighthouse, RUM |
| CLS | < 0.1 | Lighthouse, RUM |
| TTFB | < 200ms | サーバーログ |
| API P95 | < 500ms | APM |
| DB Query P95 | < 100ms | スロークエリログ |

## Tools

- **Frontend**: Lighthouse, WebPageTest, Chrome DevTools
- **Backend**: APM（Datadog, New Relic）, Profiler
- **Database**: EXPLAIN ANALYZE, pg_stat_statements