CWV Superpowers: Geautomatiseerde Core Web Vitals Diagnose

CWV Superpowers is een gratis, open-source Claude Code skill die verbindt met je CoreDash field data en Chrome browser tools om Core Web Vitals problemen te diagnosticeren. Het identificeert je ergste bottleneck over echte gebruikersdata, traceert de hoofdoorzaak 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:

/* Install the MarketPlace and the CWV SuperPower Skill */
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower

/* now start the Core Web Vitals AI superpower*/
/cwv-superpower

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

Wat de CWV SuperPower Skill doet

CWV Superpowers combineert twee databronnen die samen zowel beantwoorden 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 paginaweergave en kent elke metriek toe aan het exacte element dat het probleem veroorzaakt. Wanneer het zegt dat je LCP 4,2 seconden is en het bottleneck element div.hero > img.main is, 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 netwerk waterfall op en traceert exact de fases die door de RUM data zijn geïdentificeerd. Niet alles, alleen het deel dat bewezen heeft je pagina's traag te maken!

Dat is de truc! RUM data vertelt je wat er traag is, maar niet waarom. Een Chrome trace geeft je het waarom, maar zonder field data onderzoek je de verkeerde pagina of de verkeerde metriek. CWV Superpowers combineert beide.

Het diagnosticeert alle drie de Core Web Vitals: LCP (onderverdeling in vier fases), INP (onderverdeling in drie fases met script attributie), en CLS (patroonherkenning van bekende oorzaken). Voor de volledige metriek-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 naar gekeken moet worden ("LCP op mijn productpagina's") of vraagt om het probleem te vinden ("Wat moet ik als eerste fixen?"). Als je iets specifieks noemt, verduidelijkt het de scope. Als je ontdekking wilt, gaat het door naar Stap 2.

Stap 2: Ontdekking. 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 element type, de prioriteit status, de onderverdeling in vier fases (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 drempelwaarde overschrijdt. Voor INP haalt het het trage interactie element, de LOAF scripts en de onderverdeling in drie fases 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 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 benoemt het bestand, de regel, het element en toont voor en na.

Hoe de output eruitziet

De skill genereert een verklaring van de hoofdoorzaak die field data, Chrome bewijs en de specifieke fix met elkaar verbindt:

Hoofdoorzaak: De LCP afbeelding 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 afbeeldingsverzoek in de netwerk 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 metriek kaarten met kleurgecodeerde beoordelingen, fase onderverdeling grafieken en, wanneer Chrome is gebruikt, filmstrip screenshots en een netwerk waterfall SVG. Beide rapporttypes zijn op zichzelf staande HTML bestanden die je in een Slack thread kunt plaatsen of aan een ticket kunt toevoegen.

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

Aan de slag

Je hebt een CoreDash account nodig waar echte gebruikersdata binnenstroomt. De gratis tier werkt. Haal een API key uit Project Settings > API Keys (MCP). De key wordt één keer getoond en opgeslagen als een SHA-256 hash. Alleen-lezen toegang.

Claude Code (aanbevolen)

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

# Add the skill from the marketplace
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower

# Start with Chrome for full analysis
claude --chrome

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

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 IDEs. 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 field data belangrijk is 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.