Dein KI-Agent hat gerade Core Web Vitals Superkräfte bekommen
Verbinde Claude Code mit deinen CoreDash-Felddaten. Er findet deinen schlimmsten Engpass in Millionen von Seitenaufrufen, verfolgt die Ursache in Chrome und schreibt den Fix. Agentic Web Performance — kein Bericht, sondern die tatsächliche Codezeile, die geändert werden muss.
In 2 Minuten installieren Kostenlose CoreDash-Testversion 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 verwendet. Ein nützlicher Web-Performance KI-Agent geht von denselben Daten aus wie Google: echte Nutzer auf günstigen Handys, lückenhafte Verbindungen und Kontinente, die dein Entwicklungsrechner noch nie gesehen hat.
Lighthouse ist nicht dein Ranking-Signal
Google rankt auf Basis von CrUX-Felddaten echter Chrome-Nutzer über 28 Tage. Ein perfekter Lighthouse-Score und ein durchfallender Feld-Score kommen ständig vor. 52 % der mobilen Websites verfehlen im Feld mindestens einen Core Web Vital.
Blinde Agenten machen blinde Fixes
Ohne echte Benutzerdaten weiß ein KI-Agent nicht, welche Seite langsam ist, welches Element der Engpass ist oder ob sein Fix geholfen hat. Er optimiert eine Simulation und macht Feierabend. Deine tatsächlichen Nutzer sehen das anders.
Manuelle Untersuchung dauert Stunden
Segmentiere die Daten. Stelle Hypothesen auf. Führe einen Trace durch. Bestätige. Entwirf den Fix. Ein Senior Performance Engineer verbringt 2 bis 4 Stunden pro Problem. Multipliziere das mit jeder langsamen Seite deiner Website.
INP kann im Labor überhaupt nicht simuliert werden Interaction to Next Paint misst, wie echte Benutzer mit deiner Seite interagieren. Kein synthetisches Tool kann echtes Benutzerverhalten replizieren: wo sie tippen, wie schnell sie scrollen, welches Gerät sie halten. Lighthouse meldet INP nicht einmal. Wenn dein KI-Agent Lighthouse ausführt, ist er blind für deine schlimmsten Interaktivitätsprobleme. Felddaten sind die einzige Quelle.
Zwei Quellen der Wahrheit: Felddaten treffen auf Browser-Beweise
CWV Superpowers kombiniert echte CoreDash-Benutzerdaten mit gezielten Chrome-Traces. Die Felddaten verraten ihm, was langsam ist. Chrome verrät ihm, warum.
CoreDash sagt dem Agenten, was langsam ist
CoreDash verfolgt jeden Seitenaufruf jedes echten Benutzers. Jede Metrik, zugeordnet zu dem genauen Element, das das Problem verursacht. Kein Sampling, keine Obergrenzen.
Wenn CoreDash einen LCP von 4,2 Sekunden meldet, bei dem Load Delay 52 % der Gesamtzeit auf div.hero > img.main beansprucht, weiß der Agent genau, wo er suchen muss. Keine Vermutung. Eine Messung aus Millionen von echten Sitzungen.
Der Skill fragt 25+ CoreDash-Dimensionen ab: LCP-Element, Elementtyp, Prioritätsstatus, Phasenaufschlüsselung, INP-Interaktionsziel, LOAF-Skripte, CLS-verschiebendes Element, Gerätetyp, Besuchertyp, Netzwerkgeschwindigkeit, 7-Tage-Trends.
Chrome sagt dem Agenten, warum es langsam ist
CWV Superpowers besucht die Seite mit mobiler Emulation: Fast 3G, 4x CPU-Drosselung. Es verfolgt nur die Engpassphase, die CoreDash identifiziert hat.
Load Delay ist der Engpass? Der Agent untersucht den Network Waterfall auf Lücken in der Entdeckung. Render Delay? Er sucht nach blockierenden Skripten und Verzögerungen beim Laden von Schriftarten.
Das Ergebnis: Filmstrip-Screenshots, Network Waterfall und gezielte Beweise, die die Ursache erklären, die deine Felddaten offengelegt haben.
Proportionales Denken, keine absoluten Schwellenwerte
Lighthouse sagt dir "Render Delay ist 350ms." Ist das das Problem? Keine Ahnung. CWV Superpowers identifiziert den Engpass als die Phase, die den größten Prozentsatz der Gesamtzeit in Anspruch nimmt.
INP ist 350ms. Input Delay 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). Presentation ist der Engpass, auch wenn 200ms isoliert betrachtet gut klingen. Daran zu arbeiten, bringt den Durchbruch. Die Optimierung des Input Delay fällt kaum ins Gewicht.
Dies verhindert den häufigsten Fehler bei der Performance-Arbeit: das Falsche zu reparieren.
Fünf Schritte: Von "etwas ist langsam" zum Code-Fix
Stell ihm eine Frage. Fünf Schritte später hast du einen Fix, der durch Beweise echter Benutzer gestützt wird.
1. Entdeckung
Scannt deine CoreDash-Daten nach den schlechtesten Seiten und Metriken. Priorisiert schlechte Bewertungen, mobile Endgeräte, Seiten mit hohem Traffic und p75-Scores, die einen langen schlechten Tail verbergen.
2. Diagnose
Bricht die Metrik in Phasen herunter. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Benennt den Engpass in Prozent.
3. Chrome Trace
Besucht die Seite mit mobiler Emulation. Verfolgt nur die Engpassphase aus Schritt 2. Erfasst den Network Waterfall, Filmstrip und Beweise für blockierende Ressourcen.
4. Grundursache
Kombiniert beide Beweisquellen zu einer Aussage: das Element, die Ursache, die CoreDash-Metriken und was Chrome bestätigt hat. Keine Mehrdeutigkeit.
5. Fix oder Bericht
Deine Wahl. Wende den Code-Fix mit Datei, Zeile, Element, Vorher/Nachher an. Generiere einen eigenständigen HTML-Bericht mit Diagrammen und Beweisen. Oder beides.
25+ Dimensionen: Jeder Blickwinkel, den deine Felddaten abdecken
Dies 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 Load Delay Load Time Render DelayINP (Interaction to Next Paint)
INP-Ziel Input Delay Processing Presentation LOAF-Skripte LadezustandCLS (Cumulative Layout Shift)
Verschiebendes Element Verschiebungsursache VerschiebungszeitpunktSegmente
Gerätetyp Land Browser Betriebssystem Verbindung Besuchertyp SeitenpfadTrends
7-Tage-Delta 28-Tage-Baseline RegressionserkennungDiagnose: Phasenaufschlüsselung für jeden Core Web Vital
Nicht nur Scores. Jede Metrik in Phasen unterteilt unter Verwendung der echten Benutzer-Attribution von CoreDash.
LCP mit KI beheben: Largest Contentful Paint Diagnose
4-Phasen-Aufschlüsselung: TTFB, Load Delay, Load Time, Render Delay. Identifiziert, welche Phase den größten Anteil an der Gesamtzeit verbraucht.
Element-Attribution: das genaue LCP-Element, sein Typ (Bild, Text, Hintergrundbild, Video) und Prioritätsstatus (fetchpriority, Lazy Loading).
Typische Fixes: Preload-Hint hinzufügen, Lazy Loading vom Hero entfernen, Bildformat optimieren, render-blockierendes Skript reparieren.
INP mit KI beheben: Interaction to Next Paint Diagnose
3-Phasen-Aufschlüsselung: Input Delay, Processing, Presentation. Die einzige Metrik, die du nicht in einem Labor simulieren kannst. Felddaten sind die einzige Quelle.
Skript-Attribution: Long Animation Frames (LOAF) benennen die genaue JavaScript-Datei und Dauer. Plus den Seitenladezustand, als die Interaktion stattfand.
Typische Fixes: an den Main Thread yielden, Evaluierung verschieben, Event-Handler aufteilen, content-visibility für große DOMs.
CLS: Cumulative Layout Shift
5 Ursachenmuster: Bilder ohne Dimensionen, Font-Swaps, dynamisch injizierter Inhalt, spät ladende Ressourcen, CSS-Animationen auf Layout-Eigenschaften.
Dimensionsübergreifend: vergleicht mobil vs. Desktop, neue vs. wiederkehrende Besucher, schnelle vs. langsame Netzwerke, um die Ursache einzugrenzen.
Typische Fixes: width/height hinzufügen, font-display: optional, min-height-Reservierung, transform anstelle von top/left verwenden.
Wie eine Grundursachen-Aussage aussieht
Nicht "erwäge die Optimierung deiner Bilder." Dies ist die tatsächliche Ausgabe. Spezifisch genug zum Überprüfen und Mergen.
Ursache:
Das LCP-Bild div.hero-banner > img.product-main auf /product/running-shoes-42 wird 1.980ms zu spät entdeckt, weil ihm ein Preload-Hint fehlt und es kein fetchpriority="high" hat.
CoreDash-Beweis:
LCP ist 3.820ms (schlecht) auf Mobile, p75. Load Delay ist der Engpass mit 1.980ms (52% der Gesamtzeit). Prioritätsstatus: 3 (nicht vorgeladen). Trend: Verschlechterung um +340ms über 7 Tage.
Chrome-Beweis:
Der Network Waterfall zeigt eine Lücke von 1.940ms zwischen dem ersten HTML-Byte und der Bildanfrage. Bild wird nur im CSS referenziert, unsichtbar für den Preload-Scanner.
Fix:
Füge <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> zu templates/product.html in Zeile 12 hinzu. Setze fetchpriority="high" für das img-Element in Zeile 47.
Generischer KI-Ratschlag:
"Erwäge das Hinzufügen von fetchpriority zu deinem LCP-Bild und stelle ein ordnungsgemäßes Preloading kritischer Ressourcen sicher."
CWV Superpowers:
Element: div.hero-banner > img.product-main
Datei: templates/product.html, Zeile 47
Beweis: 52% der LCP-Zeit im Load Delay (CoreDash p75). 1.940ms Entdeckungslücke (Chrome Waterfall).
Fix: 2-zeilige Codeänderung mit Vorher/Nachher-Diff.
Vergleich: Wie CWV Superpowers abschneidet
Unterschiedliche Tools lösen unterschiedliche Probleme. Hier siehst du, was jedes einzelne tatsächlich tut.
| Fähigkeit | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Datenquelle | Echte Benutzer (28 Tage Felddaten) | Einzelne Lab-Sitzung | Simulierter einzelner Aufruf |
| INP-Messung | ✓ Echte Interaktionen | ✗ Keine echten Benutzer | ✗ Nicht gemessen |
| Phasenaufschlüsselung | ✓ LCP-, INP-, CLS-Phasen | ~ Manuelle Analyse | ✗ Nur Score |
| Element-Attribution | ✓ Genaues Element + Priorität | ~ Wenn du weißt, wo du suchen musst | ~ Generische Vorschläge |
| Proportionales Denken | ✓ Engpass nach % | ✗ Absolute Werte | ✗ Absolute Werte |
| Segmentvergleich | ✓ Gerät, Land, Browser | ✗ Einzelne Konfiguration | ✗ Einzelne Konfiguration |
| Trenderkennung | ✓ 7-Tage-Delta | ✗ Zeitpunktbezogen | ✗ Zeitpunktbezogen |
| Chrome Tracing | ✓ Gezielt nach Phase | ✓ Voller Zugriff | ✗ Kein Browser |
| Code-Fixes | ✓ Datei + Zeile + Diff | ~ Agentenabhängig | ~ Generischer Ratschlag |
Hinweis: Chrome DevTools MCP ist eine Ergänzung. CWV Superpowers nutzt es für gezieltes Tracing, nachdem die Felddaten den Engpass identifiziert haben. Sie funktionieren am besten zusammen.
Berichte: Lege sie in Slack ab, hänge sie an Jira an
Eigenständiges HTML. Keine Abhängigkeiten. Kein Build-Schritt. Eine Datei mit allem inline.
Vollständiger Bericht (mit Chrome)
Farbcodierte Metrik-Karten, Diagramme zur Phasenaufschlüsselung, Filmstrip-Screenshots zu Schlüsselmomenten (First Paint, LCP, Loaded), Network Waterfall SVG, Grundursachenanalyse und der empfohlene Fix mit Vorher/Nachher-Code.
RUM-Only-Bericht
Dieselben Metrik-Karten und Phasenaufschlüsselung, plus Element-Attribution und Grundursachenanalyse. Kein Filmstrip oder Waterfall, aber die Diagnosequalität ist identisch, da die Felddaten die Quelle der Wahrheit sind.
Funktioniert mit jedem MCP-Client
Claude Code: Vollständiger Skill mit automatisiertem Workflow. Entdeckung, Diagnose, Chrome Tracing, Code-Fixes und Berichte. Empfohlen.
Cursor: Plugin-Installation mit CoreDash MCP. Vollständige Diagnose und Code-Fixes direkt in deinem Editor.
VS Code, Windsurf, Gemini CLI: Jeder Client, der HTTP-MCP-Server unterstützt, verbindet sich mit CoreDash. Gleiche Felddaten, gleiche Attribution.
Client Success
Don't just take my word for it
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, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
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."
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, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
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."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
In 2 Minuten startklar
Automatisierte Core Web Vitals Diagnose in deinem Terminal. Du benötigst ein CoreDash-Konto, in das Daten fließen. Der kostenlose Tarif funktioniert hierfür.
Claude Code
claude mcp add --transport http coredash \
https://app.coredash.app/api/mcp \
--header "Authorization: Bearer cdk_YOUR_API_KEY"
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower
claude --chrome
Find my biggest CWV issue and fix it. Hole dir deinen API-Key aus CoreDash → Project Settings → API Keys (MCP). Wird nur einmal angezeigt. Gespeichert als SHA-256-Hash. Read-only.
Cursor
/plugin-add cwv-superpowers
Füge CoreDash zur .cursor/mcp.json hinzu:
{
"mcpServers": {
"coredash": {
"url": "https://app.coredash.app/api/mcp",
"headers": {
"Authorization": "Bearer cdk_YOUR_API_KEY"
}
}
}
} Andere MCP-Clients
Endpoint: https://app.coredash.app/api/mcp
Header: Authorization: Bearer cdk_YOUR_API_KEY
Funktioniert mit VS Code (Copilot Agent Mode), Windsurf, Gemini CLI, Claude Desktop und jedem HTTP-MCP-Client. Ein MCP-Web-Performance-Endpoint, jeder Agent.
Häufig gestellte Fragen
Muss Chrome laufen, um CWV Superpowers zu nutzen?
Nein. Chrome Tracing ist optional. Ohne dies erhältst du eine vollständige Felddatendiagnose, Phasenaufschlüsselungen, Element-Attribution und Vorschläge für Code-Fixes allein auf Basis der CoreDash-Daten. Chrome fügt Filmstrip-Screenshots, Network Waterfall und die visuelle Bestätigung der Grundursache hinzu. Beide Modi generieren Berichte.
Wie unterscheidet sich das von der Ausführung von Lighthouse in meinem KI-Agenten?
Lighthouse führt einen einzigen synthetischen Ladevorgang auf deinem Rechner aus. CWV Superpowers nutzt 28 Tage an echten Benutzerdaten von CoreDash: tatsächliche Geräte, tatsächliche Netzwerke, tatsächliche Interaktionen. Es misst den INP anhand echter Benutzer-Tipps (Lighthouse kann das nicht). Es vergleicht Segmente (mobil vs. Desktop, Indien vs. USA). Und es nutzt proportionales Denken, um die Engpassphase zu finden, nicht nur absolute Scores.
Welche KI-Programmieragenten werden unterstützt?
Jeder KI-Programmieragent für Web-Performance, der MCP (Model Context Protocol) Server unterstützt. Claude Code hat einen dedizierten Skill mit einem automatisierten 5-Schritte-Workflow. Cursor, VS Code (Copilot Agent Mode), Windsurf, Gemini CLI und Claude Desktop verbinden sich über den CoreDash HTTP-MCP-Endpoint. Die Felddaten und die Attribution sind bei allen Clients identisch.
Ist CoreDash kostenlos?
CoreDash hat einen kostenlosen Tarif, der mit CWV Superpowers funktioniert. Es müssen Daten von deiner Website fließen (füge das CoreDash-Skript-Tag hinzu). Der kostenlose Tarif hat kein Sampling und keine Obergrenzen für Seitenaufrufe. API-Keys für den MCP-Zugriff sind in allen Tarifen verfügbar.
Kann ich das für Kunden-Websites verwenden?
Ja. Für jedes CoreDash-Projekt kannst du unbegrenzt dedizierte MVP-API-Keys erstellen. Füge CoreDash zu jeder Kunden-Website 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, es gibt also 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 befinden sich alle auf GitHub. Lies, wie es funktioniert. Forke es. Erweitere es. Trage dazu bei.
Starte deine kostenlose Testversion Auf GitHub ansehen