web-perf

Audit web page performance with Chrome DevTools MCP for Core Web Vitals and accessibility.

Updated Jan 21, 2026
One-click install
npx skills add https://github.com/HsnSaboor/open-engineer --skill web-perf-hsnsaboor
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/HsnSaboor/open-engineer/tree/main/src/skills/bundled/cloudflare-web-perf
Command: npx skills add https://github.com/HsnSaboor/open-engineer --skill web-perf-hsnsaboor

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill diagnoses and resolves issues that slow down web page loading and negatively impact user experience and search engine rankings.

Core Features & Use Cases

  • Core Web Vitals Analysis: Measures and identifies causes for poor LCP, CLS, and TBT.
  • Network Optimization: Detects render-blocking resources, identifies network chains, and checks caching.
  • Accessibility Audits: Flags high-level accessibility gaps like contrast issues and focus problems.
  • Use Case: Audit a given URL to identify why its Lighthouse score is low and receive actionable recommendations to improve its speed and user experience.

Quick Start

Analyze the web performance of the URL '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 to find causes of poor LCP and CLS?

To audit Core Web Vitals, this Skill navigates your URL using Chrome DevTools MCP to measure LCP, CLS, and TBT. It analyzes network requests and identifies layout shifts to pinpoint exactly what causes poor web performance.

What's the best way to identify render-blocking resources on my web page?

The best way to identify render-blocking resources is by analyzing network chains and tracing page loads with Chrome DevTools MCP. This Skill detects these resources and checks caching to provide actionable network optimization recommendations.

Why does my Lighthouse score drop, and how can I check web performance?

Your Lighthouse score drops due to unoptimized Core Web Vitals, render-blocking resources, or accessibility gaps. You can check web performance by running an audit that analyzes network requests, layout shifts, and contrast issues.

Can I check for accessibility gaps like contrast and focus problems during a performance audit?

Yes, you can check for accessibility gaps during a performance audit. This Skill flags high-level accessibility issues like contrast problems and focus errors alongside Core Web Vitals metrics to improve overall user experience.

Do I need Chrome DevTools MCP tools to analyze web page performance?

Yes, you need Chrome DevTools MCP tools available to analyze web page performance. This Skill requires these specific tools for navigation, tracing, and snapshotting to measure Core Web Vitals and identify render-blocking resources.

How do I analyze network requests and caching issues for a specific URL?

To analyze network requests and caching issues for a specific URL, the Skill uses Chrome DevTools MCP to trace network chains and detect render-blocking resources. This process outputs actionable recommendations to boost website speed.