A comprehensive suite of 47 JavaScript snippets designed to measure, debug, and optimize web performance directly via Chrome DevTools.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install webperf
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 webperf 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 WebPerf Snippets Toolkit?
The WebPerf Snippets Toolkit is a specialized collection of Openclaw Skills designed for developers who need deep visibility into browser performance. By leveraging 47 distinct JavaScript snippets, it allows AI agents and developers to perform real-time audits of Core Web Vitals, loading sequences, and interaction latencies.
This toolkit transforms the Chrome DevTools console into a powerful diagnostic engine. Whether you are debugging Layout Shifts or investigating slow Server Response times, these Openclaw Skills provide structured, color-coded data to identify bottlenecks and improve user experience across any web property.
WebPerf Snippets Toolkit Use Cases
- Diagnosing slow Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) issues.
- Investigating Time to First Byte (TTFB) breakdowns including DNS and connection overhead.
- Debugging Interaction to Next Paint (INP) and identifying main thread blocking tasks.
- Auditing media assets for lazy loading, proper sizing, and optimization opportunities.
- Validating the effectiveness of resource hints and service worker implementations.
How WebPerf Snippets Toolkit Works
- The AI agent identifies the specific performance bottleneck based on user input (e.g., LCP, INP, or TTFB).
- The agent selects the appropriate sub-skill category from the Openclaw Skills library to access relevant snippets.
- Using the Chrome DevTools MCP, the agent navigates to the target URL and evaluates the selected JavaScript snippet.
- Performance data is captured from the browser console and analyzed against industry-standard thresholds.
- The toolkit generates actionable optimization recommendations based on the structured diagnostic results.
WebPerf Snippets Toolkit Setup
To use this toolkit, ensure you have the chrome-devtools MCP server configured in your environment.
# Example of triggering a performance audit via an AI agent
# 1. Navigate to the page
# 2. Evaluate the specific webperf snippet
# 3. Retrieve console logs for analysis
Navigate to the official repository at [https://github.com/nucliweb/webperf-snippets](https://github.com/nucliweb/webperf-snippets) to view the full library of 47 snippets.
WebPerf Snippets Toolkit Data Schema & Taxonomy
| Category | Snippet Count | Focus Area |
|---|---|---|
| core-web-vitals | 7 | LCP, CLS, and INP automated analysis |
| loading | 28 | TTFB, render-blocking scripts, and font optimization |
| interaction | 8 | Scroll jank and main thread investigation |
| media | 3 | Image, Video, and SVG optimization audits |
| resources | 1 | Network quality and adaptive loading strategies |
WebPerf Snippets Toolkit Advanced Features
- Intelligent decision trees for automated Core Web Vitals analysis.
- Detailed attribution for first-party vs. third-party script performance impacts.
- Adaptive loading strategy recommendations based on real-time network quality.
- Integration with Openclaw Skills workflows for multi-step performance regression testing.
- Automated detection of render-blocking resources and resource hint validation.
SKILL.md
Loading
Related Openclaw Skills
Gold Analysis
A sophisticated financial intelligence tool that synthesizes global data sources to provide comprehensive gold price trend analysis and actionable trading strategies.
System Load Monitor
A proactive resource management tool that monitors CPU and memory load to prevent server crashes by automatically controlling task execution flow.
ArXiv Watcher
A powerful tool for researchers and developers to monitor, fetch, and manage the latest scientific papers from arXiv.org directly within their AI agent environment.
Chef Dialog Recipe
A professional-grade AI culinary agent that generates, audits, and optimizes recipes through a multi-stage chef dialogue workflow.
AI Crush Simulator
A safe and encouraging AI agent that helps users decode text messages and navigate crush situations with playful, grounded advice.
WebCodecs String Finder
An AI agent skill that identifies and validates precise WebCodecs strings for web-based video and audio processing.
Featured*
