skills.rest
claughinghouse
claughinghouseCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

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

Updated Mar 31, 2024
Search Tags:#audit#analyze#chrome-devtools#web-performance#core-web-vitals#network-analysis#frontend-optimization
One-click install
npx skills add https://github.com/claughinghouse/dotfiles --skill web-perf-claughinghouse
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/claughinghouse/dotfiles/tree/main/dot_config/opencode/skills/web-perf
Command: npx skills add https://github.com/claughinghouse/dotfiles --skill web-perf-claughinghouse

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed.

Core Features & Use Cases

  • Core Web Vitals analysis: measure FCP, LCP, TBT, CLS, Speed Index and diagnose causes.
  • Resource & network optimization: identify render-blocking resources and network dependency chains.
  • End-to-end audits: run MCP-based traces, analyze insights, and generate actionable recommendations.
  • Use Case: For a slow homepage, audit loading sequence, find bottlenecks, and propose targeted fixes.

Quick Start

Connect to the MCP server, navigate to your target URL using navigate_page, start a performance trace, and analyze Core Web Vitals to identify optimization opportunities.

Frequently Asked Questions about web-perf

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

FAQPage Schema
How do I analyze Core Web Vitals for a slow loading page?▼

Analyze page performance by navigating to the target URL and starting a performance trace via Chrome DevTools MCP. This measures Core Web Vitals like FCP, LCP, and CLS, identifying render-blocking resources and network dependency chains to generate actionable optimization insights.

Can I identify render-blocking resources and network dependency chains during a web performance audit?▼

Yes, a web performance audit identifies render-blocking resources and network dependency chains by analyzing network requests and performance traces. This reveals how resources queue and block rendering, allowing you to target specific bottlenecks slowing down your page load sequence.

What do I need to configure before auditing site speed with Chrome DevTools?▼

Auditing site speed requires configuring MCP with a local Chrome DevTools server. Once connected, you use commands like navigate_page and performance_start_trace to execute traces and analyze Core Web Vitals across multiple URLs and environments without manual inspection.

What is the best way to debug layout shifts and caching issues affecting Lighthouse scores?▼

The best way to debug layout shifts and caching issues is to run an end-to-end MCP-based performance trace. It analyzes Core Web Vitals insights and lists network requests to pinpoint exactly where caching fails and layout shifts occur, directing your Lighthouse score optimizations.

Does this performance analysis approach work for profiling multiple URLs across different environments?▼

Yes, this performance analysis works for profiling multiple URLs across different environments. By configuring MCP with a local Chrome DevTools server, you can navigate to various pages, execute performance traces, and analyze insights to compare site speed and loading bottlenecks systematically.

Related Skills

Explore More Software Engineering Skills→
pax-kpax-k
3

chrome-devtools-runtime-debugger

Debug browser runtime issues via Chrome DevTools MCP.

Community
Intermediate
kaone31056789kaone31056789
2

web-perf

Analyzes Core Web Vitals metrics and identifies web page bottlenecks.

Community
Advanced
yash-gargyash-garg

web-perf

Analyze web performance bottlenecks and identify optimization opportunities using Chrome DevTools.

Community
Advanced
act70255act70255

performance-profiling

Profile web application performance using Lighthouse CLI and Core Web Vitals.

Community
Advanced