Sign in

/Catalogue/Prompt/fcakyon/fcakyon-claude-codex-settings-web-perf

Origin: github
Communityv0.1.0PromptLicense: Apache-2.0 github.com/fcakyon/claude-codex-settings/tree/main/plugins/cloudflare-skills/skills/web-perf

web-perf

Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.

by fcakyon · updated 1d ago · imported from GitHub

Watch · 0 Send for moderation
Installs0+0/7d
Security score100/100
Retention 14d0%
GitHub stars1.2K

Skill logic

Execution graph
User message
Prompt rewrites behaviour
Response

SKILL.md

View on GitHub ↗

Web Performance Audit

Your knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. Prefer retrieval over pre-training when citing specific numbers or recommendations.

Retrieval Sources

SourceHow to retrieveUse for
web.devhttps://web.dev/articles/vitalsCore Web Vitals thresholds, definitions
Chrome DevTools docshttps://developer.chrome.com/docs/devtools/performanceTooling APIs, trace analysis
Lighthouse scoringhttps://developer.chrome.com/docs/lighthouse/performance/performance-scoringScore weights, metric thresholds

FIRST: Verify MCP Tools Available

Discover available browser and performance tools before starting. Use the capabilities available for the requested audit. If trace tools are unavailable, continue any useful source or network analysis and state which measurements could not be collected.

If the user wants Chrome DevTools MCP setup, consult its installation guide and use the latest package version. Only change MCP configuration when setup is within the user's authorized scope; otherwise ask first. For clients using command and args, an example server entry is:

"chrome-devtools": {
  "command": "npx",
  "args": ["-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 Call
Load 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)

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

  1. Navigate to the target URL:

    navigate_page(url: "<target-url>")

  2. Start a performance trace with reload to capture cold-load metrics:

    performance_start_trace(autoStop: true, reload: true)

  3. 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 For
LCPLCPBreakdownTime to largest contentful paint; breakdown of TTFB, resource load, render delay
CLSCLSCulpritsElements causing layout shifts (images without dimensions, injected content, font swaps)
Render BlockingRenderBlockingCSS/JS blocking first paint
Document LatencyDocumentLatencyServer response time issues
Network DependenciesNetworkRequestsDepGraphRequest chains delaying critical resources

Example:

performance_analyze_insight(insightSetId: "<id-from-trace>", 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:

  1. Render-blocking resources: JS/CSS in <head> without async/defer/media attributes
  2. Network chains: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)
  3. Missing preloads: Critical resources (fonts, hero images, key scripts) not preloaded
  4. Caching issues: Missing or weak Cache-Control, ETag, or Last-Modified headers
  5. Large payloads: Uncompressed or oversized JS/CSS bundles
  6. 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: <id>)

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 Files
Webpackwebpack.config.js, webpack.*.js
Vitevite.config.js, vite.config.ts
Rolluprollup.config.js, rollup.config.mjs
esbuildesbuild.config.js, build scripts with esbuild
Parcel.parcelrc, package.json (parcel field)
Next.jsnext.config.js, next.config.mjs
Nuxtnuxt.config.js, nuxt.config.ts
SvelteKitsvelte.config.js
Astroastro.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:

  1. Core Web Vitals Summary - Table with metric, value, and rating (good/needs-improvement/poor)
  2. Top Issues - Prioritized list of problems with estimated impact (high/medium/low)
  3. Recommendations - Specific, actionable fixes with code snippets or config changes
  4. Codebase Findings - Framework/bundler detected, optimization opportunities (omit if no codebase access)

Discussion

No comments yet — start the thread.

Sign in to join the discussion.

/More from fcakyon/claude-codex-settings

fcakyon· 1d agoCommunity
azure-usage

Prompts · Python · v0.1.0

This skill should be used when user asks to "query Azure resources", "list storage accounts", "manage Key Vault secrets", "work with Cosmos DB", "check AKS clusters", "use Azure MCP", or interact with any Azure service.

#ai-agents#ai-tools#claude-ai

0 1.2K
fcakyon· 1d agoCommunity
adhd-output-style

Prompts · Python · v0.1.0

This skill should be used when the user asks for "ADHD output", "fewer output tokens", "short numbered steps", "limited working memory formatting", or explicitly invokes "adhd-output-style".

#ai-agents#ai-tools#claude-ai

0 1.2K
fcakyon· 1d agoCommunity
agent-browser

Prompts · Python · v0.1.0

Agent-browser usage guide. Read this before running any agent-browser commands. Covers the snapshot-and-ref workflow, navigating pages, interacting with elements (click, fill, type, select), extracting text and data, taking screenshots, managing tabs, handling forms and auth, waiting for content, running multiple browser sessions in parallel, and troubleshooting common failures. Use when the user asks to interact with a website, fill a form, click something, extract data, take a screenshot, log into a site, test a web app, or automate any browser task.

#ai-agents#ai-tools#claude-ai

0 1.2K
fcakyon· 1d agoCommunity
electron

Prompts · Python · v0.1.0

Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.

#ai-agents#ai-tools#claude-ai

0 1.2K