subagent

web-vitals-optimizer — Claude Code subagent: install

Q: How do I install web-vitals-optimizer in Claude Code?

Run `npx claude-code-templates@latest --agent performance-testing/web-vitals-optimizer`, then add `.claude/agents/web-vitals-optimizer.md`.

Q: Which tools does web-vitals-optimizer use?

The subagent is configured with `Read`, `Write`, `Edit`, and `Bash`. These tools let it inspect project files, apply changes, and run commands.

This subagent audits Core Web Vitals, locates performance bottlenecks, and suggests targeted changes for user experience and SEO work.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --agent performance-testing/web-vitals-optimizer

Open on GitHub

What web-vitals-optimizer does

web-vitals-optimizer works with LCP, FID, CLS, TTFB, and FCP. It can assess current measurements, spot concrete opportunities, and produce guidance for resource loading, the critical path, images, and other assets. Its outputs may include audit findings and implementation notes.

The subagent compares results before and after a change, then can outline performance budgets and regression checks. It also covers RUM, dashboards, and alerting for ongoing monitoring. Access to Read, Write, Edit, and Bash is required for the listed project and command operations.

What it helps with

audit LCP, FID, CLS, TTFB, and FCP
trace the cause of slow page loading
plan image and asset performance changes
compare metrics before and after a release
set up monitoring and regression checks

Example prompts for the agent

Audit the homepage Core Web Vitals and explain the LCP, FID, and CLS findings.
Compare performance metrics before and after the latest changes, then suggest targeted fixes.
Set up RUM monitoring, performance budgets, and regression checks for this project.

How to install web-vitals-optimizer

1claude-code-templates

npx claude-code-templates@latest --agent performance-testing/web-vitals-optimizer

2Manually: put the files in place

.claude/agents/web-vitals-optimizer.md

For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention

Manually: put the files in place

.codex/agents/web-vitals-optimizer.toml

Codex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/

Manually: put the files in place

.cursor/agents/web-vitals-optimizer.md

Cursor also reads .claude/agents/

Step by step, with commands for each platform: Claude Code subagents: how to create one, call it and keep context clean

Questions about web-vitals-optimizer

How do I install web-vitals-optimizer in Claude Code?

Run npx claude-code-templates@latest --agent performance-testing/web-vitals-optimizer, then add .claude/agents/web-vitals-optimizer.md.

What does web-vitals-optimizer do?

It reviews Core Web Vitals such as LCP, FID, CLS, TTFB, and FCP, then produces performance recommendations and implementation guidance. It can also help define monitoring and before-and-after measurement.

Which tools does web-vitals-optimizer use?

The subagent is configured with Read, Write, Edit, and Bash. These tools let it inspect project files, apply changes, and run commands.

Similar subagents

All subagents for Testing and QA →

code-reviewer official Anthropic Reviews code changes against CLAUDE.md project rules and flags material defects. Run it before a commit or pull request. 31,050installs code-reviewer official Anthropic This subagent checks code changes for bugs, security issues, and project-rule violations. Use it when a review should focus on findings that matter. 31,050installs test-engineer official Anthropic This subagent captures legacy behavior in tests and compares it with a rewritten implementation. Use it before changing existing modules. 9,715installs code-reviewer VoltAgent Community Reviews code changes for bugs, security flaws and maintenance issues. Use it before merging complex work or auditing a project. 31,050installs fullstack-developer VoltAgent Community This subagent carries a feature across the database, API, and frontend layers. Use it when one change needs a consistent end-to-end implementation. 18,117installs prompt-engineer VoltAgent Community This subagent designs, tests, and improves prompts for LLM production systems. Use it when prompts need evaluation, metrics, or cost tracking. 16,078installs

From the same set495

The whole set →

review-agent Audits Obsidian vault changes by checking reports, metadata, links, tags, and MOCs. Run it after enhancement work to spot inconsistencies across the vault. 1,198installs test-generator This subagent studies code changes and project test conventions before outlining useful test cases. Use it when new or changed logic needs coverage. 1,182installs mermaid-diagrams A skill that teaches your agent Mermaid syntax: class, sequence, ERD, C4 and flowchart diagrams. Useful when you need to document architecture or a database schema. 1,180installs diagram-architect This subagent turns code or plain-language requirements into technical diagrams, including flowcharts, ERDs, state machines, and dependency graphs. 1,178installs video-editor Video production subagent using FFmpeg for clip trimming and color grading. Automates multi-track timelines and format exports. 1,156installs docs-maintenance This command audits documentation, links, structure, and style, then helps plan updates. Use it when Markdown docs need recurring checks. 1,146installs docusaurus-expert Configures and fixes Docusaurus v2 and v3 documentation sites. Handles config files, sidebar trees, MDX layouts, and build errors. 1,143installs python-patterns Architectural principles for Python in Claude Code: framework trade-offs, async versus sync decisions, project layouts, and Pydantic validation. 1,135installs