AI Skills
web-perf

web-perf

熱門

使用 Chrome DevTools MCP 分析網頁效能。測量 Core Web Vitals（LCP、INP、CLS）及輔助指標（FCP、TBT、Speed Index），識別渲染阻塞資源、網路依賴鏈、版面位移、快取問題和無障礙缺口。當需要稽核、分析、除錯或優化頁面載入效能、Lighthouse 分數或網站速度時使用。傾向從當前文件檢索，而非依賴預先訓練的知識。

2012星標
180分支
更新於 2026/7/1
獲取技能源代碼

相關技能

notebooklm1.8萬learn6397gemini-interactions-api3816
SKILL.md
readonlyread-only
name
web-perf
description

使用 Chrome DevTools MCP 分析網頁效能。測量 Core Web Vitals（LCP、INP、CLS）及輔助指標（FCP、TBT、Speed Index），識別渲染阻塞資源、網路依賴鏈、版面位移、快取問題和無障礙缺口。當需要稽核、分析、除錯或優化頁面載入效能、Lighthouse 分數或網站速度時使用。傾向從當前文件檢索，而非依賴預先訓練的知識。

網頁效能稽核

你對網頁效能指標、門檻值和工具 API 的知識可能已過時。在引用特定數字或建議時，優先檢索而非預先訓練的知識。

檢索來源

來源 如何檢索 用途
web.dev https://web.dev/articles/vitals Core Web Vitals 門檻值、定義
Chrome DevTools 文件 https://developer.chrome.com/docs/devtools/performance 工具 API、追蹤分析
Lighthouse 評分 https://developer.chrome.com/docs/lighthouse/performance/performance-scoring 分數權重、指標門檻值

第一步：確認 MCP 工具可用

開始前先執行此步驟。 嘗試呼叫 navigate_page 或 performance_start_trace。如果不可用，請停止——chrome-devtools MCP 伺服器未設定。

請使用者將以下內容加入 MCP 設定：

"chrome-devtools": {
  "type": "local",
  "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}

關鍵指南

  • 果斷陳述：透過檢查網路請求、DOM 或程式碼庫來驗證說法，然後明確陳述發現。
  • 先驗證再建議：在建議移除前，先確認某項目確實未被使用。
  • 量化影響：使用洞察中的預估節省時間。不要優先處理影響為 0ms 的變更。
  • 跳過非問題：如果渲染阻塞資源的預估影響為 0ms，可註明但不要建議行動。
  • 具體明確：說「壓縮 hero.png（450KB）為 WebP」，而不是「最佳化圖片」。
  • 嚴格排序優先級：如果網站的 LCP 為 200ms 且 CLS 為 0，已經非常優秀——直接說明。

快速參考

任務 工具呼叫
載入頁面 navigate_page(url: "...")
開始追蹤 performance_start_trace(autoStop: true, reload: true)
分析洞察 performance_analyze_insight(insightSetId: "...", insightName: "...")
列出請求 list_network_requests(resourceTypes: ["Script", "Stylesheet", ...])
請求詳細資訊 get_network_request(reqid: <id>)
無障礙快照 take_snapshot(verbose: true)

工作流程

複製此檢查清單以追蹤進度：

稽核進度：
- [ ] 階段 1：效能追蹤（導航 + 記錄）
- [ ] 階段 2：Core Web Vitals 分析（包含 CLS 元兇）
- [ ] 階段 3：網路分析
- [ ] 階段 4：無障礙快照
- [ ] 階段 5：程式碼庫分析（若為第三方網站則跳過）

階段 1：效能追蹤

  1. 導航至目標 URL：

    navigate_page(url: "<target-url>")

  2. 啟動含重新載入的效能追蹤，以捕捉冷載入指標：

    performance_start_trace(autoStop: true, reload: true)

  3. 等待追蹤完成，然後取得結果。

疑難排解：

  • 如果追蹤回傳空值或失敗，請先用 navigate_page 確認頁面正確載入
  • 如果洞察名稱不符，請檢查追蹤回應以列出可用的洞察

階段 2：Core Web Vitals 分析

使用 performance_analyze_insight 提取關鍵指標。

注意： 洞察名稱可能因 Chrome DevTools 版本而異。如果某個洞察名稱無效，請從追蹤回應中的 insightSetId 探索可用的洞察。

常見洞察名稱：

指標 洞察名稱 檢查重點
LCP LCPBreakdown 最大內容繪製時間；TTFB、資源載入、渲染延遲的分解
CLS CLSCulprits 造成版面位移的元素（無尺寸的圖片、動態插入的內容、字型切換）
渲染阻塞 RenderBlocking 阻塞首次繪製的 CSS/JS
文件延遲 DocumentLatency 伺服器回應時間問題
網路依賴 NetworkRequestsDepGraph 延遲關鍵資源的請求鏈

範例：

performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")

關鍵門檻值（良好/需改善/差）：

  • TTFB：< 800ms / < 1.8s / > 1.8s
  • FCP：< 1.8s / < 3s / > 3s
  • LCP：< 2.5s / < 4s / > 4s
  • INP：< 200ms / < 500ms / > 500ms
  • TBT：< 200ms / < 600ms / > 600ms
  • CLS：< 0.1 / < 0.25 / > 0.25
  • Speed Index：< 3.4s / < 5.8s / > 5.8s

階段 3：網路分析

列出所有網路請求以識別最佳化機會：

list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])

檢查項目：

  1. 渲染阻塞資源：位於 <head> 中且沒有 async/defer/media 屬性的 JS/CSS
  2. 網路鏈：因依賴其他資源先載入而延遲發現的資源（例如 CSS 匯入、JS 載入的字型）
  3. 缺少預載：未預載的關鍵資源（字型、主視覺圖片、關鍵腳本）
  4. 快取問題：缺少或弱化的 Cache-Control、ETag 或 Last-Modified 標頭
  5. 大型酬載：未壓縮或過大的 JS/CSS 套件
  6. 未使用的預連線：如果被標記，請檢查是否有任何請求發送到該來源。如果請求數為零，則確定未使用——建議移除。如果存在請求但載入較晚，預連線可能仍有價值。

如需詳細請求資訊：

get_network_request(reqid: <id>)

階段 4：無障礙快照

取得無障礙樹快照：

take_snapshot(verbose: true)

標記高層級缺口：

  • 缺少或重複的 ARIA ID
  • 對比度不足的元素（對照 WCAG AA：一般文字 4.5:1，大型文字 3:1）
  • 焦點陷阱或缺少焦點指示器
  • 沒有可存取名稱的互動元素

階段 5：程式碼庫分析

如果稽核的是第三方網站且無程式碼庫存取權限，請跳過此階段。

分析程式碼庫以了解可改進之處。

偵測框架與打包工具

搜尋設定檔以識別技術棧：

工具 設定檔
Webpack webpack.config.js、webpack.*.js
Vite vite.config.js、vite.config.ts
Rollup rollup.config.js、rollup.config.mjs
esbuild esbuild.config.js、使用 esbuild 的建置腳本
Parcel .parcelrc、package.json（parcel 欄位）
Next.js next.config.js、next.config.mjs
Nuxt nuxt.config.js、nuxt.config.ts
SvelteKit svelte.config.js
Astro astro.config.mjs

同時檢查 package.json 中的框架依賴和建置腳本。

Tree-Shaking 與死程式碼

  • Webpack：檢查 mode: 'production'、package.json 中的 sideEffects、usedExports 最佳化
  • Vite/Rollup：預設啟用 Tree-shaking；檢查 treeshake 選項
  • 檢查項目：桶檔案（index.js 重新匯出）、大量匯入的大型工具庫（lodash、moment）

未使用的 JS/CSS

  • 檢查 CSS-in-JS 與靜態 CSS 提取
  • 尋找 PurgeCSS/UnCSS 設定（Tailwind 的 content 設定）
  • 識別動態匯入與急切載入

Polyfills

  • 檢查 @babel/preset-env 目標和 useBuiltIns 設定
  • 尋找 core-js 匯入（通常過大）
  • 檢查 browserslist 設定是否目標過於廣泛

壓縮與最小化

  • 檢查 terser、esbuild 或 swc 最小化
  • 檢查建置輸出或伺服器設定中的 gzip/brotli 壓縮
  • 檢查正式環境建置中的 source map（應為外部或停用）

輸出格式

以以下方式呈現發現：

  1. Core Web Vitals 摘要 - 包含指標、數值和評級（良好/需改善/差）的表格
  2. 主要問題 - 按優先級排序的問題清單，附帶預估影響（高/中/低）
  3. 建議 - 具體、可操作的修正，附帶程式碼片段或設定變更
  4. 程式碼庫發現 - 偵測到的框架/打包工具、最佳化機會（若無程式碼庫存取權限則省略）