web-performance-audit · aj-geddes — скилл для Claude Code: аудит скорости сайта
Скилл разбирает скорость загрузки страниц, находит узкие места и подсказывает, что чинить. Пригодится после крупных правок или жалоб на медленную загрузку.
npx skills add aj-geddes/useful-ai-prompts --skill web-performance-audit -a claude-codeЧто делает web-performance-audit
Скилл ведёт аудит веб-производительности: замеряет время загрузки, ищет узкие места и предлагает оптимизации. Опирается на Core Web Vitals от Google — LCP, FID и CLS, у каждой метрики есть границы «хорошо» и «плохо». Например, LCP до 2.5 секунд считается хорошим, а свыше 4 секунд — плохим.
Внутри четыре справочника в каталоге references/: метрики, процесс анализа, стратегии оптимизации и мониторинг с непрерывным улучшением. Скилл советует мерить регулярно, а не разово, смотреть и на полевые данные реальных пользователей, и на лабораторные, тестировать на медленных сетях и включать мобильные в проверку. Отдельно предупреждает: не оптимизируйте без замеров и не гонитесь за одной метрикой.
Установка идёт через npx skills add или gh skill install — под каждую платформу своя команда. Без доступа к реальным данным о загрузке страниц скилл останется набором рекомендаций: цифры для разбора придётся собрать самому.
Какие задачи решает
- замерить LCP, FID и CLS на ключевых страницах
- найти узкие места после крупного релиза
- разобраться, почему пользователи жалуются на медленную загрузку
- задать базовую линию производительности перед оптимизацией
- проверить мобильную скорость отдельно от десктопной
Примеры запросов агенту
- Проведи аудит производительности главной страницы и покажи, какие метрики Core Web Vitals проседают
- Собери полевые и лабораторные данные по загрузке каталога товаров и предложи, что оптимизировать первым
- Составь план мониторинга производительности и бюджет по метрикам для мобильной версии
Как установить web-performance-audit
1Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill web-performance-audit -a claude-code2Вручную: положить файлы
~/.claude/skills/web-performance-audit/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/web-performance-audit/
1Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill web-performance-audit -a codex2Вручную: положить файлы
.agents/skills/web-performance-audit/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill web-performance-audit -a cursor2Вручную: положить файлы
.cursor/skills/web-performance-audit/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install aj-geddes/useful-ai-prompts web-performance-audit2Вручную: положить файлы
.github/skills/web-performance-audit/SKILL.md1Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill web-performance-audit -a gemini-cli2Командой платформы
gemini skills install https://github.com/aj-geddes/useful-ai-prompts --path skills/web-performance-auditВручную: положить файлы
.devin/skills/web-performance-audit/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill web-performance-audit -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о web-performance-audit
Как установить web-performance-audit в Claude?
Выполните npx skills add aj-geddes/useful-ai-prompts --skill web-performance-audit -a claude-code. Файл скилла появится по пути ~/.claude/skills/web-performance-audit/SKILL.md.
Что делает web-performance-audit?
Проводит аудит веб-производительности: измеряет скорость загрузки, ищет узкие места и рекомендует оптимизации. Ориентируется на Core Web Vitals и полевые данные.
На каких метриках он сосредоточен?
На Core Web Vitals: LCP, FID и CLS. Для каждой метрики указаны границы хороших и плохих значений, плюс скилл напоминает про FCP и другие дополнительные показатели.
Исходный текст
SKILL.md · MIT
--- name: web-performance-audit description: > Conduct comprehensive web performance audits. Measure page speed, identify bottlenecks, and recommend optimizations to improve user experience and SEO. --- # Web Performance Audit ## Table of Contents - [Overview](#overview) - [When to Use](#when-to-use) - [Quick Start](#quick-start) - [Reference Guides](#reference-guides) - [Best Practices](#best-practices) ## Overview Web performance audits measure load times, identify bottlenecks, and guide optimization efforts to create faster, better user experiences. ## When to Use - Regular performance monitoring - After major changes - User complaints about slowness - SEO optimization - Mobile optimization - Performance baseline setting ## Quick Start Minimal working example: ```yaml Core Web Vitals (Google): Largest Contentful Paint (LCP): Measure: Time to load largest visible element Good: <2.5 seconds Poor: >4 seconds Impacts: User perception of speed First Input Delay (FID): Measure: Time from user input to response Good: <100 milliseconds Poor: >300 milliseconds Impacts: Responsiveness Cumulative Layout Shift (CLS): Measure: Visual stability (unexpected layout shifts) Good: <0.1 Poor: >0.25 Impacts: User frustration --- Additional Metrics: First Contentful Paint (FCP): // ... (see reference guides for full implementation) ``` ## Reference Guides Detailed implementations in the `references/` directory: | Guide | Contents | |---|---| | [Performance Metrics](references/performance-metrics.md) | Performance Metrics | | [Performance Analysis Process](references/performance-analysis-process.md) | Performance Analysis Process | | [Optimization Strategies](references/optimization-strategies.md) | Optimization Strategies | | [Monitoring & Continuous Improvement](references/monitoring-continuous-improvement.md) | Monitoring & Continuous Improvement | ## Best Practices ### ✅ DO - Measure regularly (not just once) - Use field data (real users) + lab data - Focus on Core Web Vitals - Set realistic targets - Prioritize by impact - Monitor continuously - Setup performance budgets - Test on slow networks - Include mobile in testing - Document improvements ### ❌ DON'T - Ignore field data - Focus on one metric only - Set impossible targets - Optimize without measurement - Forget about images - Ignore JavaScript costs - Skip mobile performance - Over-optimize prematurely - Forget about monitoring - Expect improvements without effort
© aj-geddes · MIT · aj-geddes/useful-ai-prompts
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — web-performance-audit от других авторов.