web-performance-optimization · davila7 — скилл для Claude Code: скорость и Core
Скилл для Claude, который помогает разобрать, почему сайт грузится медленно, и по шагам убрать узкие места.
npx claude-code-templates@latest --skill web-development/web-performance-optimizationЧто делает web-performance-optimization
Скилл ведёт агента по пяти шагам: сначала снять базовые метрики (Lighthouse, LCP, FID, CLS, размеры бандлов, сетевой водопад), потом найти проблемы, расставить приоритеты, внедрить правки и перепроверить результат. Внутри — разбор типичных случаев: тяжёлый hero-образ, бандл на 850KB, блокирующие рендер скрипты, картинки без размеров, из-за которых прыгает вёрстка.
Правки скилл предлагает конкретные: перевести изображения на AVIF и WebP с width и height, разбить код через lazy и dynamic, заменить moment на date-fns, импортировать из lodash отдельные функции вместо всей библиотеки, добавить defer к аналитике. Для CLS есть скелетон-загрузка с зарезервированной высотой.
Проверка идёт по кругу: повторный Lighthouse, сравнение метрик до и после, реальные метрики пользователей, тесты на разных устройствах и сетях. Скилл не подставит вам конфиг сборщика — он разбирает, что именно тормозит, и предлагает шаги. Если у вас нет доступа к продовым метрикам, часть выводов останется на уровне локальных замеров.
Какие задачи решает
- понять, почему страница грузится медленно
- снизить LCP, FID и CLS до зелёной зоны
- уменьшить размер JavaScript-бандла
- убрать сдвиги вёрстки от картинок без размеров
- подготовиться к performance-аудиту
Примеры запросов агенту
- прогони аудит производительности моего сайта и покажи, что тормозит
- почему у меня LCP 4.2s — разбери и предложи правки
- сократи размер бандла: посмотри зависимости и предложи, что заменить
Как установить web-performance-optimization
1Через claude-code-templates
npx claude-code-templates@latest --skill web-development/web-performance-optimization2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill web-performance-optimization -a claude-code3Вручную: положить файлы
~/.claude/skills/web-performance-optimization/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/web-performance-optimization/
Вручную: положить файлы
.agents/skills/web-performance-optimization/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/web-performance-optimization/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates web-performance-optimization2Вручную: положить файлы
.github/skills/web-performance-optimization/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/web-development/web-performance-optimizationВручную: положить файлы
.devin/skills/web-performance-optimization/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о web-performance-optimization
Как установить web-performance-optimization в Claude?
Через шаблоны: npx claude-code-templates@latest --skill web-development/web-performance-optimization. Второй способ — npx skills add davila7/claude-code-templates --skill web-performance-optimization -a claude-code. После установки файл лежит в ~/.claude/skills/web-performance-optimization/SKILL.md.
Что делает web-performance-optimization?
Помогает измерить текущую скорость сайта, найти узкие места и внедрить оптимизации: сжатие картинок, code splitting, кэширование, ленивую загрузку некритичных ресурсов. В конце — повторные замеры, чтобы увидеть эффект.
С какими метриками работает скилл?
С Core Web Vitals: LCP, FID и CLS. Плюс Lighthouse-оценка, размеры бандлов, время до интерактивности и сетевой водопад.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — web-performance-optimization от других авторов.
