web-perf

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

Updated Nov 23, 2025
One-click install
npx skills add https://github.com/manuelbrandner85/Weltenbibliothekapp --skill web-perf-manuelbrandner85
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/manuelbrandner85/Weltenbibliothekapp/tree/main/.agents/skills/web-perf
Command: npx skills add https://github.com/manuelbrandner85/Weltenbibliothekapp --skill web-perf-manuelbrandner85

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the complexity of diagnosing and fixing slow website performance by providing a structured, data-driven audit process for Core Web Vitals and resource loading.

Core Features & Use Cases

  • Performance Auditing: Measures LCP, INP, CLS, and other critical metrics using Chrome DevTools.
  • Bottleneck Identification: Pinpoints render-blocking resources, network dependency chains, and layout shifts.
  • Use Case: When a landing page has a poor Lighthouse score, use this Skill to trace the load, identify the specific CSS or JS files blocking the render, and receive actionable optimization recommendations.

Quick Start

Use the web-perf skill to run a full performance trace and audit on the website located at https://example.com.

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 and identify render-blocking resources?

The web-perf Skill audits Core Web Vitals like LCP, INP, and CLS by executing a performance trace via Chrome DevTools, pinpointing render-blocking CSS or JS files and network dependency chains to provide actionable optimization recommendations.

Why does my landing page have a poor Lighthouse score and how can I fix it?

A poor Lighthouse score often stems from render-blocking resources or layout shifts. The web-perf Skill traces the page load to identify specific bottlenecks and provides actionable optimization recommendations to fix slow website performance.

Do I need Chrome DevTools configured to run a web performance audit?

Yes, you need the chrome-devtools-mcp server configured and accessible. The web-perf Skill requires this environment to execute performance traces and conduct network analysis for identifying page load speed bottlenecks and optimization opportunities in web applications.

What is the best way to diagnose slow website performance and network dependency chains?

The best way to diagnose slow website performance is through a structured, data-driven audit process. By analyzing web performance metrics and resource loading behavior with Chrome DevTools, you can identify network dependency chains and render-blocking resources causing delays.

How do I trace page load speed and find layout shifts in my web application?

You trace page load speed by running a full performance trace that measures critical metrics. The web-perf Skill identifies layout shifts and render-blocking resources, providing a data-driven audit of your web application's resource loading and optimization opportunities.

Are there limitations when optimizing web performance metrics with automated auditing?

Automated web performance auditing is limited to identifying optimization opportunities within the traced session. The web-perf Skill requires the chrome-devtools-mcp server to be accessible for accurate trace execution and network analysis, but does not directly modify your code.