Dein KI-Agent hat gerade Core Web Vitals Superkräfte bekommen
Verbinde Claude Code mit deinen CoreDash Felddaten. Er findet deinen schlimmsten Flaschenhals über Millionen von Seitenaufrufen hinweg, spürt die Ursache in Chrome auf und schreibt den Fix. Agentic Web Performance nicht als Bericht, sondern als tatsächliche Codezeile, die geändert werden muss.
In 2 Minuten installieren Starte deine kostenlose CoreDash-Testversion »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 den gleichen Daten aus wie Google: echte Nutzer auf Budget-Smartphones, unzuverlässige Verbindungen und Kontinente, die deine Entwicklermaschine noch nie gesehen hat.
Lighthouse ist nicht dein Ranking-Signal
Google rankt anhand von CrUX Felddaten echter Chrome-Nutzer über 28 Tage. Ein perfekter Lighthouse Score und ein schlechter Feld-Score kommen ständig vor. 52% der mobilen Websites fallen bei mindestens einem Core Web Vital im Feld durch.
Blinde Agenten machen blinde Fixes
Ohne echte Nutzerdaten weiß ein KI-Agent nicht, welche Seite langsam ist, welches Element der Flaschenhals ist oder ob sein Fix geholfen hat. Er optimiert eine Simulation und macht dann Feierabend. Deine tatsächlichen Nutzer sehen das anders.
Manuelle Untersuchungen dauern Stunden
Daten segmentieren. Hypothesen aufstellen. Einen Trace ausführen. Bestätigen. Den Fix entwerfen. Ein Senior Performance Engineer verbringt 2 bis 4 Stunden pro Problem. Multipliziere das mit jeder langsamen Seite auf deiner Website.
INP kann im Labor überhaupt nicht simuliert werden Interaction to Next Paint misst, wie echte Nutzer mit deiner Seite interagieren. Kein synthetisches Tool kann echtes Nutzerverhalten replizieren: wo sie tippen, wie schnell sie scrollen, welches Gerät sie in der Hand halten. Lighthouse meldet INP nicht einmal. Wenn dein KI-Agent Lighthouse nutzt, 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 Nutzerdaten von CoreDash 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 Nutzers. Jede Metrik, zugeordnet zu genau dem Element, das das Problem verursacht. Kein Sampling, keine Limits.
Wenn CoreDash einen LCP von 4,2 Sekunden meldet, wobei Load Delay 52% der Gesamtzeit bei div.hero > img.main verbraucht, 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, 4-fache CPU-Drosselung. Es verfolgt nur die Flaschenhals-Phase, die CoreDash identifiziert hat.
Load Delay ist der Flaschenhals? Der Agent untersucht den Netzwerk-Wasserfall auf Discovery-Lücken. Render Delay? Er sucht nach blockierenden Skripten und Verzögerungen beim Laden von Schriftarten.
Das Ergebnis: Filmstrip-Screenshots, Netzwerk-Wasserfall und gezielte Beweise, welche die von deinen Felddaten aufgedeckte Grundursache erklären.
Proportionales Schließen, keine absoluten Schwellenwerte
Lighthouse sagt dir "Render Delay ist 350ms." Ist das das Problem? Keine Ahnung. CWV Superpowers identifiziert den Flaschenhals als die Phase, die den größten Prozentsatz der Gesamtzeit verbraucht.
INP beträgt 350ms. Input Delay 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). Presentation ist der Flaschenhals, auch wenn 200ms isoliert betrachtet in Ordnung klingen. Dies zu beheben, bringt echte Fortschritte. Die Optimierung des Input Delays fällt kaum ins Gewicht.
Dies verhindert den häufigsten Fehler bei der Performance-Arbeit: das Falsche zu reparieren.
Fünf Schritte: Von "irgendwas ist langsam" zum Code-Fix
Stelle ihm eine Frage. Fünf Schritte später hast du einen Fix, der durch echte Nutzerbeweise gestützt wird.
1. Discovery
Scannt deine CoreDash Daten nach den schlechtesten Seiten und Metriken. Priorisiert schlechte Bewertungen, Mobile, stark frequentierte Seiten und p75-Werte, die einen langen "Poor"-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 Flaschenhals nach Prozentanteil.
3. Chrome Trace
Besucht die Seite mit mobiler Emulation. Tracet nur die Flaschenhals-Phase aus Schritt 2. Erfasst Netzwerk-Wasserfall, Filmstrip und Beweise für blockierende Ressourcen.
4. Ursachenanalyse
Kombiniert beide Beweisquellen zu einer Aussage: das Element, die Ursache, die CoreDash Metriken und das, was Chrome bestätigt hat. Keine Mehrdeutigkeit.
5. Fix oder Bericht
Deine Wahl. Wende den Code-Fix mit Datei, Zeile, Element und 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: Aufschlüsselung auf Phasenebene für jeden Core Web Vital
Nicht nur Scores. Jede Metrik wird anhand der Attribution echter Nutzer von CoreDash in Phasen unterteilt.
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 der Gesamtzeit verbraucht.
Element-Attribution: das exakte LCP Element, sein Typ (Bild, Text, Hintergrundbild, Video) und sein Prioritätsstatus (fetchpriority, Lazy Loading).
Typische Fixes: Preload-Hint hinzufügen, Lazy Loading beim Hero entfernen, Bildformat optimieren, render-blockierendes Skript fixen.
INP mit KI beheben: Interaction to Next Paint Diagnose
3-Phasen-Aufschlüsselung: Input Delay, Processing, Presentation. Die einzige Metrik, die man im Labor nicht simulieren kann. Felddaten sind die einzige Quelle.
Skript-Attribution: Long Animation Frames (LOAF) benennt die genaue JavaScript-Datei und Dauer. Plus den Ladezustand der Seite, als die Interaktion stattfand.
Typische Fixes: Yield to Main Thread, Auswertung zurückstellen, Event-Handler aufteilen, content-visibility für große DOMs.
CLS: Cumulative Layout Shift
5 Ursachenmuster: Bilder ohne Dimensionen, Font Swaps, dynamisch injizierter Content, spät ladende Ressourcen, CSS-Animationen auf Layout-Eigenschaften.
Cross-dimensional: vergleicht Mobile 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 Ursachenanalyse aussieht
Nicht "Erwäge, deine Bilder zu optimieren." Dies ist der tatsächliche Output. Spezifisch genug, um ihn zu überprüfen und zu mergen.
Grundursache:
Das LCP Bild div.hero-banner > img.product-main auf /product/running-shoes-42 wird 1.980ms zu spät entdeckt, da ein Preload-Hint fehlt und es kein fetchpriority="high" hat.
CoreDash Beweis:
LCP beträgt 3.820ms (poor) auf Mobile, p75. Load Delay ist der Flaschenhals mit 1.980ms (52% der Gesamtzeit). Prioritätsstatus: 3 (nicht preloaded). Trend: verschlechtert sich um +340ms über 7 Tage.
Chrome Beweis:
Der Netzwerk-Wasserfall zeigt eine Lücke von 1.940ms zwischen HTML First Byte und der Bildanfrage. Das Bild wird nur im CSS referenziert und ist für den Preload-Scanner unsichtbar.
Fix:
Füge <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> zu templates/product.html Zeile 12 hinzu. Setze fetchpriority="high" beim img-Element in Zeile 47.
Allgemeiner KI-Rat:
"Erwäge das Hinzufügen von fetchpriority zu deinem LCP Bild und stelle das ordnungsgemäße 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 Discovery-Lücke (Chrome Wasserfall).
Fix: 2-zeilige Code-Änderung mit Vorher/Nachher-Diff.
Vergleich: Wie CWV Superpowers abschneidet
Unterschiedliche Tools lösen unterschiedliche Probleme. Hier ist, was jedes einzelne tatsächlich tut.
| Fähigkeit | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Datenquelle | Echte Nutzer (28 Tage Felddaten) | Einzelsitzung im Labor | Simulierter einzelner Ladevorgang |
| INP Messung | ✓ Echte Interaktionen | ✗ Keine echten Nutzer | ✗ Nicht gemessen |
| Phasenaufschlüsselung | ✓ LCP, INP, CLS Phasen | ~ Manuelle Analyse | ✗ Nur Score |
| Element-Attribution | ✓ Exaktes Element + Priorität | ~ Wenn man weiß, wo man suchen muss | ~ Allgemeine Vorschläge |
| Proportionales Schließen | ✓ Flaschenhals nach % | ✗ Absolute Werte | ✗ Absolute Werte |
| Segmentvergleich | ✓ Gerät, Land, Browser | ✗ Einzelne Konfiguration | ✗ Einzelne Konfiguration |
| Trend-Erkennung | ✓ 7-Tage-Delta | ✗ Zeitpunkt | ✗ Zeitpunkt |
| Chrome Tracing | ✓ Zielgerichtet nach Phase | ✓ Voller Zugriff | ✗ Kein Browser |
| Code Fixes | ✓ Datei + Zeile + Diff | ~ Agent-abhängig | ~ Allgemeiner Rat |
Hinweis: Chrome DevTools MCP ist ergänzend. CWV Superpowers verwendet es für gezieltes Tracing, nachdem die Felddaten den Flaschenhals identifiziert haben. Sie funktionieren am besten zusammen.
Berichte: In Slack droppen, in Jira anhängen
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), Netzwerk-Wasserfall als SVG, Ursachenanalyse (Root Cause) und der empfohlene Fix mit Vorher/Nachher-Code.
Reiner RUM-Bericht
Dieselben Metrik-Karten und Phasenaufschlüsselung, plus Element-Attribution und Ursachenanalyse. Kein Filmstrip oder Wasserfall, aber die Diagnosequalität ist identisch, da Felddaten die Quelle der Wahrheit sind.
Funktioniert mit jedem MCP Client
Claude Code: Vollständiger Skill mit automatisiertem Workflow. Discovery, 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
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 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.
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 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."
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."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
Läuft in 2 Minuten
Automatisierte Core Web Vitals Diagnose in deinem Terminal. Du benötigst einen CoreDash-Account mit fließenden Daten. Der kostenlose Tarif funktioniert.
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-superpowers
claude --chrome
Finde mein größtes CWV-Problem und behebe es. Hole deinen API-Schlüssel aus CoreDash → Project Settings → API Keys (MCP). Wird nur einmal angezeigt. Als SHA-256 Hash gespeichert. Read-only.
Cursor
/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 Agent Modus), Windsurf, Gemini CLI, Claude Desktop und jedem HTTP MCP Client. Ein MCP Web Performance Endpunkt, jeder Agent.
Häufig gestellte Fragen (FAQ)
Muss Chrome laufen, um CWV Superpowers zu nutzen?
Nein. Chrome Tracing ist optional. Ohne Chrome erhältst du eine vollständige Felddaten-Diagnose, Phasenaufschlüsselungen, Element-Attribution und Code-Fix-Vorschläge, die allein auf CoreDash Daten basieren. Chrome fügt Filmstrip-Screenshots, einen Netzwerk-Wasserfall und die visuelle Bestätigung der Grundursache hinzu. Beide Modi generieren Berichte.
Wie unterscheidet sich das vom Ausführen von Lighthouse in meinem KI-Agenten?
Lighthouse führt einen einzelnen synthetischen Ladevorgang auf deiner Maschine aus. CWV Superpowers nutzt 28 Tage echter Nutzerdaten von CoreDash: tatsächliche Geräte, tatsächliche Netzwerke, tatsächliche Interaktionen. Es misst INP aus echten Nutzer-Tipps (Lighthouse kann das nicht). Es vergleicht Segmente (Mobile vs. Desktop, Indien vs. USA). Und es nutzt proportionales Schließen, um die Flaschenhals-Phase zu finden, nicht nur absolute Scores.
Welche KI-Programmier-Agenten werden unterstützt?
Jeder KI-Programmier-Agent 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 Modus), Windsurf, Gemini CLI und Claude Desktop verbinden sich über den CoreDash HTTP MCP Endpunkt. Die Felddaten und die Attribution sind bei allen Clients identisch.
Ist CoreDash kostenlos?
CoreDash bietet einen kostenlosen Tarif (Free Tier), der mit CWV Superpowers funktioniert. Du benötigst fließende Daten von deiner Website (füge das CoreDash Script-Tag hinzu). Der Free Tier hat kein Sampling und keine Begrenzung der Seitenaufrufe. API-Schlüssel für den MCP-Zugriff sind in allen Tarifen verfügbar.
Kann ich das für Kunden-Websites nutzen?
Ja. Für jedes CoreDash-Projekt kannst du unbegrenzt dedizierte MCP API-Schlüssel erstellen. Füge CoreDash zu jeder Kunden-Website hinzu, generiere einen schreibgeschützten API-Schlüssel und konfiguriere deinen MCP Client. Der Agent sieht nur die Daten für dieses spezielle 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 sind alle auf GitHub verfügbar. Lies, wie es funktioniert. Forke es. Erweitere es. Trage dazu bei.
Starte deine kostenlose Testversion Auf GitHub ansehen