Twój agent AI właśnie zyskał Core Web Vitals supermoce
Połącz Claude Code ze swoimi field data z CoreDash. Znajduje najgorsze wąskie gardło wśród milionów wczytań stron, namierza przyczynę źródłową w Chrome i pisze poprawkę. Agentowy web performance to nie raport, tylko konkretna linia kodu, którą trzeba zmienić.
Zainstaluj w 2 minuty Zacznij darmowy okres próbny CoreDash »Trusted by market leaders · Client results
Narzędzia AI do wydajności mają problem z danymi
Większość agentów AI optymalizuje pod kątem Lighthouse. To syntetyczny wynik na symulowanym urządzeniu, którego Google nie używa do rankingów. Użyteczny agent AI do wydajności stron zaczyna od tych samych danych, co Google: prawdziwych użytkowników na budżetowych telefonach, niestabilnych połączeń i kontynentów, których Twój komputer deweloperski nigdy nie widział.
Lighthouse to nie Twój czynnik rankingowy
Google ustala pozycje na podstawie field data z CrUX od prawdziwych użytkowników Chrome z ostatnich 28 dni. Idealny wynik Lighthouse i oblany wynik w field data zdarzają się cały czas. 52% stron mobilnych oblewa przynajmniej jeden Core Web Vitals w field data.
Ślepi agenci wdrażają ślepe poprawki
Bez danych od prawdziwych użytkowników agent AI nie wie, która strona jest wolna, który element stanowi wąskie gardło ani czy jego poprawka pomogła. Optymalizuje symulację i uznaje zadanie za skończone. Twoi prawdziwi użytkownicy uważają inaczej.
Ręczna analiza zajmuje godziny
Posegmentuj dane. Postaw hipotezę. Uruchom trace. Potwierdź. Przygotuj poprawkę. Senior performance engineer spędza od 2 do 4 godzin nad jednym problemem. Pomnóż to przez każdą wolną stronę w swojej witrynie.
INP nie da się w ogóle zasymulować w laboratorium Interaction to Next Paint mierzy, jak prawdziwi użytkownicy wchodzą w interakcję z Twoją stroną. Żadne syntetyczne narzędzie nie odtworzy zachowań prawdziwych użytkowników: tego, gdzie klikają, jak szybko przewijają i jakie urządzenie trzymają w dłoni. Lighthouse nawet nie raportuje INP. Jeśli Twój agent AI uruchamia Lighthouse, jest ślepy na Twoje najgorsze problemy z interaktywnością. Jedynym źródłem są field data.
Dwa źródła prawdy: Field data spotyka dowody z przeglądarki
CWV Superpowers łączy rzeczywiste dane użytkowników z CoreDash z ukierunkowanymi traces z Chrome. Field data mówi, co jest wolne. Chrome mówi, dlaczego.
CoreDash mówi agentowi, co działa wolno
CoreDash śledzi każde wczytanie strony przez każdego rzeczywistego użytkownika. Każda metryka jest przypisana do konkretnego elementu, który powoduje problem. Bez próbkowania, bez limitów.
Gdy CoreDash raportuje LCP na poziomie 4,2 sekundy, przy czym Load Delay pochłania 52% łącznego czasu na div.hero > img.main, agent dokładnie wie, gdzie szukać. Bez zgadywania. To pomiar z milionów rzeczywistych sesji.
Skill odpytuje ponad 25 wymiarów CoreDash: element LCP, typ elementu, stan priorytetu, podział na fazy, cel interakcji INP, skrypty LOAF, przesuwający się element CLS, typ urządzenia, typ odwiedzającego, prędkość sieci, trendy 7-dniowe.
Chrome mówi agentowi, dlaczego jest wolno
CWV Superpowers odwiedza stronę z emulacją mobilną: Fast 3G, 4x CPU throttling. Zbiera trace tylko dla tej fazy będącej wąskim gardłem, którą zidentyfikował CoreDash.
Load Delay jest wąskim gardłem? Agent bada network waterfall pod kątem luk w wykrywaniu zasobów. Render Delay? Szuka skryptów render blocking i opóźnień w ładowaniu fontów.
Wynik: klatki filmstripu, network waterfall oraz konkretne dowody, które wyjaśniają przyczynę źródłową ujawnioną przez Twoje dane field data.
Rozumowanie proporcjonalne, a nie bezwzględne progi
Lighthouse mówi Ci: „Render Delay wynosi 350 ms”. Czy to problem? Nie wiadomo. CWV Superpowers identyfikuje wąskie gardło jako fazę, która pochłania największy procent całkowitego czasu.
INP wynosi 350 ms. Input Delay to 70 ms (20%), Processing 80 ms (23%), Presentation 200 ms (57%). Wąskim gardłem jest Presentation, nawet jeśli 200 ms w izolacji brzmi dobrze. Jego naprawa naprawdę robi różnicę. Optymalizacja Input Delay będzie ledwo zauważalna.
To pozwala uniknąć najczęstszego błędu w pracy nad wydajnością: naprawiania niewłaściwych rzeczy.
Pięć kroków: od „coś działa wolno” do poprawki w kodzie
Zadaj pytanie. Pięć kroków później masz poprawkę popartą realnymi dowodami od użytkowników.
1. Odkrywanie
Skanuje dane CoreDash w poszukiwaniu najgorszych stron i metryk. Priorytetyzuje złe oceny, urządzenia mobilne, strony z dużym ruchem i wyniki p75, które ukrywają długi ogon słabych wyników.
2. Diagnoza
Rozbija metrykę na fazy. LCP: TTFB, opóźnienie ładowania, czas ładowania, opóźnienie renderowania. INP: opóźnienie wejściowe, przetwarzanie, prezentacja. Wskazuje wąskie gardło procentowo.
3. Chrome Trace
Odwiedza stronę z emulacją mobilną. Śledzi tylko fazę wąskiego gardła z kroku 2. Rejestruje kaskadę sieciową, kliszę filmową i dowody na blokowanie zasobów.
4. Źródło problemu
Łączy oba źródła dowodów w jedno stwierdzenie: element, przyczynę, metryki CoreDash oraz to, co potwierdził Chrome. Bez dwuznaczności.
5. Poprawka lub raport
Twój wybór. Zastosuj poprawkę w kodzie, wskazując plik, linię, element oraz stan przed i po. Wygeneruj samodzielny raport HTML z wykresami i dowodami. Albo jedno i drugie.
25+ wymiarów: Każdy aspekt Twoich field data
To rzeczywiste wymiary CoreDash, które odpytuje agent. To nie podsumowanie. Pełny obraz.
LCP (Largest Contentful Paint)
Element LCP Typ elementu Stan priorytetu Faza TTFB Opóźnienie ładowania Czas ładowania Opóźnienie renderowaniaINP (Interaction to Next Paint)
Cel INP Opóźnienie wejściowe Przetwarzanie Prezentacja Skrypty LOAF Stan ładowaniaCLS (Cumulative Layout Shift)
Przesuwający się element Przyczyna przesunięcia Moment przesunięciaSegments
Typ urządzenia Kraj Przeglądarka System operacyjny Połączenie Typ odwiedzającego Ścieżka stronyTrends
Delta 7-dniowa 28-dniowa linia bazowa Wykrywanie regresjiDiagnozuj: podział na fazy dla każdego Core Web Vital
Nie tylko wyniki. Każda metryka podzielona na fazy dzięki atrybucji rzeczywistych użytkowników z CoreDash.
Napraw LCP z AI: diagnoza Largest Contentful Paint
Podział na 4 fazy: TTFB, opóźnienie ładowania, czas ładowania, opóźnienie renderowania. Wskazuje, która faza zajmuje najwięcej czasu.
Atrybucja elementu: konkretny element LCP, jego typ (obraz, tekst, obraz w tle, wideo) oraz stan priorytetu (fetchpriority, lazy loading).
Typowe poprawki: dodaj wskazówkę preload, usuń lazy loading z sekcji hero, zoptymalizuj format obrazu, napraw skrypt render blocking.
Napraw INP z AI: diagnoza Interaction to Next Paint
Podział na 3 fazy: opóźnienie wejściowe, czas przetwarzania, opóźnienie prezentacji. Jedyna metryka, której nie możesz symulować w laboratorium. Jedyne źródło to field data.
Atrybucja skryptu: Long Animation Frames (LOAF) wskazuje konkretny plik JavaScript i czas trwania. Oraz stan ładowania strony w momencie interakcji.
Typowe poprawki: yield do main thread, odrocz ewaluację, podziel obsługę zdarzeń, content-visibility dla dużego DOM.
CLS: Cumulative Layout Shift
5 częstych przyczyn: obrazy bez określonych wymiarów, podmiana fontów, dynamicznie wstrzykiwana treść, późno ładowane zasoby, animacje CSS dla właściwości układu.
Analiza wielowymiarowa: porównuje mobile z desktopem, nowych i powracających odwiedzających oraz szybkie i wolne sieci, aby zawęzić przyczynę.
Typowe poprawki: dodaj width/height, font-display: optional, rezerwacja min-height, użyj transform zamiast top/left.
Jak wygląda opis przyczyny źródłowej
Nie „rozważ optymalizację obrazów”. To jest faktyczny raport. Na tyle konkretny, by go przejrzeć i scalić.
Przyczyna źródłowa:
Obraz LCP div.hero-banner > img.product-main na stronie /product/running-shoes-42 zostaje wykryty o 1980 ms za późno, ponieważ brakuje mu wskazówki preload i nie ma atrybutu fetchpriority="high".
Dowody z CoreDash:
LCP na urządzeniach mobilnych (p75) wynosi 3820 ms (słabo). Wąskim gardłem jest Load Delay: 1980 ms (52% całości). Stan priorytetu: 3 (brak preloadu). Trend: pogorszenie o +340 ms w ciągu 7 dni.
Dowody z Chrome:
Waterfall sieciowy pokazuje 1940 ms przerwy między pierwszym bajtem HTML a żądaniem obrazu. Odwołanie do obrazu znajduje się tylko w CSS, przez co jest on niewidoczny dla preload scannera.
Rozwiązanie:
Dodaj <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> w pliku templates/product.html w linii 12. Ustaw fetchpriority="high" na elemencie img w linii 47.
Ogólna porada AI:
„Rozważ dodanie fetchpriority do swojego obrazu LCP i zadbaj o odpowiedni preload kluczowych zasobów.”
Supermoce CWV:
Element: div.hero-banner > img.product-main
Plik: templates/product.html, linia 47
Dowody: 52% czasu LCP w Load Delay (CoreDash p75). 1940 ms luki w wykrywaniu (Chrome waterfall).
Rozwiązanie: zmiana 2 linii kodu z diffem przed/po.
Porównanie: Jak wypada CWV Superpowers
Różne narzędzia rozwiązują różne problemy. Oto co naprawdę robi każde z nich.
| Możliwości | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Źródło danych | Rzeczywiści użytkownicy (field data z 28 dni) | Pojedyncza sesja laboratoryjna | Symulowane pojedyncze wczytanie |
| Pomiar INP | ✓ Rzeczywiste interakcje | ✗ Brak rzeczywistych użytkowników | ✗ Brak pomiaru |
| Podział na fazy | ✓ Fazy LCP, INP, CLS | ~ Ręczna analiza | ✗ Tylko wynik |
| Atrybucja elementu | ✓ Dokładny element + priorytet | ~ Jeśli wiesz, gdzie szukać | ~ Ogólne sugestie |
| Wnioskowanie proporcjonalne | ✓ Wąskie gardło według % | ✗ Wartości bezwzględne | ✗ Wartości bezwzględne |
| Porównywanie segmentów | ✓ Urządzenie, kraj, przeglądarka | ✗ Pojedyncza konfiguracja | ✗ Pojedyncza konfiguracja |
| Wykrywanie trendów | ✓ Delta z 7 dni | ✗ Pomiar punktowy | ✗ Pomiar punktowy |
| Chrome tracing | ✓ Ukierunkowany na fazę | ✓ Pełny dostęp | ✗ Brak przeglądarki |
| Poprawki w kodzie | ✓ Plik + linia + diff | ~ Zależne od agenta | ~ Ogólne porady |
Uwaga: Chrome DevTools MCP jest narzędziem komplementarnym. CWV Superpowers używa go do ukierunkowanego tracingu po tym, jak field data wskaże wąskie gardło. Działają najlepiej razem.
Raporty: Wrzuć na Slacka, załącz do Jiry
Samodzielny HTML. Brak zależności. Bez etapu budowania. Jeden plik ze wszystkim inline.
Pełny raport (z Chrome)
Karty metryk oznaczone kolorami, wykresy podziału na fazy, zrzuty ekranu w kluczowych momentach (pierwsze wyrenderowanie, LCP, załadowanie), wykres kaskadowy sieci SVG, analiza przyczyny źródłowej i zalecana poprawka z kodem przed i po.
Raport wyłącznie z RUM
Te same karty metryk i podział na fazy, plus przypisanie elementów i analiza przyczyny źródłowej. Brak zrzutów ekranu i wykresu kaskadowego, ale jakość diagnozy jest identyczna, bo field data to źródło prawdy.
Działa z każdym klientem MCP
Claude Code: Pełny skill ze zautomatyzowanym przepływem pracy. Wykrywanie, diagnoza, Chrome tracing, poprawki kodu i raporty. Polecane.
Cursor: Instalacja wtyczki z CoreDash MCP. Pełna diagnoza i poprawki kodu bezpośrednio w edytorze.
VS Code, Windsurf, Gemini CLI: Każdy klient obsługujący serwery HTTP MCP łączy się z CoreDash. Te same field data, to samo przypisanie.
Client Success
Don't just take my word for it
Engineering Manager, Zalando
"Every other audit we've had gave us a list of problems. This one told us exactly what to fix first and why."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
VP Product, Expedia Group
"We had 80+ third-party scripts and were failing CWV on every major property. Arjen got us passing without touching our ad revenue."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
Head of Platform, Adevinta
45% reduction in blocking time across 15 marketplaces. INP from 440ms to 64ms on Fotocasa alone. Google wrote up the results on web.dev.
Head of Digital, Rituals
"We used to break performance every other sprint. He set up budgets in our pipeline. Haven't had a regression since."
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
Start w 2 minuty
Automatyczna diagnostyka Core Web Vitals w Twoim terminalu. Potrzebujesz konta CoreDash z aktywnym przepływem danych. Darmowy plan wystarczy.
Claude Code
# 1. Dodaj serwer MCP CoreDash (logowanie w przeglądarce, bez klucza API) claude mcp add --transport http coredash https://app.coredash.app/api/mcp # 2. Zainstaluj CWV Superpowers /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpowers # 3. Uruchom z Chrome (opcjonalnie, zalecane) claude --chrome # 4. Uruchom Znajdź mój największy problem z CWV i napraw go.
Przy pierwszym połączeniu uruchom /mcp, wybierz coredash i kliknij Authenticate. Przeglądarka otworzy logowanie CoreDash. Wybierasz projekt i zatwierdzasz go. Claude Code zapisuje tymczasowy token OAuth. Token odświeża się automatycznie (godzina dostępu, 30 dni odświeżania) i możesz go w każdej chwili cofnąć. Nie musisz wklejać żadnego klucza.
Wolisz klucz API do pracy w trybie headless lub CI? Dodaj do polecenia --header "Authorization: Bearer cdk_YOUR_API_KEY". Klucz wygenerujesz w CoreDash → Project Settings → API Keys (MCP). Wyświetlany tylko raz. Przechowywany jako hash SHA-256. Tylko do odczytu.
Cursor
# Zainstaluj wtyczkę
/plugin-add cwv-superpowers
Dodaj CoreDash do .cursor/mcp.json:
{
"mcpServers": {
"coredash": {
"url": "https://app.coredash.app/api/mcp",
"headers": {
"Authorization": "Bearer cdk_YOUR_API_KEY"
}
}
}
}
Inni klienci MCP
Endpoint: https://app.coredash.app/api/mcp
Nagłówek: Authorization: Bearer cdk_YOUR_API_KEY
Działa z VS Code (tryb agenta Copilot), Windsurf, Gemini CLI, Claude Desktop i dowolnym klientem HTTP MCP. Jeden endpoint MCP wydajności stron dla każdego agenta.
Najczęściej zadawane pytania
Czy musisz mieć uruchomiony Chrome, aby korzystać z CWV Superpowers?
Nie. Chrome tracing jest opcjonalny. Bez niego otrzymujesz pełną diagnozę field data, podział na fazy, przypisanie elementów i propozycje poprawek kodu na podstawie samych danych CoreDash. Chrome dodaje zrzuty ekranu typu filmstrip, sieciowy wykres waterfall i wizualne potwierdzenie głównej przyczyny. Oba tryby generują raporty.
Czym to się różni od uruchomienia Lighthouse w Twoim agencie AI?
Lighthouse wykonuje jedno syntetyczne ładowanie na Twoim komputerze. CWV Superpowers używa 28 dni danych rzeczywistych użytkowników z CoreDash: prawdziwych urządzeń, prawdziwych sieci i prawdziwych interakcji. Mierzy INP z tapnięć rzeczywistych użytkowników (Lighthouse tego nie potrafi). Porównuje segmenty (mobile vs desktop, Indie vs USA). Używa proporcjonalnego wnioskowania do znalezienia fazy będącej wąskim gardłem, a nie tylko bezwzględnych wyników.
Które agenty AI do kodowania są obsługiwane?
Dowolny agent AI do kodowania wydajności stron, który obsługuje serwery MCP (Model Context Protocol). Claude Code ma dedykowaną umiejętność z automatycznym, 5-krokowym workflow. Cursor, VS Code (tryb agenta Copilot), Windsurf, Gemini CLI i Claude Desktop łączą się przez endpoint HTTP MCP w CoreDash. Dane field data i przypisanie elementów są identyczne we wszystkich klientach.
Czy CoreDash jest darmowy?
CoreDash ma darmowy pakiet, który działa z CWV Superpowers. Potrzebujesz danych spływających ze swojej strony (dodaj tag skryptu CoreDash). Darmowy pakiet nie ma próbkowania ani limitów odsłon. Klucze API dla dostępu MCP są dostępne we wszystkich planach.
Czy mogę używać tego na stronach klientów?
Tak. Dla każdego projektu CoreDash możesz stworzyć nielimitowane dedykowane klucze API MVP . Dodaj CoreDash do każdej strony klienta, wygeneruj klucz API tylko do odczytu i skonfiguruj swojego klienta MCP. Agent widzi tylko dane dla tego projektu. CWV Superpowers ma licencję MIT, więc nie ma żadnych ograniczeń dotyczących komercyjnego wykorzystania.
Open Source. Bez uzależnienia od dostawcy.
Automatyzacja Core Web Vitals, którą możesz badać i rozszerzać. Orkiestrator, moduły diagnostyczne, logika Chrome tracing oraz szablony raportów są na GitHubie. Przeczytaj, jak to działa. Sforkuj. Rozszerz. Współtwórz.
Rozpocznij darmowy okres próbny Zobacz na GitHubie