# web-vitals-optimizer

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

- subagent · `type=agent` · Claude Code · 1169 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/performance-testing/web-vitals-optimizer.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/agents/web-vitals-optimizer

## What it 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.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --agent performance-testing/web-vitals-optimizer
```

2. **Manually: put the files in place**
- File: `.claude/agents/web-vitals-optimizer.md` — For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention

### Codex

**Manually: put the files in place**
- File: `.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/

### Cursor

**Manually: put the files in place**
- File: `.cursor/agents/web-vitals-optimizer.md` — Cursor also reads .claude/agents/

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/performance-testing/web-vitals-optimizer.md

## When to use it
- 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
- 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.

## Similar
- [code-reviewer](https://affpapa.org/en/nevibecode/agents/anthropic-code-reviewer.md) — subagent · 31050 installs
- [code-reviewer](https://affpapa.org/en/nevibecode/agents/code-reviewer.md) — subagent · 31050 installs
- [test-engineer](https://affpapa.org/en/nevibecode/agents/test-engineer.md) — subagent · 9715 installs
- [code-reviewer](https://affpapa.org/en/nevibecode/agents/voltagent-community-code-reviewer.md) — subagent · 31050 installs
- [fullstack-developer](https://affpapa.org/en/nevibecode/agents/fullstack-developer.md) — subagent · 18117 installs
- [prompt-engineer](https://affpapa.org/en/nevibecode/agents/voltagent-community-prompt-engineer.md) — subagent · 16078 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md