# Send Web Perf to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - 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. ## Suggested prompts ### New install ```text 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. ``` ### Upgrade existing ```text 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. ``` ## Machine-readable fields ```json { "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": { "downloadUrl": "/downloads/web-perf", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-perf", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md" ], "downloadMode": "redirect", "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." ] } }, "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" } } ``` ## Documentation ### Web Performance Audit Audit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps. ### FIRST: Verify MCP Tools Available Run this before starting. Try calling navigate_page or performance_start_trace. If unavailable, STOP—the chrome-devtools MCP server isn't configured. Ask the user to add this to their MCP config: "chrome-devtools": { "type": "local", "command": ["npx", "-y", "chrome-devtools-mcp@latest"] } ### Key Guidelines Be assertive: Verify claims by checking network requests, DOM, or codebase—then state findings definitively. Verify before recommending: Confirm something is unused before suggesting removal. Quantify impact: Use estimated savings from insights. Don't prioritize changes with 0ms impact. Skip non-issues: If render-blocking resources have 0ms estimated impact, note but don't recommend action. Be specific: Say "compress hero.png (450KB) to WebP" not "optimize images". Prioritize ruthlessly: A site with 200ms LCP and 0 CLS is already excellent—say so. ### Quick Reference 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: )A11y snapshottake_snapshot(verbose: true) ### Workflow Copy this checklist to track progress: Audit Progress: - [ ] Phase 1: Performance trace (navigate + record) - [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits) - [ ] Phase 3: Network analysis - [ ] Phase 4: Accessibility snapshot - [ ] Phase 5: Codebase analysis (skip if third-party site) ### Phase 1: Performance Trace Navigate to the target URL: navigate_page(url: "") Start a performance trace with reload to capture cold-load metrics: performance_start_trace(autoStop: true, reload: true) Wait for trace completion, then retrieve results. Troubleshooting: If trace returns empty or fails, verify the page loaded correctly with navigate_page first If insight names don't match, inspect the trace response to list available insights ### Phase 2: Core Web Vitals Analysis Use performance_analyze_insight to extract key metrics. Note: 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. Common insight names: MetricInsight 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 Example: performance_analyze_insight(insightSetId: "", insightName: "LCPBreakdown") Key thresholds (good/needs-improvement/poor): TTFB: < 800ms / < 1.8s / > 1.8s FCP: < 1.8s / < 3s / > 3s LCP: < 2.5s / < 4s / > 4s INP: < 200ms / < 500ms / > 500ms TBT: < 200ms / < 600ms / > 600ms CLS: < 0.1 / < 0.25 / > 0.25 Speed Index: < 3.4s / < 5.8s / > 5.8s ### Phase 3: Network Analysis List all network requests to identify optimization opportunities: list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"]) Look for: Render-blocking resources: JS/CSS in without async/defer/media attributes Network chains: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts) Missing preloads: Critical resources (fonts, hero images, key scripts) not preloaded Caching issues: Missing or weak Cache-Control, ETag, or Last-Modified headers Large payloads: Uncompressed or oversized JS/CSS bundles Unused 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. For detailed request info: get_network_request(reqid: ) ### Phase 4: Accessibility Snapshot Take an accessibility tree snapshot: take_snapshot(verbose: true) Flag high-level gaps: Missing or duplicate ARIA IDs Elements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text) Focus traps or missing focus indicators Interactive elements without accessible names ### Phase 5: Codebase Analysis Skip if auditing a third-party site without codebase access. Analyze the codebase to understand where improvements can be made. ### Detect Framework & Bundler Search for configuration files to identify the stack: ToolConfig 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 Also check package.json for framework dependencies and build scripts. ### Tree-Shaking & Dead Code Webpack: Check for mode: 'production', sideEffects in package.json, usedExports optimization Vite/Rollup: Tree-shaking enabled by default; check for treeshake options Look for: Barrel files (index.js re-exports), large utility libraries imported wholesale (lodash, moment) ### Unused JS/CSS Check for CSS-in-JS vs. static CSS extraction Look for PurgeCSS/UnCSS configuration (Tailwind's content config) Identify dynamic imports vs. eager loading ### Polyfills Check for @babel/preset-env targets and useBuiltIns setting Look for core-js imports (often oversized) Check browserslist config for overly broad targeting ### Compression & Minification Check for terser, esbuild, or swc minification Look for gzip/brotli compression in build output or server config Check for source maps in production builds (should be external or disabled) ### Output Format Present findings as: Core Web Vitals Summary - Table with metric, value, and rating (good/needs-improvement/poor) Top Issues - Prioritized list of problems with estimated impact (high/medium/low) Recommendations - Specific, actionable fixes with code snippets or config changes Codebase Findings - Framework/bundler detected, optimization opportunities (omit if no codebase access) ## Trust - Source: tencent - Verification: Indexed source record - Publisher: elithrar - Version: 1.0.0 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-05-10T22:26:53.980Z - Expires at: 2026-05-17T22:26:53.980Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/web-perf) - [Send to Agent page](https://openagent3.xyz/skills/web-perf/agent) - [JSON manifest](https://openagent3.xyz/skills/web-perf/agent.json) - [Markdown brief](https://openagent3.xyz/skills/web-perf/agent.md) - [Download page](https://openagent3.xyz/downloads/web-perf)