Afrexai Web Performance Engine

# Web Performance Engine

Complete web performance optimization system. Audit, diagnose, fix, and monitor — no external tools required (but integrates with Lighthouse, WebPageTest, Chrome DevTools when available).

## Phase 1: Performance Audit

### Quick Health Check

Run these checks in order. Stop when you find the bottleneck tier.

**Tier 1 — Critical (blocks rendering):**
- [ ] Time to First Byte (TTFB) > 800ms → server problem
- [ ] First Contentful Paint (FCP) > 1.8s → render-blocking resources
- [ ] Largest Contentful Paint (LCP) > 2.5s → hero element problem
- [ ] Total Blocking Time (TBT) > 200ms → JavaScript problem
- [ ] Cumulative Layout Shift (CLS) > 0.1 → layout instability
- [ ] Interaction to Next Paint (INP) > 200ms → event handler problem

**Tier 2 — Important (affects experience):**
- [ ] Page weight > 2MB
- [ ] Requests > 80
- [ ] JavaScript > 500KB (compressed)
- [ ] Images > 1MB total
- [ ] No compression (gzip/brotli)
- [ ] No caching headers

**Tier 3 — Polish (competitive edge):**
- [ ] Speed Index > 3.4s
- [ ] Time to Interactive > 3.8s
- [ ] Font loading causes flash
- [ ] Third-party scripts > 30% of JS

### Audit Brief Template

```yaml
audit:
  url: ""
  device: "mobile"  # mobile | desktop | both
  connection: "4G"  # 3G | 4G | fiber
  region: ""        # closest to target users
  
scores:
  performance: null  # 0-100
  fcp_ms: null
  lcp_ms: null
  tbt_ms: null
  cls: null
  inp_ms: null
  ttfb_ms: null
  
page_weight:
  total_kb: null
  html_kb: null
  css_kb: null
  js_kb: null
  images_kb: null
  fonts_kb: null
  other_kb: null
  
requests:
  total: null
  by_type: {}
  third_party_count: null
  third_party_kb: null
```

### Getting Metrics Without Tools

If no Lighthouse/DevTools available, use web-based tools:
1. `web_fetch "https://pagespeed.web.dev/analysis?url={encoded_url}"` — Google's free tool
2. `web_search "webpagetest {url}"` — find cached results
3. `web_search "site:{domain} core web vitals"` — find CrUX data
4. Check...

# Web Performance Engine ⚡

Complete web performance optimization system for AI agents. Audit any website, diagnose bottlenecks, and fix them — with or without specialized tools.

## Install

```bash
clawhub install afrexai-web-performance-engine
```

## What It Does

- **Full Core Web Vitals audit** (LCP, FCP, TBT, CLS, INP, TTFB)
- **Bottleneck decision tree** — finds the root cause fast
- **10 fix playbooks** — server, render-blocking, images, JS, layout shifts, interactions
- **Resource loading strategy** — preload, prefetch, lazy loading done right
- **Third-party script audit** — with deferred loading patterns
- **Mobile-specific optimization** with targets and checklist
- **Performance budgets** with enforcement rules
- **100-point scoring rubric** across 8 dimensions
- **Framework-specific quick wins** (Next.js, WordPress, SPA, static)
- **Advanced techniques** — service workers, predictive prefetch, RUM monitoring

## Quick Start

```
"Audit https://example.com"
"What's slowing down my site?"
"Fix LCP on https://myapp.com"
"Set a performance budget for my project"
```

## Why This Over Other Performance Skills?

Other skills require Chrome DevTools MCP or external tools. This one works with **zero dependencies** — pure methodology. When tools are available, it uses them. When they're not, it guides you with web-based alternatives and manual checks.

19KB of actionable frameworks vs 7KB of tool-specific commands.

---

## ⚡ Level Up: AI Context Packs

Want to ship faster sites AND grow revenue? Our **SaaS Context Pack** ($47) includes complete technical + business playbooks for building high-performance SaaS products.

👉 [Browse all context packs](https://afrexai-cto.github.io/context-packs/)

## 🔗 More Free Skills by AfrexAI

- [afrexai-seo-content-engine](https://clawhub.com/skill/afrexai-seo-content-engine) — SEO-optimized content creation
- [afrexai-technical-docs](https://clawhub.com/skill/afrexai-technical-docs) — Documentation system
- [afrexai-co...