web-perf
Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, 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.
How to use
Upewnij się, że masz skonfigurowany serwer MCP chrome-devtools. Dodaj do konfiguracji MCP wpis: type local, command npx -y chrome-devtools-mcp@latest. Jeśli nie masz dostępu do narzędzi navigate_page lub performance_start_trace, zatrzymaj się i skonfiguruj serwer.
Załaduj stronę do analizy, podając jej URL. Skill użyje narzędzia navigate_page, aby otworzyć stronę w Chrome DevTools.
Uruchom śledzenie wydajności za pomocą performance_start_trace z opcją autoStop ustawioną na true i reload na true. To zbierze dane o metrikach Core Web Vitals i zasobach sieciowych.
Przeanalizuj zebrane dane, sprawdzając konkretne zasoby blokujące renderowanie, rozmiary plików i czasy ładowania. Użyj list_network_requests, aby wyfiltrować zasoby po typie (Script, Stylesheet itp.), i get_network_request, aby uzyskać szczegóły konkretnego żądania.
Zidentyfikuj problemy z dostępnością za pomocą take_snapshot w trybie verbose, aby uzyskać pełny raport dostępności.
Otrzymaj konkretne rekomendacje: skill skupia się na działaniach z mierzalnym wpływem. Ignoruje problemy z zerowym wpływem na wydajność i priorytetyzuje zmiany, które rzeczywiście poprawią metryki.