Twój agent AI właśnie zyskał supermoce Core Web Vitals
Połącz Claude Code ze swoimi danymi terenowymi CoreDash. Znajduje on największe wąskie gardła na podstawie milionów wczytań stron, śledzi główną przyczynę w Chrome i pisze poprawkę. Wydajność webowa oparta na agentach to nie raport, lecz konkretna linia kodu, którą trzeba zmienić.
Zainstaluj w 2 minuty Rozpocznij 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. Syntetycznego wyniku na symulowanym urządzeniu, którego Google nie używa do rankingów. Użyteczny agent AI do wydajności stron internetowych zaczyna od tych samych danych, co Google: rzeczywistych użytkowników korzystających z tanich telefonów, słabych połączeń i z kontynentów, których twoja maszyna deweloperska nigdy nie widziała.
Lighthouse nie jest twoim sygnałem rankingowym
Google ustala ranking na podstawie danych terenowych CrUX od rzeczywistych użytkowników Chrome z 28 dni. Perfekcyjny wynik Lighthouse i słaby wynik terenowy zdarzają się cały czas. 52% stron mobilnych nie spełnia przynajmniej jednego wskaźnika Core Web Vitals w terenie.
Ślepi agenci wprowadzają ślepe poprawki
Bez danych o rzeczywistych użytkownikach, 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 na tym kończy. Twoi rzeczywiści użytkownicy mają na ten temat inne zdanie.
Ręczne dochodzenie zajmuje godziny
Segmentuj dane. Postaw hipotezę. Uruchom śledzenie. Potwierdź. Przygotuj poprawkę. Doświadczony inżynier wydajności spędza od 2 do 4 godzin nad jednym problemem. Pomnóż to przez każdą wolną stronę w twojej witrynie.
INP w ogóle nie da się zasymulować w laboratorium Interaction to Next Paint mierzy, jak rzeczywiści użytkownicy wchodzą w interakcje z twoją stroną. Żadne syntetyczne narzędzie nie jest w stanie odtworzyć zachowania rzeczywistego użytkownika: gdzie stuka, jak szybko przewija, jakie urządzenie trzyma. Lighthouse nawet nie raportuje INP. Jeśli twój agent AI uruchamia Lighthouse, jest ślepy na twoje najpoważniejsze problemy z interaktywnością. Dane terenowe są jedynym źródłem.
Dwa źródła prawdy: Dane terenowe spotykają się z dowodami z przeglądarki
CWV Superpowers łączy dane o rzeczywistych użytkownikach CoreDash z ukierunkowanymi śladami Chrome. Dane terenowe mówią mu, co działa wolno. Chrome mówi mu, dlaczego.
CoreDash mówi agentowi, co działa wolno
CoreDash śledzi każde wczytanie strony każdego rzeczywistego użytkownika. Każda metryka jest przypisywana dokładnie do elementu powodującego problem. Bez próbkowania, bez limitów.
Kiedy CoreDash raportuje LCP na poziomie 4,2 sekundy, gdzie Load Delay zajmuje 52% całkowitego czasu na div.hero > img.main, agent dokładnie wie, gdzie szukać. To nie zgadywanie. To pomiar z milionów rzeczywistych sesji.
Umiejętność odpytuje o ponad 25 wymiarów CoreDash: element LCP, typ elementu, stan priorytetu, podział na fazy, cel interakcji INP, skrypty LOAF, element przesuwający CLS, typ urządzenia, typ odwiedzającego, prędkość sieci, 7-dniowe trendy.
Chrome mówi agentowi, dlaczego coś działa wolno
CWV Superpowers odwiedza stronę z emulacją mobilną: Fast 3G, 4-krotne dławienie CPU. Śledzi tylko fazę wąskiego gardła zidentyfikowaną przez CoreDash.
Load Delay to wąskie gardło? Agent bada kaskadę sieciową (network waterfall) pod kątem luk w wykrywaniu zasobów. Render Delay? Szuka blokujących skryptów i opóźnień w ładowaniu czcionek.
Rezultat: zrzuty ekranu w formie taśmy filmowej, kaskada sieciowa i ukierunkowane dowody wyjaśniające przyczynę główną ujawnioną przez twoje dane terenowe.
Rozumowanie proporcjonalne, a nie absolutne progi
Lighthouse mówi ci, że "Render Delay wynosi 350ms". Czy to stanowi problem? Nie wiadomo. CWV Superpowers identyfikuje wąskie gardło jako fazę zajmującą największy procent całkowitego czasu.
INP wynosi 350ms. Input Delay to 70ms (20%), Processing to 80ms (23%), Presentation to 200ms (57%). Presentation jest wąskim gardłem, mimo że wartość 200ms brzmi dobrze w odizolowaniu. Jej naprawienie przyniesie wymierny skutek. Optymalizacja Input Delay będzie ledwie zauważalna.
Zapobiega to najczęstszemu błędowi w pracy nad wydajnością: naprawianiu niewłaściwych rzeczy.
Pięć kroków: Od "coś działa wolno" do poprawki w kodzie
Zadaj mu pytanie. Pięć kroków później masz poprawkę popartą dowodami od rzeczywistych użytkowników.
1. Odkrywanie
Skanuje twoje dane z CoreDash w poszukiwaniu najgorszych stron i metryk. Priorytetyzuje słabe oceny, urządzenia mobilne, strony o dużym ruchu i wyniki p75 ukrywające długi "ogon" słabych pomiarów.
2. Diagnoza
Dzieli metrykę na fazy. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Wskazuje wąskie gardło według wartości procentowej.
3. Ślad Chrome
Odwiedza stronę z emulacją mobilną. Śledzi tylko fazę wąskiego gardła z kroku 2. Przechwytuje kaskadę sieciową, taśmę filmową i dowody dotyczące blokujących zasobów.
4. Przyczyna główna
Łączy oba źródła dowodów w jedno oświadczenie: element, przyczynę, metryki CoreDash i to, co potwierdził Chrome. Żadnych niejasności.
5. Poprawka lub Raport
Twój wybór. Zastosuj poprawkę w kodzie z plikiem, linią, elementem, zestawieniem przed/po. Wygeneruj samodzielny raport HTML z wykresami i dowodami. Albo jedno i drugie.
Ponad 25 wymiarów: Każdy aspekt obejmowany przez twoje dane terenowe
To są rzeczywiste wymiary CoreDash, o które pyta agent. To nie podsumowanie. Pełny obraz.
LCP (Largest Contentful Paint)
Element LCP Typ elementu Stan priorytetu Faza TTFB Load Delay Load Time Render DelayINP (Interaction to Next Paint)
Cel INP Input Delay Processing Presentation Skrypty LOAF Stan wczytaniaCLS (Cumulative Layout Shift)
Przesuwający się element Przyczyna przesunięcia Czas przesunięciaSegmenty
Typ urządzenia Kraj Przeglądarka System operacyjny Połączenie Typ odwiedzającego Ścieżka stronyTrendy
7-dniowa delta 28-dniowa linia bazowa Wykrywanie regresjiDiagnoza: Podział na fazy dla każdego wskaźnika Core Web Vitals
Nie tylko wyniki. Każda metryka podzielona na fazy z wykorzystaniem atrybucji rzeczywistych użytkowników z CoreDash.
Napraw LCP dzięki AI: Diagnoza Largest Contentful Paint
Podział na 4 fazy: TTFB, Load Delay, Load Time, Render Delay. Identyfikuje, która faza zajmuje największą część całkowitego czasu.
Atrybucja elementu: dokładny element LCP, jego typ (obraz, tekst, obraz tła, wideo) i stan priorytetu (fetchpriority, lazy loading).
Typowe poprawki: dodanie wskazówki preload, usunięcie lazy loading z sekcji hero, optymalizacja formatu obrazu, naprawienie skryptu blokującego renderowanie.
Napraw INP dzięki AI: Diagnoza Interaction to Next Paint
Podział na 3 fazy: Input Delay, Processing, Presentation. Jedyna metryka, której nie da się zasymulować w laboratorium. Dane terenowe to jedyne źródło.
Atrybucja skryptu: Long Animation Frames (LOAF) wskazuje dokładny plik JavaScript i czas trwania. Do tego stan załadowania strony w momencie wystąpienia interakcji.
Typowe poprawki: yield do wątku głównego (main thread), odroczenie ewaluacji (defer evaluation), podział procedur obsługi zdarzeń, content-visibility dla dużych drzew DOM.
CLS: Cumulative Layout Shift
5 wzorców przyczyn: obrazy bez wymiarów, podmiana czcionek, dynamicznie wstrzykiwana treść, opóźnione ładowanie zasobów, animacje CSS na właściwościach układu.
Analiza wielowymiarowa: porównuje urządzenia mobilne i desktopowe, nowych i powracających użytkowników, szybkie i wolne sieci, aby zawęzić przyczynę.
Typowe poprawki: dodanie width/height, font-display: optional, rezerwacja przestrzeni przez min-height, użycie transform zamiast top/left.
Jak wygląda oświadczenie o przyczynie głównej
To nie jest "rozważ optymalizację swoich obrazów". To są rzeczywiste wyniki. Wystarczająco konkretne, aby je przejrzeć i scalić.
Przyczyna główna:
Obraz LCP div.hero-banner > img.product-main na /product/running-shoes-42 zostaje wykryty z opóźnieniem 1980ms, ponieważ brakuje mu wskazówki preload i nie ma fetchpriority="high".
Dowody z CoreDash:
LCP wynosi 3820ms (słabo) na urządzeniach mobilnych, p75. Load Delay to wąskie gardło wynoszące 1980ms (52% całości). Stan priorytetu: 3 (brak preload). Trend: pogarszający się, +340ms w ciągu 7 dni.
Dowody z Chrome:
Kaskada sieciowa (network waterfall) pokazuje 1940ms luki między pierwszym bajtem HTML a żądaniem obrazu. Obraz jest przywoływany tylko w CSS, niewidoczny dla skanera preload.
Poprawka:
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 obrazu LCP i upewnij się, że krytyczne zasoby są odpowiednio wstępnie ładowane (preload)."
CWV Superpowers:
Element: div.hero-banner > img.product-main
Plik: templates/product.html, linia 47
Dowody: 52% czasu LCP to Load Delay (CoreDash p75). 1940ms luki w wykrywaniu (kaskada sieciowa Chrome).
Poprawka: dwulinijkowa zmiana w kodzie z zestawieniem przed/po (diff).
Porównanie: Jak wypada CWV Superpowers
Różne narzędzia rozwiązują różne problemy. Oto, co tak naprawdę robi każde z nich.
| Możliwość | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Źródło danych | Rzeczywiści użytkownicy (28 dni danych terenowych) | Pojedyncza sesja laboratoryjna | Symulowane pojedyncze wczytanie |
| Pomiar INP | ✓ Rzeczywiste interakcje | ✗ Brak rzeczywistych użytkowników | ✗ Nie mierzono |
| 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 |
| Rozumowanie proporcjonalne | ✓ Wąskie gardło w % | ✗ Wartości bezwzględne | ✗ Wartości bezwzględne |
| Porównywanie segmentów | ✓ Urządzenie, kraj, przeglądarka | ✗ Pojedyncza konfiguracja | ✗ Pojedyncza konfiguracja |
| Wykrywanie trendów | ✓ 7-dniowa delta | ✗ W konkretnym momencie | ✗ W konkretnym momencie |
| Śledzenie Chrome | ✓ Ukierunkowane 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 stanowi uzupełnienie. CWV Superpowers używa go do ukierunkowanego śledzenia po tym, jak dane terenowe zidentyfikują wąskie gardło. Działają najlepiej w połączeniu.
Raporty: Wrzuć na Slacka, dołącz do Jiry
Samowystarczalny HTML. Bez zależności. Bez etapu kompilacji. Jeden plik ze wszystkim osadzonym wewnątrz (inline).
Pełny raport (z Chrome)
Kodowane kolorami karty metryk, wykresy podziału na fazy, zrzuty ekranu w formie taśmy filmowej w kluczowych momentach (first paint, LCP, wczytanie), kaskada sieciowa jako SVG, analiza przyczyny głównej oraz zalecana poprawka z kodem przed/po.
Raport tylko na podstawie RUM
Te same karty metryk i podział na fazy, plus atrybucja elementów i analiza przyczyny głównej. Brak taśmy filmowej czy kaskady, ale jakość diagnozy jest identyczna, ponieważ dane terenowe są źródłem prawdy.
Współpracuje z każdym klientem MCP
Claude Code: Pełna umiejętność ze zautomatyzowanym przepływem pracy. Odkrywanie, diagnoza, śledzenie Chrome, poprawki w kodzie i raporty. Zalecane.
Cursor: Instalacja wtyczki z CoreDash MCP. Pełna diagnoza i poprawki w kodzie wewnątrz twojego edytora.
VS Code, Windsurf, Gemini CLI: Każdy klient obsługujący serwery HTTP MCP łączy się z CoreDash. Te same dane terenowe, ta sama atrybucja.
Client Success
Don't just take my word for it
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."
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.
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
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."
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."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
Uruchomienie w 2 minuty
Zautomatyzowana diagnoza Core Web Vitals w twoim terminalu. Potrzebujesz konta CoreDash z napływającymi danymi. Darmowy plan jest wystarczający.
Claude Code
# 1. Dodaj serwer MCP CoreDash claude mcp add --transport http coredash \ https://app.coredash.app/api/mcp \ --header "Authorization: Bearer cdk_YOUR_API_KEY" # 2. Zainstaluj CWV Superpowers /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpower # 3. Uruchom z Chrome (opcjonalne, zalecane) claude --chrome # 4. Start Znajdź mój największy problem z CWV i napraw go.
Odbierz swój klucz API z CoreDash → Ustawienia Projektu (Project Settings) → Klucze API (MCP). Wyświetlany 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 każdym klientem HTTP MCP. Jeden endpoint MCP ds. wydajności webowej dla każdego agenta.
Najczęściej zadawane pytania
Czy do korzystania z CWV Superpowers potrzebuję uruchomionego Chrome?
Nie. Śledzenie w Chrome jest opcjonalne. Bez niego otrzymasz pełną diagnozę z danych terenowych, podziały na fazy, atrybucję elementów i sugestie poprawek w kodzie na podstawie samych danych z CoreDash. Chrome dodaje zrzuty ekranu w formie taśmy filmowej, kaskadę sieciową i wizualne potwierdzenie przyczyny głównej. Oba tryby generują raporty.
Czym różni się to od uruchamiania Lighthouse u mojego agenta AI?
Lighthouse wykonuje pojedyncze, syntetyczne wczytanie na twojej maszynie. CWV Superpowers używa 28-dniowych danych o rzeczywistych użytkownikach z CoreDash: faktycznych urządzeń, prawdziwych sieci, rzeczywistych interakcji. Mierzy INP z rzeczywistych kliknięć użytkowników (Lighthouse tego nie potrafi). Porównuje segmenty (mobile vs desktop, Indie vs USA). Używa też rozumowania proporcjonalnego do znalezienia fazy wąskiego gardła, zamiast opierać się tylko na liczbach bezwzględnych.
Jacy agenci AI do programowania są obsługiwani?
Każdy agent AI do programowania nastawiony na wydajność webową obsługujący serwery MCP (Model Context Protocol). Claude Code ma dedykowaną umiejętność ze zautomatyzowanym 5-etapowym przepływem pracy. Cursor, VS Code (tryb agenta Copilot), Windsurf, Gemini CLI oraz Claude Desktop łączą się przez endpoint HTTP MCP z CoreDash. Dane terenowe i atrybucja są identyczne u wszystkich klientów.
Czy CoreDash jest darmowy?
CoreDash ma darmowy plan (free tier), który działa z CWV Superpowers. Potrzebujesz tylko danych spływających z twojej witryny (dodaj tag ze skryptem CoreDash). Darmowy plan nie ma próbkowania i żadnych limitów odsłon. Klucze API umożliwiające dostęp przez MCP są dostępne we wszystkich planach.
Czy mogę używać tego do stron klientów?
Tak. Dla każdego projektu CoreDash możesz utworzyć nielimitowaną liczbę dedykowanych kluczy API MVP . Dodaj CoreDash do strony każdego klienta, wygeneruj klucz API z uprawnieniami tylko do odczytu i skonfiguruj swojego klienta MCP. Agent widzi tylko dane dla tego jednego projektu. CWV Superpowers udostępniane jest na licencji MIT, więc nie ma ograniczeń w komercyjnym użyciu.
Open Source. Brak lock-inu.
Automatyzacja Core Web Vitals, którą możesz sprawdzać i rozszerzać. Orkiestrator, moduły diagnozujące, logika śledzenia Chrome oraz szablony raportów są dostępne na GitHubie. Przeczytaj jak to działa. Rób forki. Rozszerzaj. Wnoś swój wkład.
Rozpocznij darmowy okres próbny Zobacz na GitHubie