web-perf
CommunityTune web performance with Chrome DevTools MCP.
System Documentation
What problem does it solve?
This skill analyzes and optimizes web page performance by measuring Core Web Vitals, identifying render-blocking resources, network dependency chains, caching issues, and accessibility gaps.
Core Features & Use Cases
- Core Web Vitals measurement: FCP, LCP, CLS, TBT, Speed Index.
- Resource & network analysis: identify render-blocking resources, dependency graphs, caching issues.
- Accessibility gaps and Lighthouse score context across pages.
- Use Case: Perform performance audits, profile pages for optimization, and generate reports.
Quick Start
Verify MCP tools are configured, then audit a page by navigating to the URL with navigate_page(url: "<target-url>") and starting a trace with performance_start_trace(autoStop: true, reload: true). Retrieve results, analyze Core Web Vitals with performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown"), and inspect network requests with list_network_requests(resourceTypes: ["Script","Stylesheet","Document","Font","Image"]).
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: web-perf Download link: https://github.com/elithrar/dotfiles/archive/main.zip#web-perf Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.