A comprehensive web performance optimization system for auditing, diagnosing, and fixing Core Web Vitals and site speed bottlenecks.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install afrexai-web-performance-engine
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 afrexai-web-performance-engine 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 Engine?
The Web Performance Engine is a professional-grade framework designed to handle the entire lifecycle of web performance engineering. It provides developers using Openclaw Skills with a structured methodology to audit page metrics, diagnose critical rendering path bottlenecks, and implement high-impact fixes. By focusing on both server-side response times and client-side execution, this skill ensures that modern web applications meet the highest standards for user experience and search engine visibility.
Built for technical depth, the engine covers everything from server-side TTFB optimization and Brotli compression to advanced frontend techniques like critical CSS inlining and JavaScript code-splitting. It functions as a standalone diagnostic tool while maintaining the flexibility to integrate with industry-standard utilities like Lighthouse and WebPageTest when available.
Web Performance Engine Use Cases
- Performing deep-dive audits of production URLs to identify Core Web Vitals failures.
- Reducing Total Blocking Time (TBT) by identifying and refactoring heavy JavaScript execution.
- Improving Largest Contentful Paint (LCP) through optimized image loading and preloading strategies.
- Eliminating Cumulative Layout Shift (CLS) by implementing proper element dimensioning and font loading.
- Benchmarking mobile performance on throttled 4G connections to ensure a high-quality global experience.
How Web Performance Engine Works
- Run a Multi-Tier Audit to capture baseline metrics across three levels of severity, from critical rendering blocks to minor polish items.
- Execute the Performance Waterfall Diagnosis to map the lifecycle from DNS lookup to the final Interaction to Next Paint (INP).
- Utilize the Bottleneck Decision Tree to pinpoint whether the primary delay is server-side, network-bound, or execution-heavy.
- Apply targeted Fix Playbooks to address specific issues like render-blocking CSS, unoptimized hero images, or third-party script bloat.
- Validate improvements using the Performance Scoring Rubric to generate a 0-100 score based on weighted impact factors.
Web Performance Engine Setup
The Web Performance Engine is ready to use within your agent environment. To initiate a diagnostic session or audit, you can use natural language commands or shell-based checks.
# Check for server-side compression and HTTP version
curl -sI -H "Accept-Encoding: br,gzip" https://yourdomain.com | head -n 10
# Run a local audit script (example)
openclaw run audit --url https://yourdomain.com --device mobile
Ensure your environment has access to basic networking tools and the ability to fetch web content for external analysis.
Web Performance Engine Data Schema & Taxonomy
The skill organizes performance data using a structured YAML taxonomy to ensure consistency across audits and reports.
| Schema Type | Key Fields |
|---|---|
| Audit Brief | url, device, connection, region, core_web_vitals |
| Resource Map | total_kb, js_kb, css_kb, image_kb, request_count |
| Third-Party Impact | script_name, size_kb, blocks_render, essential_status |
| Performance Budget | lcp_threshold, tbt_threshold, budget_enforcement_rules |
| Scoring Rubric | weight, dimension_score, interpretation |
Web Performance Engine Advanced Features
- Predictive Resource Hints: Implementation of hover-triggered prefetching and navigation preloading.
- Bundle Analysis: Strategies for identifying duplicate code and tree-shaking opportunities in React and Vue apps.
- Edge-Case Management: Specialized optimization techniques for infinite scroll, e-commerce product pages, and media-heavy sites.
- Service Worker Caching: Pre-built templates for cache-first strategies for static assets and immutable resources.
- Production Monitoring: Logic for observing and reporting Real User Metrics (RUM) directly from the browser's PerformanceObserver API.
- Cross-Platform Playbooks: Specific optimization paths for Next.js, WordPress, and Static Site Generators through Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
Warranty & Returns Management
An expert AI system designed to build warranty programs, optimize returns processing, and reduce operational costs through defect categorization and compliance auditing.
Warehouse Operations Optimizer
A specialized AI consultant for auditing warehouse space, pick paths, labor productivity, and automation ROI.
Vibe Coding Mastery
A comprehensive operating methodology for building, testing, and deploying production-grade software using AI coding agents.
Veterinary Practice Operations
A comprehensive AI context pack for managing veterinary practice profitability, DEA compliance, OSHA safety, and staffing models.
Web Scraping & Data Extraction Engine
A production-ready framework for building ethical, resilient, and high-scale web data extraction pipelines.
Web3 and Blockchain Engineering
A comprehensive engineering framework for designing, developing, and securing decentralized applications and blockchain protocols.
Featured*
