skills.rest
brandonjjon
brandonjjonCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

Measure Core Web Vitals and diagnose page load performance using Chrome DevTools MCP.

Updated Apr 21, 2026
Search Tags:#auditing#lighthouse#analyze#chrome-devtools#web-performance#core-web-vitals
One-click install
npx skills add https://github.com/brandonjjon/astro-starter-cf --skill web-perf-brandonjjon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/brandonjjon/astro-starter-cf/tree/main/.agents/skills/web-perf
Command: npx skills add https://github.com/brandonjjon/astro-starter-cf --skill web-perf-brandonjjon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify and diagnose web performance issues by measuring Core Web Vitals and related metrics using Chrome DevTools MCP.

Core Features & Use Cases

  • Real-time performance metrics: measure LCP, INP, CLS, FCP, TBT, Speed Index and correlate with network requests.
  • Resource and network analysis: identify render-blocking resources, dependency chains, and caching problems.
  • Actionable optimization guidance: provide concrete suggestions to improve page speed and user experience across pages or routes.

Quick Start

Run a quick audit on a target page to generate actionable performance insights.

Frequently Asked Questions about web-perf

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

FAQPage Schema
How do I audit Core Web Vitals like LCP and INP for my website?▼

You can audit Core Web Vitals by analyzing LCP, INP, CLS, FCP, TBT, and Speed Index metrics using Chrome DevTools MCP. This process correlates performance metrics with network requests to identify render-blocking resources and dependency chains causing page speed issues.

What is the best way to analyze render-blocking resources during page load?▼

The best way to analyze render-blocking resources is through network and resource analysis using Chrome DevTools. This identifies dependency chains and caching problems, providing concrete suggestions to improve page speed and user experience across specific routes.

Can I measure Speed Index and Total Blocking Time without manual Chrome Devtools tracing?▼

Yes, you can measure Speed Index and Total Blocking Time without manual tracing by using MCP tooling. It automates navigation, performance tracing, and resource analysis to generate actionable optimization guidance for your target pages.

How do I debug slow page load performance across multiple site routes?▼

Debugging slow page load performance across routes involves navigation and performance tracing to measure Core Web Vitals. By profiling these interactions, you can identify network bottlenecks and receive automated recommendations to optimize user experience.

Does this web performance analysis require running Lighthouse separately?▼

Running Lighthouse separately is not required because the analysis measures Core Web Vitals directly using Chrome DevTools MCP. It provides automated recommendations by tracing navigation and profiling resource loading natively without external auditing dependencies.

Related Skills

Explore More Software Engineering Skills→
claughinghouseclaughinghouse

web-perf

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

Community
Advanced
JohnMarkCaponesJohnMarkCapones
3

web-performance-optimization

Analyze website loading speed, Core Web Vitals, and bundle size.

Community
Advanced
geinalageinala

performance

Diagnose and fix web performance bottlenecks using Lighthouse and Core Web Vitals.

Official
Advanced
smarmen86smarmen86

seo-unlighthouse

Run automated multi-page Lighthouse audits and generate aggregate JSON reports.

Community
Intermediate