performance-optimization

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

Tools

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