web-perf skill 是什麼、怎麼安裝使用：Cloudflare 官方的網頁性能審計 Skill（Core Web Vitals、Lighthouse）

本文根據 cloudflare/skills 倉庫裏該技能的 SKILL.md 與倉庫 README 整理，資料核對於 2026-10-11。skills.sh 榜單當日顯示該技能累計安裝約 9.5 萬次；所在倉庫 cloudflare/skills 在 GitHub 約 3026 Star（同日數據）。技能內容會隨倉庫更新，以倉庫為準。

這個 Skill 做什麼

「網站有點慢」是最模糊的需求之一。web-perf 把它變成一個有步驟、有數據的審計。description：審計、診斷或優化網站的加載與交互性能、Core Web Vitals 和 Lighthouse 性能得分。它不侷限於託管在 Cloudflare 上的網站。

技能開頭照例提醒：模型對性能指標、閾值和工具接口的記憶可能過時，引用具體數字或建議時要優先檢索，並列出 web.dev、Chrome DevTools 文檔和 Lighthouse 評分說明作為來源。緊接着是一個硬性前提——先確認可用的 MCP 工具：它依賴瀏覽器調試類的 MCP 伺服器來實際打開頁面並採集數據，沒有就無法測量。

流程分五個階段：

1. 性能軌跡：錄製頁面加載過程；
2. Core Web Vitals 分析；
3. 網絡分析：請求數量、體積、阻塞資源；
4. 無障礙快照；
5. 代碼庫分析：識別框架與打包工具，檢查搖樹與死代碼、未使用的 JS / CSS、多餘的 polyfill、壓縮與最小化。

最後按規定的格式輸出結論。

怎麼安裝

web-perf 隨 cloudflare/skills 插件一起安裝。Claude Code 裏輸入（命令來自倉庫 README）：

text
/plugin marketplace add cloudflare/skills
/plugin install cloudflare@cloudflare

Codex 用 codex plugin marketplace add cloudflare/skills 和 codex plugin add cloudflare@cloudflare。其他智能體用 npx skills add https://github.com/cloudflare/skills，在選擇介面裏勾選 web-perf。

倉庫整體介紹和其他安裝方式，詳見本站《cloudflare/skills 是什麼、怎麼安裝：Cloudflare 官方 Agent Skills（Workers、Agents SDK、Durable Objects、Wrangler）》。

怎麼用

• 「審計 https://example.com 的首頁性能，給出按影響排序的優化清單」。
• 「LCP 為什麼這麼高？定位到具體資源」。
• 「結合這個倉庫的打包配置，看看有哪些無用代碼可以去掉」。

這個技能只有一份 SKILL.md。

適合誰 / 侷限

適合前端工程師和站點負責人做上線前檢查或定期體檢。它測到的是「實驗室數據」——在你當前機器和網絡下的一次加載，不等於真實用戶的體驗數據；沒有安裝瀏覽器調試類 MCP 伺服器時只能做代碼層面的靜態分析。

注意事項

• 許可：Apache-2.0。
• 需要額外的 MCP 伺服器（如 Chrome DevTools 的 MCP），按 SKILL.md 開頭的檢查步驟配置；它會啟動瀏覽器訪問你指定的網址。
• 只審計你有權測試的網站；對線上站點的重複加載測試注意頻率。
• 具體的指標閾值以 web.dev 當前文檔為準，本文不轉述數字。