AIKraft/Skills/Веб-производительность

Веб-производительность

Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval f

CLCloudflare official Разработка

Что делает навык

Skill анализирует производительность веб-страниц с помощью Chrome DevTools MCP, измеряя Core Web Vitals (LCP, INP, CLS) и дополнительные метрики (FCP, TBT, Speed Index). Он выявляет render-blocking ресурсы, сетевые зависимости, проблемы с кешированием и пробелы в доступности.

Когда применять

  • Проведение аудита производительности сайта
  • Профилирование и отладка медленной загрузки страницы
  • Оптимизация показателей Lighthouse
  • Анализ сетевых зависимостей и layout shifts

Как работает

  1. Проверить доступность инструментов Chrome DevTools MCP и capabilities браузера.
  2. При необходимости настроить Chrome DevTools MCP, используя руководство по установке и последнюю версию пакета.
  3. Извлечь актуальные данные о порогах и определениях метрик из web.dev/articles/vitals.
  4. Собрать данные о трассировке и API инструментов из developer.chrome.com/docs/devtools/performance.
  5. Определить веса и пороги оценок, обратившись к developer.chrome.com/docs/lighthouse/performance/performance-scoring.
  6. Провести анализ, указав, какие измерения не могли быть собраны, если инструменты трассировки недоступны.

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

Проведи аудит производительности главной страницы сайта.
Профилируй загрузку страницы и найди render-blocking ресурсы.
Оптимизируй показатели Lighthouse для мобильной версии.

Что понадобится

  • Chrome DevTools MCP
  • Доступ к web.dev и developer.chrome.com

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «web-perf» из репозитория: # https://github.com/cloudflare/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r web-perf/ ~/.claude/skills/web-perf/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.