Je AI-agent Heeft Zojuist Core Web Vitals superkrachten Gekregen
Verbind Claude Code met je CoreDash-velddata. Het vindt je ergste bottleneck in miljoenen paginaweergaven, traceert de hoofdoorzaak in Chrome en schrijft de fix. Agentic web performance: geen rapport, maar de daadwerkelijke regel code die moet veranderen.
Installeer 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 die Google niet gebruikt voor rankings. Een nuttige AI-agent voor web performance start met dezelfde data als Google: echte gebruikers op budgettelefoons, slechte verbindingen en continenten die jouw dev-machine nog nooit heeft gezien.
Lighthouse Is Niet Je Ranking-signaal
Google rangschikt op basis van CrUX-velddata van echte Chrome-gebruikers over 28 dagen. Een perfecte Lighthouse-score en een falende veldscore komen constant voor. 52% van de mobiele sites faalt voor ten minste één Core Web Vital in de praktijk.
Blinde Agents Maken Blinde Fixes
Zonder data van echte gebruikers weet een AI-agent niet welke pagina traag is, welk element de bottleneck is, of dat de fix heeft geholpen. Het optimaliseert een simulatie en vindt het wel best. Je daadwerkelijke gebruikers zijn het daar niet mee eens.
Handmatig Onderzoek Duurt Uren
Segmenteer de data. Stel hypothesen op. Draai een trace. 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 repliceren: waar ze tikken, hoe snel ze scrollen, welk apparaat ze vasthouden. Lighthouse rapporteert INP niet eens. Als je AI-agent Lighthouse draait, is deze blind voor je ergste interactiviteitsproblemen. Velddata is de enige bron.
Twee bronnen van waarheid: Velddata ontmoet browserbewijs
CWV Superpowers combineert CoreDash data van echte gebruikers met gerichte Chrome-traces. De velddata vertelt wat er traag is. Chrome vertelt waarom.
CoreDash vertelt de agent wat er traag is
CoreDash volgt elke paginaweergave van elke echte gebruiker. Elke metric, toegeschreven aan exact het 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 zoeken. Geen gok. Een meting uit miljoenen echte sessies.
De skill bevraagt 25+ CoreDash-dimensies: 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 door je velddata blootgelegde hoofdoorzaak verklaart.
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 op zichzelf prima. Dit oplossen zet zoden aan de dijk. Input Delay optimaliseren is nauwelijks merkbaar.
Dit voorkomt de meest gemaakte fout in performance-werk: het verkeerde ding fixen.
Vijf stappen: Van "iets is traag" naar code-fix
Stel een vraag. Vijf stappen later heb je een fix ondersteund door bewijs van echte gebruikers.
1. Ontdekking
Scant je CoreDash-data op de slechtste pagina's en metrics. Geeft prioriteit aan slechte beoordelingen, mobiel, pagina's met veel verkeer en p75-scores die een lange poor staart verbergen.
2. Diagnose
Breekt de metric op in fasen. 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 uitsluitend de bottleneck-fase uit stap 2. Legt network waterfall, filmstrip en bewijs van blokkerende bronnen vast.
4. Hoofdoorzaak
Combineert beide bewijsbronnen in één verklaring: het element, de oorzaak, de CoreDash-metrics en wat Chrome heeft bevestigd. Geen dubbelzinnigheid.
5. Fix of Rapport
Jouw keuze. Pas de code-fix toe met bestand, regel, element, voor/na. Genereer een opzichzelfstaand HTML-rapport met grafieken en bewijs. Of allebei.
25+ dimensies: Elke invalshoek die je velddata dekt
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 Oorzaak verschuiving Timing verschuivingSegmenten
Apparaattype Land Browser Besturingssysteem Verbinding Bezoekerstype PaginapadTrends
7-daagse delta 28-daagse baseline RegressiedetectieDiagnose: Uitsplitsing op faseniveau voor elke Core Web Vital
Niet zomaar scores. Elke metric uitgesplitst in fasen met behulp van attributie door echte gebruikers vanuit CoreDash.
LCP fixen met AI: Largest Contentful Paint-diagnose
Uitsplitsing in 4 fasen: TTFB, Load Delay, Load Time, Render Delay. Identificeert welke fase het grootste deel van de totale tijd in beslag neemt.
Elementattributie: het exacte LCP-element, het type (afbeelding, tekst, achtergrondafbeelding, video) en de prioriteitsstatus (fetchpriority, lazy loading).
Typische fixes: preload-hint toevoegen, lazy loading van hero verwijderen, afbeeldingsformaat optimaliseren, render-blocking script fixen.
INP fixen met AI: Interaction to Next Paint-diagnose
Uitsplitsing in 3 fasen: Input Delay, Processing, Presentation. De enige metric die je niet kunt simuleren in een lab. Velddata is de enige bron.
Scriptattributie: Long Animation Frames (LOAF) benoemt het exacte JavaScript-bestand en de duur. Plus de laadstatus van de pagina op het moment van interactie.
Typische fixes: yield naar de main thread, evaluatie uitstellen, 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 bronnen, CSS-animaties op lay-out eigenschappen.
Cross-dimensie: vergelijkt mobiel vs desktop, nieuwe vs terugkerende bezoekers, snelle vs trage netwerken om de oorzaak te achterhalen.
Typische fixes: width/height toevoegen, font-display: optional, min-height reservering, transform gebruiken in plaats van top/left.
Hoe een Hoofdoorzaakverklaring eruitziet
Niet "overweeg je afbeeldingen te optimaliseren." Dit is de daadwerkelijke output. Specifiek genoeg om te reviewen en te mergen.
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-bewijs:
LCP is 3.820ms (poor) op mobiel, p75. Load Delay is de bottleneck met 1.980ms (52% van totaal). Prioriteitsstatus: 3 (niet gepreload). Trend: verslechterend +340ms over 7 dagen.
Chrome-bewijs:
Network waterfall toont een gat van 1.940ms tussen de eerste HTML-byte en het afbeeldingsverzoek. 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 bronnen."
CWV Superpowers:
Element: div.hero-banner > img.product-main
Bestand: templates/product.html, regel 47
Bewijs: 52% van de 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 zich verhoudt
Verschillende tools lossen verschillende problemen op. Hier is wat elke tool daadwerkelijk doet.
| Mogelijkheid | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Databron | Echte gebruikers (28 dagen velddata) | Enkele labsessie | Gesimuleerde enkele weergave |
| INP-meting | ✓ Echte interacties | ✗ Geen echte gebruikers | ✗ Niet gemeten |
| Fase-uitsplitsing | ✓ LCP-, INP-, CLS-fasen | ~ Handmatige analyse | ✗ Alleen score |
| Elementattributie | ✓ Exact element + prioriteit | ~ Als je weet waar je moet zoeken | ~ Generieke suggesties |
| Proportioneel redeneren | ✓ Bottleneck in % | ✗ Absolute waarden | ✗ Absolute waarden |
| Segmentvergelijking | ✓ Apparaat, land, browser | ✗ Enkele config | ✗ Enkele config |
| Trenddetectie | ✓ 7-daagse delta | ✗ Momentopname | ✗ Momentopname |
| Chrome-tracing | ✓ Gericht per fase | ✓ Volledige toegang | ✗ Geen browser |
| Code-fixes | ✓ Bestand + regel + diff | ~ Afhankelijk van agent | ~ Generiek advies |
Opmerking: Chrome DevTools MCP is complementair. CWV Superpowers gebruikt het voor gerichte tracing nadat velddata de bottleneck identificeert. Ze werken het best samen.
Rapporten: Deel ze in Slack, voeg toe aan Jira
Opzichzelfstaande HTML. Geen dependencies. Geen build-stap. Eén bestand met alles inline.
Volledig Rapport (met Chrome)
Kleurgecodeerde metrics-kaarten, fase-uitsplitsingsgrafieken, filmstrip-screenshots op sleutelmomenten (first paint, LCP, geladen), network waterfall SVG, hoofdoorzaakanalyse en de aanbevolen fix met voor/na-code.
Alleen-RUM Rapport
Dezelfde metrics-kaarten en fase-uitsplitsing, plus elementattributie en hoofdoorzaakanalyse. Geen filmstrip of waterfall, maar de diagnosekwaliteit is identiek omdat velddata de bron van waarheid is.
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 binnen je editor.
VS Code, Windsurf, Gemini CLI: Elke client die HTTP MCP-servers ondersteunt, maakt verbinding met CoreDash. Dezelfde velddata, dezelfde attributie.
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."
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."
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."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
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.
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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."
Draait in 2 Minuten
Geautomatiseerde Core Web Vitals-diagnose in je terminal. Je hebt een CoreDash-account nodig met binnenstromende data. De gratis tier werkt.
Claude Code
# 1. CoreDash MCP-server toevoegen claude mcp add --transport http coredash \ https://app.coredash.app/api/mcp \ --header "Authorization: Bearer cdk_YOUR_API_KEY" # 2. CWV Superpowers installeren /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpower # 3. Starten met Chrome (optioneel, aanbevolen) claude --chrome # 4. Go Vind mijn grootste CWV-probleem en fix het.
Haal je API-sleutel uit CoreDash → Project Settings → API Keys (MCP). Wordt eenmalig getoond. Opgeslagen als SHA-256 hash. Read-only.
Cursor
# Installeer de plugin
/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, voor elke agent.
Veelgestelde Vragen
Heb ik Chrome nodig om CWV Superpowers te gebruiken?
Nee. Chrome-tracing is optioneel. Zonder dit krijg je volledige velddata-diagnoses, fase-uitsplitsingen, elementattributie en suggesties voor code-fixes uitsluitend op basis van CoreDash-data. Chrome voegt filmstrip-screenshots, network waterfall en visuele bevestiging van de hoofdoorzaak toe. Beide modi genereren rapporten.
Hoe verschilt dit van het draaien van Lighthouse in mijn AI-agent?
Lighthouse draait een enkele synthetische weergave op jouw machine. CWV Superpowers gebruikt 28 dagen aan data van echte gebruikers via CoreDash: daadwerkelijke apparaten, daadwerkelijke netwerken, daadwerkelijke interacties. Het meet INP aan de hand van tikken door echte gebruikers (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 maken verbinding via het CoreDash HTTP MCP-endpoint. De velddata en attributie zijn identiek over alle clients.
Is CoreDash gratis?
CoreDash heeft een gratis tier die werkt met CWV Superpowers. Je hebt binnenstromende data van je site nodig (voeg de CoreDash-script tag toe). De gratis tier heeft geen sampling en geen paginaweergave-limieten. API-sleutels voor MCP-toegang zijn beschikbaar in alle abonnementen.
Kan ik dit gebruiken voor websites van klanten?
Ja. Voor elk CoreDash-project kun je onbeperkt speciale MVP API-sleutels aanmaken. Voeg CoreDash toe aan de site van elke klant, genereer een read-only API-sleutel 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