{
  "schemaVersion": "1.0",
  "item": {
    "slug": "afrexai-web-performance-engine",
    "name": "Web Performance Engine",
    "source": "tencent",
    "type": "skill",
    "category": "效率提升",
    "sourceUrl": "https://clawhub.ai/1kalin/afrexai-web-performance-engine",
    "canonicalUrl": "https://clawhub.ai/1kalin/afrexai-web-performance-engine",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/afrexai-web-performance-engine",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-web-performance-engine",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "README.md",
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/afrexai-web-performance-engine"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/afrexai-web-performance-engine",
    "agentPageUrl": "https://openagent3.xyz/skills/afrexai-web-performance-engine/agent",
    "manifestUrl": "https://openagent3.xyz/skills/afrexai-web-performance-engine/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/afrexai-web-performance-engine/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Web Performance Engine",
        "body": "Complete web performance optimization system. Audit, diagnose, fix, and monitor — no external tools required (but integrates with Lighthouse, WebPageTest, Chrome DevTools when available)."
      },
      {
        "title": "Quick Health Check",
        "body": "Run these checks in order. Stop when you find the bottleneck tier.\n\nTier 1 — Critical (blocks rendering):\n\nTime 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\nTier 2 — Important (affects experience):\n\nPage weight > 2MB\n Requests > 80\n JavaScript > 500KB (compressed)\n Images > 1MB total\n No compression (gzip/brotli)\n No caching headers\n\nTier 3 — Polish (competitive edge):\n\nSpeed Index > 3.4s\n Time to Interactive > 3.8s\n Font loading causes flash\n Third-party scripts > 30% of JS"
      },
      {
        "title": "Audit Brief Template",
        "body": "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"
      },
      {
        "title": "Getting Metrics Without Tools",
        "body": "If no Lighthouse/DevTools available, use web-based tools:\n\nweb_fetch \"https://pagespeed.web.dev/analysis?url={encoded_url}\" — Google's free tool\nweb_search \"webpagetest {url}\" — find cached results\nweb_search \"site:{domain} core web vitals\" — find CrUX data\nCheck <head> for obvious issues: render-blocking CSS/JS, missing preloads, no meta viewport"
      },
      {
        "title": "Critical Rendering Path Analysis",
        "body": "DNS → TCP → TLS → TTFB → HTML Parse → CSSOM → Render Tree → FCP → LCP\n                                ↓\n                         JS Download → Parse → Execute → INP\n\nBottleneck Decision Tree:\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!"
      },
      {
        "title": "Resource Impact Scoring",
        "body": "Rate each resource by impact:\n\nFactorWeightScore 1Score 3Score 5Size (KB)3x<1010-100>100Render-blocking5xNoPartialFullAbove-fold impact4xNoneIndirectDirectCacheable2xLong cacheShort cacheNo cacheCompressible2xAlready donePossibleNot compressed\n\nPriority = Sum(Factor × Weight). Fix highest scores first."
      },
      {
        "title": "3A: Server Optimization (TTFB)",
        "body": "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\nServer-side checklist:\n\nCDN 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\nCache 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"
      },
      {
        "title": "3B: Render-Blocking Resources (FCP)",
        "body": "CSS optimization:\n\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\nRules:\n\nInline critical CSS (above-fold styles, < 14KB)\nDefer non-critical CSS\nRemove unused CSS (typical savings: 60-90%)\nCombine media queries\nAvoid @import (creates sequential loading)\n\nJavaScript optimization:\n\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\nRules:\n\ndefer for app scripts (maintains order, runs after parse)\nasync for independent scripts (analytics, ads)\nNever put <script> in <head> without defer/async\nInline small scripts (< 1KB)"
      },
      {
        "title": "3C: Hero Element Optimization (LCP)",
        "body": "LCP element types and fixes:\n\nLCP ElementFix<img>Preload + responsive + modern format<video> posterPreload poster imageCSS background-imagePreload + inline critical CSSText blockPreload font + font-display: optional\n\nImage optimization checklist:\n\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\nImage 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\nImage size targets:\n\nViewportMax widthTarget KBMobile400px< 50KBTablet800px< 100KBDesktop1200px< 150KBHero/banner1600px< 200KB"
      },
      {
        "title": "3D: JavaScript Optimization (TBT)",
        "body": "Bundle analysis approach:\n\nCheck total JS size: web_fetch the page, count <script> tags\nIdentify large libraries (React, Lodash, Moment.js)\nCheck for duplicate code across bundles\nIdentify unused exports\n\nCommon JS bloat and replacements:\n\nLibrarySizeAlternativeSizemoment.js67KBdate-fns2-10KBlodash (full)71KBlodash-es (tree-shake)2-5KBjQuery87KBvanilla JS0KBanimate.css80KBCSS animations1-2KBchart.js60KBlightweight-charts40KB\n\nCode splitting rules:\n\nRoute-based splitting (each page loads its own JS)\nComponent-level splitting for heavy components (modals, editors, charts)\nDynamic import for below-fold features: const Chart = lazy(() => import('./Chart'))\nVendor chunk for stable dependencies (changes rarely = long cache)\n\nLong task breaking:\n\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}"
      },
      {
        "title": "3E: Layout Stability (CLS)",
        "body": "Top CLS causes and fixes:\n\nCauseFixImages without dimensionsAlways set width + heightAds/embeds without spaceReserve space with aspect-ratio or min-heightDynamic content injectionUse CSS contain or reserved spaceWeb fonts causing reflowfont-display: optional or swap with size-adjustLate-loading CSSInline critical CSS\n\nAnti-CLS patterns:\n\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}"
      },
      {
        "title": "3F: Interaction Optimization (INP)",
        "body": "Event handler rules:\n\nKeep handlers < 50ms\nDebounce scroll/resize (100-150ms)\nUse requestAnimationFrame for visual updates\nOffload heavy computation to Web Workers\nUse content-visibility: auto for off-screen content\n\nInput responsiveness:\n\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});"
      },
      {
        "title": "Preload / Prefetch / Preconnect Decision",
        "body": "<!-- 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\nRules:\n\nMax 3-5 preloads per page (more = competing priorities)\nAlways preload: LCP image, critical font, above-fold CSS\nPreconnect to known third-party origins (max 4-6)\nPrefetch only on fast connections"
      },
      {
        "title": "Lazy Loading Strategy",
        "body": "Above 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"
      },
      {
        "title": "Font Loading Optimization",
        "body": "/* 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\nFont checklist:\n\nWOFF2 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\nSystem font stacks:\n\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;"
      },
      {
        "title": "Impact Assessment",
        "body": "third_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\nThird-party loading strategies:\n\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\nRules:\n\nAudit ALL third-party scripts quarterly\nEvery script needs a business justification\nIf a script loads >100KB, it needs a loading strategy\nSelf-host what you can (fonts, analytics alternatives)\nUse rel=\"noopener\" on all external links"
      },
      {
        "title": "Mobile-Specific Optimization",
        "body": "Targets (mobile on 4G):\n\nMetricGoodNeeds WorkPoorFCP< 1.8s1.8-3.0s> 3.0sLCP< 2.5s2.5-4.0s> 4.0sTBT< 200ms200-600ms> 600msCLS< 0.10.1-0.25> 0.25INP< 200ms200-500ms> 500ms\n\nMobile-specific checklist:\n\nViewport 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)"
      },
      {
        "title": "Setting Budgets",
        "body": "performance_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\nBudget enforcement rules:\n\nAny PR that increases JS by >10KB needs justification\nLCP regression > 200ms blocks deploy\nMonthly Lighthouse audit — track trend\nPer-route budgets for SPAs (homepage stricter than admin)"
      },
      {
        "title": "Budget Monitoring Template",
        "body": "# 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: []"
      },
      {
        "title": "Phase 8: Performance Scoring Rubric",
        "body": "Rate the site 0-100:\n\nDimensionWeight0-23-45Core Web Vitals25%All redMixedAll greenPage weight15%>5MB2-5MB<2MBCaching strategy15%NonePartialFull with immutableRender path15%Multiple blockersSome optimizedClean critical pathImage optimization10%UnoptimizedPartiallyWebP/AVIF + responsiveJavaScript health10%>1MB, no splittingSome splitting<350KB, code-splitThird-party control5%UnmanagedSome deferredAll managed + budgetedMobile experience5%Desktop-onlyResponsiveMobile-first optimized\n\nScore interpretation:\n\n90-100: Elite. Maintain and iterate.\n70-89: Good. Fix the weakest dimension.\n50-69: Needs work. Follow Phase 3 playbooks.\n<50: Critical. Start with server + render-blocking fixes."
      },
      {
        "title": "Next.js / React",
        "body": "Use next/image (auto WebP, lazy, blur placeholder)\nEnable ISR or SSG for static pages\nUse dynamic() for heavy components\nCheck bundle with @next/bundle-analyzer\nMiddleware for edge caching"
      },
      {
        "title": "WordPress",
        "body": "Page cache plugin (WP Super Cache, W3 Total Cache)\nImage optimization (ShortPixel, Imagify)\nDisable unused plugins (each adds JS+CSS)\nUse a CDN plugin\nConsider static generation (Simply Static)"
      },
      {
        "title": "SPA (React/Vue/Svelte)",
        "body": "Route-based code splitting (mandatory)\nSSR or SSG for SEO pages\nService worker for repeat visits\nSkeleton screens (not spinners)\nVirtual scrolling for long lists"
      },
      {
        "title": "Static Sites",
        "body": "Already fast — focus on image optimization\nDeploy to CDN edge (Cloudflare Pages, Netlify, Vercel)\nInline all critical CSS\nMinimal JS (< 50KB)"
      },
      {
        "title": "Service Worker Caching",
        "body": "// 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});"
      },
      {
        "title": "Resource Hints for Navigation",
        "body": "// 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});"
      },
      {
        "title": "Performance Monitoring in Production",
        "body": "// 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 });"
      },
      {
        "title": "Edge Cases",
        "body": "Infinite scroll / pagination:\n\nVirtual scrolling for >100 items\nIntersection Observer to load batches\ncontent-visibility: auto for off-screen items\nMemory management: remove far-off-screen DOM nodes\n\nSPAs with client-side routing:\n\nMeasure soft navigations (not just initial load)\nReport per-route metrics\nPrefetch likely next routes\nKeep route JS < 100KB each\n\nE-commerce product pages:\n\nPreload first product image\nLazy load review section, related products\nDefer recommendation engine JS\nCache product data with stale-while-revalidate\n\nMedia-heavy sites:\n\nLazy load everything below fold\nUse <video> not GIF (90% smaller)\nAdaptive quality based on connection (Network Information API)\nProgressive JPEG for large photos"
      },
      {
        "title": "Natural Language Commands",
        "body": "\"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"
      }
    ],
    "body": "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\nPhase 1: Performance Audit\nQuick Health Check\n\nRun these checks in order. Stop when you find the bottleneck tier.\n\nTier 1 — Critical (blocks rendering):\n\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\nTier 2 — Important (affects experience):\n\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\nTier 3 — Polish (competitive edge):\n\n Speed Index > 3.4s\n Time to Interactive > 3.8s\n Font loading causes flash\n Third-party scripts > 30% of JS\nAudit Brief Template\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\nGetting Metrics Without Tools\n\nIf no Lighthouse/DevTools available, use web-based tools:\n\nweb_fetch \"https://pagespeed.web.dev/analysis?url={encoded_url}\" — Google's free tool\nweb_search \"webpagetest {url}\" — find cached results\nweb_search \"site:{domain} core web vitals\" — find CrUX data\nCheck <head> for obvious issues: render-blocking CSS/JS, missing preloads, no meta viewport\nPhase 2: Diagnosis — The Performance Waterfall\nCritical Rendering Path Analysis\nDNS → TCP → TLS → TTFB → HTML Parse → CSSOM → Render Tree → FCP → LCP\n                                ↓\n                         JS Download → Parse → Execute → INP\n\n\nBottleneck Decision Tree:\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\nResource Impact Scoring\n\nRate each resource by impact:\n\nFactor\tWeight\tScore 1\tScore 3\tScore 5\nSize (KB)\t3x\t<10\t10-100\t>100\nRender-blocking\t5x\tNo\tPartial\tFull\nAbove-fold impact\t4x\tNone\tIndirect\tDirect\nCacheable\t2x\tLong cache\tShort cache\tNo cache\nCompressible\t2x\tAlready done\tPossible\tNot compressed\n\nPriority = Sum(Factor × Weight). Fix highest scores first.\n\nPhase 3: Fix Playbooks\n3A: Server Optimization (TTFB)\n\nQuick 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\nServer-side checklist:\n\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\nCache 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\n3B: Render-Blocking Resources (FCP)\n\nCSS optimization:\n\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\nRules:\n\nInline critical CSS (above-fold styles, < 14KB)\nDefer non-critical CSS\nRemove unused CSS (typical savings: 60-90%)\nCombine media queries\nAvoid @import (creates sequential loading)\n\nJavaScript optimization:\n\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\nRules:\n\ndefer for app scripts (maintains order, runs after parse)\nasync for independent scripts (analytics, ads)\nNever put <script> in <head> without defer/async\nInline small scripts (< 1KB)\n3C: Hero Element Optimization (LCP)\n\nLCP element types and fixes:\n\nLCP Element\tFix\n<img>\tPreload + responsive + modern format\n<video> poster\tPreload poster image\nCSS background-image\tPreload + inline critical CSS\nText block\tPreload font + font-display: optional\n\nImage optimization checklist:\n\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\nImage 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\nImage size targets:\n\nViewport\tMax width\tTarget KB\nMobile\t400px\t< 50KB\nTablet\t800px\t< 100KB\nDesktop\t1200px\t< 150KB\nHero/banner\t1600px\t< 200KB\n3D: JavaScript Optimization (TBT)\n\nBundle analysis approach:\n\nCheck total JS size: web_fetch the page, count <script> tags\nIdentify large libraries (React, Lodash, Moment.js)\nCheck for duplicate code across bundles\nIdentify unused exports\n\nCommon JS bloat and replacements:\n\nLibrary\tSize\tAlternative\tSize\nmoment.js\t67KB\tdate-fns\t2-10KB\nlodash (full)\t71KB\tlodash-es (tree-shake)\t2-5KB\njQuery\t87KB\tvanilla JS\t0KB\nanimate.css\t80KB\tCSS animations\t1-2KB\nchart.js\t60KB\tlightweight-charts\t40KB\n\nCode splitting rules:\n\nRoute-based splitting (each page loads its own JS)\nComponent-level splitting for heavy components (modals, editors, charts)\nDynamic import for below-fold features: const Chart = lazy(() => import('./Chart'))\nVendor chunk for stable dependencies (changes rarely = long cache)\n\nLong task breaking:\n\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\n3E: Layout Stability (CLS)\n\nTop CLS causes and fixes:\n\nCause\tFix\nImages without dimensions\tAlways set width + height\nAds/embeds without space\tReserve space with aspect-ratio or min-height\nDynamic content injection\tUse CSS contain or reserved space\nWeb fonts causing reflow\tfont-display: optional or swap with size-adjust\nLate-loading CSS\tInline critical CSS\n\nAnti-CLS patterns:\n\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\n3F: Interaction Optimization (INP)\n\nEvent handler rules:\n\nKeep handlers < 50ms\nDebounce scroll/resize (100-150ms)\nUse requestAnimationFrame for visual updates\nOffload heavy computation to Web Workers\nUse content-visibility: auto for off-screen content\n\nInput responsiveness:\n\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\nPhase 4: Resource Loading Strategy\nPreload / Prefetch / Preconnect Decision\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\nRules:\n\nMax 3-5 preloads per page (more = competing priorities)\nAlways preload: LCP image, critical font, above-fold CSS\nPreconnect to known third-party origins (max 4-6)\nPrefetch only on fast connections\nLazy Loading Strategy\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\nFont Loading Optimization\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\nFont checklist:\n\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\nSystem font stacks:\n\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\nPhase 5: Third-Party Script Management\nImpact Assessment\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\nThird-party loading strategies:\n\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\nRules:\n\nAudit ALL third-party scripts quarterly\nEvery script needs a business justification\nIf a script loads >100KB, it needs a loading strategy\nSelf-host what you can (fonts, analytics alternatives)\nUse rel=\"noopener\" on all external links\nPhase 6: Mobile Performance\nMobile-Specific Optimization\n\nTargets (mobile on 4G):\n\nMetric\tGood\tNeeds Work\tPoor\nFCP\t< 1.8s\t1.8-3.0s\t> 3.0s\nLCP\t< 2.5s\t2.5-4.0s\t> 4.0s\nTBT\t< 200ms\t200-600ms\t> 600ms\nCLS\t< 0.1\t0.1-0.25\t> 0.25\nINP\t< 200ms\t200-500ms\t> 500ms\n\nMobile-specific checklist:\n\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)\nPhase 7: Performance Budget\nSetting Budgets\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\nBudget enforcement rules:\n\nAny PR that increases JS by >10KB needs justification\nLCP regression > 200ms blocks deploy\nMonthly Lighthouse audit — track trend\nPer-route budgets for SPAs (homepage stricter than admin)\nBudget Monitoring Template\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\nPhase 8: Performance Scoring Rubric\n\nRate the site 0-100:\n\nDimension\tWeight\t0-2\t3-4\t5\nCore Web Vitals\t25%\tAll red\tMixed\tAll green\nPage weight\t15%\t>5MB\t2-5MB\t<2MB\nCaching strategy\t15%\tNone\tPartial\tFull with immutable\nRender path\t15%\tMultiple blockers\tSome optimized\tClean critical path\nImage optimization\t10%\tUnoptimized\tPartially\tWebP/AVIF + responsive\nJavaScript health\t10%\t>1MB, no splitting\tSome splitting\t<350KB, code-split\nThird-party control\t5%\tUnmanaged\tSome deferred\tAll managed + budgeted\nMobile experience\t5%\tDesktop-only\tResponsive\tMobile-first optimized\n\nScore interpretation:\n\n90-100: Elite. Maintain and iterate.\n70-89: Good. Fix the weakest dimension.\n50-69: Needs work. Follow Phase 3 playbooks.\n<50: Critical. Start with server + render-blocking fixes.\nPhase 9: Common Architectures — Quick Wins\nNext.js / React\nUse next/image (auto WebP, lazy, blur placeholder)\nEnable ISR or SSG for static pages\nUse dynamic() for heavy components\nCheck bundle with @next/bundle-analyzer\nMiddleware for edge caching\nWordPress\nPage cache plugin (WP Super Cache, W3 Total Cache)\nImage optimization (ShortPixel, Imagify)\nDisable unused plugins (each adds JS+CSS)\nUse a CDN plugin\nConsider static generation (Simply Static)\nSPA (React/Vue/Svelte)\nRoute-based code splitting (mandatory)\nSSR or SSG for SEO pages\nService worker for repeat visits\nSkeleton screens (not spinners)\nVirtual scrolling for long lists\nStatic Sites\nAlready fast — focus on image optimization\nDeploy to CDN edge (Cloudflare Pages, Netlify, Vercel)\nInline all critical CSS\nMinimal JS (< 50KB)\nPhase 10: Advanced Techniques\nService Worker Caching\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\nResource Hints for Navigation\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\nPerformance Monitoring in Production\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\nEdge Cases\n\nInfinite scroll / pagination:\n\nVirtual scrolling for >100 items\nIntersection Observer to load batches\ncontent-visibility: auto for off-screen items\nMemory management: remove far-off-screen DOM nodes\n\nSPAs with client-side routing:\n\nMeasure soft navigations (not just initial load)\nReport per-route metrics\nPrefetch likely next routes\nKeep route JS < 100KB each\n\nE-commerce product pages:\n\nPreload first product image\nLazy load review section, related products\nDefer recommendation engine JS\nCache product data with stale-while-revalidate\n\nMedia-heavy sites:\n\nLazy load everything below fold\nUse <video> not GIF (90% smaller)\nAdaptive quality based on connection (Network Information API)\nProgressive JPEG for large photos\nNatural Language Commands\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"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/1kalin/afrexai-web-performance-engine",
    "publisherUrl": "https://clawhub.ai/1kalin/afrexai-web-performance-engine",
    "owner": "1kalin",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/afrexai-web-performance-engine",
    "downloadUrl": "https://openagent3.xyz/downloads/afrexai-web-performance-engine",
    "agentUrl": "https://openagent3.xyz/skills/afrexai-web-performance-engine/agent",
    "manifestUrl": "https://openagent3.xyz/skills/afrexai-web-performance-engine/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/afrexai-web-performance-engine/agent.md"
  }
}