skills.rest
mpsuesser
mpsuesserCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

Measure Core Web Vitals and diagnose page-load bottlenecks using Chrome DevTools traces.

Updated Mar 12, 2026
Search Tags:#accessibility#lighthouse#web performance#network analysis#core web vitals#chromedevtools#render blocking
One-click install
npx skills add https://github.com/mpsuesser/workspace --skill web-perf-mpsuesser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/mpsuesser/workspace/tree/main/dotconfig/pi/agent/skills/.deprecated/cloudflare/web-perf
Command: npx skills add https://github.com/mpsuesser/workspace --skill web-perf-mpsuesser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you diagnose why a webpage loads slowly or performs poorly by analyzing Core Web Vitals, network behavior, and accessibility signals so you can focus on the highest-impact fixes.

Core Features & Use Cases

  • Core Web Vitals analysis (LCP, INP, CLS) with supporting metrics like FCP, TBT, and Speed Index to establish performance health and identify what’s driving bad scores.
  • Bottleneck identification for render-blocking resources, network dependency chains, layout shift culprits, caching issues, and resource timing anomalies.
  • Accessibility snapshot capture to detect key accessibility gaps that may impact user experience alongside performance.

Quick Start

Use the web-perf skill to audit a URL you choose by running an MCP-based Chrome DevTools trace and then summarizing the resulting Core Web Vitals, top issues, and specific optimization recommendations.

Frequently Asked Questions about web-perf

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

FAQPage Schema
How do I diagnose slow web page performance and identify bottlenecks?▼

Diagnose slow web page performance by running a Chrome DevTools trace to measure Core Web Vitals like LCP, INP, and CLS, then inspect network requests to pinpoint render-blocking resources and layout shift culprits.

What is the best way to audit Core Web Vitals for a specific URL?▼

Audit Core Web Vitals by capturing a performance trace that analyzes LCP, INP, CLS, and supporting metrics like FCP and Speed Index to establish page-load health and identify what drives bad Lighthouse scores.

How do I find render-blocking resources affecting my page speed?▼

Find render-blocking resources affecting page speed by analyzing network dependency chains and resource timing anomalies captured during a Chrome DevTools performance trace.

Do I need Chrome DevTools MCP tools to analyze page load behavior?▼

Yes, you need access to Chrome DevTools MCP tools to navigate pages, capture performance traces, analyze named insights, and inspect network requests to measure load behavior.

Can I capture accessibility snapshots alongside web performance metrics?▼

Yes, you can optionally capture accessibility snapshots alongside web performance metrics to detect key accessibility gaps that may impact user experience alongside Core Web Vitals scores.

Related Skills

Explore More Software Engineering Skills→
undgundg

web-perf

Analyze Core Web Vitals and performance bottlenecks using Chrome DevTools MCP.

Community
Advanced
daveiodaveio

web-perf

Measure Core Web Vitals and detect render-blocking resources with Chrome DevTools MCP.

Community
Intermediate
addyosmaniaddyosmani
84.9k

browser-testing-with-devtools

Inspect and debug live browser environments via Chrome DevTools MCP.

Community
Advanced
FabioFioritaFabioFiorita

web-perf

Analyze web page performance with Chrome DevTools MCP to measure Core Web Vitals.

Community
Advanced