mcpField
W
webperf

webperf

github.com/nucliwebTesting & quality1.5k261 installsUpdated today
Repository

About webperf

A toolkit of JavaScript snippets for measuring and debugging web performance in Chrome DevTools. It groups 56 snippets across Core Web Vitals, loading, interaction, media, and network quality, with guidance for choosing and interpreting them.

Key features

  1. 0156 performance measurement snippets
  2. 02Coverage across five skill areas
  3. 03Chrome DevTools execution guidance
  4. 04Structured snippet results
  5. 05CLI alternative for snippet execution

Use cases

  1. 01Selecting checks for a performance issue
  2. 02Auditing page loading behavior
  3. 03Investigating interaction jank
  4. 04Reviewing image and network performance

MCP support

The toolkit runs snippets through Chrome DevTools MCP navigation and script evaluation tools, and describes how to retrieve results, including for tracking snippets.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf

After installing, type/webperfin Claude Code to confirm it loaded.

Details

From the project README

WebPerf Snippets Toolkit

A collection of 56 JavaScript snippets for measuring and debugging web performance in Chrome DevTools. Each snippet runs in the page and returns a structured result object.

Quick Reference

SkillSnippetsTrigger phrases
webperf-core-web-vitals7"debug LCP", "slow LCP", "CLS", "layout shifts", "INP", "interaction latency", "responsiveness"
webperf-loading34"TTFB", "slow server", "FCP", "render blocking", "font loading", "script loading", "resource hints", "service worker"
webperf-interaction10"jank", "scroll performance", "long tasks", "animation frames", "INP debug"
webperf-media4"image audit", "lazy loading", "image optimization", "video audit"
webperf-resources1"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 and read the returned object, which is the result (the scripts have no console output)
    • status: "tracking" → call the function named in getDataFn with another mcp__chrome-devtools__evaluate_script call after the interactions
    • Without Chrome DevTools MCP, run the snippet with the CLI: npx webperf-snippets <url> --snippet <Name> --json
  4. Interpret results using the thresholds defined in the skill
  5. Provide actionable recommendations based on findings

Comments

Markdown supported