Jouw AI-agent heeft zojuist Core Web Vitals Superkrachten gekregen
Verbind Claude Code met je CoreDash veldgegevens. Het vindt je grootste bottleneck over miljoenen page loads, traceert de bronoorzaak in Chrome, en schrijft de fix. Agentic web performance — geen rapport, maar de daadwerkelijke regel code die moet veranderen.
Installeren in 2 minuten Start Gratis CoreDash Proefperiode »Trusted by market leaders · Client results
AI Performance Tools hebben een Dataprobleem
De meeste AI-agents optimaliseren voor Lighthouse. Een synthetische score op een gesimuleerd apparaat dat Google niet gebruikt voor rankings. Een bruikbare web performance AI-agent begint met dezelfde data als Google: echte gebruikers op budgettelefoons, slechte verbindingen, en continenten die jouw ontwikkelmachine nog nooit heeft gezien.
Lighthouse is niet jouw Ranking Signaal
Google rangschikt op basis van CrUX veldgegevens van echte Chrome-gebruikers over een periode van 28 dagen. Een perfecte Lighthouse score en een falende veldscore komen de hele tijd voor. 52% van de mobiele sites faalt op minstens één Core Web Vital in het veld.
Blinde Agents Maken Blinde Fixes
Zonder echte gebruikersdata weet een AI-agent niet welke pagina traag is, welk element de bottleneck is, of of de fix heeft geholpen. Het optimaliseert een simulatie en vindt het wel best. Jouw daadwerkelijke gebruikers zijn het daar niet mee eens.
Handmatig Onderzoek Kost Uren
Segmenteer de data. Formuleer een hypothese. Voer een trace uit. Bevestig. Schrijf de fix. Een senior performance engineer besteedt 2 tot 4 uur per probleem. Vermenigvuldig dat met elke trage pagina op je site.
INP kan helemaal niet in een lab worden gesimuleerd Interaction to Next Paint meet hoe echte gebruikers met je pagina interacteren. Geen enkele synthetische tool kan echt gebruikersgedrag nabootsen: waar ze tikken, hoe snel ze scrollen, welk apparaat ze vasthouden. Lighthouse rapporteert INP niet eens. Als je AI-agent Lighthouse draait, is het blind voor je ergste interactiviteitsproblemen. Veldgegevens zijn de enige bron.
Twee bronnen van waarheid: Veldgegevens ontmoeten browserbewijs
CWV Superpowers combineert echte gebruikersdata van CoreDash met gerichte Chrome traces. De veldgegevens vertellen wat er traag is. Chrome vertelt waarom.
CoreDash vertelt de agent wat er traag is
CoreDash volgt elke page load van elke echte gebruiker. Elke metriek, toegeschreven aan het exacte element dat het probleem veroorzaakt. Geen sampling, geen limieten.
Wanneer CoreDash een LCP van 4,2 seconden rapporteert waarbij Load Delay 52% van de totale tijd in beslag neemt op div.hero > img.main, weet de agent precies waar hij moet kijken. Geen gok. Een meting op basis van miljoenen echte sessies.
De skill vraagt 25+ CoreDash dimensies op: LCP element, elementtype, prioriteitsstatus, fase-uitsplitsing, INP interactiedoel, LOAF scripts, CLS verschuivend element, apparaattype, bezoekerstype, netwerksnelheid, 7-daagse trends.
Chrome vertelt de agent waarom het traag is
CWV Superpowers bezoekt de pagina met mobiele emulatie: Fast 3G, 4x CPU throttling. Het traceert alleen de bottleneck-fase die CoreDash heeft geïdentificeerd.
Is Load Delay de bottleneck? De agent onderzoekt de network waterfall op discovery gaps. Render Delay? Het zoekt naar blokkerende scripts en vertragingen bij het laden van lettertypen.
Het resultaat: filmstrip screenshots, network waterfall en gericht bewijs dat de bronoorzaak verklaart die door je veldgegevens werd blootgelegd.
Proportioneel redeneren, geen absolute drempels
Lighthouse vertelt je "Render Delay is 350ms." Is dat het probleem? Geen idee. CWV Superpowers identificeert de bottleneck als de fase die het grootste percentage van de totale tijd in beslag neemt.
INP is 350ms. Input Delay 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). Presentation is de bottleneck, ook al klinkt 200ms geïsoleerd gezien prima. Het oplossen hiervan maakt daadwerkelijk een verschil. Het optimaliseren van Input Delay is nauwelijks merkbaar.
Dit voorkomt de meest gemaakte fout in performance-optimalisatie: het verkeerde probleem oplossen.
Vijf stappen: Van "iets is traag" naar code fix
Stel het een vraag. Vijf stappen later heb je een fix die wordt ondersteund door echt gebruikersbewijs.
1. Ontdekking
Scant je CoreDash data op de slechtste pagina's en metrieken. Geeft prioriteit aan slechte beoordelingen, mobiel, pagina's met veel verkeer, en p75 scores die een lange staart van slechte prestaties verbergen.
2. Diagnose
Breekt de metriek op in fases. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Benoemt de bottleneck in procenten.
3. Chrome Trace
Bezoekt de pagina met mobiele emulatie. Traceert alleen de bottleneck-fase uit stap 2. Legt network waterfall, filmstrip en bewijs van blokkerende resources vast.
4. Bronoorzaak
Combineert beide bewijsbronnen in één verklaring: het element, de oorzaak, de CoreDash metrieken en wat Chrome bevestigde. Geen ambiguïteit.
5. Fix of Rapport
Aan jou de keuze. Pas de code fix toe met bestand, regel, element, voor/na. Genereer een op zichzelf staand HTML-rapport met grafieken en bewijsmateriaal. Of allebei.
25+ dimensies: Elke invalshoek die je veldgegevens dekken
Dit zijn de daadwerkelijke CoreDash dimensies die de agent opvraagt. Geen samenvatting. Het volledige plaatje.
LCP (Largest Contentful Paint)
LCP element Elementtype Prioriteitsstatus TTFB fase Load Delay Load Time Render DelayINP (Interaction to Next Paint)
INP doel Input Delay Processing Presentation LOAF scripts LaadstatusCLS (Cumulative Layout Shift)
Verschuivend element Verschuivingsoorzaak VerschuivingstimingSegmenten
Apparaattype Land Browser OS Verbinding Bezoekerstype PaginapadTrends
7-daagse delta 28-daagse baseline RegressiedetectieDiagnose: Fase-niveau uitsplitsing voor elke Core Web Vital
Niet alleen scores. Elke metriek opgesplitst in fases met behulp van echte gebruikerstoeschrijving van CoreDash.
LCP oplossen met AI: Largest Contentful Paint diagnose
4-fase uitsplitsing: TTFB, Load Delay, Load Time, Render Delay. Identificeert welke fase het grootste deel van de totale tijd in beslag neemt.
Elementtoeschrijving: het exacte LCP element, het type (afbeelding, tekst, achtergrondafbeelding, video), en prioriteitsstatus (fetchpriority, lazy loading).
Typische fixes: preload hint toevoegen, lazy loading verwijderen van hero, afbeeldingsformaat optimaliseren, render-blocking script oplossen.
INP oplossen met AI: Interaction to Next Paint diagnose
3-fase uitsplitsing: Input Delay, Processing, Presentation. De enige metriek die je niet in een lab kunt simuleren. Veldgegevens zijn de enige bron.
Scripttoeschrijving: Long Animation Frames (LOAF) benoemt het exacte JavaScript bestand en de duur. Plus de laadstatus van de pagina op het moment dat de interactie plaatsvond.
Typische fixes: yield naar de main thread, uitgestelde evaluatie, event handlers opsplitsen, content-visibility voor grote DOM's.
CLS: Cumulative Layout Shift
5 oorzaakpatronen: afbeeldingen zonder dimensies, font swaps, dynamisch geïnjecteerde content, laat ladende resources, CSS animaties op layout-eigenschappen.
Cross-dimensioneel: vergelijkt mobiel vs desktop, nieuwe vs terugkerende bezoekers, snelle vs trage netwerken om de oorzaak te verfijnen.
Typische fixes: width/height toevoegen, font-display: optional, min-height reservering, transform gebruiken in plaats van top/left.
Hoe een Bronoorzaak Verklaring eruitziet
Geen "overweeg je afbeeldingen te optimaliseren." Dit is de daadwerkelijke output. Specifiek genoeg om te beoordelen en te mergen.
Bronoorzaak:
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 bewijs:
LCP is 3.820ms (slecht) op mobiel, p75. Load Delay is de bottleneck met 1.980ms (52% van totaal). Prioriteitsstatus: 3 (niet gepreload). Trend: verslechtert +340ms over 7 dagen.
Chrome bewijs:
Network waterfall toont een gat van 1.940ms tussen de eerste byte van de HTML en de image request. Afbeelding wordt alleen in CSS gerefereerd, onzichtbaar voor de preload scanner.
Fix:
Voeg <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> toe aan templates/product.html regel 12. Stel fetchpriority="high" in op het img element op regel 47.
Generiek AI-advies:
"Overweeg fetchpriority toe te voegen aan je LCP afbeelding en zorg voor de juiste preloading van kritieke resources."
CWV Superpowers:
Element: div.hero-banner > img.product-main
Bestand: templates/product.html, regel 47
Bewijs: 52% van LCP tijd in Load Delay (CoreDash p75). 1.940ms discovery gap (Chrome waterfall).
Fix: 2 regels code wijziging met voor/na diff.
Vergelijk: Hoe CWV Superpowers presteert
Verschillende tools lossen verschillende problemen op. Dit is wat elk daadwerkelijk doet.
| Mogelijkheid | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Databron | Echte gebruikers (28 dagen veldgegevens) | Enkele labsessie | Gesimuleerde enkele load |
| INP meting | ✓ Echte interacties | ✗ Geen echte gebruikers | ✗ Niet gemeten |
| Fase uitsplitsing | ✓ LCP, INP, CLS fases | ~ Handmatige analyse | ✗ Alleen score |
| Elementtoeschrijving | ✓ Exact element + prioriteit | ~ Als je weet waar je moet kijken | ~ Generieke suggesties |
| Proportioneel redeneren | ✓ Bottleneck in % | ✗ Absolute waarden | ✗ Absolute waarden |
| Segmentvergelijking | ✓ Apparaat, land, browser | ✗ Enkele configuratie | ✗ Enkele configuratie |
| Trenddetectie | ✓ 7-daagse delta | ✗ Point-in-time | ✗ Point-in-time |
| Chrome tracing | ✓ Gericht per fase | ✓ Volledige toegang | ✗ Geen browser |
| Code fixes | ✓ Bestand + regel + diff | ~ Afhankelijk van agent | ~ Generiek advies |
Let op: Chrome DevTools MCP is complementair. CWV Superpowers gebruikt het voor gerichte tracing nadat veldgegevens de bottleneck hebben geïdentificeerd. Ze werken het beste samen.
Rapporten: Deel ze in Slack, voeg toe aan Jira
Op zichzelf staande HTML. Geen afhankelijkheden. Geen build stap. Eén bestand met alles inline.
Volledig Rapport (met Chrome)
Kleurgecodeerde metrics kaarten, fase-uitsplitsing grafieken, filmstrip screenshots op belangrijke momenten (first paint, LCP, loaded), network waterfall SVG, bronoorzaakanalyse en de aanbevolen fix met voor/na code.
RUM-Only Rapport
Dezelfde metrics kaarten en fase-uitsplitsing, plus elementtoeschrijving en bronoorzaakanalyse. Geen filmstrip of waterfall, maar de diagnosekwaliteit is identiek omdat veldgegevens de bron van waarheid zijn.
Werkt met elke MCP client
Claude Code: Volledige skill met geautomatiseerde workflow. Ontdekking, diagnose, Chrome tracing, code fixes en rapporten. Aanbevolen.
Cursor: Plugin installatie met CoreDash MCP. Volledige diagnose en code fixes binnenin je editor.
VS Code, Windsurf, Gemini CLI: Elke client die HTTP MCP servers ondersteunt kan verbinden met CoreDash. Dezelfde veldgegevens, dezelfde toeschrijving.
Client Success
Don't just take my word for it
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
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."
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."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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."
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."
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
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.
Draaiend in 2 minuten
Geautomatiseerde Core Web Vitals diagnose in je terminal. Je hebt een CoreDash account nodig waar data binnenstroomt. De gratis versie werkt.
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-superpower
claude --chrome
Vind mijn grootste CWV probleem en los het op. Haal je API key uit CoreDash → Project Settings → API Keys (MCP). Wordt eenmalig getoond. Opgeslagen als SHA-256 hash. Read-only.
Cursor
/plugin-add cwv-superpowers
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
Endpoint: https://app.coredash.app/api/mcp
Header: Authorization: Bearer cdk_YOUR_API_KEY
Werkt met VS Code (Copilot agent mode), Windsurf, Gemini CLI, Claude Desktop en elke HTTP MCP client. Eén MCP web performance endpoint, elke agent.
Veelgestelde Vragen
Heb ik Chrome nodig om CWV Superpowers te gebruiken?
Nee. Chrome tracing is optioneel. Zonder dit krijg je de volledige veldgegevens diagnose, fase-uitsplitsingen, elementtoeschrijving en code fix suggesties puur op basis van CoreDash data. Chrome voegt filmstrip screenshots, network waterfall en visuele bevestiging van de bronoorzaak toe. Beide modi genereren rapporten.
Hoe verschilt dit van het draaien van Lighthouse in mijn AI-agent?
Lighthouse voert een enkele synthetische load uit op jouw machine. CWV Superpowers gebruikt 28 dagen aan echte gebruikersdata van CoreDash: daadwerkelijke apparaten, daadwerkelijke netwerken, daadwerkelijke interacties. Het meet INP op basis van echte gebruikerstaps (Lighthouse kan dit niet). Het vergelijkt segmenten (mobiel vs desktop, India vs VS). En het gebruikt proportioneel redeneren om de bottleneck-fase te vinden, niet alleen absolute scores.
Welke AI coding agents worden ondersteund?
Elke AI coding agent voor web performance die MCP (Model Context Protocol) servers ondersteunt. Claude Code heeft een speciale skill met een geautomatiseerde 5-stappen workflow. Cursor, VS Code (Copilot agent mode), Windsurf, Gemini CLI en Claude Desktop verbinden via het CoreDash HTTP MCP endpoint. De veldgegevens en toeschrijving zijn identiek in alle clients.
Is CoreDash gratis?
CoreDash heeft een gratis versie die werkt met CWV Superpowers. Je hebt data nodig die vanaf je site binnenstroomt (voeg de CoreDash script tag toe). De gratis versie heeft geen sampling en geen limieten op page views. API keys voor MCP-toegang zijn beschikbaar in alle abonnementen.
Kan ik dit gebruiken voor websites van klanten?
Ja. Voor elk CoreDash project kun je onbeperkt toegewijde MVP API Keys aanmaken. Voeg CoreDash toe aan de site van elke klant, genereer een read-only API key en configureer je MCP client. De agent ziet alleen de data voor dat project. CWV Superpowers is MIT gelicentieerd, dus er zijn geen beperkingen voor commercieel gebruik.
Open Source. Geen Lock-in.
Core Web Vitals automatisering die je kunt inspecteren en uitbreiden. De orchestrator, de diagnosemodules, de Chrome tracing logica en de rapporttemplates staan allemaal op GitHub. Lees hoe het werkt. Fork het. Breid het uit. Draag bij.
Start Je Gratis Proefperiode Bekijk op GitHub