Analyze Performance

---
description: "Core Web Vitals に基づくパフォーマンス分析と UX スコア算出。「パフォーマンスを分析して」「速度を改善したい」「Core Web Vitals をチェック」「ページ速度を調べて」「LCP を改善」「パフォーマンス問題を特定して」などで起動。"
allowed-tools:
  - Read
  - Grep
  - Glob
  - Bash
---

# Core Web Vitals に基づくパフォーマンス分析

アプリケーションのパフォーマンスをユーザー体験の観点から分析し、改善による体感速度向上を定量化します。Core Web Vitals に基づく UX スコアを算出し、優先順位付けされた最適化戦略を提案します。

## UX パフォーマンススコア

```text
ユーザー体験スコア: B+ (78/100)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

⏱️ Core Web Vitals
├─ LCP (読み込み): 2.3 秒 [Good] 目標<2.5 秒 ✅
├─ INP (操作反応): 95ms [Good] 目標<200ms ✅
├─ CLS (視覚安定): 0.08 [Good] 目標<0.1 ✅
├─ FCP (初回描画): 1.8 秒 [Good] 目標<1.8 秒 ✅
├─ TTFB (サーバー): 450ms [Needs Work] 目標<200ms ⚠️
└─ TTI (操作可能): 3.5 秒 [Needs Work] 目標<3.8 秒 ⚠️

📊 ユーザー体感速度
├─ 初回表示体感: 2.3 秒 [業界平均: 3.0 秒]
├─ ページ遷移: 1.1 秒 [業界平均: 1.5 秒]
├─ 検索結果表示: 0.8 秒 [業界平均: 1.2 秒]
├─ フォーム送信: 1.5 秒 [業界平均: 2.0 秒]
└─ 画像読み込み: 遅延ロード実装済み ✅

😊 ユーザー満足度予測
├─ 離脱率予測: 12% (業界平均: 20%)
├─ 完了率予測: 78% (目標: 85%)
├─ 推奨 NPS: +24 (業界平均: +15)
└─ リピート率: 65% (目標: 70%)

📊 ユーザー体験への影響
├─ 表示速度 0.5 秒短縮 → 離脱率 -7%
├─ 離脱率 5% 削減 → セッション長 +15%
├─ 検索改善 → 滞在時間 +15%
└─ 総合的な UX 改善度: +25%

🎯 改善による期待効果 (優先順位順)
├─ [P0] TTFB 改善 (CDN 導入) → LCP -0.3 秒 = 体感速度 +15%
├─ [P1] JS バンドル最適化 → TTI -0.8 秒 = 操作可能時間 -20%
├─ [P2] 画像最適化 (WebP) → 転送量 -40% = ロード時間 -25%
└─ [P3] キャッシュ戦略 → リピート訪問時 50% 高速化
```

## 使い方

```bash
# UX スコアの包括的分析
find . -name "*.js" -o -name "*.ts" | xargs wc -l | sort -rn | head -10
「UX パフォーマンススコアを算出し、Core Web Vitals を評価して」

# パフォーマンスボトルネックの検出
grep -r "for.*await\|forEach.*await" . --include="*.js"
「非同期処理のボトルネックを検出し、ユーザー体感への影響を分析して」

# ユーザー体験への影響分析
grep -r "addEventListener\|setInterval" . --include="*.js" | grep -v "removeEventListener\|clearInterval"
「パフォーマンス問題がユーザー体験に与える影響を分析して」
```

## 基本例

```bash
# バンドルサイズとロード時間
npm ls --depth=0 && find ./public -name "*.js" -o -name "*.css" | xargs ls -lh
"バンドルサイズとアセット最適化の改善点を特定して"

# データベースパフォーマンス
grep -r "SELECT\|findAll\|query" . --include="*.js" | head -20
"データベースクエリの最適化ポイントを分析して"

# 依存関係のパフォーマンス影響
npm outdated && npm audit
"古い依存関係がパフォーマンスに与える影響を評価して"
```

## 分析観点

### 1. コードレベルの問題

- **O(n²) アルゴリズム**: 非効率な配列操作の検出
- **同期 I/O**: ブロッキング処理の特定
- **重複処理**: 不要な計算やリクエストの削除
- **メモリリーク**: イベントリスナーやタイマーの管理

### 2. アーキテクチャレベルの問題

- **N+1 クエリ**: データベースアクセスパターン
- **キャッシュ不足**: 繰り返し計算や API 呼び出し
- **バンドルサイズ**: 不要なライブラリやコード分割
- **リソース管理**: 接続プールやスレッド使用量

### 3. 技術的負債による影響

- **レガシーコード**: 古い実装による性能劣化
- **設計の問題**: 責任分散不足による結合度の高さ
- **テスト不足**: パフォーマンス回帰の検出漏れ
- **監視不足**: 問題の早期発見体制

## パフォーマンス改善 ROI マトリクス

```text
改善 ROI = (時間削減効果 + 品質向上) ÷ 実装工数
```

| 優先度                | ユーザー体験向上 | 実装難易度 | 時間削減効果 | 具体例       | 工数 | 効果        |
| --------------------- | ---------------- | ---------- | ------------ | ------------ | ---- | ----------- |
| **[P0] 即実装すべき** | 高               | 低         | > 50%        | CDN 導入     | 8h   | 応答 -60%   |
| **[P1] 早期実装推奨** | 高               | 中         | 20-50%       | 画像最適化   | 16h  | ロード -30% |
| **[P2] 計画的実装**   | 低               | 高         | 10-20%       | コード分割   | 40h  | 初回 -15%   |
| **[P3] 保留/様子見**  | 低               | 低         | < 10%        | 微細な最適化 | 20h  | 部分 -5%    |

### 優先度判定基準

- **P0(即実装)**: UX 向上「高」× 難易度「低」= ROI 最大
- **P1(早期実装)**: UX 向上「高」× 難易度「中」= ROI 高
- **P2(計画的)**: UX 向上「低」× 難易度「高」= ROI 中
- **P3(保留)**: UX 向上「低」× 難易度「低」= ROI 低

## パフォーマンス指標と UX 改善相関

| 指標                | 改善幅  | 体感速度向上 | ユーザー満足度 | 実装工数 |
| ------------------- | ------- | ------------ | -------------- | -------- |
| **LCP (読み込み)**  | -0.5 秒 | +30%         | 離脱率 -7%     | 16h      |
| **INP (操作反応)**  | -50ms   | +15%         | ストレス -20%  | 8h       |
| **CLS (視覚安定)**  | -0.05   | +10%         | 誤操作 -50%    | 4h       |
| **TTFB (サーバー)** | -200ms  | +25%         | 体感速度 +40%  | 24h      |
| **TTI (操作可能)**  | -1.0 秒 | +35%         | 完了率 +15%    | 32h      |
| **バンドルサイズ**  | -30%    | +20%         | 初回訪問 +25%  | 16h      |

## 測定とツール

### Node.js / JavaScript

```bash
# プロファイリング
node --prof app.js
clinic doctor -- node app.js

# バンドル分析
npx webpack-bundle-analyzer
lighthouse --chrome-flags="--headless"
```

### データベース

```sql
-- クエリ分析
EXPLAIN ANALYZE SELECT ...
SHOW SLOW LOG;
```

### フロントエンド

```bash
# React パフォーマンス
grep -r "useMemo\|useCallback" . --include="*.jsx"

# リソース分析
find ./src -name "*.png" -o -name "*.jpg" | xargs ls -lh
```

## 継続的改善

- **定期監査**: 週次パフォーマンステスト実行
- **メトリクス収集**: レスポンス時間、メモリ使用量の追跡
- **アラート設定**: 閾値超過時の自動通知
- **チーム共有**: 改善事例とアンチパターンの文書化