CWV Superpowers: Geautomatiseerde Core Web Vitals Diagnose

CWV Superpowers is een gratis, open-source Claude Code skill die verbindt met je CoreDash velddata en Chrome browser tools om Core Web Vitals problemen te diagnosticeren. Het identificeert je ergste bottleneck in echte gebruikersdata, traceert de onderliggende oorzaak en genereert de code fix. Geen lijst met Lighthouse suggesties. Het element, het bestand, de regel code.

Laatst beoordeeld door Arjen Karel in maart 2026

Snelstart:

De code staat op GitHub. Installeer het in Claude Code met twee commando's:

/* Installeer de MarketPlace en de CWV SuperPower Skill */
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers

/* start nu de Core Web Vitals AI superpower*/
Waarom is mijn site traag?

Voeg vervolgens CoreDash toe als een MCP server en voer claude --chrome uit. Dat is alles.

Wat de CWV SuperPower Skill doet

CWV Superpowers combineert twee databronnen die samen antwoord geven op zowel wat er traag is als waarom.

CoreDash Real User Monitoring vertelt je wat er daadwerkelijk traag is. Echte gebruikers, echte apparaten, echte netwerken. CoreDash trackt elke page load en wijst elke metric toe aan het exacte element dat het probleem veroorzaakt. Wanneer het zegt dat je LCP 4.2 seconden is en het bottleneck element is div.hero > img.main, dan is dat wat je daadwerkelijke gebruikers ervaren.

Chrome browser tracing vertelt je waarom. De skill bezoekt de pagina met mobiele emulatie (4g, 4x CPU throttling), neemt de network waterfall op, en traceert de exacte fases die RUM data heeft geïdentificeerd. Niet alles, alleen het deel waarvan bewezen is dat het je pagina's traag maakt!

Dat is de truc! RUM data vertelt je wat traag is maar niet waarom. Een Chrome trace geeft je het waarom, maar zonder velddata ben je de verkeerde pagina of de verkeerde metric aan het onderzoeken. CWV Superpowers combineert beide.

Het diagnosticeert alle drie de Core Web Vitals: LCP (vier-fase breakdown), INP (drie-fase breakdown met scriptattributie), en CLS (patroonherkenning voor bekende oorzaken). Voor de volledige metric-specifieke workflows, zie de LCP diagnose gids en INP diagnose gids.

De 5-stappen workflow

Elk onderzoek volgt vijf stappen.

Stap 1: Intentie. Je vertelt waar het naar moet kijken ("LCP op mijn productpagina's") of vraagt het om het probleem te vinden ("Wat moet ik als eerste oplossen?"). Als je iets specifieks noemt, verduidelijkt het de scope. Als je discovery wilt, gaat het naar Stap 2.

Stap 2: Discovery. De skill scant je site via CoreDash. Het haalt de algehele gezondheid, mobiele gezondheid, de slechtste URL's op basis van LCP, en de slechtste op basis van INP op. Vervolgens kiest het het grootste probleem: poor beoordelingen boven needs improvement, mobiel boven desktop, hoger verkeersvolume. Een pagina met een p75 LCP van 2.4 seconden die "slaagt" maar 18% van de gebruikers in het poor gebied heeft, is nog steeds een probleem. CWV Superpowers vangt dat op.

Stap 3: Diagnose. Voor LCP maakt het 5 tot 7 CoreDash API calls: het LCP element, het elementtype, de priority status, de vier-fase breakdown (TTFB, Load Delay, Load Time, Render Delay), en de 7-daagse trend. Het identificeert de bottleneck met behulp van proportioneel redeneren: de fase die het grootste aandeel van de totale tijd in beslag neemt, niet de fase die een absolute drempel overschrijdt. Voor INP haalt het het trage interactie element, de LOAF scripts, en de drie-fase breakdown op. Voor CLS zoekt het naar overeenkomsten met vijf bekende oorzaakpatronen.

Stap 4: Chrome trace. Als Chrome beschikbaar is, bezoekt de skill de pagina en traceert het alleen de bottleneck fase uit Stap 3. Een gerichte trace genereert bewijs. Een volledige trace van alles genereert ruis.

Stap 5: Output. Pas de code fix toe, genereer een HTML rapport, of beide. De fix noemt het bestand, de regel, het element, en toont de voor en na.

Hoe de output eruitziet

De skill genereert een root cause statement dat velddata, Chrome bewijs, en de specifieke fix met elkaar verbindt:

Root cause: De LCP image div.hero-banner > img.product-main op /product/running-shoes-42 wordt 1.980ms te laat ontdekt omdat het een preload hint mist en geen fetchpriority="high" heeft. CoreDash data: LCP is 3.820ms (poor) op mobiel, p75. Load Delay is de bottleneck met 52% van het totaal. Chrome trace bevestigt: 1.940ms gat tussen HTML first byte en image request in de network waterfall.

De fix volgt direct: voeg een preload hint toe, stel fetchpriority="high" in. Specifiek voor het element, het bestand en de oorzaak. Geen generiek advies.

Volledige rapporten bevatten metrics cards met kleurgecodeerde beoordelingen, grafieken met fase breakdowns, en wanneer Chrome is gebruikt, filmstrip screenshots en een network waterfall SVG. Beide typen rapporten zijn zelfstandige HTML bestanden die je in een Slack thread kunt droppen of aan een ticket kunt toevoegen.

Tip: Chrome is optioneel. Zonder krijg je nog steeds volledige RUM diagnose, bottleneck identificatie en code fixes. Je verliest de filmstrip en waterfall visuals, maar de diagnosekwaliteit is hetzelfde omdat echte gebruikersdata de primaire bron van waarheid is.

Aan de slag

Je hebt een CoreDash account nodig met echte gebruikersdata die binnenstroomt. De gratis tier werkt. Haal een API key op via Project Settings > API Keys (MCP). De key wordt één keer getoond en opgeslagen als een SHA-256 hash. Read-only toegang.

Claude Code (aanbevolen)

# Voeg CoreDash MCP server toe
claude mcp add --transport http coredash https://app.coredash.app/api/mcp \
  --header "Authorization: Bearer cdk_YOUR_API_KEY"

# Voeg de skill toe vanuit de marketplace
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower

# Start met Chrome voor volledige analyse
claude --chrome

Typ /mcp om te verifiëren of CoreDash verbonden is. Vraag vervolgens: "Wat zijn mijn Core Web Vitals?" Als het je echte LCP, INP en CLS data retourneert, ben je klaar.

Cursor

Voeg CoreDash toe aan .cursor/mcp.json:

{
  "mcpServers": {
    "coredash": {
      "url": "https://app.coredash.app/api/mcp",
      "headers": {
        "Authorization": "Bearer cdk_YOUR_API_KEY"
      }
    }
  }
}

Andere MCP clients

De CoreDash MCP server werkt met elke client die HTTP MCP ondersteunt: VS Code (Copilot agent modus), Windsurf, Gemini CLI, Cline en JetBrains IDE's. Het eindpunt is https://app.coredash.app/api/mcp met een Bearer token header. Zie de setup gids op GitHub voor per-client configuratie.

Voor achtergrondinformatie over waarom velddata ertoe doet voor AI agent Core Web Vitals werk en waarom Lighthouse-only agents fixes produceren die in een derde van de gevallen worden afgewezen, lees het overzichtsartikel.