skills.rest
Insik-Han
Insik-HanCOMMUNITY
Explore all skills by this author →
𝕏@insik0_0hanGitHub

web-perf

Analyzes web performance metrics and generates actionable improvement recommendations via ChromeDevTools MCP and Lighthouse scoring.

16|Updated Jun 6, 2026
Search Tags:#audit#lighthouse#devtools#web-performance#core-web-vitals#network-analysis#performance-trace
One-click install
npx skills add https://github.com/Insik-Han/han-monorepo-template --skill web-perf-insik-han
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/Insik-Han/han-monorepo-template/tree/main/.agents/skills/web-perf
Command: npx skills add https://github.com/Insik-Han/han-monorepo-template --skill web-perf-insik-han

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Analyzes and optimizes web performance using Chrome DevTools MCP, measuring Core Web Vitals and related metrics to pinpoint bottlenecks and guide improvements.

Core Features & Use Cases

  • Performance auditing: verifying MCP tool availability, starting traces, and collecting metrics for analysis.
  • Metric analysis: assess Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TTFB, Speed Index) to rank page performance and guide optimizations.
  • Network and accessibility insights: diagnose render-blocking resources, dependency chains, and accessibility gaps to inform fixes.
  • Guided optimizations: provide actionable recommendations to improve Lighthouse scores and overall site speed.

Quick Start

Provide a target URL and let the tool run a cold-load performance trace to generate a CWV report.

Frequently Asked Questions about web-perf

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

FAQPage Schema
How do I audit web performance using Lighthouse and Chrome DevTools?▼

You can audit web performance by providing a target URL to run a cold-load performance trace, which interfaces with Chrome DevTools MCP to collect Core Web Vitals and generate an actionable optimization report.

What is the best way to measure Core Web Vitals like LCP, INP, and CLS?▼

The best way to measure Core Web Vitals is through a performance profiling trace that assesses LCP, INP, CLS, and supplementary metrics like FCP and TTFB to rank page speed and identify exact loading bottlenecks.

How do I diagnose render-blocking resources from a network trace?▼

Diagnosing render-blocking resources from a network trace involves analyzing dependency chains and network requests collected via DevTools protocols to pinpoint scripts or stylesheets delaying page rendering.

Can I use this to improve Lighthouse scores for my web app?▼

Yes, you can improve Lighthouse scores by applying the guided optimizations generated from your performance audit, which target specific network bottlenecks, accessibility gaps, and slow loading metrics.

Does this performance profiling tool require specific dependencies?▼

No specific dependencies are required to use this performance profiling tool, as it interfaces directly with MCP tools and Chrome DevTools protocols to measure traces and collect network requests.

Why does my performance trace not capture slow loading metrics accurately?▼

A performance trace may not capture slow loading accurately if the tool availability is unverified or if it is not run as a cold-load, which is required to properly collect Core Web Vitals and quantify slow loads.

Related Skills

Explore More Software Engineering Skills→
cloudflarecloudflare
2.6k

web-perf

Audit web performance and diagnose Core Web Vitals issues using Chrome DevTools MCP.

Official
Advanced
khoikhoi
16

grilling

Interrogates a design plan one-question-at-a-time to surface assumptions and decisions.

Community
Intermediate
daveiodaveio

web-perf

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

Community
Intermediate
arroschavesarroschaves
1

web-perf

Audit web page performance and Core Web Vitals using Chrome DevTools MCP.

Community
Advanced