субагент

web-vitals-optimizer — субагент для Claude Code: установка

Q: Как установить web-vitals-optimizer в Claude Code?

Выполните `npx claude-code-templates@latest --agent performance-testing/web-vitals-optimizer`, затем добавьте файл `.claude/agents/web-vitals-optimizer.md`.

Q: Какие инструменты нужны web-vitals-optimizer?

В конфигурации субагента указаны `Read`, `Write`, `Edit` и `Bash`. Они нужны для чтения проекта, внесения изменений и запуска команд.

Субагент измеряет Core Web Vitals, находит причины проблем с производительностью и предлагает точечные улучшения для пользовательского опыта и SEO.

Установить в Claude Code · Через claude-code-templates Все способы и платформы ↓

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

Открыть на GitHub

Что делает web-vitals-optimizer

web-vitals-optimizer работает с метриками LCP, FID, CLS, TTFB и FCP. Он помогает провести аудит, найти узкие места, подготовить рекомендации по загрузке ресурсов, критическому пути, изображениям и другим ассетам. Результатом могут быть отчёты, инструкции по внедрению и настройки мониторинга.

Субагент сравнивает показатели до и после изменений, предлагает бюджеты производительности и регрессионные проверки, а также настройку RUM, дашбордов и оповещений. Без доступа к Read, Write, Edit и Bash он не сможет выполнять заявленные операции с проектом и командами.

Какие задачи решает

проверить показатели LCP, FID, CLS, TTFB и FCP
найти причины медленной загрузки страницы
подготовить план оптимизации изображений и ассетов
сравнить метрики до и после изменений
настроить мониторинг и регрессионные проверки

Примеры запросов агенту

Проведи аудит Core Web Vitals для главной страницы и перечисли проблемы по LCP, FID и CLS.
Сравни показатели производительности до и после последних изменений и предложи точечные правки.
Настрой мониторинг RUM, бюджеты производительности и проверки регрессий для проекта.

Как установить web-vitals-optimizer

1Через claude-code-templates

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

2Вручную: положить файлы

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

Для всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию

Вручную: положить файлы

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

Codex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/

Вручную: положить файлы

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

Cursor понимает и .claude/agents/

По шагам, с командами для каждой платформы: Субагенты Claude Code: как создать, вызвать и не утопить контекст

Вопросы о web-vitals-optimizer

Как установить web-vitals-optimizer в Claude Code?

Выполните npx claude-code-templates@latest --agent performance-testing/web-vitals-optimizer, затем добавьте файл .claude/agents/web-vitals-optimizer.md.

Что делает web-vitals-optimizer?

Субагент анализирует Core Web Vitals, включая LCP, FID, CLS, TTFB и FCP, а затем готовит рекомендации и инструкции по улучшению производительности. Он также помогает настроить мониторинг и сравнение метрик.

Какие инструменты нужны web-vitals-optimizer?

В конфигурации субагента указаны Read, Write, Edit и Bash. Они нужны для чтения проекта, внесения изменений и запуска команд.

Похожие субагенты

Все субагенты по теме «Тесты и QA» →

code-reviewer официальный Anthropic Проверяет изменения в коде по правилам проекта из CLAUDE.md и ищет существенные дефекты. Запускайте перед коммитом или созданием PR. 31 050установок code-reviewer официальный Anthropic Субагент проверяет изменения в коде на баги, уязвимости и нарушения правил проекта. Подойдёт для ревью перед слиянием изменений. 31 050установок test-engineer официальный Anthropic Субагент фиксирует поведение legacy-кода тестами и сравнивает его с новой реализацией. Подходит перед переписыванием модулей. 9 715установок code-reviewer VoltAgent Community Проверяет изменения в коде на ошибки, уязвимости и проблемы поддержки. Ставьте перед слиянием сложных изменений или аудитом проекта. 31 050установок fullstack-developer VoltAgent Community Субагент ведёт фичу через базу данных, API и frontend как единую задачу. Подходит для сквозной разработки с общей логикой и тестами. 18 117установок prompt-engineer VoltAgent Community Субагент проектирует, проверяет и улучшает промпты для LLM в production-системах. Подходит, когда нужны тесты, метрики и контроль затрат. 16 078установок

Из того же набора495

Весь набор →

review-agent Проверяет качество работы с хранилищем Obsidian: метаданные, ссылки, теги и карты MOC. Подключайте его после изменений, чтобы сверить отчёты и найти несогласованности. 1 198установок test-generator Субагент разбирает изменения в коде и предлагает тесты по правилам проекта. Пригодится для новых функций, исправлений и проверки крайних случаев. 1 182установок mermaid-diagrams Скилл учит агента писать диаграммы Mermaid: классы, последовательности, ERD, C4, флоучарты. Пригодится, когда нужно задокументировать архитектуру или схему БД. 1 180установок diagram-architect Субагент создаёт технические диаграммы из кода или описания: от блок-схем до ERD и графов зависимостей. 1 178установок video-editor Субагент для нарезки и цветокоррекции видео через FFmpeg. Помогает собирать многодорожечные таймлайны и готовить ролики к экспорту. 1 156установок docs-maintenance Команда проверяет документацию, ссылки, структуру и стиль, а затем помогает подготовить обновления. Пригодится для регулярного аудита Markdown-файлов. 1 146установок docusaurus-expert Специалист по сайтам на Docusaurus v2 и v3. Помогает настроить структуру, выправить боковое меню, починить сбои сборки и оформить MDX-статьи. 1 143установок python-patterns Скилл задаёт правила проектирования на Python: помогает выбрать фреймворк, настроить асинхронный стек, схемы Pydantic и разметку типов. 1 135установок