Je AI Agent Heeft Nu Core Web Vitals Superpowers
Koppel Claude Code aan je CoreDash field data. Hij vindt je grootste bottleneck over miljoenen paginaladingen, traceert de oorzaak in Chrome en schrijft de fix. Agentic web performance is geen rapport, maar de exacte regel code die moet veranderen.
Installeer in 2 Minuten Start Gratis CoreDash Trial »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 start 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 rankt op CrUX field data van echte Chrome-gebruikers over 28 dagen. Een perfecte Lighthouse-score met een falende field score komt continu 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 dat zijn fix hielp. Hij optimaliseert een simulatie en stopt ermee. Je daadwerkelijke gebruikers zijn het daar niet mee eens.
Handmatig Onderzoek Kost Uren
Segmenteer de data. Stel hypotheses 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 in een lab überhaupt niet gesimuleerd worden 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 hij blind voor je ergste interactiviteitsproblemen. Field data is de enige bron.
Twee bronnen van waarheid: Field data ontmoet browserbewijs
CWV Superpowers combineert CoreDash data van echte gebruikers met gerichte Chrome-traces. De field data vertelt hem wat traag is. Chrome vertelt hem waarom.
CoreDash vertelt de agent wat traag is
CoreDash trackt elke paginalading van elke echte gebruiker. Elke meting, 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 opslokt op div.hero > img.main, weet de agent precies waar hij moet kijken. Geen gok. Een meting uit miljoenen echte sessies.
De skill bevraagt 25+ CoreDash-dimensies: het LCP-element, elementtype, prioriteitsstatus, fase-uitsplitsing, INP-interactiedoel, LOAF-scripts, verschuivend CLS-element, apparaattype, bezoekertype, 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. Hij traceert alleen de bottleneck-fase die CoreDash heeft geïdentificeerd.
Load Delay is de bottleneck? De agent onderzoekt de netwerk-waterfall op discovery gaps. Render Delay? Hij zoekt naar blokkerende scripts en font laadvertragingen.
Het resultaat: filmstrip screenshots, netwerk-waterfall en gericht bewijs dat de oorzaak verklaart die je field data blootlegde.
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 opslokt.
De INP is 350ms. Input Delay 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). Presentation is de bottleneck, hoewel 200ms op zichzelf prima klinkt. Dit fixen maakt het verschil. Input Delay optimaliseren merk je nauwelijks.
Dit voorkomt de meest gemaakte fout in performance-werk: het verkeerde ding fixen.
Vijf stappen: Van "iets is traag" naar een code fix
Stel hem een vraag. Vijf stappen later heb je een fix ondersteund door echt gebruikersbewijs.
1. Ontdekking
Scant je CoreDash data op de slechtste pagina's en metingen. Prioriteert slechte beoordelingen, mobiel, pagina's met veel verkeer en p75-scores die een lange slechte staart verbergen.
2. Diagnose
Breekt de meting 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 netwerk-waterfall, filmstrip en bewijs van blokkerende resources vast.
4. Oorzaak
Combineert beide bewijsbronnen in één statement: het element, de oorzaak, de CoreDash metingen en wat Chrome bevestigde. Geen ambiguïteit.
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 field data dekt
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 OS Verbinding Bezoekertype PaginapadTrends
7-daagse delta 28-daagse baseline RegressiedetectieDiagnose: Fase-uitsplitsing voor elke Core Web Vital
Niet zomaar scores. Elke meting opgesplitst in fases met echte gebruikersattributie uit CoreDash.
Fix LCP met AI: Largest Contentful Paint diagnose
4-fasen uitsplitsing: TTFB, Load Delay, Load Time, Render Delay. Identificeert welke fase het grootste deel van de totale tijd opslokt.
Elementattributie: het exacte LCP-element, zijn type (afbeelding, tekst, achtergrondafbeelding, video), en prioriteitsstatus (fetchpriority, lazy loading).
Typische fixes: voeg preload hint toe, verwijder lazy loading van hero, optimaliseer afbeeldingsformaat, fix render blocking script.
Fix INP met AI: Interaction to Next Paint diagnose
3-fasen uitsplitsing: Input Delay, Processing, Presentation. De enige meting die je niet in een lab kunt simuleren. Field data is de enige bron.
Scriptattributie: Long Animation Frames (LOAF) benoemt het exacte JavaScript-bestand en de duur. Plus de paginalaadstatus toen de interactie plaatsvond.
Typische fixes: yield naar de main thread, stel evaluatie uit, splits event handlers, content-visibility voor grote DOMs.
CLS: Cumulative Layout Shift
5 oorzaakpatronen: afbeeldingen zonder dimensies, font swaps, dynamisch geïnjecteerde content, laat ladende resources, CSS-animaties op lay-out eigenschappen.
Cross-dimensioneel: vergelijkt mobiel vs desktop, nieuwe vs terugkerende bezoekers, snelle vs trage netwerken om de oorzaak te verfijnen.
Typische fixes: voeg width/height toe, font-display: optional, min-height reservering, gebruik transform in plaats van top/left.
Hoe Een Oorzaak-Statement Er Uit Ziet
Niet "overweeg je afbeeldingen te optimaliseren." Dit is de daadwerkelijke output. Specifiek genoeg om te reviewen en te mergen.
Oorzaak:
De LCP-afbeelding div.hero-banner > img.product-main op /product/running-shoes-42 wordt 1.980ms te laat ontdekt omdat een preload hint ontbreekt en hij geen fetchpriority="high" heeft.
CoreDash-bewijs:
De LCP is 3.820ms (slecht) op mobiel, p75. Load Delay is de bottleneck met 1.980ms (52% van het totaal). Prioriteitsstatus: 3 (niet gepreload). Trend: verslechtert +340ms over 7 dagen.
Chrome-bewijs:
Netwerk-waterfall toont een gat van 1.940ms tussen HTML first byte en afbeeldingsrequest. Afbeelding is 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 fetchpriority toe te voegen aan je LCP-afbeelding en zorg voor een goede preloading 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 waterfall).
Fix: Code wijziging van 2 regels met voor/na diff.
Vergelijk: Hoe CWV Superpowers zich verhoudt
Verschillende tools lossen verschillende problemen op. Dit is wat elke tool daadwerkelijk doet.
| Functie | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Databron | Echte gebruikers (28 dagen field data) | Enkele labsessie | Gesimuleerde enkele lading |
| INP-meting | ✓ Echte interacties | ✗ Geen echte gebruikers | ✗ Niet gemeten |
| Fase-uitsplitsing | ✓ LCP, INP, CLS fases | ~ Handmatige analyse | ✗ Alleen score |
| Elementattributie | ✓ 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 field data de bottleneck identificeert. Ze werken het best samen.
Rapporten: Drop ze in Slack, hang ze aan Jira
Opzichzelfstaande HTML. Geen dependencies. Geen build step. Eén bestand met alles inline.
Volledig Rapport (met Chrome)
Kleurgecodeerde metrics cards, fase-uitsplitsing grafieken, filmstrip screenshots op belangrijke momenten (first paint, LCP, loaded), netwerk-waterfall SVG, oorzaakanalyse en de aanbevolen fix met voor/na code.
RUM-only Rapport
Zelfde metrics cards en fase-uitsplitsing, plus elementattributie en oorzaakanalyse. Geen filmstrip of waterfall, maar de diagnosekwaliteit is identiek omdat field data 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 koppelt met CoreDash. Zelfde field data, zelfde attributie.
Client Success
Don't just take my word for it
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."
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."
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.
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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."
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."
Draait in 2 Minuten
Geautomatiseerde Core Web Vitals diagnose in je terminal. Je hebt een CoreDash account nodig waar data binnenstroomt. De free tier werkt.
Claude Code
claude mcp add --transport http coredash https://app.coredash.app/api/mcp
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers
claude --chrome
Find my biggest CWV issue and fix it. Draai bij de eerste verbinding /mcp, kies coredash, en kies Authenticate. Je browser opent de CoreDash login, je kiest een project en keurt goed, en Claude Code slaat een kortlevend OAuth-token op dat automatisch vernieuwt (1 uur toegang, 30 dagen refresh) en intrekbaar blijft. Geen key om te plakken.
Liever een API key voor headless of CI-gebruik? Voeg --header "Authorization: Bearer cdk_YOUR_API_KEY" toe aan het commando, gegenereerd via CoreDash → Project Settings → API Keys (MCP). 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
Moet ik Chrome draaien om CWV Superpowers te gebruiken?
Nee. Chrome tracing is optioneel. Zonder krijg je de volledige field data diagnose, fase-uitsplitsingen, elementattributie en suggesties voor code fixes puur op basis van CoreDash data. Chrome voegt filmstrip screenshots, netwerk-waterfall en visuele bevestiging van de oorzaak toe. Beide modi genereren rapporten.
Hoe verschilt dit van Lighthouse draaien in mijn AI-agent?
Lighthouse draait één synthetische lading op jouw machine. CWV Superpowers gebruikt 28 dagen aan echte gebruikersdata van CoreDash: werkelijke apparaten, werkelijke netwerken, werkelijke interacties. Het meet de INP 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-servers (Model Context Protocol) 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 field data en attributie zijn identiek over alle clients.
Is CoreDash gratis?
CoreDash heeft een free tier die werkt met CWV Superpowers. Je hebt data nodig die vanaf je site binnenstroomt (voeg de CoreDash script tag toe). De free tier heeft geen sampling en geen limieten op paginaladingen. API keys voor MCP-toegang zijn beschikbaar op alle abonnementen.
Kan ik dit gebruiken voor klantsites?
Ja. Voor elk CoreDash-project kun je onbeperkte 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 restricties 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 Trial Bekijk op GitHub