skills.rest
ToanPV90
ToanPV90COMMUNITY
Explore all skills by this author →
GitHub

web-perf

Diagnoses web page performance issues via Core Web Vitals and Chrome DevTools tracing.

Updated Apr 15, 2026
Search Tags:#accessibility#chrome devtools#lighthouse#web performance#network analysis#core web vitals#render-blocking
One-click install
npx skills add https://github.com/ToanPV90/dotfiles --skill web-perf-toanpv90
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/ToanPV90/dotfiles/tree/main/agents/.agents/skills/web-perf
Command: npx skills add https://github.com/ToanPV90/dotfiles --skill web-perf-toanpv90

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you diagnose and fix slow page performance by measuring real Core Web Vitals and pinpointing the concrete causes in network behavior, rendering, and accessibility.

Core Features & Use Cases

  • Core Web Vitals auditing: Quantifies FCP, LCP, CLS, TBT, Speed Index (and guides you to focus on what’s actually failing).
  • Chrome DevTools trace insights: Uses the performance trace workflow to identify render delay, server latency, and dependency chains.
  • Network + bottleneck detection: Surfaces render-blocking resources, large payloads, missing preloads, and caching issues with actionable priorities.
  • Accessibility snapshot: Checks for high-level accessibility gaps using an a11y-focused snapshot.

Quick Start

Provide the target URL you want audited and ask the AI to run a full web performance trace and produce prioritized fixes for Core Web Vitals plus render-blocking, network dependencies, and accessibility gaps.

Frequently Asked Questions about web-perf

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

FAQPage Schema
How do I diagnose Core Web Vitals regressions like poor LCP or high CLS?▼

To diagnose Core Web Vitals regressions like poor LCP or high CLS, you run a Chrome DevTools performance trace and network inspection on the target URL. This identifies the underlying rendering delays, layout shifts, and server latencies causing the drops.

What is causing render-blocking resources and slow dependency chains on my web page?▼

Render-blocking resources and slow dependency chains are identified through network inspection and Chrome DevTools tracing. The process surfaces large payloads, missing preloads, and caching issues, prioritizing actionable fixes for network bottlenecks.

How do I find what's slowing my site down using Chrome DevTools and Lighthouse?▼

Finding what slows your site down requires navigating to the page, starting a Chrome DevTools performance trace, and inspecting network requests. This audits Lighthouse score drops and quantifies FCP, LCP, CLS, TBT, and Speed Index.

Can I audit web performance and check accessibility gaps at the same time?▼

You can audit web performance and check accessibility gaps simultaneously by running a full performance trace alongside an a11y-focused snapshot. This workflow quantifies Core Web Vitals while surfacing high-level accessibility issues.

Do I need specific Chrome DevTools MCP tools to run a network and performance trace?▼

Running a network and performance trace requires verifying chrome-devtools MCP tool availability first. Once verified, the tools navigate the page, start traces, and inspect network requests to identify render-blocking resources and dependency chains.

What's the best way to fix slow page performance and Lighthouse score drops?▼

The best way to fix slow page performance and Lighthouse score drops is measuring real Core Web Vitals and pinpointing concrete causes in network behavior and rendering. Prioritize fixes based on trace insights and network bottleneck detection.

Related Skills

Explore More Software Engineering Skills→
SithaboSithabo
1

web-perf

Audit Core Web Vitals and render-blocking resources for a target URL.

Community
Advanced
charl-krugercharl-kruger
5

web-perf

Measure Core Web Vitals and profile resource timing with Chrome DevTools MCP.

Community
Advanced
neverinfamousneverinfamous
19

web-perf

Audit frontend performance by measuring Core Web Vitals and render-blocking resources via Chrome DevTools MCP.

Community
Intermediate
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced