skills.rest
elithrar
elithrarCOMMUNITY
Explore all skills by this author →
Website𝕏@elithrarGitHub

web-perf

Analyze and optimize web performance using Chrome DevTools MCP metrics.

190|14|Updated May 20, 2014
Search Tags:#accessibility#audit#Core Web Vitals#web-performance#network-analysis#Chrome DevTools MCP
One-click install
npx skills add https://github.com/elithrar/dotfiles --skill web-perf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/elithrar/dotfiles/tree/main/.config/opencode/skill/web-perf
Command: npx skills add https://github.com/elithrar/dotfiles --skill web-perf

SYSTEM DOCUMENTATION & REQUIREMENTS

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"]).

Frequently Asked Questions about web-perf

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I measure Core Web Vitals for my web pages?▼

Core Web Vitals measure page performance using metrics like LCP, FCP, CLS, and TBT. Use Chrome DevTools MCP to navigate to your page and start a performance trace, then analyze the Core Web Vitals breakdown to identify which metrics need improvement for faster load times and better user experience.

What are render-blocking resources and how do I find them?▼

Render-blocking resources are scripts and stylesheets that delay page rendering. Chrome DevTools MCP identifies them through network analysis and performance profiling, showing dependency chains so you can prioritize optimization and remove unnecessary blocking requests.

Can I audit accessibility and performance together?▼

Yes. Chrome DevTools MCP analyzes both accessibility gaps and Core Web Vitals in a single audit, generating Lighthouse scores and performance reports that show how accessibility issues and page speed interact across desktop and mobile views.

How do I identify caching issues affecting page speed?▼

Chrome DevTools MCP inspects network requests and resource dependency chains to detect missing or misconfigured caching headers. By analyzing request types—scripts, stylesheets, fonts, images—you can spot resources that should be cached but aren't, then optimize cache policies.

What do I need to set up before running a performance audit?▼

Configure the Chrome DevTools MCP local tool (chrome-devtools-mcp) on your system. Once configured, you can navigate to target URLs and run performance traces without additional dependencies, then export Core Web Vitals and network analysis results.

Can I profile pages for mobile performance separately from desktop?▼

Yes. Chrome DevTools MCP supports audits and profiling across both desktop and mobile pages, measuring Speed Index, LCP, and other Core Web Vitals separately for each context so you can optimize for different network and device conditions.

Related Skills

Explore More Software Engineering Skills→
claughinghouseclaughinghouse

web-perf

Analyze Core Web Vitals and network issues via Chrome DevTools MCP.

Community
Advanced
nicholasgriffintnnicholasgriffintn
2

web-perf

Audit Core Web Vitals and blocking resources for web pages.

Community
Advanced
warpdotdevwarpdotdev
820

web-performance-audit

Audit web page performance with Chrome DevTools MCP traces and Core Web Vitals.

Official
Advanced
rodrigotoledorodrigotoledo

chrome-devtools

Automate browser debugging and performance profiling using Chrome DevTools MCP commands.

Community
Intermediate