An intelligent performance analysis suite that automates TTFB investigation, render-blocking detection, and script optimization using Chrome DevTools workflows.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install webperf-loading
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-loading 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: Loading Performance?
WebPerf Loading Performance is a specialized technical toolkit designed to diagnose and resolve complex web performance bottlenecks. By utilizing Openclaw Skills, developers can automate the execution of advanced JavaScript snippets within Chrome DevTools to measure critical metrics like Time to First Byte (TTFB), First Contentful Paint (FCP), and resource loading priorities. This skill effectively bridges the gap between raw browser data and actionable performance engineering.
The system goes beyond simple measurements by offering deep-dive forensics into script execution, font loading strategies, and SSR hydration costs. It enables a data-driven approach to performance optimization, ensuring that every byte delivered to the browser contributes to a faster, more responsive user experience. Integrating these Openclaw Skills into your workflow allows for consistent, repeatable audits that identify anti-patterns in resource hints and loading strategies.
WebPerf: Loading Performance Use Cases
- Diagnosing slow server response times by breaking down TTFB into DNS, connection, and server processing sub-parts.
- Identifying and mitigating render-blocking CSS and JavaScript that delay initial page rendering.
- Auditing font loading strategies to eliminate Flash of Invisible Text (FOIT) and layout shifts.
- Analyzing the performance impact of third-party scripts versus first-party application code.
- Validating the implementation of resource hints like preload, prefetch, and fetchpriority for optimal resource discovery.
- Investigating SSR hydration overhead in modern frameworks like Next.js, Nuxt, and Remix.
How WebPerf: Loading Performance Works
- The AI agent connects to the browser environment using the Chrome DevTools MCP server.
- Targeted scripts are executed via the evaluate_script tool to gather high-resolution performance data.
- The agent monitors and captures console output to extract timing metrics and resource metadata.
- Integrated decision trees analyze the results; for example, if TTFB exceeds 600ms, the system automatically triggers a sub-part breakdown analysis.
- The skill synthesizes findings into a comprehensive performance report with specific remediation steps for the developer.
WebPerf: Loading Performance Setup
To utilize these performance snippets through Openclaw Skills, you must have the Chrome DevTools MCP server configured in your environment.
# Ensure your AI agent is configured with the chrome-devtools MCP server
# The snippets are invoked via the mcp__chrome-devtools__evaluate_script command
Simply point your agent to the repository containing the performance scripts to begin automated loading audits.
WebPerf: Loading Performance Data Schema & Taxonomy
| Category | Data Points Captured | Key Scripts |
|---|---|---|
| Server Timing | DNS, TCP, SSL, and Request/Response timings | TTFB-Sub-Parts.js |
| Rendering | Render-blocking resources, Critical CSS status | Find-render-blocking-resources.js |
| Scripts | Execution time, third-party attribution, loading patterns | Script-Loading.js |
| Assets | Font usage, image lazy-loading status, priority hints | Fonts-Preloaded-Loaded.js |
| Frameworks | SSR hydration data size and execution cost | SSR-Hydration-Data-Analysis.js |
WebPerf: Loading Performance Advanced Features
- Automated conditional workflows that pivot analysis based on detected performance thresholds (e.g., FCP > 1.8s).
- Cross-skill integration capabilities with Core Web Vitals and Media optimization modules.
- Detailed Service Worker forensics to identify overhead in PWA and cache-heavy applications.
- Support for Back/Forward Cache (bfcache) eligibility testing and remediation.
- Comprehensive resource hint validation to detect unused preloads or conflicting priority signals.
SKILL.md
Loading
Related Openclaw Skills
astockchaser (achaser)
A specialized AI investment assistant that fetches and analyzes the top 10 daily gainers in the A-share market.
sudo-gold
A comprehensive gold investment analysis tool providing real-time pricing, technical indicators, and fundamental market insights.
BookMorph Magic
A specialized orchestration template designed to transform books into professional, multi-format content packages including video, audio, and varied image assets.
Flutter Hive Database Wrapper
An automated Flutter skill that wraps Hive database services using the Repository pattern and MVVM architecture for streamlined local data persistence.
image-gen: AI Image Generation & Editing
A comprehensive image generation and editing tool for AI agents that supports text-to-image, image-to-image, and automatic file optimization.
Video Transcript
An automated tool for extracting, cleaning, and translating video subtitles into readable text transcripts.
Featured*
