CWV Superpowers: Automatische Core Web Vitals-Diagnose

CWV Superpowers ist ein kostenloser Open-Source-Skill für Claude Code, der sich mit deinen CoreDash-field data und Chrome-Browser-Tools verbindet, um Core Web Vitals-Probleme zu diagnostizieren. Er identifiziert deinen schlimmsten Engpass anhand echter Nutzerdaten, findet die Ursache und generiert den Code-Fix. Keine Liste mit Lighthouse-Vorschlägen. Das Element, die Datei, die Codezeile.

Zuletzt geprüft von Arjen Karel im März 2026

Schnellstart:

Der Code ist auf GitHub. Installiere ihn in Claude Code mit zwei Befehlen:

/* Installiere den Marketplace und den CWV Superpowers-Skill */
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers

/* Starte jetzt die Core Web Vitals-AI-Superpower */
Warum ist meine Seite langsam?

Füge dann CoreDash als MCP-Server hinzu und führe claude --chrome aus. Das ist alles.

Was der CWV Superpowers-Skill tut

CWV Superpowers kombiniert zwei Datenquellen, die zusammen beantworten, was langsam ist und warum.

CoreDash-Real User Monitoring sagt dir, was tatsächlich langsam ist. Echte Nutzer, echte Geräte, echte Netzwerke. CoreDash erfasst jeden Ladevorgang und ordnet jede Metrik genau dem Element zu, das das Problem verursacht. Wenn dein LCP 4,2 Sekunden beträgt und das Engpass-Element div.hero > img.main ist, erleben deine echten Nutzer genau das.

Chrome-Browser-Tracing sagt dir, warum. Der Skill besucht die Seite mit einer mobilen Emulation (4G, 4-fache CPU-Drosselung), zeichnet den Netzwerk-Wasserfall auf und verfolgt die genauen Phasen, die durch die RUM-Daten identifiziert wurden. Nicht alles, sondern nur den Teil, der deine Seiten nachweislich langsam macht!

Das ist der Trick! RUM-Daten sagen dir, was langsam ist, aber nicht warum. Ein Chrome-Trace liefert das Warum, aber ohne field data analysierst du die falsche Seite oder die falsche Metrik. CWV Superpowers kombiniert beides.

Er diagnostiziert alle drei Core Web Vitals: LCP (Vier-Phasen-Aufschlüsselung), INP (Drei-Phasen-Aufschlüsselung mit Skript-Zuordnung) und CLS (Musterabgleich mit bekannten Ursachen). Die vollständigen metrikspezifischen Workflows findest du im LCP-Diagnose-Guide und INP-Diagnose-Guide.

Der 5-Schritte-Workflow

Jede Analyse folgt fünf Schritten.

Schritt 1: Intent. Du sagst ihm, worauf er achten soll („LCP auf meinen Produktseiten“) oder bittest ihn, das Problem zu finden („Was soll ich zuerst beheben?“). Wenn du etwas Konkretes nennst, klärt er den Umfang. Wenn du die Erkennung wünschst, geht er zu Schritt 2 über.

Schritt 2: Erkennung. Der Skill scannt deine Seite über CoreDash. Er ruft den allgemeinen Zustand, den Zustand auf Mobilgeräten sowie die schlechtesten URLs nach LCP und INP ab. Dann wählt er das größte Problem aus: Bewertungen im Bereich „Schlecht“ vor „Optimierungsbedürftig“, Mobilgeräte vor Desktop, höheres Traffic-Volumen. Eine Seite mit einem p75-LCP von 2,4 Sekunden, die den Test „besteht“, bei der aber 18 % der Nutzer im Bereich „Schlecht“ liegen, ist immer noch ein Problem. CWV Superpowers erkennt das.

Schritt 3: Diagnose. Für LCP führt er 5 bis 7 CoreDash-API-Aufrufe durch: das LCP-Element, den Elementtyp, den Prioritätsstatus, die Vier-Phasen-Aufschlüsselung (TTFB, Ladeverzögerung, Ladezeit, Renderverzögerung) und den 7-Tage-Trend. Er identifiziert den Engpass mittels proportionaler Argumentation: die Phase, die den größten Anteil der Gesamtzeit verbraucht, und nicht die Phase, die einen absoluten Schwellenwert überschreitet. Für INP ruft er das langsame Interaktionselement, die LOAF-Skripte und die Drei-Phasen-Aufschlüsselung ab. Für CLS gleicht er die Daten mit fünf bekannten Ursachenmustern ab.

Schritt 4: Chrome-Trace. Wenn Chrome verfügbar ist, besucht der Skill die Seite und verfolgt nur die Engpass-Phase aus Schritt 3. Ein gezielter Trace liefert Belege. Ein vollständiger Trace von allem erzeugt Rauschen.

Schritt 5: Ausgabe. Wende den Code-Fix an, generiere einen HTML-Bericht oder beides. Der Fix nennt die Datei, die Zeile, das Element und zeigt Vorher und Nachher.

Wie die Ausgabe aussieht

Der Skill generiert eine Ursachenbeschreibung, die field data, Chrome-Belege und den konkreten Fix verknüpft:

Ursache: 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-Hinweis fehlt und kein fetchpriority="high" gesetzt ist. CoreDash-Daten: Der LCP beträgt mobil 3.820 ms (schlecht), p75. Die Ladeverzögerung ist mit 52 % der Gesamtzeit der Engpass. Der Chrome-Trace bestätigt: Eine Lücke von 1.940 ms zwischen dem ersten HTML-Byte und der Bildanforderung im Netzwerk-Wasserfall.

Der Fix folgt direkt: Füge einen Preload-Hinweis hinzu und setze fetchpriority="high". Spezifisch für das Element, die Datei und die Ursache. Keine pauschalen Ratschläge.

Vollständige Berichte enthalten Metrik-Karten mit farbcodierten Bewertungen, Diagramme zur Phasenaufschlüsselung und – falls Chrome verwendet wurde – Filmstreifen-Screenshots sowie ein SVG des Netzwerk-Wasserfalls. Beide Berichtstypen sind eigenständige HTML-Dateien, die du in einen Slack-Thread ziehen oder an ein Ticket anhängen kannst.

Tipp: Chrome is optional. Auch ohne Chrome erhältst du eine vollständige RUM-Diagnose, Engpass-Identifikation und Code-Fixes. Dir gehen zwar die visuellen Filmstreifen und Wasserfalldiagramme verloren, aber die Diagnosequalität bleibt gleich, da echte Nutzerdaten die primäre Quelle der Wahrheit sind.

Erste Schritte

Du benötigst ein CoreDash-Konto, in das echte Nutzerdaten einfließen. Der kostenlose Tarif reicht aus. Für die interaktive Nutzung benötigst du überhaupt keinen API-Key, da sich Claude Code über den Browser anmeldet. Wenn du dennoch einen Key haben möchtest (für Headless- oder CI-Ausführungen), hole dir einen unter Project Settings > API Keys (MCP). Keys werden nur einmal angezeigt, als SHA-256-Hash gespeichert und sind schreibgeschützt.

Claude Code (empfohlen)

# CoreDash-MCP-Server hinzufügen (Browser-Login, kein API-Key)
claude mcp add --transport http coredash https://app.coredash.app/api/mcp

# Skill aus dem Marketplace hinzufügen
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower

# Mit Chrome für eine vollständige Analyse starten
claude --chrome

Führe bei der ersten Verbindung /mcp aus, wähle coredash und wähle Authenticate. Dein Browser öffnet die Anmelde- und Zustimmungsseite von CoreDash. Logge dich ein, wähle ein Projekt und stimme zu. Claude Code speichert ein kurzlebiges OAuth-Token, das sich selbst aktualisiert (1 Stunde Zugriff, 30 Tage Refresh) und jederzeit widerrufbar bleibt. Frage dann: „What are my Core Web Vitals?“ Wenn der Skill deine echten LCP-, INP- und CLS-Daten zurückgibt, bist du bereit.

Bevorzugst du einen API-Key oder läuft der Prozess headless ohne Browser? Übergib stattdessen den Bearer-Header:

claude mcp add --transport http coredash https://app.coredash.app/api/mcp \
  --header "Authorization: Bearer cdk_YOUR_API_KEY"

Cursor

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

Der CoreDash-MCP-Server funktioniert mit jedem Client, der HTTP-MCP unterstützt: VS Code (Copilot-Agent-Modus), Windsurf, Gemini CLI, Cline und JetBrains-IDEs. Der Endpunkt lautet https://app.coredash.app/api/mcp mit einem Bearer-Token-Header. Siehe die Einrichtungsanleitung auf GitHub für die Konfiguration der einzelnen Clients.

Hintergründe dazu, warum field data für die Core Web Vitals-Arbeit von AI-Agenten wichtig sind und warum reine Lighthouse-Agenten Fixes vorschlagen, die in einem Drittel der Fälle abgelehnt werden, findest du im Übersichtsartikel.