web-perf

Audit web performance using Chrome DevTools profiling tools and Core Web Vitals.

Updated Mar 11, 2025
One-click install
npx skills add https://github.com/MohammedSaudAlsahli/dotfiles --skill web-perf-mohammedsaudalsahli
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/MohammedSaudAlsahli/dotfiles/tree/main/mac-setup/home/config/agents/skills/web-perf
Command: npx skills add https://github.com/MohammedSaudAlsahli/dotfiles --skill web-perf-mohammedsaudalsahli

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp, and includes scripts (resource) components.

What problem does it solve?

This Skill addresses the challenge of understanding and improving web page performance, providing a comprehensive analysis of key metrics and actionable recommendations for optimization.

Core Features & Use Cases

  • Performance Analysis: Measure Core Web Vitals and other performance metrics.
  • Resource Optimization: Identify and recommend changes for render-blocking resources, network dependencies, and caching issues.
  • Accessibility Audit: Assess and suggest improvements for web accessibility.
  • Use Case: When tasked with optimizing a web page's speed, improving user experience, or increasing Lighthouse scores.

Quick Start

Run the web-perf skill to audit the performance of a web page 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 web performance using Chrome DevTools profiling tools?

To audit web performance, you can run a detailed analysis using Chrome DevTools' Memory and Performance profiling tools to measure Core Web Vitals and identify rendering bottlenecks. This process requires the chrome-devtools-mcp extension to function properly.

What's the best way to identify render-blocking resources and network dependencies?

The best way to identify render-blocking resources and network dependencies is through a comprehensive web performance audit that assesses supplementary metrics and pinpoints rendering bottlenecks, providing actionable recommendations for resource optimization.

Does this web performance analysis include a web accessibility audit?

Yes, web performance analysis includes a web accessibility audit. It assesses your web page to identify accessibility issues and suggests actionable improvements to enhance overall user experience alongside Core Web Vitals optimization.

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

Yes, you can use this to improve Lighthouse scores. It measures Core Web Vitals and supplementary metrics, identifies network and caching issues, and provides actionable insights to optimize your web page speed and rendering performance.

Do I need the chrome-devtools-mcp extension to measure Core Web Vitals?

Yes, you need the chrome-devtools-mcp extension to measure Core Web Vitals. The analysis requires access to Chrome DevTools' Memory and Performance profiling tools, which are accessed through this specific extension dependency.

Why does my web page have rendering bottlenecks during performance profiling?

Rendering bottlenecks occur due to render-blocking resources, network dependencies, and caching issues. A detailed performance profiling audit identifies these specific bottlenecks and suggests targeted improvements to resolve the rendering delays.