skills.rest
TrendpilotAI
TrendpilotAICOMMUNITY
Explore all skills by this author →
𝕏@NathanStvnsnGitHub

web-perf

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

Updated Aug 27, 2026
Search Tags:#debugging#accessibility#optimization#lighthouse#web performance#core web vitals
One-click install
npx skills add https://github.com/TrendpilotAI/invesco-demo --skill web-perf-trendpilotai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/TrendpilotAI/invesco-demo/tree/main/skills/web-perf
Command: npx skills add https://github.com/TrendpilotAI/invesco-demo --skill web-perf-trendpilotai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses slow website loading times and poor user experience by diagnosing and recommending fixes for performance bottlenecks.

Core Features & Use Cases

  • Core Web Vitals Analysis: Measures and reports on key metrics like LCP, CLS, and TBT.
  • Network Optimization: Identifies render-blocking resources, network dependency chains, and caching issues.
  • Accessibility Auditing: Provides a high-level overview of accessibility gaps impacting performance.
  • Use Case: A user wants to improve their website's Lighthouse score and reduce bounce rates caused by slow load times.

Quick Start

Analyze the web performance of the given URL by navigating to it and starting a performance trace.

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 to diagnose slow website loading times?▼

Analyze Core Web Vitals by navigating to a URL and starting a performance trace to measure LCP, CLS, and TBT. This process diagnoses slow website loading times, identifies performance bottlenecks causing poor user experience, and renders actionable optimization recommendations.

What is the best way to identify render-blocking resources and network dependency chains?▼

Identify render-blocking resources and network dependency chains using Chrome DevTools MCP tools. This network optimization profiling traces asset loading, exposes caching issues, and highlights scripts delaying page render to improve overall site speed.

How do I debug layout shifts that hurt my Lighthouse scores?▼

Debug layout shifts by running a performance trace that measures Cumulative Layout Shift metrics. This profiling identifies unstable page elements and accessibility gaps, providing recommendations to stabilize rendering and improve your Lighthouse audit scores.

Can I audit accessibility gaps that impact web performance using Chrome DevTools?▼

Yes, you can audit accessibility gaps using Chrome DevTools MCP tools. The performance analysis includes a high-level overview of accessibility issues impacting page load performance, helping you address rendering delays and improve site speed.

Does this web performance optimization approach require specific browser extensions?▼

No browser extensions are required. The optimization approach leverages Chrome DevTools MCP tools directly to audit, profile, and debug page load performance, measuring Core Web Vitals and identifying caching issues without external dependencies.

Related Skills

Explore More Software Engineering Skills→
manuelbrandner85manuelbrandner85

web-perf

Analyze web performance metrics and identify optimization opportunities using Chrome DevTools MCP.

Community
Advanced
daveiodaveio

web-perf

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

Community
Intermediate
hopeoverturehopeoverture
6

performance-budget-enforcer

Enforce performance budgets on bundle sizes, Lighthouse scores, and Web Vitals in CI/CD pipelines.

Community
Advanced
charl-krugercharl-kruger
5

web-perf

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

Community
Advanced