Initial commit
This commit is contained in:
Zhongwei Li
168
commands/analyze-performance.md
Normal file
168
commands/analyze-performance.md
Normal file
@@ -0,0 +1,168 @@
|
||||
## Analyze Performance
|
||||
|
||||
從使用者體驗的角度分析應用程式效能，並量化透過最佳化實現的感知速度提升。基於 Core Web Vitals 計算 UX 分數，並提出有優先序的最佳化策略。
|
||||
|
||||
### UX 效能分數
|
||||
|
||||
```text
|
||||
使用者體驗分數：B+ (78/100)
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
⏱️ Core Web Vitals
|
||||
├─ LCP (載入)：2.3 秒 [良好] 目標<2.5 秒 ✅
|
||||
├─ FID (回應)：95ms [良好] 目標<100ms ✅
|
||||
├─ 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 |
|
||||
| **FID(回應)** | -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
|
||||
```
|
||||
|
||||
### 持續改善
|
||||
|
||||
- **定期稽核**：執行週期性效能測試
|
||||
- **指標收集**：追蹤回應時間、記憶體使用量
|
||||
- **警報設定**：超過閾值時自動通知
|
||||
- **團隊共享**：記錄改善案例和反模式
|
||||
Reference in New Issue
Block a user