{"id":"eb005037-5eb6-4fa1-9917-c6e4ff00e523","entityType":"agent","slug":"clawhub-skills-1kalin-afrexai-web-performance-engine","name":"afrexai-web-performance-engine","canonicalUrl":"https://www.xpersona.co/agent/clawhub-skills-1kalin-afrexai-web-performance-engine","canonicalPath":"/agent/clawhub-skills-1kalin-afrexai-web-performance-engine","generatedAt":"2026-10-09T11:29:45.549Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":null},"description":"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 probl","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. Last updated 4/15/2026.","installCommand":"clawhub skill install skills:1kalin:afrexai-web-performance-engine","sourceUrl":"https://github.com/openclaw/skills/tree/main/skills/1kalin/afrexai-web-performance-engine","homepage":null,"primaryLinks":[{"label":"View on ClawHub","url":"https://github.com/openclaw/skills/tree/main/skills/1kalin/afrexai-web-performance-engine","kind":"source"}],"safetyScore":84,"overallRank":62,"popularityScore":50,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Web Performance Engine Web Performance Engine Complete web performance optimization system. Audit, diagnose, fix, and monitor — no external tools required (but "},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"no-adoption-signals","verified":false,"confidence":"low","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":"No source adoption metrics were available."},"stars":null,"forks":null,"downloads":null,"packageName":null,"latestVersion":null,"tractionLabel":null},"release":{"evidence":{"source":"agent-index","verified":false,"confidence":"medium","updatedAt":"2026-02-25T05:53:01.567Z","emptyReason":null},"lastUpdatedAt":"2026-04-15T00:45:39.800Z","lastCrawledAt":"2026-02-25T05:53:01.567Z","lastIndexedAt":null,"nextCrawlAt":"2026-02-26T05:53:01.567Z","lastVerifiedAt":null,"highlights":[]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install skills:1kalin:afrexai-web-performance-engine","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-web-performance-engine/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-web-performance-engine/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-web-performance-engine/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-web-performance-engine/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-web-performance-engine/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-web-performance-engine/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-09T11:29:45.549Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-web-performance-engine/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-web-performance-engine/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-web-performance-engine/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-web-performance-engine/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":null},"readme":"# Web Performance Engine\n\nComplete web performance optimization system. Audit, diagnose, fix, and monitor — no external tools required (but integrates with Lighthouse, WebPageTest, Chrome DevTools when available).\n\n## Phase 1: Performance Audit\n\n### Quick Health Check\n\nRun these checks in order. Stop when you find the bottleneck tier.\n\n**Tier 1 — Critical (blocks rendering):**\n- [ ] Time to First Byte (TTFB) > 800ms → server problem\n- [ ] First Contentful Paint (FCP) > 1.8s → render-blocking resources\n- [ ] Largest Contentful Paint (LCP) > 2.5s → hero element problem\n- [ ] Total Blocking Time (TBT) > 200ms → JavaScript problem\n- [ ] Cumulative Layout Shift (CLS) > 0.1 → layout instability\n- [ ] Interaction to Next Paint (INP) > 200ms → event handler problem\n\n**Tier 2 — Important (affects experience):**\n- [ ] Page weight > 2MB\n- [ ] Requests > 80\n- [ ] JavaScript > 500KB (compressed)\n- [ ] Images > 1MB total\n- [ ] No compression (gzip/brotli)\n- [ ] No caching headers\n\n**Tier 3 — Polish (competitive edge):**\n- [ ] Speed Index > 3.4s\n- [ ] Time to Interactive > 3.8s\n- [ ] Font loading causes flash\n- [ ] Third-party scripts > 30% of JS\n\n### Audit Brief Template\n\n```yaml\naudit:\n  url: \"\"\n  device: \"mobile\"  # mobile | desktop | both\n  connection: \"4G\"  # 3G | 4G | fiber\n  region: \"\"        # closest to target users\n  \nscores:\n  performance: null  # 0-100\n  fcp_ms: null\n  lcp_ms: null\n  tbt_ms: null\n  cls: null\n  inp_ms: null\n  ttfb_ms: null\n  \npage_weight:\n  total_kb: null\n  html_kb: null\n  css_kb: null\n  js_kb: null\n  images_kb: null\n  fonts_kb: null\n  other_kb: null\n  \nrequests:\n  total: null\n  by_type: {}\n  third_party_count: null\n  third_party_kb: null\n```\n\n### Getting Metrics Without Tools\n\nIf no Lighthouse/DevTools available, use web-based tools:\n1. `web_fetch \"https://pagespeed.web.dev/analysis?url={encoded_url}\"` — Google's free tool\n2. `web_search \"webpagetest {url}\"` — find cached results\n3. `web_search \"site:{domain} core web vitals\"` — find CrUX data\n4. Check `<head>` for obvious issues: render-blocking CSS/JS, missing preloads, no meta viewport\n\n## Phase 2: Diagnosis — The Performance Waterfall\n\n### Critical Rendering Path Analysis\n\n```\nDNS → TCP → TLS → TTFB → HTML Parse → CSSOM → Render Tree → FCP → LCP\n                                ↓\n                         JS Download → Parse → Execute → INP\n```\n\n**Bottleneck Decision Tree:**\n\n```\nHigh TTFB (>800ms)?\n├─ YES → Phase 3A: Server optimization\n└─ NO → High FCP (>1.8s)?\n    ├─ YES → Phase 3B: Render-blocking resources\n    └─ NO → High LCP (>2.5s)?\n        ├─ YES → Phase 3C: Hero element optimization\n        └─ NO → High TBT (>200ms)?\n            ├─ YES → Phase 3D: JavaScript optimization\n            └─ NO → High CLS (>0.1)?\n                ├─ YES → Phase 3E: Layout stability\n                └─ NO → High INP (>200ms)?\n                    ├─ YES → Phase 3F: Interaction optimization\n                    └─ NO → ✅ Performance is good!\n```\n\n### Resource Impact Scoring\n\nRate each resource by impact:\n\n| Factor | Weight | Score 1 | Score 3 | Score 5 |\n|--------|--------|---------|---------|---------|\n| Size (KB) | 3x | <10 | 10-100 | >100 |\n| Render-blocking | 5x | No | Partial | Full |\n| Above-fold impact | 4x | None | Indirect | Direct |\n| Cacheable | 2x | Long cache | Short cache | No cache |\n| Compressible | 2x | Already done | Possible | Not compressed |\n\n**Priority = Sum(Factor × Weight). Fix highest scores first.**\n\n## Phase 3: Fix Playbooks\n\n### 3A: Server Optimization (TTFB)\n\n**Quick wins:**\n```\n# CDN: If no CDN, this is #1 priority\n# Check: curl -sI {url} | grep -i 'x-cache\\|cf-cache\\|x-cdn'\n\n# Compression: Must have brotli or gzip\n# Check: curl -sI -H \"Accept-Encoding: br,gzip\" {url} | grep -i content-encoding\n\n# HTTP/2 or HTTP/3\n# Check: curl -sI --http2 {url} | head -1\n```\n\n**Server-side checklist:**\n- [ ] CDN in front (Cloudflare, Fastly, CloudFront)\n- [ ] Brotli compression enabled (20-30% smaller than gzip)\n- [ ] HTTP/2 minimum, HTTP/3 if possible\n- [ ] Server-side caching (Redis, Varnish)\n- [ ] Database query optimization (<50ms per query)\n- [ ] Connection pooling enabled\n- [ ] Edge computing for dynamic content (Workers, Lambda@Edge)\n\n**Cache headers template:**\n```\n# Static assets (CSS, JS, images, fonts)\nCache-Control: public, max-age=31536000, immutable\n\n# HTML pages\nCache-Control: public, max-age=0, must-revalidate\n\n# API responses\nCache-Control: private, max-age=60, stale-while-revalidate=300\n```\n\n### 3B: Render-Blocking Resources (FCP)\n\n**CSS optimization:**\n```html\n<!-- BEFORE: Render-blocking -->\n<link rel=\"stylesheet\" href=\"styles.css\">\n\n<!-- AFTER: Critical CSS inline + async load -->\n<style>/* Critical above-fold CSS here (< 14KB) */</style>\n<link rel=\"preload\" href=\"styles.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\">\n<noscript><link rel=\"stylesheet\" href=\"styles.css\"></noscript>\n```\n\n**Rules:**\n- Inline critical CSS (above-fold styles, < 14KB)\n- Defer non-critical CSS\n- Remove unused CSS (typical savings: 60-90%)\n- Combine media queries\n- Avoid `@import` (creates sequential loading)\n\n**JavaScript optimization:**\n```html\n<!-- BEFORE: Render-blocking -->\n<script src=\"app.js\"></script>\n\n<!-- AFTER: Non-blocking -->\n<script src=\"app.js\" defer></script>\n\n<!-- OR: Independent scripts -->\n<script src=\"analytics.js\" async></script>\n```\n\n**Rules:**\n- `defer` for app scripts (maintains order, runs after parse)\n- `async` for independent scripts (analytics, ads)\n- Never put `<script>` in `<head>` without defer/async\n- Inline small scripts (< 1KB)\n\n### 3C: Hero Element Optimization (LCP)\n\n**LCP element types and fixes:**\n\n| LCP Element | Fix |\n|------------|-----|\n| `<img>` | Preload + responsive + modern format |\n| `<video>` poster | Preload poster image |\n| CSS `background-image` | Preload + inline critical CSS |\n| Text block | Preload font + font-display: optional |\n\n**Image optimization checklist:**\n```html\n<!-- Optimal hero image -->\n<link rel=\"preload\" as=\"image\" href=\"hero.webp\" \n      imagesrcset=\"hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w\"\n      imagesizes=\"100vw\">\n\n<img src=\"hero.webp\" \n     srcset=\"hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w\"\n     sizes=\"100vw\"\n     width=\"1200\" height=\"600\"\n     alt=\"Hero description\"\n     fetchpriority=\"high\"\n     decoding=\"async\">\n```\n\n**Image format decision:**\n```\nPhoto/complex image? → WebP (25-35% smaller than JPEG)\n                     → AVIF (50% smaller, but slower encode)\nSimple graphic/logo? → SVG (scalable, tiny)\n                    → PNG only if transparency needed\nAnimation?          → WebM/MP4 video (not GIF — 90% smaller)\n```\n\n**Image size targets:**\n| Viewport | Max width | Target KB |\n|----------|-----------|-----------|\n| Mobile | 400px | < 50KB |\n| Tablet | 800px | < 100KB |\n| Desktop | 1200px | < 150KB |\n| Hero/banner | 1600px | < 200KB |\n\n### 3D: JavaScript Optimization (TBT)\n\n**Bundle analysis approach:**\n1. Check total JS size: `web_fetch` the page, count `<script>` tags\n2. Identify large libraries (React, Lodash, Moment.js)\n3. Check for duplicate code across bundles\n4. Identify unused exports\n\n**Common JS bloat and replacements:**\n\n| Library | Size | Alternative | Size |\n|---------|------|-------------|------|\n| moment.js | 67KB | date-fns | 2-10KB |\n| lodash (full) | 71KB | lodash-es (tree-shake) | 2-5KB |\n| jQuery | 87KB | vanilla JS | 0KB |\n| animate.css | 80KB | CSS animations | 1-2KB |\n| chart.js | 60KB | lightweight-charts | 40KB |\n\n**Code splitting rules:**\n- Route-based splitting (each page loads its own JS)\n- Component-level splitting for heavy components (modals, editors, charts)\n- Dynamic import for below-fold features: `const Chart = lazy(() => import('./Chart'))`\n- Vendor chunk for stable dependencies (changes rarely = long cache)\n\n**Long task breaking:**\n```javascript\n// BEFORE: Blocks main thread 200ms+\nfunction processLargeList(items) {\n  items.forEach(item => heavyComputation(item));\n}\n\n// AFTER: Yields to main thread\nasync function processLargeList(items) {\n  for (const item of items) {\n    heavyComputation(item);\n    // Yield every 50ms\n    if (performance.now() - start > 50) {\n      await scheduler.yield(); // or setTimeout(0)\n      start = performance.now();\n    }\n  }\n}\n```\n\n### 3E: Layout Stability (CLS)\n\n**Top CLS causes and fixes:**\n\n| Cause | Fix |\n|-------|-----|\n| Images without dimensions | Always set `width` + `height` |\n| Ads/embeds without space | Reserve space with `aspect-ratio` or `min-height` |\n| Dynamic content injection | Use CSS `contain` or reserved space |\n| Web fonts causing reflow | `font-display: optional` or `swap` with size-adjust |\n| Late-loading CSS | Inline critical CSS |\n\n**Anti-CLS patterns:**\n```css\n/* Reserve space for dynamic content */\n.ad-slot { min-height: 250px; }\n.embed-container { aspect-ratio: 16/9; }\n\n/* Prevent font swap reflow */\n@font-face {\n  font-family: 'Brand';\n  src: url('brand.woff2') format('woff2');\n  font-display: optional; /* No swap = no shift */\n  size-adjust: 105%; /* Match fallback metrics */\n}\n\n/* Contain layout shifts */\n.dynamic-widget {\n  contain: layout;\n  min-height: 200px;\n}\n```\n\n### 3F: Interaction Optimization (INP)\n\n**Event handler rules:**\n- Keep handlers < 50ms\n- Debounce scroll/resize (100-150ms)\n- Use `requestAnimationFrame` for visual updates\n- Offload heavy computation to Web Workers\n- Use `content-visibility: auto` for off-screen content\n\n**Input responsiveness:**\n```javascript\n// BEFORE: Blocks during type\ninput.addEventListener('input', (e) => {\n  expensiveFilter(e.target.value); // 100ms+ \n});\n\n// AFTER: Debounced + visual feedback\ninput.addEventListener('input', (e) => {\n  showSpinner(); // Instant visual feedback\n  debounce(() => expensiveFilter(e.target.value), 150);\n});\n```\n\n## Phase 4: Resource Loading Strategy\n\n### Preload / Prefetch / Preconnect Decision\n\n```html\n<!-- Preconnect: Third-party origins you'll need soon -->\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://cdn.example.com\" crossorigin>\n\n<!-- DNS-prefetch: Third-party origins you might need -->\n<link rel=\"dns-prefetch\" href=\"https://analytics.example.com\">\n\n<!-- Preload: Critical resources for THIS page -->\n<link rel=\"preload\" href=\"critical.css\" as=\"style\">\n<link rel=\"preload\" href=\"hero.webp\" as=\"image\">\n<link rel=\"preload\" href=\"brand.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>\n\n<!-- Prefetch: Resources for NEXT page (low priority) -->\n<link rel=\"prefetch\" href=\"/next-page.js\">\n\n<!-- Modulepreload: ES modules -->\n<link rel=\"modulepreload\" href=\"app.mjs\">\n```\n\n**Rules:**\n- Max 3-5 preloads per page (more = competing priorities)\n- Always preload: LCP image, critical font, above-fold CSS\n- Preconnect to known third-party origins (max 4-6)\n- Prefetch only on fast connections\n\n### Lazy Loading Strategy\n\n```\nAbove fold (viewport):     fetchpriority=\"high\", no lazy\nBelow fold (1-2 screens):  loading=\"lazy\", decoding=\"async\"\nWay below fold:            Intersection Observer, load on demand\nOff-screen widgets:        content-visibility: auto\n```\n\n### Font Loading Optimization\n\n```css\n/* Optimal font loading */\n@font-face {\n  font-family: 'Brand';\n  src: url('brand.woff2') format('woff2');\n  font-display: swap;\n  unicode-range: U+0000-00FF; /* Latin only if applicable */\n}\n```\n\n**Font checklist:**\n- [ ] WOFF2 format only (best compression)\n- [ ] Subset fonts (Latin, extended only if needed)\n- [ ] Max 2-3 font families\n- [ ] Max 4 font files total (regular, bold, italic, bold-italic)\n- [ ] Preload critical font files\n- [ ] Consider system font stack for body text\n\n**System font stacks:**\n```css\n/* Modern system fonts — zero network cost */\nfont-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n\n/* Monospace */\nfont-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;\n```\n\n## Phase 5: Third-Party Script Management\n\n### Impact Assessment\n\n```yaml\nthird_party_audit:\n  - script: \"Google Analytics 4\"\n    size_kb: 45\n    blocks_render: false\n    loads_more_scripts: true\n    total_impact_kb: 90\n    essential: true\n    mitigation: \"gtag async, delay until interaction\"\n    \n  - script: \"Intercom chat widget\"\n    size_kb: 200\n    blocks_render: false\n    loads_more_scripts: true\n    total_impact_kb: 450\n    essential: false\n    mitigation: \"Load on scroll/click, not page load\"\n```\n\n**Third-party loading strategies:**\n```javascript\n// Strategy 1: Load on interaction\ndocument.addEventListener('scroll', () => {\n  loadThirdParty('chat-widget.js');\n}, { once: true });\n\n// Strategy 2: Load after page is idle\nrequestIdleCallback(() => {\n  loadThirdParty('analytics.js');\n});\n\n// Strategy 3: Facade pattern (show placeholder until needed)\nchatButton.addEventListener('click', () => {\n  loadThirdParty('intercom.js').then(() => Intercom('show'));\n});\n```\n\n**Rules:**\n- Audit ALL third-party scripts quarterly\n- Every script needs a business justification\n- If a script loads >100KB, it needs a loading strategy\n- Self-host what you can (fonts, analytics alternatives)\n- Use `rel=\"noopener\"` on all external links\n\n## Phase 6: Mobile Performance\n\n### Mobile-Specific Optimization\n\n**Targets (mobile on 4G):**\n| Metric | Good | Needs Work | Poor |\n|--------|------|------------|------|\n| FCP | < 1.8s | 1.8-3.0s | > 3.0s |\n| LCP | < 2.5s | 2.5-4.0s | > 4.0s |\n| TBT | < 200ms | 200-600ms | > 600ms |\n| CLS | < 0.1 | 0.1-0.25 | > 0.25 |\n| INP | < 200ms | 200-500ms | > 500ms |\n\n**Mobile-specific checklist:**\n- [ ] Viewport meta tag present\n- [ ] Touch targets ≥ 48×48px\n- [ ] No horizontal scroll\n- [ ] Images responsive (srcset + sizes)\n- [ ] JS budget < 300KB (compressed) on mobile\n- [ ] Critical CSS < 14KB (fits in first TCP round trip)\n- [ ] Avoid complex CSS (heavy animations, large box-shadows)\n\n## Phase 7: Performance Budget\n\n### Setting Budgets\n\n```yaml\nperformance_budget:\n  metrics:\n    lcp_ms: 2500\n    fcp_ms: 1800\n    tbt_ms: 200\n    cls: 0.1\n    inp_ms: 200\n    \n  resources:\n    total_kb: 1500\n    js_kb: 350\n    css_kb: 80\n    images_kb: 800\n    fonts_kb: 100\n    \n  requests:\n    total: 60\n    third_party: 15\n    \n  lighthouse:\n    performance: 90\n    accessibility: 90\n    best_practices: 90\n    seo: 90\n```\n\n**Budget enforcement rules:**\n- Any PR that increases JS by >10KB needs justification\n- LCP regression > 200ms blocks deploy\n- Monthly Lighthouse audit — track trend\n- Per-route budgets for SPAs (homepage stricter than admin)\n\n### Budget Monitoring Template\n\n```yaml\n# Weekly performance check\ndate: \"YYYY-MM-DD\"\nurl: \"\"\ndevice: \"mobile\"\n\nscores:\n  lighthouse: null\n  lcp: null\n  fcp: null\n  tbt: null\n  cls: null\n\ntrend: \"improving | stable | degrading\"\nregressions: []\nactions: []\n```\n\n## Phase 8: Performance Scoring Rubric\n\nRate the site 0-100:\n\n| Dimension | Weight | 0-2 | 3-4 | 5 |\n|-----------|--------|-----|-----|---|\n| Core Web Vitals | 25% | All red | Mixed | All green |\n| Page weight | 15% | >5MB | 2-5MB | <2MB |\n| Caching strategy | 15% | None | Partial | Full with immutable |\n| Render path | 15% | Multiple blockers | Some optimized | Clean critical path |\n| Image optimization | 10% | Unoptimized | Partially | WebP/AVIF + responsive |\n| JavaScript health | 10% | >1MB, no splitting | Some splitting | <350KB, code-split |\n| Third-party control | 5% | Unmanaged | Some deferred | All managed + budgeted |\n| Mobile experience | 5% | Desktop-only | Responsive | Mobile-first optimized |\n\n**Score interpretation:**\n- 90-100: Elite. Maintain and iterate.\n- 70-89: Good. Fix the weakest dimension.\n- 50-69: Needs work. Follow Phase 3 playbooks.\n- <50: Critical. Start with server + render-blocking fixes.\n\n## Phase 9: Common Architectures — Quick Wins\n\n### Next.js / React\n- Use `next/image` (auto WebP, lazy, blur placeholder)\n- Enable ISR or SSG for static pages\n- Use `dynamic()` for heavy components\n- Check bundle with `@next/bundle-analyzer`\n- Middleware for edge caching\n\n### WordPress\n- Page cache plugin (WP Super Cache, W3 Total Cache)\n- Image optimization (ShortPixel, Imagify)\n- Disable unused plugins (each adds JS+CSS)\n- Use a CDN plugin\n- Consider static generation (Simply Static)\n\n### SPA (React/Vue/Svelte)\n- Route-based code splitting (mandatory)\n- SSR or SSG for SEO pages\n- Service worker for repeat visits\n- Skeleton screens (not spinners)\n- Virtual scrolling for long lists\n\n### Static Sites\n- Already fast — focus on image optimization\n- Deploy to CDN edge (Cloudflare Pages, Netlify, Vercel)\n- Inline all critical CSS\n- Minimal JS (< 50KB)\n\n## Phase 10: Advanced Techniques\n\n### Service Worker Caching\n\n```javascript\n// Cache-first for static assets\nself.addEventListener('fetch', (event) => {\n  if (event.request.url.match(/\\.(css|js|woff2|webp|avif)$/)) {\n    event.respondWith(\n      caches.match(event.request).then(cached => cached || fetch(event.request))\n    );\n  }\n});\n```\n\n### Resource Hints for Navigation\n\n```javascript\n// Predictive prefetch on hover\ndocument.querySelectorAll('a').forEach(link => {\n  link.addEventListener('mouseenter', () => {\n    const prefetch = document.createElement('link');\n    prefetch.rel = 'prefetch';\n    prefetch.href = link.href;\n    document.head.appendChild(prefetch);\n  }, { once: true });\n});\n```\n\n### Performance Monitoring in Production\n\n```javascript\n// Report Core Web Vitals\nnew PerformanceObserver((list) => {\n  for (const entry of list.getEntries()) {\n    // Send to analytics\n    sendToAnalytics({\n      metric: entry.name,\n      value: entry.value,\n      rating: entry.rating, // \"good\" | \"needs-improvement\" | \"poor\"\n    });\n  }\n}).observe({ type: 'largest-contentful-paint', buffered: true });\n```\n\n### Edge Cases\n\n**Infinite scroll / pagination:**\n- Virtual scrolling for >100 items\n- Intersection Observer to load batches\n- `content-visibility: auto` for off-screen items\n- Memory management: remove far-off-screen DOM nodes\n\n**SPAs with client-side routing:**\n- Measure soft navigations (not just initial load)\n- Report per-route metrics\n- Prefetch likely next routes\n- Keep route JS < 100KB each\n\n**E-commerce product pages:**\n- Preload first product image\n- Lazy load review section, related products\n- Defer recommendation engine JS\n- Cache product data with stale-while-revalidate\n\n**Media-heavy sites:**\n- Lazy load everything below fold\n- Use `<video>` not GIF (90% smaller)\n- Adaptive quality based on connection (Network Information API)\n- Progressive JPEG for large photos\n\n## Natural Language Commands\n\n- \"Audit {url}\" → Run full Phase 1 audit\n- \"Fix LCP on {url}\" → Phase 3C playbook\n- \"What's slowing down {url}?\" → Phase 2 diagnosis tree\n- \"Set performance budget for {project}\" → Phase 7 template\n- \"Score {url}\" → Phase 8 rubric\n- \"Optimize images on {url}\" → Phase 3C image checklist\n- \"Reduce JavaScript on {url}\" → Phase 3D JS optimization\n- \"Fix layout shifts on {url}\" → Phase 3E CLS playbook\n- \"Mobile performance audit for {url}\" → Phase 6\n- \"Third-party script audit for {url}\" → Phase 5\n- \"Weekly performance check for {url}\" → Phase 7 monitoring template\n- \"Compare {url1} vs {url2}\" → Side-by-side audit\n","readmeExcerpt":"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 probl","codeSnippets":[],"executableExamples":[{"language":"yaml","snippet":"audit:\n  url: \"\"\n  device: \"mobile\"  # mobile | desktop | both\n  connection: \"4G\"  # 3G | 4G | fiber\n  region: \"\"        # closest to target users\n  \nscores:\n  performance: null  # 0-100\n  fcp_ms: null\n  lcp_ms: null\n  tbt_ms: null\n  cls: null\n  inp_ms: null\n  ttfb_ms: null\n  \npage_weight:\n  total_kb: null\n  html_kb: null\n  css_kb: null\n  js_kb: null\n  images_kb: null\n  fonts_kb: null\n  other_kb: null\n  \nrequests:\n  total: null\n  by_type: {}\n  third_party_count: null\n  third_party_kb: null"},{"language":"text","snippet":"DNS → TCP → TLS → TTFB → HTML Parse → CSSOM → Render Tree → FCP → LCP\n                                ↓\n                         JS Download → Parse → Execute → INP"},{"language":"text","snippet":"High TTFB (>800ms)?\n├─ YES → Phase 3A: Server optimization\n└─ NO → High FCP (>1.8s)?\n    ├─ YES → Phase 3B: Render-blocking resources\n    └─ NO → High LCP (>2.5s)?\n        ├─ YES → Phase 3C: Hero element optimization\n        └─ NO → High TBT (>200ms)?\n            ├─ YES → Phase 3D: JavaScript optimization\n            └─ NO → High CLS (>0.1)?\n                ├─ YES → Phase 3E: Layout stability\n                └─ NO → High INP (>200ms)?\n                    ├─ YES → Phase 3F: Interaction optimization\n                    └─ NO → ✅ Performance is good!"},{"language":"text","snippet":"# CDN: If no CDN, this is #1 priority\n# Check: curl -sI {url} | grep -i 'x-cache\\|cf-cache\\|x-cdn'\n\n# Compression: Must have brotli or gzip\n# Check: curl -sI -H \"Accept-Encoding: br,gzip\" {url} | grep -i content-encoding\n\n# HTTP/2 or HTTP/3\n# Check: curl -sI --http2 {url} | head -1"},{"language":"text","snippet":"# Static assets (CSS, JS, images, fonts)\nCache-Control: public, max-age=31536000, immutable\n\n# HTML pages\nCache-Control: public, max-age=0, must-revalidate\n\n# API responses\nCache-Control: private, max-age=60, stale-while-revalidate=300"},{"language":"html","snippet":"<!-- BEFORE: Render-blocking -->\n<link rel=\"stylesheet\" href=\"styles.css\">\n\n<!-- AFTER: Critical CSS inline + async load -->\n<style>/* Critical above-fold CSS here (< 14KB) */</style>\n<link rel=\"preload\" href=\"styles.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\">\n<noscript><link rel=\"stylesheet\" href=\"styles.css\"></noscript>"}],"parameters":{},"dependencies":[],"permissions":[],"extractedFiles":[],"languages":["typescript"],"docsSourceLabel":"CLAWHUB","editorialOverview":"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 probl","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":385,"uniquenessScore":66,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-09T11:29:45.549Z","emptyReason":null},"items":[{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-10T18:48:31.762Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}