透過影像、影片和 SVG 的自動化工作流程進行智慧媒體優化。包括偵測 LCP 影像（觸發格式/延遲載入/優先權分析）、識別佈局轉換風險（缺失尺寸）以及標記延遲載入問題（上方折疊延遲或下方急切）的決策樹。具有用於完整媒體審核、LCP 影像調查、影片表現（海報優化）和 SVG 嵌入點陣圖檢測的工作流程。與 Core Web Vitals（LCP/CLS 影響）和載入（優先提示、資源預載）的跨技能整合。根據內容類型提供效能預算和格式建議。當用戶詢問圖像優化、LCP 是圖像/影片、媒體佈局轉變或媒體載入策略時使用。與 Chrome DevTools MCP 相容。
透過命令列快速安裝 webperf-media AI 技能到你的開發環境
來源：nucliweb/webperf-snippets。
JavaScript snippets for measuring web performance in Chrome DevTools. Execute with mcpchrome-devtoolsevaluatescript, capture output with mcpchrome-devtoolsgetconsolemessage.
| Image Element Audit | Audits all elements on the page against image performance best practices — covering loading st | scripts/Image-Element-Audit.js | | SVG Embedded Bitmap Analysis | Scans all SVG resources on the page — both external files and inline elements — and flags any | scripts/SVG-Embedded-Bitmap-Analysis.js |
| Video Element Audit | Audits all elements on the page against video performance best practices — covering preload | scripts/Video-Element-Audit.js |
透過影像、影片和 SVG 的自動化工作流程進行智慧媒體優化。包括偵測 LCP 影像（觸發格式/延遲載入/優先權分析）、識別佈局轉換風險（缺失尺寸）以及標記延遲載入問題（上方折疊延遲或下方急切）的決策樹。具有用於完整媒體審核、LCP 影像調查、影片表現（海報優化）和 SVG 嵌入點陣圖檢測的工作流程。與 Core Web Vitals（LCP/CLS 影響）和載入（優先提示、資源預載）的跨技能整合。根據內容類型提供效能預算和格式建議。當用戶詢問圖像優化、LCP 是圖像/影片、媒體佈局轉變或媒體載入策略時使用。與 Chrome DevTools MCP 相容。 來源：nucliweb/webperf-snippets。
為搜尋與 AI 引用準備的穩定欄位與指令。
npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf-media透過影像、影片和 SVG 的自動化工作流程進行智慧媒體優化。包括偵測 LCP 影像（觸發格式/延遲載入/優先權分析）、識別佈局轉換風險（缺失尺寸）以及標記延遲載入問題（上方折疊延遲或下方急切）的決策樹。具有用於完整媒體審核、LCP 影像調查、影片表現（海報優化）和 SVG 嵌入點陣圖檢測的工作流程。與 Core Web Vitals（LCP/CLS 影響）和載入（優先提示、資源預載）的跨技能整合。根據內容類型提供效能預算和格式建議。當用戶詢問圖像優化、LCP 是圖像/影片、媒體佈局轉變或媒體載入策略時使用。與 Chrome DevTools MCP 相容。 來源：nucliweb/webperf-snippets。
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf-media 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/nucliweb/webperf-snippets