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

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 クエリ解消

# ❌ 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. キャッシュ実装

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. バッチ処理

# ❌ 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	スロークエリログ