入門 5 分鐘

performance-optimization:先量測,再決定要優化哪裡

用 baseline、profiling 與前後比較處理前端、後端、查詢與資料庫效能。

單車技師先量測轉輪阻力,再只調整真正造成摩擦的軸承

學完會知道

  • 理解 performance-optimization 在開發流程裡負責的工作
  • 判斷什麼情況適合使用 performance-optimization
  • 完成通用 Skills CLI、Codex 或 Claude Code 安裝

開始前先準備

  • 可使用支援 Agent Skills 的 coding agent
  • 準備一個能實際驗證的小型開發任務

這個 Skill 在做什麼

用 baseline、profiling 與前後比較處理前端、後端、查詢與資料庫效能。

為什麼有用

沒有量測的優化通常只增加複雜度。這個 Skill 先建立 baseline,找出真正限制使用者或系統的瓶頸,修正後再用相同方法比較。

適合什麼場景

  • Core Web Vitals 低於目標。
  • API 延遲或資料庫查詢突然變慢。
  • 新功能需要處理大量資料或高流量。

和站內相近內容的差別

舊的 Performance SkillCore Web Vitals Skill 是 Web Quality 索引。performance-optimization 不只處理瀏覽器,也涵蓋後端、N+1 查詢、資料庫與容量問題。

如何安裝

想先查看可選清單,可以執行:

npx skills add addyosmani/agent-skills --list

只安裝這一個 Skill:

npx skills add addyosmani/agent-skills --skill performance-optimization

安裝完整 24 個 Skills:

npx skills add addyosmani/agent-skills

這個 Skill 會引用 references/performance-checklist.md。單獨安裝仍能執行主要流程,但 Skills CLI 不會帶入上游根目錄的共用 references。需要完整檢查表時,請安裝整套,或手動把這些檔案放到 Skill 能依原相對路徑讀取的位置。

手動安裝時,先 clone 上游 repo,再把整個 Skill 資料夾放進代理使用的 skills 目錄:

git clone https://github.com/addyosmani/agent-skills.git

來源資料夾是 skills/performance-optimization/。如果上面列出共用 references,還要保留上游的相對路徑。

Codex

Codex CLI 0.122 以上可安裝整套原生外掛:

codex plugin marketplace add addyosmani/agent-skills
codex plugin add agent-skills@agent-skills

安裝後重新開啟 session。手動指定時輸入 @performance-optimization;也可以直接描述任務,讓 Codex 依 Skill 的 description 自動選用。

Claude Code

Claude Code 可從 marketplace 安裝:

/plugin marketplace add addyosmani/agent-skills
/plugin install agent-skills@addy-agent-skills

此外掛也提供 /spec/plan/build/test/review/code-simplify/ship 等流程指令。這些指令會編排對應 Skills,不代表每個指令都只使用本頁這一個 Skill。

自動啟用還是手動指定

自動優先。規格有預算或監控回報退化時就應啟用。若沒有任何數據,先手動指定量測範圍,不要直接要求代理優化。

在 Codex 手動呼叫的寫法:

@performance-optimization
請依這個 Skill 的原始流程處理目前任務,完成後列出驗證證據。

原始來源