Analyze Performance

---
description: "基於 Core Web Vitals 的效能分析和 UX 評分。「分析效能」「改善速度」「檢查 Core Web Vitals」「頁面速度」等觸發。"
allowed-tools:
  - Read
  - Grep
  - Glob
  - Bash
---

# 基於 Core Web Vitals 的效能分析和 UX 評分

從使用者體驗的角度分析應用程式效能，並量化透過最佳化實現的感知速度提升。基於 Core Web Vitals 計算 UX 分數，並提出有優先序的最佳化策略。

## UX 效能分數

```text
使用者體驗分數：B+ (78/100)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

⏱️ Core Web Vitals
├─ LCP (載入)：2.3 秒 [良好] 目標<2.5 秒 ✅
├─ INP (回應)：95ms [良好] 目標<200ms ✅
├─ CLS (視覺穩定)：0.08 [良好] 目標<0.1 ✅
├─ FCP (首次繪製)：1.8 秒 [良好] 目標<1.8 秒 ✅
├─ TTFB (伺服器)：450ms [需要改善] 目標<200ms ⚠️
└─ TTI (可互動)：3.5 秒 [需要改善] 目標<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
```

## 持續改善

- **定期稽核**：執行週期性效能測試
- **指標收集**：追蹤回應時間、記憶體使用量
- **警報設定**：超過閾值時自動通知
- **團隊共享**：記錄改善案例和反模式