web-performance-audit

Audit web performance with Chrome DevTools MCP tools and analyze Core Web Vitals.

Updated Mar 17, 2026
One-click install
npx skills add https://github.com/jaypatrick/skills --skill web-performance-audit-jaypatrick
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-performance-audit
Source: https://github.com/jaypatrick/skills/tree/main/web-performance-audit
Command: npx skills add https://github.com/jaypatrick/skills --skill web-performance-audit-jaypatrick

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit and optimize web performance to identify bottlenecks, improve load times, and ensure better Core Web Vitals, Lighthouse scores, and accessibility.

Core Features & Use Cases

  • Phase-based workflow: Performance Trace, Core Web Vitals analysis, Network analysis, Accessibility snapshot, and optional Codebase analysis.
  • Applicable to development and production sites for profiling, debugging, and optimizing page load speed, resource timing, and user-perceived performance.
  • Example scenario: run the workflow on a production URL to surface TTFB, LCP, CLS drivers, and actionable improvements.

Quick Start

Navigate to the target URL and run the MCP workflow to record a performance trace and analyze core metrics.

Frequently Asked Questions about web-performance-audit

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

FAQPage Schema
How do I audit web performance for Core Web Vitals and Lighthouse scores?

To audit web performance, this workflow uses Chrome DevTools MCP to record a performance trace and analyze Core Web Vitals, network efficiency, and accessibility. It surfaces metrics like TTFB, LCP, and CLS drivers to identify bottlenecks and improve load times.

Can I profile page load speed on production sites using Chrome DevTools MCP?

Yes, you can profile page load speed on production sites using Chrome DevTools MCP. The workflow is applicable to both development and production environments for debugging resource timing and optimizing user-perceived performance.

What do I need to run a Chrome DevTools MCP performance trace?

To run a performance trace, you need a locally configured Chrome DevTools MCP server using the command "npx -y chrome-devtools-mcp@latest". Once configured, navigate to the target URL and run the workflow to analyze core metrics.

What is the best way to debug network efficiency and accessibility bottlenecks?

The best way to debug network efficiency and accessibility bottlenecks is a phase-based workflow that analyzes network requests and takes accessibility snapshots. This process identifies resource timing issues and accessibility gaps across your target pages.

Does the web performance audit include codebase analysis for optimization?

Yes, the web performance audit includes an optional codebase analysis phase alongside performance tracing, Core Web Vitals analysis, network analysis, and accessibility snapshots. This helps surface actionable improvements for load times and user-perceived performance.

Why does profiling Core Web Vitals require a local Chrome DevTools MCP server?

Profiling Core Web Vitals requires a local Chrome DevTools MCP server because the audit workflow integrates directly with local browser developer tools to record accurate performance traces, measure network efficiency, and capture accessibility snapshots.