webperf
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.
소스 정보
- 저장소
- nucliweb/webperf-snippets
- 최근 소스 활동
- 2026년 10월 15일 23:10
- 감지된 SKILL.md 언어
- 영어
- 스타
- 1,451
- 포크
- 89
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- webperf
- description
- 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.
- context
- fork
- license
- MIT
- metadata
- {"author":"Joan Leon | @nucliweb","version":"2.0.1","mcp-server":"chrome-devtools","category":"web-performance","repository":"https://github.com/nucliweb/webperf-snippets"}
# WebPerf Snippets Toolkit
A collection of 56 JavaScript snippets for measuring and debugging web performance in Chrome DevTools. Each snippet runs in the browser console and outputs structured, color-coded results.
## Quick Reference
| Skill | Snippets | Trigger phrases |
|-------|----------|-----------------|
| webperf-core-web-vitals | 7 | "debug LCP", "slow LCP", "CLS", "layout shifts", "INP", "interaction latency", "responsiveness" |
| webperf-loading | 34 | "TTFB", "slow server", "FCP", "render blocking", "font loading", "script loading", "resource hints", "service worker" |
| webperf-interaction | 10 | "jank", "scroll performance", "long tasks", "animation frames", "INP debug" |
| webperf-media | 4 | "image audit", "lazy loading", "image optimization", "video audit" |
| webperf-resources | 1 | "network quality", "bandwidth", "connection type", "save-data" |
## Workflow
1. Identify the relevant skill based on the user's question (see Quick Reference above)
2. Load the skill's skill.md to see available snippets and thresholds
3. Execute with Chrome DevTools MCP:
- `mcp__chrome-devtools__navigate_page` → navigate to target URL
- `mcp__chrome-devtools__evaluate_script` → run the snippet
- `mcp__chrome-devtools__get_console_message` → read results
4. Interpret results using the thresholds defined in the skill
5. Provide actionable recommendations based on findings
GitHub에서 보기