Ihr KI-Agent hat gerade Core Web Vitals Superkräfte bekommen
Verbinden Sie Claude Code mit Ihren CoreDash-Felddaten. Er findet Ihren schlimmsten Engpass über Millionen von Seitenaufrufen hinweg, verfolgt die wahre Ursache in Chrome und schreibt den Fix. Agentic Web Performance ist 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 Smartphones, lückenhaften Verbindungen und Kontinenten, die Ihre Entwicklermaschine noch nie gesehen hat.
Lighthouse ist nicht Ihr Ranking-Signal
Google rankt basierend auf CrUX-Felddaten von echten Chrome-Nutzern über 28 Tage hinweg. Ein perfekter Lighthouse-Score bei gleichzeitig durchfallendem Feld-Score kommt ständig vor. 52% der mobilen Websites bestehen mindestens einen Core Web Vitals-Wert im Feld nicht.
Blinde Agenten machen blinde Fixes
Ohne echte Nutzerdaten weiß ein KI-Agent nicht, welche Seite langsam ist, welches Element den Engpass darstellt oder ob sein Fix geholfen hat. Er optimiert eine Simulation und betrachtet die Arbeit als erledigt. Ihre tatsächlichen Nutzer sehen das anders.
Manuelle Untersuchung dauert Stunden
Die Daten segmentieren. Hypothesen aufstellen. Einen Trace durchführen. Bestätigen. Den Fix entwerfen. Ein Senior Performance Engineer verbringt 2 bis 4 Stunden pro Problem. Multiplizieren Sie das mit jeder langsamen Seite auf Ihrer Website.
INP kann im Labor überhaupt nicht simuliert werden Interaction to Next Paint misst, wie echte Nutzer mit Ihrer Seite interagieren. Kein synthetisches Tool kann echtes Nutzerverhalten nachbilden: wo sie tippen, wie schnell sie scrollen, welches Gerät sie halten. Lighthouse meldet INP nicht einmal. Wenn Ihr KI-Agent Lighthouse ausführt, ist er blind für Ihre 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 sagen, was langsam ist. Chrome sagt, 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 Obergrenzen.
Wenn CoreDash einen LCP von 4,2 Sekunden meldet, bei dem die Load Delay 52% der Gesamtzeit auf div.hero > img.main einnimmt, 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 Engpass-Phase, die CoreDash identifiziert hat.
Load Delay ist der Engpass? Der Agent untersucht den Network Waterfall auf Lücken bei der Ressourcenentdeckung. 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 wahren Ursachen erklären, die Ihre Felddaten aufgedeckt haben.
Proportionales Denken, keine absoluten Grenzwerte
Lighthouse sagt Ihnen "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 einnimmt.
INP ist 350ms. Input Delay 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). Presentation ist der Engpass, auch wenn 200ms isoliert betrachtet gut klingen. Diesen zu beheben, 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 Problem zu beheben.
Fünf Schritte: Von "etwas ist langsam" zum Code-Fix
Stellen Sie ihm eine Frage. Fünf Schritte später haben Sie einen Fix, der durch Beweise echter Nutzer gestützt ist.
1. Entdeckung
Scannt Ihre CoreDash-Daten nach den schlechtesten Seiten und Metriken. Priorisiert schlechte Bewertungen, Mobilgeräte, stark frequentierte Seiten und p75-Scores, die einen langen "Poor"-Ausläufer 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 prozentual.
3. Chrome Trace
Besucht die Seite mit mobiler Emulation. Führt einen Trace nur für die Engpass-Phase aus Schritt 2 durch. Erfasst Network Waterfall, Filmstrip und Beweise für blockierende Ressourcen.
4. Wahre Ursache
Kombiniert beide Beweisquellen zu einer einzigen Aussage: das Element, die Ursache, die CoreDash-Metriken und was Chrome bestätigt hat. Keine Mehrdeutigkeit.
5. Fix oder Bericht
Ihre Wahl. Wenden Sie den Code-Fix mit Datei, Zeile, Element und Vorher/Nachher an. Erstellen Sie einen in sich geschlossenen HTML-Bericht mit Diagrammen und Beweisen. Oder beides.
25+ Dimensionen: Jeder Blickwinkel, den Ihre 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 LadestatusCLS (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 Vitals-Wert
Nicht nur Scores. Jede Metrik, aufgeschlüsselt in Phasen unter Verwendung der Zuordnung von echten Nutzern (RUM) aus CoreDash.
LCP mit KI beheben: Diagnose des Largest Contentful Paint
4-Phasen-Aufschlüsselung: TTFB, Load Delay, Load Time, Render Delay. Identifiziert, welche Phase den größten Anteil der Gesamtzeit einnimmt.
Elementzuordnung: das genaue LCP-Element, sein Typ (Bild, Text, Hintergrundbild, Video) und der Prioritätsstatus (fetchpriority, Lazy Loading).
Typische Fixes: Preload-Hint hinzufügen, Lazy Loading vom Hero-Element entfernen, Bildformat optimieren, renderblockierendes Skript beheben.
INP mit KI beheben: Diagnose von Interaction to Next Paint
3-Phasen-Aufschlüsselung: Input Delay, Processing, Presentation. Die einzige Metrik, die Sie in einem Labor nicht simulieren können. Felddaten sind die einzige Quelle.
Skriptzuordnung: Long Animation Frames (LOAF) benennt die genaue JavaScript-Datei und Dauer. Plus den Ladestatus der Seite, als die Interaktion stattfand.
Typische Fixes: an den Hauptthread übergeben (yield), Evaluierung zurückstellen, Event-Handler aufteilen, content-visibility für große DOMs.
CLS: Cumulative Layout Shift
5 Ursachenmuster: Bilder ohne Dimensionen, Font Swaps, dynamisch eingefügte Inhalte, spät ladende Ressourcen, CSS-Animationen auf Layout-Eigenschaften.
Dimensionenübergreifend: vergleicht Mobile vs. Desktop, neue vs. wiederkehrende Besucher, schnelle vs. langsame Netzwerke, um die Ursache einzugrenzen.
Typische Fixes: Breite/Höhe hinzufügen, font-display: optional, min-height Reservierung, transform anstelle von top/left verwenden.
Wie eine Ursachenaussage aussieht
Nicht "erwägen Sie, Ihre Bilder zu optimieren." Dies ist die tatsächliche Ausgabe. Spezifisch genug, um sie zu überprüfen und zu mergen.
Wahre 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-Beweise:
LCP liegt bei 3.820ms (schlecht) auf Mobilgeräten, p75. Load Delay ist der Engpass mit 1.980ms (52% der Gesamtsumme). Prioritätsstatus: 3 (nicht vorgeladen/preloaded). Trend: verschlechtert sich um +340ms über 7 Tage.
Chrome-Beweise:
Network Waterfall zeigt eine Lücke von 1.940ms zwischen dem ersten HTML-Byte und der Bildanfrage. Bild wird nur in CSS referenziert, unsichtbar für den Preload-Scanner.
Fix:
Fügen Sie <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> in templates/product.html Zeile 12 ein. Setzen Sie fetchpriority="high" für das img-Element in Zeile 47.
Generischer KI-Ratschlag:
"Erwägen Sie, Ihrem LCP-Bild eine fetchpriority hinzuzufügen, und stellen Sie ein ordnungsgemäßes Preloading kritischer Ressourcen sicher."
CWV Superpowers:
Element: div.hero-banner > img.product-main
Datei: templates/product.html, Zeile 47
Beweise: 52% der LCP-Zeit in der Load Delay (CoreDash p75). 1.940ms Lücke bei der Ressourcenentdeckung (Chrome Waterfall).
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) | Einzelne Labor-Sitzung | Simulierter einzelner Aufruf |
| INP-Messung | ✓ Echte Interaktionen | ✗ Keine echten Nutzer | ✗ Nicht gemessen |
| Phasenaufschlüsselung | ✓ LCP-, INP-, CLS-Phasen | ~ Manuelle Analyse | ✗ Nur Score |
| Elementzuordnung | ✓ Genaues Element + Priorität | ~ Wenn man weiß, wo man suchen muss | ~ Generische Vorschläge |
| Proportionales Denken | ✓ Engpass in % | ✗ Absolute Werte | ✗ Absolute Werte |
| Segmentvergleich | ✓ Gerät, Land, Browser | ✗ Einzelne Konfiguration | ✗ Einzelne Konfiguration |
| Trend-Erkennung | ✓ 7-Tage-Delta | ✗ Zu einem bestimmten Zeitpunkt | ✗ Zu einem bestimmten Zeitpunkt |
| Chrome-Tracing | ✓ Gezielt nach Phase | ✓ Voller Zugriff | ✗ Kein Browser |
| Code-Fixes | ✓ Datei + Zeile + Diff | ~ Agentenabhängig | ~ Generische Ratschläge |
Hinweis: Chrome DevTools MCP ist ergänzend. CWV Superpowers verwendet es für gezieltes Tracing, nachdem Felddaten den Engpass identifiziert haben. Sie funktionieren am besten zusammen.
Berichte: In Slack ablegen, an Jira anhängen
In sich geschlossenes HTML. Keine Abhängigkeiten. Kein Build-Schritt. Eine Datei mit allem inline.
Vollständiger Bericht (mit Chrome)
Farbcodierte Metrik-Karten, Phasenaufschlüsselungsdiagramme, Filmstrip-Screenshots zu Schlüsselmomenten (First Paint, LCP, geladen), Network Waterfall SVG, Ursachenanalyse und der empfohlene Fix mit Vorher/Nachher-Code.
Nur-RUM-Bericht
Gleiche Metrik-Karten und Phasenaufschlüsselung, plus Elementzuordnung und Ursachenanalyse. Kein Filmstrip oder Waterfall, 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. Entdeckung, Diagnose, Chrome-Tracing, Code-Fixes und Berichte. Empfohlen.
Cursor: Plugin-Installation mit CoreDash MCP. Vollständige Diagnose und Code-Fixes direkt in Ihrem Editor.
VS Code, Windsurf, Gemini CLI: Jeder Client, der HTTP MCP-Server unterstützt, verbindet sich mit CoreDash. Gleiche Felddaten, gleiche Zuordnung.
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."
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."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
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.
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."
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 Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
In 2 Minuten einsatzbereit
Automatisierte Core Web Vitals Diagnose in Ihrem Terminal. Sie benötigen einen CoreDash-Account mit fließenden Daten. Die kostenlose Stufe (Free Tier) funktioniert.
Claude Code
# 1. CoreDash MCP-Server hinzufügen claude mcp add --transport http coredash \ https://app.coredash.app/api/mcp \ --header "Authorization: Bearer cdk_YOUR_API_KEY" # 2. CWV Superpowers installieren /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpower # 3. Mit Chrome starten (optional, empfohlen) claude --chrome # 4. Los geht's Finde mein größtes CWV-Problem und behebe es.
Holen Sie sich Ihren API-Schlüssel von CoreDash → Project Settings → API Keys (MCP). Wird einmal angezeigt. Als SHA-256-Hash gespeichert. Schreibgeschützt (Read-only).
Cursor
# Plugin installieren
/plugin-add cwv-superpowers
Fügen Sie 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
Endpoint: 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-Endpunkt für Web Performance, jeder Agent.
Häufig gestellte Fragen
Muss Chrome laufen, um CWV Superpowers zu verwenden?
Nein. Chrome-Tracing ist optional. Ohne Chrome erhalten Sie die vollständige Diagnose der Felddaten, Phasenaufschlüsselungen, Elementzuordnungen und Vorschläge für Code-Fixes, die allein auf CoreDash-Daten basieren. Chrome fügt Filmstrip-Screenshots, den Network Waterfall und die visuelle Bestätigung der Ursache hinzu. Beide Modi generieren Berichte.
Wie unterscheidet sich das von der Ausführung von Lighthouse in meinem KI-Agenten?
Lighthouse führt einen einzelnen synthetischen Ladevorgang auf Ihrer Maschine durch. CWV Superpowers nutzt 28 Tage an echten Nutzerdaten von CoreDash: echte Geräte, echte Netzwerke, echte Interaktionen. Es misst INP aus echten Nutzertipps (Lighthouse kann das nicht). Es vergleicht Segmente (Mobile vs. Desktop, Indien vs. USA). Und es verwendet proportionales Denken, um die Engpass-Phase zu finden, nicht nur absolute Scores.
Welche KI-Programmieragenten werden unterstützt?
Jeder KI-Programmieragent 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 CoreDash HTTP MCP-Endpunkt. Die Felddaten und Zuordnungen sind über alle Clients hinweg identisch.
Ist CoreDash kostenlos?
CoreDash bietet eine kostenlose Stufe (Free Tier) an, die mit CWV Superpowers funktioniert. Es müssen Daten von Ihrer Website fließen (fügen Sie das CoreDash-Skript-Tag hinzu). Das Free Tier hat kein Sampling und keine Obergrenzen für Seitenaufrufe. API-Schlüssel für den MCP-Zugriff sind in allen Plänen verfügbar.
Kann ich das für Kunden-Websites verwenden?
Ja. Für jedes CoreDash-Projekt können Sie unbegrenzt dedizierte MVP-API-Schlüssel erstellen. Fügen Sie CoreDash zu jeder Kunden-Website hinzu, generieren Sie einen schreibgeschützten API-Schlüssel und konfigurieren Sie Ihren MCP-Client. Der Agent sieht nur die Daten für das jeweilige 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 Sie inspizieren und erweitern können. Der Orchestrator, die Diagnosemodule, die Chrome-Tracing-Logik und die Berichtsvorlagen befinden sich alle auf GitHub. Lesen Sie, wie es funktioniert. Forken Sie es. Erweitern Sie es. Tragen Sie dazu bei.
Starten Sie Ihre kostenlose Testversion Auf GitHub ansehen