Web Performance Audit

Аудит производительности веб-страниц с использованием инструментов Chrome DevTools MCP. Данный подход фокусируется на Core Web Vitals, оптимизации сетевых запросов и выявлении базовых проблем доступности.

Когда и зачем использовать

Этот инструмент предназначен для глубокого анализа производительности сайтов. Он позволяет измерять ключевые метрики (LCP, CLS, TBT и другие), находить ресурсы, блокирующие рендеринг, анализировать сетевые зависимости и выявлять проблемы, влияющие на скорость загрузки и пользовательский опыт. :

• Оптимизация Core Web Vitals и SEO
• Отладка проблем производительности
• Анализ загрузки страниц конкурентов
• Проверка доступности интерфейса

Перед началом

Перед запуском убедитесь, что MCP-инструменты Chrome DevTools доступны. Попробуйте вызвать navigate_page или performance_start_trace. Если команды недоступны — необходимо настроить MCP-сервер.

{
 "chrome-devtools": {
 "type": "local",
 "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
 }
}

Ключевые принципы

• Будьте точны: проверяйте факты через сеть, DOM и код.
• Не делайте предположений: сначала убедитесь, что проблема существует.
• Оценивайте влияние: указывайте реальную экономию времени.
• Игнорируйте незначительные проблемы: если эффект равен 0 мс — не приоритизируйте.
• Давайте конкретные рекомендации: например, «сжать hero.png до WebP».
• Жестко расставляйте приоритеты: отличные показатели не требуют оптимизации.

Быстрый справочник

Основные команды для работы:

navigate_page(url: "...")
performance_start_trace(autoStop: true, reload: true)
performance_analyze_insight(...)
list_network_requests(...)
get_network_request(...)
take_snapshot(verbose: true)

Workflow (процесс аудита)

Используйте чеклист для контроля выполнения:

Audit Progress:
- Phase 1: Performance trace
- Phase 2: Core Web Vitals
- Phase 3: Network analysis
- Phase 4: Accessibility
- Phase 5: Codebase analysis

Phase 1: Сбор трассировки

• Откройте страницу через navigate_page
• Запустите запись производительности
• Дождитесь завершения и сохраните результаты

Phase 2: Анализ Core Web Vitals

Извлеките ключевые метрики производительности. Обратите внимание на:

• LCP — время отображения основного контента
• CLS — сдвиги макета
• Render Blocking — блокирующие ресурсы
• TTFB — задержки ответа сервера
• Цепочки сетевых зависимостей

Пороговые значения:

• LCP: < 2.5s — хорошо
• CLS: < 0.1 — хорошо
• TBT: < 200ms — хорошо
• Speed Index: < 3.4s — хорошо

Phase 3: Сетевой анализ

Проанализируйте все сетевые запросы и найдите узкие места:

• Ресурсы, блокирующие рендеринг (CSS/JS)
• Поздние зависимости
• Отсутствие preload
• Проблемы кеширования
• Слишком большие файлы

Phase 4: Доступность

• Отсутствие ARIA-атрибутов
• Проблемы контрастности
• Ошибки фокуса
• Интерактивные элементы без подписей

Phase 5: Анализ кодовой базы

Если есть доступ к коду, определите используемый стек и найдите возможности оптимизации:

• Наличие tree-shaking
• Лишний код и зависимости
• Поллифилы и их размер
• Сжатие (gzip/brotli)
• Минификация

Формат результата

• Core Web Vitals: таблица метрик и оценок
• Основные проблемы: приоритизированный список
• Рекомендации: конкретные действия
• Анализ кода: при наличии доступа

Главная цель — не просто выявить проблемы, а предложить измеримые и конкретные улучшения, которые реально повлияют на скорость и пользовательский опыт.