A comprehensive performance analysis tool for AI agents to audit Core Web Vitals and network efficiency using Chrome DevTools.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install web-perf
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install web-perf using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Web Performance Audit Skill?
The web-perf skill is a specialized diagnostic tool designed for Openclaw Skills users who need to perform deep-dive technical audits of web applications. It leverages the Chrome DevTools MCP to measure critical performance metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP), while also identifying bottlenecks in the network dependency chain and layout shifts.
This skill empowers developers to transition from vague optimization goals to data-driven performance engineering. By integrating seamlessly into the AI agent workflow, it provides definitive findings on render-blocking resources and accessibility gaps, ensuring that every recommendation is backed by empirical data from a live browser environment. Whether you are debugging site speed or improving Lighthouse scores, this tool provides the technical depth required for modern web optimization.
Web Performance Audit Skill Use Cases
- Auditing site speed and Lighthouse scores for production web applications.
- Identifying render-blocking JavaScript and CSS that delay first paint.
- Debugging Cumulative Layout Shift (CLS) issues by locating specific DOM elements.
- Analyzing network request chains to identify late-discovered critical resources.
- Evaluating high-level accessibility gaps using automated tree snapshots.
How Web Performance Audit Skill Works
- Initialize the audit by navigating to the target URL and verifying the MCP environment.
- Execute a performance trace with a page reload to capture cold-load metrics and Core Web Vitals.
- Analyze specific performance insights such as LCP breakdown and document latency using automated tool calls.
- Perform a network analysis to list all requests and evaluate caching, headers, or payload issues.
- Generate an accessibility snapshot to flag contrast ratios and interactive naming gaps.
- Conduct an optional codebase analysis to recommend specific framework or bundler optimizations based on configuration files.
Web Performance Audit Skill Setup
To get started with this skill, ensure the chrome-devtools-mcp server is configured in your environment. Add the following to your MCP configuration file:
"chrome-devtools": {
"type": "local",
"command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}
Once the server is running, you can invoke the audit within Openclaw Skills by providing a target URL for navigation and tracing.
Web Performance Audit Skill Data Schema & Taxonomy
The skill organizes its findings into a structured report that categorizes performance and accessibility data as follows:
| Data Category | Details Captured |
|---|---|
| Core Web Vitals | Metrics for FCP, LCP, INP, TBT, and CLS with good/poor thresholds. |
| Performance Insights | Detailed breakdowns of LCP culprits and layout shift elements. |
| Network Requests | A taxonomy of resource types (Script, Stylesheet, Font) with request IDs. |
| Accessibility Tree | Snapshot of ARIA IDs, contrast ratios, and interactive element names. |
| Build Configuration | Identification of frameworks (Next.js, Vite, etc.) and tree-shaking settings. |
Web Performance Audit Skill Advanced Features
- Assertive verification of performance claims through direct DOM and network inspection.
- Quantitative impact estimation to prioritize fixes with the highest ROI.
- Support for multi-phase workflows including automated trace recording and reload cycles.
- Deep integration with Openclaw Skills to provide actionable code snippets for framework-specific optimizations.
- Detection of unused preconnects and inefficient polyfill targets.
SKILL.md
Loading
Related Openclaw Skills
zscore
A specialized tool for registering and managing AI agent identities on the Zeru ERC-8004 Registry across Base Mainnet and Sepolia.
Self-Prompt for Openclaw Agents
A technical implementation that forces AI agents to treat automated messages as mandatory tasks rather than passive background information.
Fortune Oracle
A local, privacy-first AI agent skill that provides personalized daily horoscopes, lucky elements, and behavioral suggestions based on astrological charts and birthdays.
Excalidraw Diagram Generator
A specialized skill for converting natural language descriptions into fully editable Excalidraw JSON diagram files.
Bay Club Manager
An automated browser-based skill for booking and managing tennis and pickleball courts at Bay Club locations.
Pharmaceutical Bidding Intelligence Collector
An automated agent skill that monitors provincial procurement sites to identify and evaluate pharmaceutical bidding opportunities.
Featured*
