AIKraft/AI/Войти
AIKraft/Skills/debug-optimize-lcp

debug-optimize-lcp

Помогает отлаживать и оптимизировать Largest Contentful Paint (LCP) с помощью Chrome DevTools MCP. Полезно при проблемах с Core Web Vitals, медленной загрузкой страниц или долгим отображением основного контента.

GOGoogle official Разработка ★ 53k

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

Skill помогает отлаживать и оптимизировать Largest Contentful Paint (LCP) с помощью Chrome DevTools MCP, выявляя узкие места в загрузке страницы. Он позволяет анализировать субчасти LCP, находить блокирующие ресурсы и проверять эффективность исправлений.

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

  • Отладка медленной загрузки страницы и проблем с Core Web Vitals.
  • Анализ того, почему основной контент отображается с задержкой.
  • Поиск причин большого времени загрузки LCP-ресурса или задержки рендеринга.
  • Проверка эффективности оптимизаций после внесения изменений в код.

Как работает

  1. Выполнить navigate_page для перехода на целевой URL, затем запустить performance_start_trace с reload: true и autoStop: true.
  2. Использовать performance_analyze_insight для анализа субчастей LCP (LCPBreakdown, DocumentLatency, RenderBlocking, LCPDiscovery).
  3. Применить скрипт из references/lcp-snippets.md через evaluate_script для идентификации LCP-элемента и его URL.
  4. Проверить сетевой водопад с помощью list_network_requests и get_network_request для анализа времени начала загрузки и длительности.
  5. Выполнить аудит распространенных проблем (ленивая загрузка, fetchpriority, блокирующие скрипты) через evaluate_script.
  6. Применить стратегии оптимизации (preload, fetchpriority, оптимизация форматов, SSR) и верифицировать результат повторным запуском performance_start_trace.

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

Проанализируй LCP на странице https://example.com и найди узкие места.
Запусти трассировку производительности для https://test-site.ru и покажи разбивку субчастей LCP.
Проверь, не блокирует ли загрузка шрифтов рендеринг LCP-элемента на https://demo-page.com.

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

  • Chrome DevTools MCP (инструменты navigate_page, performance_start_trace, performance_analyze_insight, evaluate_script, list_network_requests, get_network_request, emulate)
  • Файл references/lcp-snippets.md со скриптами для идентификации LCP-элемента и аудита проблем

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

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

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

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