File contents 效能分析
測量、分析、最佳化 — 按此順序。
🔧 執行腳本
執行這些進行自動化分析:
腳本
用途
使用方式
scripts/lighthouse_audit.py
Lighthouse 效能稽核
python scripts/lighthouse_audit.py https://example.com
1. 核心 Web 指標
目標值
指標
良好
差
測量項目
LCP
< 2.5s
> 4.0s
載入
INP
< 200ms
> 500ms
互動性
CLS
< 0.1
> 0.25
穩定性
何時測量
階段
工具
開發
本地 Lighthouse
CI/CD
Lighthouse CI
生產
RUM(真實使用者監控)
2. 分析工作流程
4 步驟流程
1. 基線 → 測量當前狀態
2. 識別 → 找到瓶頸
3. 修復 → 做有針對性的變更
4. 驗證 → 確認改善
分析工具選擇
問題
工具
頁面載入
Lighthouse
打包大小
Bundle analyzer
執行期
DevTools Performance
記憶體
DevTools Memory
網路
DevTools Network
3. 打包分析
要尋找什麼
問題
指標
大型依賴
打包頂部
重複程式碼
多個 chunk
未使用程式碼
低覆蓋率
缺少分割
單一大 chunk
最佳化動作
發現
動作
大型函式庫
精確引入特定模組
重複依賴
去重、更新版本
路由在主包中
程式碼分割
未使用的匯出
Tree shake
4. 執行期分析
Performance 分頁分析
模式
意義
長任務(>50ms)
UI 阻塞
許多小任務
可能的批次處理機會
Layout/paint
渲染瓶頸
Script
JavaScript 執行
Memory 分頁分析
模式
意義
堆持續增長
可能的記憶體洩漏
大量保留
檢查參考
分離的 DOM
未清理
5. 常見瓶頸
依症狀
症狀
可能原因
初始載入慢
大 JS、渲染阻塞
互動慢
沉重的事件處理器
捲動卡頓
Layout thrashing
記憶體持續增長
洩漏、保留的參考
6. 快速勝出優先順序
優先
動作
影響
1
啟用壓縮
高
2
延遲載入圖片
高
3
路由程式碼分割
高
4
快取靜態資產
中
5
最佳化圖片
中
7. 反模式
❌ 不要
✅ 要
猜測問題
先分析
微觀最佳化
修復最大的問題
過早最佳化
需要時再最佳化
忽略真實使用者
使用 RUM 資料
記住: 最快的程式碼是不執行的程式碼。先移除,再最佳化。
1 --- 2 name: performance-profiling 3 description: 效能分析原則。測量、分析與最佳化技術。 4 --- 5 6 # 效能分析 7 8 > 測量、分析、最佳化 — 按此順序。 9 10 ## 🔧 執行腳本 11 12 **執行這些進行自動化分析:** 13 14 | 腳本 | 用途 | 使用方式 | 15 |------|------|----------| 16 | `scripts/lighthouse_audit.py` | Lighthouse 效能稽核 | `python scripts/lighthouse_audit.py https://example.com` | 17 18 --- 19 20 ## 1. 核心 Web 指標 21 22 ### 目標值 23 24 | 指標 | 良好 | 差 | 測量項目 | 25 |------|------|-----|----------| 26 | **LCP** | < 2.5s | > 4.0s | 載入 | 27 | **INP** | < 200ms | > 500ms | 互動性 | 28 | **CLS** | < 0.1 | > 0.25 | 穩定性 | 29 30 ### 何時測量 31 32 | 階段 | 工具 | 33 |------|------| 34 | 開發 | 本地 Lighthouse | 35 | CI/CD | Lighthouse CI | 36 | 生產 | RUM(真實使用者監控)| 37 38 --- 39 40 ## 2. 分析工作流程 41 42 ### 4 步驟流程 43 44 ``` 45 1. 基線 → 測量當前狀態 46 2. 識別 → 找到瓶頸 47 3. 修復 → 做有針對性的變更 48 4. 驗證 → 確認改善 49 ``` 50 51 ### 分析工具選擇 52 53 | 問題 | 工具 | 54 |------|------| 55 | 頁面載入 | Lighthouse | 56 | 打包大小 | Bundle analyzer | 57 | 執行期 | DevTools Performance | 58 | 記憶體 | DevTools Memory | 59 | 網路 | DevTools Network | 60 61 --- 62 63 ## 3. 打包分析 64 65 ### 要尋找什麼 66 67 | 問題 | 指標 | 68 |------|------| 69 | 大型依賴 | 打包頂部 | 70 | 重複程式碼 | 多個 chunk | 71 | 未使用程式碼 | 低覆蓋率 | 72 | 缺少分割 | 單一大 chunk | 73 74 ### 最佳化動作 75 76 | 發現 | 動作 | 77 |------|------| 78 | 大型函式庫 | 精確引入特定模組 | 79 | 重複依賴 | 去重、更新版本 | 80 | 路由在主包中 | 程式碼分割 | 81 | 未使用的匯出 | Tree shake | 82 83 --- 84 85 ## 4. 執行期分析 86 87 ### Performance 分頁分析 88 89 | 模式 | 意義 | 90 |------|------| 91 | 長任務(>50ms)| UI 阻塞 | 92 | 許多小任務 | 可能的批次處理機會 | 93 | Layout/paint | 渲染瓶頸 | 94 | Script | JavaScript 執行 | 95 96 ### Memory 分頁分析 97 98 | 模式 | 意義 | 99 |------|------| 100 | 堆持續增長 | 可能的記憶體洩漏 | 101 | 大量保留 | 檢查參考 | 102 | 分離的 DOM | 未清理 | 103 104 --- 105 106 ## 5. 常見瓶頸 107 108 ### 依症狀 109 110 | 症狀 | 可能原因 | 111 |------|----------| 112 | 初始載入慢 | 大 JS、渲染阻塞 | 113 | 互動慢 | 沉重的事件處理器 | 114 | 捲動卡頓 | Layout thrashing | 115 | 記憶體持續增長 | 洩漏、保留的參考 | 116 117 --- 118 119 ## 6. 快速勝出優先順序 120 121 | 優先 | 動作 | 影響 | 122 |------|------|------| 123 | 1 | 啟用壓縮 | 高 | 124 | 2 | 延遲載入圖片 | 高 | 125 | 3 | 路由程式碼分割 | 高 | 126 | 4 | 快取靜態資產 | 中 | 127 | 5 | 最佳化圖片 | 中 | 128 129 --- 130 131 ## 7. 反模式 132 133 | ❌ 不要 | ✅ 要 | 134 |---------|-------| 135 | 猜測問題 | 先分析 | 136 | 微觀最佳化 | 修復最大的問題 | 137 | 過早最佳化 | 需要時再最佳化 | 138 | 忽略真實使用者 | 使用 RUM 資料 | 139 140 --- 141 142 > **記住:** 最快的程式碼是不執行的程式碼。先移除,再最佳化。
Tai-ch0802/skills-bundle/tree/main/i18n/zh-TW/performance-profiling commit 4ea3f4b7de
Frequently asked questions How do I install the Performance Profiling skill? Run npx skillmds@latest add tai-ch0802/performance-profiling in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Performance Profiling skill do? 效能分析原則。測量、分析與最佳化技術。 It is listed under Coding & Dev Tools on SkillMD.
Is Performance Profiling safe to use? This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Performance Profiling? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Performance Profiling free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Performance Profiling? Tai-ch0802 (@tai-ch0802) published this skill. Their other Agent Skills are listed on their SkillMD profile.