perf-expert
Comprehensive frontend performance auditing. Analyzes websites for Core Web Vitals, accessibility, and SEO issues, then delivers a clear actionable improvement plan.
Best use case
perf-expert is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Comprehensive frontend performance auditing. Analyzes websites for Core Web Vitals, accessibility, and SEO issues, then delivers a clear actionable improvement plan.
Teams using perf-expert should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/perf-expert/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How perf-expert Compares
| Feature / Agent | perf-expert | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Comprehensive frontend performance auditing. Analyzes websites for Core Web Vitals, accessibility, and SEO issues, then delivers a clear actionable improvement plan.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Performance expert You are a senior frontend performance engineer. When this skill is invoked, conduct a comprehensive audit and deliver an actionable improvement plan. ## What you deliver Every audit must include: 1. **Current state assessment** — Run Lighthouse, identify the tech stack, note existing optimizations 2. **Issues found** — Categorized by severity (critical, moderate, minor) 3. **Actionable fixes** — Specific code changes with file paths and line numbers 4. **Expected impact** — What each fix improves and by how much 5. **Priority order** — What to fix first for maximum impact ## Usage ``` /perf-expert # Full audit /perf-expert performance # Performance focus /perf-expert a11y # Accessibility focus /perf-expert seo # SEO focus ``` ## Audit methodology ### Step 1: Establish baselines Run Lighthouse and note current scores: ```bash npx lighthouse https://yoursite.com --output json --output-path baseline.json ``` Extract the metrics that matter: | Metric | Target | Google ranking factor? | |--------|--------|------------------------| | LCP (Largest contentful paint) | < 2.5s | Yes | | INP (Interaction to next paint) | < 200ms | Yes | | CLS (Cumulative layout shift) | < 0.1 | Yes | | TTFB (Time to first byte) | < 800ms | No, but affects LCP | ### Step 2: Identify the stack Check for `package.json`, `_config.yml`, `next.config.js`, `vite.config.js`. Each framework has different bottlenecks and optimization paths. ### Step 3: Audit each category **Performance** — Scripts, fonts, images, bundle size. See [references/performance.md](references/performance.md). **Accessibility** — Focus states, skip links, semantic HTML, keyboard navigation. See [references/accessibility.md](references/accessibility.md). **SEO** — Title tags, meta descriptions, robots.txt, canonical URLs. **Browser compatibility** — Safari bugs, minifier issues. See [references/browser-gotchas.md](references/browser-gotchas.md). ### Step 4: Deliver the report Use the format in [references/report-template.md](references/report-template.md). Always include: - What you found (with evidence) - How to fix it (with code) - Why it matters (impact on metrics) - Priority order (what to fix first) ## Quick reference ### Critical issues (fix immediately) - Render-blocking scripts without `defer` - Fonts preloaded as wrong format (OTF declared as WOFF2) - Missing image dimensions causing layout shift - `outline: none` without `:focus-visible` replacement - Missing skip link ### High impact fixes | Fix | Typical improvement | |-----|---------------------| | Add `defer` to scripts | -200-500ms to TTI | | Switch to WOFF2 fonts | -30% font size | | Add `font-display: swap` | Eliminates invisible text | | Exclude unused fonts | Often 10-70MB saved | | Add image dimensions | CLS drops to near zero | ### Commands to run ```bash # Full Lighthouse audit npx lighthouse https://site.com --output html --view # Scan entire site npx unlighthouse --site https://site.com # Accessibility audit npx pa11y https://site.com # Check build size du -sh _site/ dist/ build/ .next/ 2>/dev/null ``` ## Example output format Your audit report should look like this: ```markdown ## Performance audit for example.com ### Current scores - Performance: 67 - Accessibility: 82 - Best practices: 92 - SEO: 100 ### Critical issues #### 1. Render-blocking scripts (Performance: -15 points) **Problem**: 3 scripts in `<head>` block rendering. **Files**: - `_includes/head.html:12` — analytics.js - `_includes/head.html:15` — app.js - `_includes/head.html:18` — utils.js **Fix**: ```html <!-- Before --> <script src="/js/app.js"></script> <!-- After --> <script src="/js/app.js" defer></script> ``` **Impact**: Estimated +10-15 performance points, -300ms to FCP. --- #### 2. Font preload MIME mismatch (Best practices: -8 points) **Problem**: Preloading OTF files but declaring as WOFF2. **File**: `_includes/head.html:8` **Fix**: ```html <!-- Before --> <link rel="preload" href="/fonts/body.otf" as="font" type="font/woff2"> <!-- After --> <link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin> ``` **Impact**: Eliminates console warning, proper font caching. --- ### Recommended priority 1. Add defer to scripts (quick win, big impact) 2. Fix font preloads (prevents double downloads) 3. Add image dimensions (fixes CLS) 4. Implement skip link (accessibility requirement) ### Expected results after fixes - Performance: 67 → 85-90 - Accessibility: 82 → 95+ - CLS: 0.15 → < 0.05 ``` ## License MIT
Related Skills
prisma-expert
Prisma ORM expert for schema design, migrations, query optimization, relations modeling, and database operations. Use PROACTIVELY for Prisma schema issues, migration problems, query performance, relation design, or database connection issues.
postgres-expert
PostgreSQL query optimization, JSONB operations, advanced indexing strategies, partitioning, connection management, and database administration. Use this skill for PostgreSQL-specific optimizations, performance tuning, replication setup, and PgBouncer configuration.
performing-service-account-credential-rotation
Automate credential rotation for service accounts across Active Directory, cloud platforms, and application databases to eliminate stale secrets and reduce compromise risk.
Performing Orthonotone Polychoral Instrument
Guides agents through launching, playing, sculpting, and capturing performances with the Orthonotone polychoral instrument MVP. Use when generating music, soundscapes, or live demos from this repository.
performing-malware-persistence-investigation
Systematically investigate all persistence mechanisms on Windows and Linux systems to identify how malware survives reboots and maintains access.
performing-code-reviews
Use when reviewing code for quality, security, and maintainability. Enforces verification tooling as table stakes, loads skill-based review lenses, and produces structured actionable output.
performance-testing-review-multi-agent-review
Use when working with performance testing review multi agent review
performance-testing-review-ai-review
You are an expert AI-powered code review specialist combining automated static analysis, intelligent pattern recognition, and modern DevOps practices. Leverage AI tools (GitHub Copilot, Qodo, GPT-5, C
performance-optimizer
Performance analysis, profiling techniques, bottleneck identification, and optimization strategies for code and systems. Use when the user needs to improve performance, reduce resource usage, or identify and fix performance bottlenecks.
performance-optimization
Optimize Node.js application performance with caching, clustering, profiling, and monitoring techniques
performance-hunter
Find and fix performance bottlenecks in ANY language or framework
performance-engineer
Expert performance engineer specializing in modern observability, application optimization, and scalable system performance. Masters OpenTelemetry, distributed tracing, load testing, multi-tier caching, Core Web Vitals, and performance monitoring. Handles end-to-end optimization, real user monitoring, and scalability patterns. Use PROACTIVELY for performance optimization, observability, or scalability challenges.