前言¶
前端性能優化是開發者繞不開的話題。頁面慢了，用戶會走；Lighthouse 分數掉了，SEO 和轉化也會跟着受影響。常見做法是打開 Chrome DevTools、錄一條 Performance Trace，再對照 LCP、INP、CLS 等指標逐項排查。流程成熟，但重複勞動不少：導航、錄製、讀 insight、查網絡請求、再對照代碼改配置。
Cloudflare 在官方 Agent Skills 倉庫裏提供了名爲 web-perf 的 Skill。它把「用 Chrome DevTools MCP 做網頁性能審計」寫成固定工作流，讓支持 Agent Skills 標準的 AI 編程工具（如 Cursor、Claude Code、OpenAI Codex 等）在對話裏按階段執行審計，而不是隻憑模型記憶給籠統建議。
本文基於官方倉庫中的 SKILL.md 與 cloudflare/skills README，說明它是什麼、怎麼裝、怎麼用。
這是什麼¶
web-perf 是 Cloudflare 維護的 Agent Skill，路徑在 cloudflare/skills 倉庫的 skills/web-perf/。官方一句話定位是：藉助 Chrome DevTools MCP 分析網頁性能，測量 Core Web Vitals（LCP、INP、CLS）以及 FCP、TBT、Speed Index 等補充指標，並識別渲染阻塞資源、網絡依賴鏈、佈局偏移、緩存問題與可訪問性缺口。
觸發場景很明確：當你讓 Agent 審計、分析、調試或優化頁面加載性能、Lighthouse 分數或站點速度時，它會按 Skill 裏的清單推進。Skill 還強調一點——指標閾值和工具 API 可能過時，優先從現行文檔檢索，而不是直接用模型預訓練知識下結論。檢索來源包括 web.dev 的 Vitals 說明、Chrome DevTools 性能文檔，以及 Lighthouse 性能評分文檔。
核心能力¶
結合官方 SKILL.md，能力可以概括爲五塊：
-
性能軌跡與 Core Web Vitals
通過navigate_page打開目標頁，再用performance_start_trace（建議autoStop: true、reload: true）錄冷啓動軌跡；隨後用performance_analyze_insight解析 LCP 拆解、CLS 元兇、渲染阻塞、文檔延遲、網絡依賴圖等 insight。 -
網絡與資源瓶頸
用list_network_requests/get_network_request查 Script、Stylesheet、Document、Font、Image 等請求，關注渲染阻塞、依賴鏈、缺失 preload、弱緩存頭、過大未壓縮資源，以及無效的 preconnect。 -
可訪問性快照
用take_snapshot(verbose: true)抓無障礙樹，標記重複/缺失 ARIA ID、對比度不足、焦點陷阱、交互元素無無障礙名稱等高層問題。 -
有代碼倉庫時的構建側分析
若不是純第三方站點審計，還會根據webpack/vite/next等配置識別框架與打包器，檢查 tree-shaking、未使用 JS/CSS、polyfill、壓縮與生產環境 sourcemap 等優化點。 -
輸出與優先級紀律
要求給出指標彙總表、按影響排序的問題列表、可執行的修復建議（儘量帶代碼或配置片段）。原則包括：用估算收益量化影響、零收益的「問題」可記錄但不強推、先覈實再建議刪除、已經很好的站點要明確說已經很好。
安裝與啓用¶
web-perf 屬於 Cloudflare Skills 集合，安裝方式與倉庫 README 一致。
用 npx skills 安裝（可只裝該 Skill）¶
npx skills add https://github.com/cloudflare/skills --skill web-perf
也可以一次性添加整個倉庫：
npx skills add https://github.com/cloudflare/skills
Claude Code¶
通過插件市場安裝：
/plugin marketplace add cloudflare/skills
/plugin install cloudflare@cloudflare
Cursor¶
可從 Cursor Marketplace 安裝，或在 Settings > Rules > Add Rule > Remote Rule (Github) 中填寫 cloudflare/skills。
手動複製到各工具 Skills 目錄¶
克隆倉庫後，把 skills/web-perf 拷到對應目錄即可，例如：
| 工具 | Skills 目錄 |
|---|---|
| Claude Code | ~/.claude/skills/ |
| Cursor | ~/.cursor/skills/ |
| OpenCode | ~/.config/opencode/skills/ |
| OpenAI Codex | ~/.codex/skills/ |
| Pi | ~/.pi/agent/skills/ |
必配：Chrome DevTools MCP¶
Skill 明確要求：開始前先確認能調用 navigate_page 或 performance_start_trace。若不可用，應停止並提示用戶在 MCP 配置中加入：
"chrome-devtools": {
"type": "local",
"command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}
沒有這套 MCP，Agent 無法真實錄制與解析性能軌跡，Skill 的主流程跑不起來。
典型用法¶
裝好 Skill 並配置好 chrome-devtools MCP 後，可以直接對 Agent 說類似需求：
請審計 https://example.com 的頁面性能，重點看 Core Web Vitals、
渲染阻塞資源和網絡依賴鏈，按影響給出可落地的優化建議。
按官方工作流，Agent 大致會按下面清單推進：
Audit Progress:
- [ ] Phase 1: Performance trace (navigate + record)
- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)
- [ ] Phase 3: Network analysis
- [ ] Phase 4: Accessibility snapshot
- [ ] Phase 5: Codebase analysis (skip if third-party site)
關鍵工具調用示例（來自官方 Quick Reference）：
navigate_page(url: "https://example.com")
performance_start_trace(autoStop: true, reload: true)
performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")
list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])
take_snapshot(verbose: true)
常用 insight 名稱包括：LCPBreakdown、CLSCulprits、RenderBlocking、DocumentLatency、NetworkRequestsDepGraph。官方也提醒：不同 Chrome DevTools 版本下 insight 名稱可能變化，若調用失敗，應先從 trace 響應裏的 insightSetId 查看實際可用列表。
最終輸出一般包含四部分：Core Web Vitals 彙總表（指標、數值、good / needs-improvement / poor）、按優先級排列的 Top Issues、具體 Recommendations，以及（有代碼權限時）Codebase Findings。
適用場景與注意事項¶
適合這些情況：
- 上線前或迴歸時，對關鍵落地頁做一輪可復現的性能審計；
- Lighthouse / Core Web Vitals 變差後，需要把「分數掉了」落到具體資源與代碼改動；
- 本地有前端倉庫，希望 Agent 一邊看軌跡，一邊對照 Vite、Webpack、Next.js 等構建配置給建議。
使用時注意：
- 依賴真實瀏覽器與 MCP，不是純文本推理；MCP 未配置時不應硬編結論。
- 審計第三方站點時跳過代碼庫分析階段，只基於頁面與網絡證據說話。
- 建議要可驗證：例如刪掉某個 preconnect 前，先確認是否真有請求打到該源；估算節省爲 0ms 的「阻塞資源」不必當成高優項。
- 閾值以現行文檔爲準；Skill 內給出的 TTFB / FCP / LCP / INP / TBT / CLS / Speed Index 區間是參考，寫作或彙報前應按 web.dev / Lighthouse 文檔再核一次。
小結¶
web-perf 把「打開 DevTools → 錄軌跡 → 讀 insight → 查網絡 →（可選）看構建配置」固化成 Agent 可執行的 Skill，適合把前端性能審計嵌進日常對話式開發流。它的價值不在於發明新指標，而在於強制走真實測量、按影響排序，並儘量落到具體文件與配置。
官方地址：https://github.com/cloudflare/skills/tree/main/skills/web-perf
倉庫總覽與安裝說明：https://github.com/cloudflare/skills
skills.sh 安裝頁：https://www.skills.sh/cloudflare/skills/web-perf
