1---2name: webperf3description: Web performance measurement and debugging toolkit. Use when the user asks about web performance, wants to audit a page, or says "analyze performance", "debug lcp", "check ttfb", "measure core web vitals", "audit images", or similar.4---56# WebPerf Snippets Toolkit78A collection of 47 JavaScript snippets for measuring and debugging web performance in Chrome DevTools. Each snippet runs in the browser console and outputs structured, color-coded results.910## Skills by Category1112| Skill | Snippets | Use when |13|-------|----------|----------|14| webperf-core-web-vitals | 7 | Intelligent Core Web Vitals analysis with automated workflows and decision trees |15| webperf-loading | 28 | Intelligent loading performance analysis with automated workflows for TTFB investigation (DNS/connection/server breakdown), render-blocking detection, script performance deep dive (first vs third-party attribution), font optimization, and resource hints validation |16| webperf-interaction | 8 | Intelligent interaction performance analysis with automated workflows for INP debugging, scroll jank investigation, and main thread blocking |17| webperf-media | 3 | Intelligent media optimization with automated workflows for images, videos, and SVGs |18| webperf-resources | 1 | Intelligent network quality analysis with adaptive loading strategies |1920## Quick Reference2122| User says | Skill to use |23|-----------|--------------|24| "debug LCP", "slow LCP", "largest contentful paint" | webperf-core-web-vitals |25| "check CLS", "layout shifts", "visual stability" | webperf-core-web-vitals |26| "INP", "interaction latency", "responsiveness" | webperf-core-web-vitals |27| "TTFB", "slow server", "time to first byte" | webperf-loading |28| "FCP", "first contentful paint", "render blocking" | webperf-loading |29| "font loading", "script loading", "resource hints", "service worker" | webperf-loading |30| "jank", "scroll performance", "long tasks", "animation frames", "INP debug" | webperf-interaction |31| "image audit", "lazy loading", "image optimization", "video audit" | webperf-media |32| "network quality", "bandwidth", "connection type", "save-data" | webperf-resources |3334## Workflow35361. Identify the relevant skill based on the user's question (use Quick Reference above)372. Load the skill's skill.md to see available snippets and thresholds383. Execute with Chrome DevTools MCP:39 - `mcp__chrome-devtools__navigate_page` → navigate to target URL40 - `mcp__chrome-devtools__evaluate_script` → run the snippet41 - `mcp__chrome-devtools__get_console_message` → read results424. Interpret results using the thresholds defined in the skill435. Provide actionable recommendations based on findings