webperf

WebPerf Snippets Toolkit 是一套專業的診斷工具，包含 49 個 JavaScript 效能測量指令碼，專為開發人員、效能工程師與站點可靠性工程師設計。透過將自定義測量指令碼注入 Chrome 開發者工具控制台，此工具能提供對瀏覽器效能管道的細緻洞察。團隊不僅能獲取高層次的儀表板數據，更能深入分析影響使用者體驗與搜尋引擎最佳化（SEO）的關鍵指標，從而追蹤瀏覽器環境中的效能瓶頸根源。

• 提供進階核心網站指標（Core Web Vitals）診斷，包含 LCP（最大內容繪製）、CLS（累計版面配置轉移）與 INP（互動到下一個繪製），並具備深度的 DOM 元素檢測功能。

• 全面的載入效能分析，涵蓋 TTFB（首位元組時間）、FCP（首次內容繪製）、阻礙渲染的資源識別、字型載入策略及 Service Worker 執行效率評估。

• 專門的互動除錯功能，如長動畫影格（Long Animation Frames）監控、捲動效能追蹤、事件時序分析及反應性審核。

• 針對多媒體的審核工具，適用於圖片最佳化、延遲載入（Lazy Loading）驗證、影片元素評估及 SVG 效能分析。

• 內建自動化決策樹邏輯，可根據初步結果觸發後續診斷（例如：當 TTFB 超過 600ms 時自動執行子部分細項分析）。

• 工具組透過 Chrome DevTools MCP 伺服器執行原生 JavaScript 程式碼片段，非常適合用於持續整合/持續部署（CI/CD）流程或本地開發除錯。

• 使用者將獲得結構化且帶有色彩標記的控制台輸出，總結效能閾值、識別有問題的元素，並強調潛在的改善路徑。

• 輸入通常為目標網址與特定的效能需求，輸出則提供可執行的報告，詳述 DOM 元素、網路時序與修正方案。

• 使用限制包含需依賴基於 Chromium 的瀏覽器環境，且需具備開發者工具控制台存取權；指令碼設計為非侵入式，建議於活躍的除錯階段執行。相關關鍵字包含網路品質、頻寬、連接類型、卡頓（Jank）、指令碼載入、資源提示（Resource Hints）與影格預算最佳化。