Dein KI-Agent hat gerade Core Web Vitals Superkräfte bekommen
Verbinde Claude Code mit deinen CoreDash field data. Er findet deinen schlimmsten Engpass bei Millionen von Seitenaufrufen, spürt die Ursache in Chrome auf und schreibt den Fix. Agentische Web-Performance: kein Bericht, sondern die tatsächliche Codezeile, die geändert werden muss.
In 2 Minuten installieren Kostenlose CoreDash-Testphase starten »Trusted by market leaders · Client results
KI-Performance-Tools haben ein Datenproblem
Die meisten KI-Agenten optimieren für Lighthouse. Ein synthetischer Score auf einem simulierten Gerät, den Google nicht für das Ranking nutzt. Ein nützlicher KI-Agent für Web-Performance startet mit denselben Daten wie Google: echte Nutzer auf günstigen Handys, unzuverlässige Verbindungen und Kontinente, die dein Entwicklungsrechner noch nie gesehen hat.
Lighthouse ist nicht dein Ranking-Signal
Google rankt basierend auf CrUX-field data von echten Chrome-Nutzern über 28 Tage. Ein perfekter Lighthouse-Score und ein schlechter Feld-Wert kommen ständig vor. 52 % der mobilen Websites fallen bei mindestens einem Core Web Vital im Feld durch.
Blinde Agenten machen blinde Korrekturen
Ohne echte Nutzerdaten weiß ein KI-Agent nicht, welche Seite langsam ist, welches Element der Flaschenhals ist oder ob seine Korrektur geholfen hat. Er optimiert eine Simulation und macht Feierabend. Deine echten Nutzer sehen das anders.
Manuelle Fehlersuche dauert Stunden
Daten segmentieren. Hypothese aufstellen. Trace ausführen. Bestätigen. Korrektur entwerfen. Ein Senior-Performance-Engineer braucht 2 bis 4 Stunden pro Problem. Multipliziere das mit jeder langsamen Seite auf deiner Website.
INP lässt sich im Labor überhaupt nicht simulieren Interaction to Next Paint misst, wie echte Nutzer mit deiner Seite interagieren. Kein synthetisches Tool kann das Verhalten echter Nutzer nachbilden: wo sie tippen, wie schnell sie scrollen, welches Gerät sie in den Händen halten. Lighthouse gibt das INP nicht einmal aus. Wenn dein KI-Agent Lighthouse ausführt, ist er blind für deine schlimmsten Interaktivitätsprobleme. Field data sind die einzige Quelle.
Zwei Quellen der Wahrheit: Field data trifft auf Browser-Beweise
CWV Superpowers kombiniert echte Nutzerdaten von CoreDash mit gezielten Chrome-Traces. Die field data zeigt, was langsam ist. Chrome zeigt, warum.
CoreDash zeigt dem Agenten, was langsam ist
CoreDash erfasst jeden Seitenaufruf jedes echten Nutzers. Jeder Messwert wird dem exakten Element zugeordnet, das das Problem verursacht. Kein Sampling, keine Limits.
Wenn CoreDash einen LCP von 4,2 Sekunden meldet, bei dem Load Delay 52% der Gesamtzeit auf div.hero > img.main ausmacht, weiß der Agent genau, wo er suchen muss. Keine Vermutung. Eine Messung aus Millionen echter Sitzungen.
Der Skill fragt über 25 CoreDash-Dimensionen ab: LCP-Element, Elementtyp, Priority-Status, Phasenaufteilung, INP-Interaktionsziel, LOAF-Skripte, sich verschiebendes CLS-Element, Gerätetyp, Besuchertyp, Netzwerkgeschwindigkeit, 7-Tage-Trends.
Chrome zeigt dem Agenten, warum es langsam ist
CWV Superpowers ruft die Seite mit mobiler Emulation auf: Fast 3G, 4x CPU-Drosselung. Es zeichnet nur die Engpass-Phase auf, die CoreDash identifiziert hat.
Ist Load Delay der Engpass? Der Agent untersucht den Netzwerk-Wasserfall nach Erkennungslücken. Render Delay? Er sucht nach blockierenden Skripten und Verzögerungen beim Laden von Schriften.
Das Ergebnis: Filmstrip-Screenshots, der Netzwerk-Wasserfall und gezielte Beweise, die die Hauptursache erklären, die deine field data aufgedeckt hat.
Proportionales Denken statt absoluter Schwellenwerte
Lighthouse sagt dir: „Render Delay beträgt 350ms.“ Ist das das Problem? Keine Ahnung. CWV Superpowers identifiziert den Engpass als die Phase, die den größten Prozentsatz der Gesamtzeit ausmacht.
Der INP liegt bei 350ms. Input Delay 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). Presentation ist der Engpass, obwohl 200ms isoliert betrachtet in Ordnung klingen. Die Behebung bringt den Unterschied. Die Optimierung von Input Delay macht sich kaum bemerkbar.
Das verhindert den häufigsten Fehler bei der Performance-Arbeit: das Falsche zu reparieren.
Fünf Schritte: Von „irgendwas ist langsam“ zum Code-Fix
Stell eine Frage. Fünf Schritte später hast du einen Fix, gestützt auf echte Nutzerdaten.
1. Erkennung
Scannt deine CoreDash-Daten nach den schlechtesten Seiten und Metriken. Priorisiert schlechte Einstufungen, Mobilgeräte, Seiten mit viel Traffic und p75-Werte, die einen langen, schlechten Verteilungsschwanz verbergen.
2. Diagnose
Zerlegt die Metrik in Phasen. LCP: TTFB, Ladeverzögerung, Ladezeit, Renderverzögerung. INP: Eingabeverzögerung, Verarbeitung, Darstellung. Benennt den Engpass nach Prozentanteil.
3. Chrome-Trace
Besucht die Seite mit Mobilgerät-Emulation. Zeichnet nur die Engpass-Phase aus Schritt 2 auf. Erfasst Netzwerk-Wasserfall, Filmstrip und Belege für blockierende Ressourcen.
4. Fehlerursache
Führt beide Datenquellen in einer Aussage zusammen: das Element, die Ursache, die CoreDash-Metriken und was Chrome bestätigt hat. Keine Unklarheiten.
5. Fix oder Bericht
Du entscheidest. Wende den Code-Fix an: mit Datei, Zeile, Element und Vorher/Nachher. Erstelle einen eigenständigen HTML-Bericht mit Diagrammen und Belegen. Oder beides.
25+ Dimensionen: Jeden Winkel, den deine field data abdecken
Das sind die tatsächlichen CoreDash-Dimensionen, die der Agent abfragt. Keine Zusammenfassung. Das vollständige Bild.
LCP (Largest Contentful Paint)
LCP-Element Elementtyp Prioritätsstatus TTFB-Phase Ladeverzögerung Ladezeit Render-VerzögerungINP (Interaction to Next Paint)
INP-Ziel Eingabeverzögerung Verarbeitung Darstellung LOAF-Skripte LadezustandCLS (Cumulative Layout Shift)
Sich verschiebendes Element Verschiebungsursache Verschiebungs-TimingSegmente
Gerätetyp Land Browser Betriebssystem Verbindung Besuchertyp SeitenpfadTrends
7-Tage-Delta 28-Tage-Baseline RegressionserkennungDiagnose: Phasen-Aufschlüsselung für jeden Core Web Vital
Nicht nur Scores. Jede Metrik aufgeteilt in Phasen durch Zuordnung realer Nutzer von CoreDash.
LCP mit KI beheben: Largest Contentful Paint-Diagnose
4-Phasen-Aufschlüsselung: TTFB, Ladeverzögerung, Ladezeit, Render-Verzögerung. Zeigt, welche Phase den größten Teil der Gesamtzeit beansprucht.
Element-Attribuierung: Das exakte LCP-Element, sein Typ (Bild, Text, Hintergrundbild, Video) und der Prioritätsstatus (fetchpriority, lazy loading).
Typische Korrekturen: Preload-Hinweis hinzufügen, lazy loading vom Hero-Element entfernen, Bildformat optimieren, render-blockierendes Skript korrigieren.
INP mit KI beheben: Interaction to Next Paint-Diagnose
3-Phasen-Aufschlüsselung: Input-Verzögerung, Verarbeitung, Präsentationsverzögerung. Die einzige Metrik, die du nicht mit lab data simulieren kannst. Field data ist die einzige Quelle.
Skript-Attribuierung: Long Animation Frames (LOAF) nennt die genaue JavaScript-Datei und Dauer. Plus den Seitenlade-Status zum Zeitpunkt der Interaktion.
Typische Korrekturen: Zum main thread yielden, Auswertung verzögern, Event-Handler aufteilen, content-visibility für große DOMs nutzen.
CLS: Cumulative Layout Shift
5 Ursachen-Muster: Bilder ohne Größenangaben, Schriftart-Wechsel, dynamisch injizierter Inhalt, spät ladende Ressourcen, CSS-Animationen auf Layout-Eigenschaften.
Dimensionsübergreifend: Vergleicht Mobilgeräte vs. Desktop, neue vs. wiederkehrende Besucher sowie schnelle vs. langsame Netzwerke, um die Ursache einzugrenzen.
Typische Korrekturen: width/height hinzufügen, font-display: optional, min-height-Reservierung, transform statt top/left nutzen.
Wie eine Ursachenbeschreibung aussieht
Nicht „überlege, deine Bilder zu optimieren“. Das ist die tatsächliche Ausgabe. Spezifisch genug für Review und Merge.
Fehlerursache:
Das LCP-Bild div.hero-banner > img.product-main auf /product/running-shoes-42 wird 1.980 ms zu spät erkannt, weil ein Preload-Hint fehlt und fetchpriority="high" nicht gesetzt ist.
CoreDash-Belege:
LCP liegt bei 3.820 ms (schlecht) auf Mobilgeräten, p75. Die Ladeverzögerung ist der Engpass mit 1.980 ms (52 % der Gesamtzeit). Prioritätsstatus: 3 (nicht vorgeladen). Trend: Verschlechterung um +340 ms über 7 Tage.
Chrome-Belege:
Der Netzwerk-Wasserfall zeigt eine Lücke von 1.940 ms zwischen dem ersten HTML-Byte und der Bildanforderung. Das Bild wird nur in CSS referenziert und ist für den Preload-Scanner unsichtbar.
Behebung:
Füge <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> in templates/product.html in Zeile 12 hinzu. Setze fetchpriority="high" auf dem img-Element in Zeile 47.
Generischer KI-Rat:
„Überlege, fetchpriority für dein LCP-Bild hinzuzufügen, und stelle das korrekte Preloading kritischer Ressourcen sicher.“
CWV-Superkräfte:
Element: div.hero-banner > img.product-main
Datei: templates/product.html, Zeile 47
Beleg: 52 % der LCP-Zeit in der Ladeverzögerung (CoreDash p75). 1.940 ms Erkennungslücke (Chrome-Wasserfall).
Behebung: 2-zeilige Code-Änderung mit Vorher/Nachher-Diff.
Vergleich: So schlägt sich CWV Superpowers
Verschiedene Tools lösen verschiedene Probleme. Das leistet jedes Tool wirklich.
| Funktion | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Datenquelle | Echte Nutzer (28 Tage field data) | Einzelne Lab-Session | Simulierter einzelner Ladevorgang |
| INP-Messung | ✓ Echte Interaktionen | ✗ Keine echten Nutzer | ✗ Nicht gemessen |
| Phasen-Aufschlüsselung | ✓ LCP-, INP- und CLS-Phasen | ~ Manuelle Analyse | ✗ Nur Score |
| Elementzuordnung | ✓ Exaktes Element + Priorität | ~ Wenn du weißt, wo du suchen musst | ~ Generische Vorschläge |
| Proportionale Analyse | ✓ Engpass nach % | ✗ Absolute Werte | ✗ Absolute Werte |
| Segmentvergleich | ✓ Gerät, Land, Browser | ✗ Einzelne Konfiguration | ✗ Einzelne Konfiguration |
| Trend-Erkennung | ✓ 7-Tage-Delta | ✗ Momentaufnahme | ✗ Momentaufnahme |
| Chrome-Tracing | ✓ Gezielt nach Phase | ✓ Voller Zugriff | ✗ Kein Browser |
| Code-Fixes | ✓ Datei + Zeile + Diff | ~ Agentenabhängig | ~ Generische Ratschläge |
Hinweis: Chrome DevTools MCP ist eine Ergänzung. CWV Superpowers nutzt es für gezieltes Tracing, nachdem die field data den Engpass identifiziert hat. Beide Tools funktionieren am besten zusammen.
Berichte: In Slack posten, an Jira anhängen
Eigenständiges HTML. Keine Abhängigkeiten. Kein Build-Schritt. Eine Datei, alles inline.
Vollständiger Bericht (mit Chrome)
Farbcodierte Metrik-Karten, Diagramme zur Phasenaufteilung, Filmstreifen-Screenshots zu Schlüsselmomenten (First Paint, LCP, geladen), Netzwerk-Wasserfall-SVG, Ursachenanalyse und die empfohlene Behebung mit Vorher-Nachher-Code.
RUM-only-Bericht
Dieselben Metrik-Karten und Phasenaufteilung, dazu Element-Attribuierung und Ursachenanalyse. Kein Filmstreifen oder Wasserfall, aber die Diagnosequalität ist identisch, weil Field Data die Quelle der Wahrheit ist.
Funktioniert mit jedem MCP-Client
Claude Code: Vollständiger Skill mit automatisiertem Workflow. Erkennung, Diagnose, Chrome-Tracing, Code-Fixes und Berichte. Empfohlen.
Cursor: Plugin-Installation mit CoreDash-MCP. Vollständige Diagnose und Code-Fixes in deinem Editor.
VS Code, Windsurf, Gemini CLI: Jeder Client, der HTTP-MCP-Server unterstützt, verbindet sich mit CoreDash. Gleiche Field Data, gleiche Attribuierung.
Client Success
Don't just take my word for it
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."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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.
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."
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."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
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."
Startklar in 2 Minuten
Automatisierte Core Web Vitals-Diagnose im Terminal. Du brauchst einen CoreDash-Account mit aktivem Datenfluss. Die kostenlose Version reicht.
Claude Code
# 1. CoreDash MCP-Server hinzufügen (Browser-Login, kein API-Key) claude mcp add --transport http coredash https://app.coredash.app/api/mcp # 2. CWV Superpowers installieren /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpowers # 3. Mit Chrome starten (optional, empfohlen) claude --chrome # 4. Loslegen Finde mein größtes CWV-Problem und behebe es.
Führe beim ersten Verbinden /mcp aus, wähle coredash und wähle Authenticate. Dein Browser öffnet den CoreDash-Login. Du wählst ein Projekt und bestätigst es. Claude Code speichert ein kurzlebiges OAuth-Token. Es aktualisiert sich automatisch (1 Stunde Zugriff, 30 Tage Refresh) und bleibt widerrufbar. Kein Key zum Einfügen.
Bevorzugst du einen API-Key für Headless- oder CI-Nutzung? Ergänze den Befehl um --header "Authorization: Bearer cdk_YOUR_API_KEY", generiert unter CoreDash → Project Settings → API Keys (MCP). Nur einmal angezeigt. Als SHA-256-Hash gespeichert. Schreibgeschützt.
Cursor
# Plugin installieren
/plugin-add cwv-superpowers
Füge CoreDash zu .cursor/mcp.json hinzu:
{
"mcpServers": {
"coredash": {
"url": "https://app.coredash.app/api/mcp",
"headers": {
"Authorization": "Bearer cdk_YOUR_API_KEY"
}
}
}
}
Andere MCP-Clients
Endpunkt: https://app.coredash.app/api/mcp
Header: Authorization: Bearer cdk_YOUR_API_KEY
Funktioniert mit VS Code (Copilot-Agentenmodus), Windsurf, Gemini CLI, Claude Desktop und jedem HTTP-MCP-Client. Ein MCP-Webperformance-Endpunkt, jeder Agent.
Häufig gestellte Fragen
Muss Chrome laufen, um CWV Superpowers zu nutzen?
Nein. Chrome-Tracing ist optional. Ohne Chrome bekommst du eine vollständige field data-Diagnose, Phasenaufschlüsselungen, Element-Attribuierung und Code-Fix-Vorschläge allein auf Basis von CoreDash-Daten. Chrome ergänzt Filmstrip-Screenshots, einen Netzwerk-Waterfall und die visuelle Bestätigung der Ursache. Beide Modi generieren Berichte.
Wie unterscheidet sich das vom Ausführen von Lighthouse in meinem AI-Agenten?
Lighthouse führt einen einzigen synthetischen Ladevorgang auf deinem Rechner aus. CWV Superpowers nutzt 28 Tage echte Nutzerdaten von CoreDash: echte Geräte, echte Netzwerke, echte Interaktionen. Es misst INP bei echten Taps von Nutzern (Lighthouse kann das nicht). Es vergleicht Segmente (Mobil vs. Desktop, Indien vs. USA). Und es nutzt proportionale Logik, um die Engpass-Phase zu finden, nicht nur absolute Scores.
Welche AI-Coding-Agenten werden unterstützt?
Jeder AI-Coding-Agent für Web-Performance, der MCP-Server (Model Context Protocol) unterstützt. Claude Code hat einen dedizierten Skill mit einem automatisierten 5-Schritte-Workflow. Cursor, VS Code (Copilot-Agentenmodus), Windsurf, Gemini CLI und Claude Desktop verbinden sich über den HTTP-MCP-Endpunkt von CoreDash. Die field data und die Attribuierung sind bei allen Clients identisch.
Ist CoreDash kostenlos?
CoreDash hat einen kostenlosen Tarif, der mit CWV Superpowers funktioniert. Du brauchst Daten von deiner Seite (füge das CoreDash-Script-Tag hinzu). Der kostenlose Tarif hat kein Sampling und keine Seitenaufruf-Limits. API-Keys für den MCP-Zugriff sind in allen Tarifen verfügbar.
Kann ich das für Kundenseiten nutzen?
Ja. Für jedes CoreDash-Projekt kannst du unbegrenzt dedizierte MVP-API-Keys erstellen . Füge CoreDash zu jeder Kundenseite hinzu, generiere einen Read-only-API-Key und konfiguriere deinen MCP-Client. Der Agent sieht nur die Daten für dieses Projekt. CWV Superpowers ist MIT-lizenziert, daher gibt es keine Einschränkungen für die kommerzielle Nutzung.
Open Source. Kein Lock-in.
Core Web Vitals-Automatisierung, die du inspizieren und erweitern kannst. Der Orchestrator, die Diagnosemodule, die Chrome-Tracing-Logik und die Berichtsvorlagen liegen alle auf GitHub. Lies, wie es funktioniert. Forke es. Erweitere es. Beteilige dich.
Starte deinen kostenlosen Test Auf GitHub ansehen