Web Perf

What it does

This skill enables AI agents to audit web page performance using Chrome DevTools Model Context Protocol (MCP) tools. It focuses on identifying and addressing issues related to Core Web Vitals, network optimization, and accessibility gaps. The agent will analyze metrics like Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), along with network requests and DOM structure, to provide specific recommendations for improvement.

When to use it

• Analyzing the performance of a website or web page.
• Identifying bottlenecks impacting Core Web Vitals scores.
• Pinpointing accessibility issues on a webpage.
• Troubleshooting slow loading times or layout shifts.
• Evaluating network requests and resource optimization opportunities.

Key capabilities

• Navigating to specified URLs (navigate_page).
• Starting performance traces with automatic stopping and reload (performance_start_trace).
• Analyzing insights from performance traces (performance_analyze_insight).
• Listing network requests by type (list_network_requests).
• Retrieving details for specific network requests (get_network_request).
• Taking accessibility snapshots (take_snapshot).

Example prompts

• "Audit the performance of https://www.example.com."
• "Start a performance trace and analyze the LCP breakdown on this page."
• "List all script requests for https://www.example.com."
• “Take an accessibility snapshot of the homepage.”

Tips & gotchas

• MCP Setup Required: This skill requires Chrome DevTools MCP to be configured and accessible. You must ensure that the agent has access to a running chrome-devtools-mcp server by adding "chrome-devtools" : { "type" : "local" , "command" : [ "npx" , "-y" , "chrome-devtools-mcp@latest" ] } to your MCP configuration.
• Insight Names Vary: Insight names used in performance_analyze_insight may differ depending on the Chrome DevTools version. Inspect trace responses if needed to identify available insight names.
• Be Specific with Recommendations: The skill prioritizes actionable and specific recommendations, such as "compress hero.png (450KB) to WebP," rather than general suggestions.