Je AI-agent Heeft Zojuist Core Web Vitals Superkrachten Gekregen
Verbind Claude Code met je CoreDash velddata. Het vindt je ergste knelpunt over miljoenen page loads, traceert de hoofdoorzaak in Chrome en schrijft de fix. Agente 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-agenten optimaliseren voor Lighthouse. Een synthetische score op een gesimuleerd apparaat die Google niet gebruikt voor rankings. Een nuttige web performance AI-agent begint met dezelfde data als Google: echte gebruikers op budgettelefoons, slechte verbindingen en continenten die je ontwikkelmachine 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 het veld.
Blinde Agenten Maken Blinde Fixes
Zonder echte gebruikersdata weet een AI-agent niet welke pagina traag is, welk element het knelpunt is, of of zijn fix heeft geholpen. Hij 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 een hypothese 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 interacteren met je pagina. 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 hij blind voor je ergste interactiviteitsproblemen. Velddata is de enige bron.
Twee bronnen van waarheid: Velddata ontmoet browserbewijs
CWV Superpowers combineert echte gebruikersdata van CoreDash 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 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 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: Snelle 3G, 4x CPU-throttling. Het traceert alleen de knelpuntfase die CoreDash heeft geïdentificeerd.
Is Load Delay het knelpunt? De agent onderzoekt de netwerk-waterval op discovery gaps. Render Delay? Hij zoekt naar blokkerende scripts en vertragingen bij het laden van lettertypen.
Het resultaat: filmstrip-screenshots, netwerk-waterval en gericht bewijs dat de hoofdoorzaak verklaart die je velddata blootlegde.
Proportioneel redeneren, geen absolute drempels
Lighthouse vertelt je "Render Delay is 350ms." Is dat het probleem? Geen idee. CWV Superpowers identificeert het knelpunt 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 het knelpunt, hoewel 200ms in isolatie prima klinkt. Het oplossen ervan zet zoden aan de dijk. Het optimaliseren van Input Delay is nauwelijks merkbaar.
Dit voorkomt de meest gemaakte fout in performance werk: het verkeerde ding 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 voor de slechtste pagina's en metrieken. Geeft prioriteit aan slechte beoordelingen, mobiel, drukbezochte pagina's en p75-scores die een lange slechte staart verbergen.
2. Diagnose
Breekt de metriek op in fases. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Benoemt het knelpunt in percentages.
3. Chrome Trace
Bezoekt de pagina met mobiele emulatie. Traceert alleen de knelpuntfase van stap 2. Legt de netwerk-waterval, filmstrip en bewijs van blokkerende resources vast.
4. Hoofdoorzaak
Combineert beide bewijsbronnen in één verklaring: het element, de oorzaak, de CoreDash metrieken en wat Chrome heeft bevestigd. Geen ambiguïteit.
5. Fix of Rapport
Jouw keuze. Pas de code fix toe met bestand, regel, element, voor/na. Genereer een op zichzelf staand HTML rapport met grafieken en bewijs. Of allebei.
25+ dimensies: Elke invalshoek die je velddata bestrijkt
Dit zijn de daadwerkelijke CoreDash dimensies die de agent bevraagt. 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 Besturingssysteem Verbinding Bezoekerstype PaginapadTrends
7-daagse delta 28-daagse baseline RegressiedetectieDiagnose: Uitsplitsing op faseniveau voor elke Core Web Vital
Niet alleen scores. Elke metriek opgesplitst in fasen met behulp van attributie van echte gebruikers van CoreDash.
LCP oplossen 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.
Element attributie: het exacte LCP-element, het type (afbeelding, tekst, achtergrondafbeelding, video) en de prioriteitsstatus (fetchpriority, lazy loading).
Typische fixes: voeg preload hint toe, verwijder lazy loading van de hero, optimaliseer afbeeldingsformaat, los render-blokkerend script op.
INP oplossen met AI: Interaction to Next Paint diagnose
Uitsplitsing in 3 fasen: Input Delay, Processing, Presentation. De enige metriek die je niet in een lab kunt simuleren. Velddata is de enige bron.
Script attributie: 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, stel evaluatie uit, splits event handlers, content-visibility voor grote DOM's.
CLS: Cumulative Layout Shift
5 oorzaakpatronen: afbeeldingen zonder dimensies, lettertype swaps, dynamisch geïnjecteerde content, laat ladende resources, CSS-animaties op lay-out eigenschappen.
Cross-dimensionaal: vergelijkt mobiel versus desktop, nieuwe versus terugkerende bezoekers, snelle versus trage netwerken om de oorzaak te verfijnen.
Typische fixes: voeg breedte/hoogte toe, font-display: optional, min-height reservering, gebruik transform in plaats van top/left.
Hoe een Hoofdoorzaak Verklaring Eruit Ziet
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 (slecht) op mobiel, p75. Load Delay is het knelpunt op 1.980ms (52% van het totaal). Prioriteitsstatus: 3 (niet preloaded). Trend: verslechterend +340ms over 7 dagen.
Chrome bewijs:
Netwerk-waterval toont een gat van 1.940ms tussen de eerste HTML byte en de afbeeldingsrequest. De afbeelding wordt alleen gerefereerd in CSS, 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 om fetchpriority toe te voegen aan je LCP-afbeelding en zorg voor het correct preloaden van kritieke resources."
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 waterval).
Fix: 2 regels code wijziging met voor/na diff.
Vergelijk: Hoe CWV Superpowers zich verhoudt
Verschillende tools lossen verschillende problemen op. Hier zie je wat elk daadwerkelijk doet.
| Mogelijkheid | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Databron | Echte gebruikers (28 dagen velddata) | Enkele labsessie | Gesimuleerde enkele load |
| INP meting | ✓ Echte interacties | ✗ Geen echte gebruikers | ✗ Niet gemeten |
| Uitsplitsing in fasen | ✓ LCP, INP, CLS fasen | ~ Handmatige analyse | ✗ Alleen score |
| Element attributie | ✓ Exact element + prioriteit | ~ Als je weet waar je moet zoeken | ~ Generieke suggesties |
| Proportioneel redeneren | ✓ Knelpunt 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 op 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 velddata het knelpunt identificeert. Ze werken het beste samen.
Rapporten: Drop ze in Slack, voeg ze toe aan Jira
Op zichzelf staande HTML. Geen dependencies. Geen build stap. Eén bestand met alles inline.
Volledig Rapport (met Chrome)
Kleurgecodeerde metric-kaarten, fase-uitsplitsingsgrafieken, filmstrip-screenshots op sleutelmomenten (first paint, LCP, geladen), netwerk-waterval SVG, hoofdoorzaakanalyse en de aanbevolen fix met voor/na code.
RUM-Alleen Rapport
Zelfde metric-kaarten en fase-uitsplitsing, plus element attributie en hoofdoorzaakanalyse. Geen filmstrip of waterval, 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. Zelfde velddata, zelfde attributie.
Client Success
Don't just take my word for it
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
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, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
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 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."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
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."
Draait in 2 Minuten
Geautomatiseerde Core Web Vitals diagnose in je terminal. Je hebt een CoreDash-account nodig met binnenkomende data. De gratis tier 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-superpowers
claude --chrome
Vind mijn grootste CWV-probleem en los het op. Haal je API key uit CoreDash → Project Settings → API Keys (MCP). Wordt één keer 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 dat krijg je volledige velddata diagnose, fase-uitsplitsingen, element attributie en code fix suggesties puur op basis van CoreDash data. Chrome voegt filmstrip-screenshots, netwerk-waterval 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 load op jouw machine. CWV Superpowers gebruikt 28 dagen aan echte gebruikersdata van CoreDash: daadwerkelijke apparaten, daadwerkelijke netwerken, daadwerkelijke interacties. Het meet INP van echte gebruikerstaps (Lighthouse kan dat niet). Het vergelijkt segmenten (mobiel versus desktop, India versus de VS). En het gebruikt proportioneel redeneren om de knelpuntfase te vinden, niet alleen absolute scores.
Welke AI coding agenten 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 binnenkomende data van je site nodig (voeg de CoreDash script tag toe). De gratis tier heeft geen sampling en geen limieten op page views. API keys voor MCP toegang zijn beschikbaar in alle abonnementen.
Kan ik dit voor klantsites gebruiken?
Ja. Voor elk CoreDash project kun je onbeperkt toegewijde MVP API Keys aanmaken . Voeg CoreDash toe aan elke klantsite, genereer een read-only API key en configureer je MCP client. De agent ziet alleen de data voor dat project. CWV Superpowers heeft een MIT-licentie, 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