{
  "schemaVersion": "1.0",
  "item": {
    "slug": "web-perf",
    "name": "Web Perf",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/elithrar/web-perf",
    "canonicalUrl": "https://clawhub.ai/elithrar/web-perf",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/web-perf",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-perf",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "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. 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. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "slug": "web-perf",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-10T22:26:53.980Z",
      "expiresAt": "2026-05-17T22:26:53.980Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-perf",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-perf",
        "contentDisposition": "attachment; filename=\"web-perf-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "web-perf"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/web-perf"
    },
    "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/web-perf",
    "agentPageUrl": "https://openagent3.xyz/skills/web-perf/agent",
    "manifestUrl": "https://openagent3.xyz/skills/web-perf/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/web-perf/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. 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. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Web Performance Audit",
        "body": "Audit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps."
      },
      {
        "title": "FIRST: Verify MCP Tools Available",
        "body": "Run this before starting. Try calling navigate_page or performance_start_trace. If unavailable, STOP—the chrome-devtools MCP server isn't configured.\n\nAsk the user to add this to their MCP config:\n\n\"chrome-devtools\": {\n  \"type\": \"local\",\n  \"command\": [\"npx\", \"-y\", \"chrome-devtools-mcp@latest\"]\n}"
      },
      {
        "title": "Key Guidelines",
        "body": "Be assertive: Verify claims by checking network requests, DOM, or codebase—then state findings definitively.\nVerify before recommending: Confirm something is unused before suggesting removal.\nQuantify impact: Use estimated savings from insights. Don't prioritize changes with 0ms impact.\nSkip non-issues: If render-blocking resources have 0ms estimated impact, note but don't recommend action.\nBe specific: Say \"compress hero.png (450KB) to WebP\" not \"optimize images\".\nPrioritize ruthlessly: A site with 200ms LCP and 0 CLS is already excellent—say so."
      },
      {
        "title": "Quick Reference",
        "body": "TaskTool CallLoad pagenavigate_page(url: \"...\")Start traceperformance_start_trace(autoStop: true, reload: true)Analyze insightperformance_analyze_insight(insightSetId: \"...\", insightName: \"...\")List requestslist_network_requests(resourceTypes: [\"Script\", \"Stylesheet\", ...])Request detailsget_network_request(reqid: <id>)A11y snapshottake_snapshot(verbose: true)"
      },
      {
        "title": "Workflow",
        "body": "Copy this checklist to track progress:\n\nAudit Progress:\n- [ ] Phase 1: Performance trace (navigate + record)\n- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)\n- [ ] Phase 3: Network analysis\n- [ ] Phase 4: Accessibility snapshot\n- [ ] Phase 5: Codebase analysis (skip if third-party site)"
      },
      {
        "title": "Phase 1: Performance Trace",
        "body": "Navigate to the target URL:\nnavigate_page(url: \"<target-url>\")\n\n\n\nStart a performance trace with reload to capture cold-load metrics:\nperformance_start_trace(autoStop: true, reload: true)\n\n\n\nWait for trace completion, then retrieve results.\n\nTroubleshooting:\n\nIf trace returns empty or fails, verify the page loaded correctly with navigate_page first\nIf insight names don't match, inspect the trace response to list available insights"
      },
      {
        "title": "Phase 2: Core Web Vitals Analysis",
        "body": "Use performance_analyze_insight to extract key metrics.\n\nNote: Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the insightSetId from the trace response to discover available insights.\n\nCommon insight names:\n\nMetricInsight NameWhat to Look ForLCPLCPBreakdownTime to largest contentful paint; breakdown of TTFB, resource load, render delayCLSCLSCulpritsElements causing layout shifts (images without dimensions, injected content, font swaps)Render BlockingRenderBlockingCSS/JS blocking first paintDocument LatencyDocumentLatencyServer response time issuesNetwork DependenciesNetworkRequestsDepGraphRequest chains delaying critical resources\n\nExample:\n\nperformance_analyze_insight(insightSetId: \"<id-from-trace>\", insightName: \"LCPBreakdown\")\n\nKey thresholds (good/needs-improvement/poor):\n\nTTFB: < 800ms / < 1.8s / > 1.8s\nFCP: < 1.8s / < 3s / > 3s\nLCP: < 2.5s / < 4s / > 4s\nINP: < 200ms / < 500ms / > 500ms\nTBT: < 200ms / < 600ms / > 600ms\nCLS: < 0.1 / < 0.25 / > 0.25\nSpeed Index: < 3.4s / < 5.8s / > 5.8s"
      },
      {
        "title": "Phase 3: Network Analysis",
        "body": "List all network requests to identify optimization opportunities:\n\nlist_network_requests(resourceTypes: [\"Script\", \"Stylesheet\", \"Document\", \"Font\", \"Image\"])\n\nLook for:\n\nRender-blocking resources: JS/CSS in <head> without async/defer/media attributes\nNetwork chains: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)\nMissing preloads: Critical resources (fonts, hero images, key scripts) not preloaded\nCaching issues: Missing or weak Cache-Control, ETag, or Last-Modified headers\nLarge payloads: Uncompressed or oversized JS/CSS bundles\nUnused preconnects: If flagged, verify by checking if ANY requests went to that origin. If zero requests, it's definitively unused—recommend removal. If requests exist but loaded late, the preconnect may still be valuable.\n\nFor detailed request info:\n\nget_network_request(reqid: <id>)"
      },
      {
        "title": "Phase 4: Accessibility Snapshot",
        "body": "Take an accessibility tree snapshot:\n\ntake_snapshot(verbose: true)\n\nFlag high-level gaps:\n\nMissing or duplicate ARIA IDs\nElements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)\nFocus traps or missing focus indicators\nInteractive elements without accessible names"
      },
      {
        "title": "Phase 5: Codebase Analysis",
        "body": "Skip if auditing a third-party site without codebase access.\n\nAnalyze the codebase to understand where improvements can be made."
      },
      {
        "title": "Detect Framework & Bundler",
        "body": "Search for configuration files to identify the stack:\n\nToolConfig FilesWebpackwebpack.config.js, webpack.*.jsVitevite.config.js, vite.config.tsRolluprollup.config.js, rollup.config.mjsesbuildesbuild.config.js, build scripts with esbuildParcel.parcelrc, package.json (parcel field)Next.jsnext.config.js, next.config.mjsNuxtnuxt.config.js, nuxt.config.tsSvelteKitsvelte.config.jsAstroastro.config.mjs\n\nAlso check package.json for framework dependencies and build scripts."
      },
      {
        "title": "Tree-Shaking & Dead Code",
        "body": "Webpack: Check for mode: 'production', sideEffects in package.json, usedExports optimization\nVite/Rollup: Tree-shaking enabled by default; check for treeshake options\nLook for: Barrel files (index.js re-exports), large utility libraries imported wholesale (lodash, moment)"
      },
      {
        "title": "Unused JS/CSS",
        "body": "Check for CSS-in-JS vs. static CSS extraction\nLook for PurgeCSS/UnCSS configuration (Tailwind's content config)\nIdentify dynamic imports vs. eager loading"
      },
      {
        "title": "Polyfills",
        "body": "Check for @babel/preset-env targets and useBuiltIns setting\nLook for core-js imports (often oversized)\nCheck browserslist config for overly broad targeting"
      },
      {
        "title": "Compression & Minification",
        "body": "Check for terser, esbuild, or swc minification\nLook for gzip/brotli compression in build output or server config\nCheck for source maps in production builds (should be external or disabled)"
      },
      {
        "title": "Output Format",
        "body": "Present findings as:\n\nCore Web Vitals Summary - Table with metric, value, and rating (good/needs-improvement/poor)\nTop Issues - Prioritized list of problems with estimated impact (high/medium/low)\nRecommendations - Specific, actionable fixes with code snippets or config changes\nCodebase Findings - Framework/bundler detected, optimization opportunities (omit if no codebase access)"
      }
    ],
    "body": "Web Performance Audit\n\nAudit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps.\n\nFIRST: Verify MCP Tools Available\n\nRun this before starting. Try calling navigate_page or performance_start_trace. If unavailable, STOP—the chrome-devtools MCP server isn't configured.\n\nAsk the user to add this to their MCP config:\n\n\"chrome-devtools\": {\n  \"type\": \"local\",\n  \"command\": [\"npx\", \"-y\", \"chrome-devtools-mcp@latest\"]\n}\n\nKey Guidelines\nBe assertive: Verify claims by checking network requests, DOM, or codebase—then state findings definitively.\nVerify before recommending: Confirm something is unused before suggesting removal.\nQuantify impact: Use estimated savings from insights. Don't prioritize changes with 0ms impact.\nSkip non-issues: If render-blocking resources have 0ms estimated impact, note but don't recommend action.\nBe specific: Say \"compress hero.png (450KB) to WebP\" not \"optimize images\".\nPrioritize ruthlessly: A site with 200ms LCP and 0 CLS is already excellent—say so.\nQuick Reference\nTask\tTool Call\nLoad page\tnavigate_page(url: \"...\")\nStart trace\tperformance_start_trace(autoStop: true, reload: true)\nAnalyze insight\tperformance_analyze_insight(insightSetId: \"...\", insightName: \"...\")\nList requests\tlist_network_requests(resourceTypes: [\"Script\", \"Stylesheet\", ...])\nRequest details\tget_network_request(reqid: <id>)\nA11y snapshot\ttake_snapshot(verbose: true)\nWorkflow\n\nCopy this checklist to track progress:\n\nAudit Progress:\n- [ ] Phase 1: Performance trace (navigate + record)\n- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)\n- [ ] Phase 3: Network analysis\n- [ ] Phase 4: Accessibility snapshot\n- [ ] Phase 5: Codebase analysis (skip if third-party site)\n\nPhase 1: Performance Trace\n\nNavigate to the target URL:\n\nnavigate_page(url: \"<target-url>\")\n\n\nStart a performance trace with reload to capture cold-load metrics:\n\nperformance_start_trace(autoStop: true, reload: true)\n\n\nWait for trace completion, then retrieve results.\n\nTroubleshooting:\n\nIf trace returns empty or fails, verify the page loaded correctly with navigate_page first\nIf insight names don't match, inspect the trace response to list available insights\nPhase 2: Core Web Vitals Analysis\n\nUse performance_analyze_insight to extract key metrics.\n\nNote: Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the insightSetId from the trace response to discover available insights.\n\nCommon insight names:\n\nMetric\tInsight Name\tWhat to Look For\nLCP\tLCPBreakdown\tTime to largest contentful paint; breakdown of TTFB, resource load, render delay\nCLS\tCLSCulprits\tElements causing layout shifts (images without dimensions, injected content, font swaps)\nRender Blocking\tRenderBlocking\tCSS/JS blocking first paint\nDocument Latency\tDocumentLatency\tServer response time issues\nNetwork Dependencies\tNetworkRequestsDepGraph\tRequest chains delaying critical resources\n\nExample:\n\nperformance_analyze_insight(insightSetId: \"<id-from-trace>\", insightName: \"LCPBreakdown\")\n\n\nKey thresholds (good/needs-improvement/poor):\n\nTTFB: < 800ms / < 1.8s / > 1.8s\nFCP: < 1.8s / < 3s / > 3s\nLCP: < 2.5s / < 4s / > 4s\nINP: < 200ms / < 500ms / > 500ms\nTBT: < 200ms / < 600ms / > 600ms\nCLS: < 0.1 / < 0.25 / > 0.25\nSpeed Index: < 3.4s / < 5.8s / > 5.8s\nPhase 3: Network Analysis\n\nList all network requests to identify optimization opportunities:\n\nlist_network_requests(resourceTypes: [\"Script\", \"Stylesheet\", \"Document\", \"Font\", \"Image\"])\n\n\nLook for:\n\nRender-blocking resources: JS/CSS in <head> without async/defer/media attributes\nNetwork chains: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)\nMissing preloads: Critical resources (fonts, hero images, key scripts) not preloaded\nCaching issues: Missing or weak Cache-Control, ETag, or Last-Modified headers\nLarge payloads: Uncompressed or oversized JS/CSS bundles\nUnused preconnects: If flagged, verify by checking if ANY requests went to that origin. If zero requests, it's definitively unused—recommend removal. If requests exist but loaded late, the preconnect may still be valuable.\n\nFor detailed request info:\n\nget_network_request(reqid: <id>)\n\nPhase 4: Accessibility Snapshot\n\nTake an accessibility tree snapshot:\n\ntake_snapshot(verbose: true)\n\n\nFlag high-level gaps:\n\nMissing or duplicate ARIA IDs\nElements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)\nFocus traps or missing focus indicators\nInteractive elements without accessible names\nPhase 5: Codebase Analysis\n\nSkip if auditing a third-party site without codebase access.\n\nAnalyze the codebase to understand where improvements can be made.\n\nDetect Framework & Bundler\n\nSearch for configuration files to identify the stack:\n\nTool\tConfig Files\nWebpack\twebpack.config.js, webpack.*.js\nVite\tvite.config.js, vite.config.ts\nRollup\trollup.config.js, rollup.config.mjs\nesbuild\tesbuild.config.js, build scripts with esbuild\nParcel\t.parcelrc, package.json (parcel field)\nNext.js\tnext.config.js, next.config.mjs\nNuxt\tnuxt.config.js, nuxt.config.ts\nSvelteKit\tsvelte.config.js\nAstro\tastro.config.mjs\n\nAlso check package.json for framework dependencies and build scripts.\n\nTree-Shaking & Dead Code\nWebpack: Check for mode: 'production', sideEffects in package.json, usedExports optimization\nVite/Rollup: Tree-shaking enabled by default; check for treeshake options\nLook for: Barrel files (index.js re-exports), large utility libraries imported wholesale (lodash, moment)\nUnused JS/CSS\nCheck for CSS-in-JS vs. static CSS extraction\nLook for PurgeCSS/UnCSS configuration (Tailwind's content config)\nIdentify dynamic imports vs. eager loading\nPolyfills\nCheck for @babel/preset-env targets and useBuiltIns setting\nLook for core-js imports (often oversized)\nCheck browserslist config for overly broad targeting\nCompression & Minification\nCheck for terser, esbuild, or swc minification\nLook for gzip/brotli compression in build output or server config\nCheck for source maps in production builds (should be external or disabled)\nOutput Format\n\nPresent findings as:\n\nCore Web Vitals Summary - Table with metric, value, and rating (good/needs-improvement/poor)\nTop Issues - Prioritized list of problems with estimated impact (high/medium/low)\nRecommendations - Specific, actionable fixes with code snippets or config changes\nCodebase Findings - Framework/bundler detected, optimization opportunities (omit if no codebase access)"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/elithrar/web-perf",
    "publisherUrl": "https://clawhub.ai/elithrar/web-perf",
    "owner": "elithrar",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/web-perf",
    "downloadUrl": "https://openagent3.xyz/downloads/web-perf",
    "agentUrl": "https://openagent3.xyz/skills/web-perf/agent",
    "manifestUrl": "https://openagent3.xyz/skills/web-perf/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/web-perf/agent.md"
  }
}