Din AI-agent har lige fået Core Web Vitals superkræfter
Forbind Claude Code til dine CoreDash field data. Den finder din værste flaskehals på tværs af millioner af sideindlæsninger, sporer rodårsagen i Chrome og skriver rettelsen. Agentbaseret web performance er ikke en rapport, men den faktiske kodelinje, der skal ændres.
Installer på 2 minutter Start gratis CoreDash-prøveperiode »Trusted by market leaders · Client results
AI-performanceværktøjer har et dataproblem
De fleste AI-agenter optimerer til Lighthouse. En syntetisk score på en simuleret enhed, som Google ikke bruger til rangering. En brugbar web performance-AI-agent starter med de samme data som Google: rigtige brugere på billige telefoner, ustabile forbindelser og kontinenter, din udviklingsmaskine aldrig har set.
Lighthouse er ikke dit rangeringssignal
Google rangerer efter CrUX field data fra rigtige Chrome-brugere over 28 dage. En perfekt Lighthouse-score og en fejlende field-score sker hele tiden. 52% of mobilsider fejler i mindst én Core Web Vital i field data.
Blinde agenter laver blinde rettelser
Uden rigtige brugerdata ved en AI-agent ikke, hvilken side der er langsom, hvilket element der er flaskehalsen, eller om dens fiks hjalp. Den optimerer en simulation og erklærer sig færdig. Dine faktiske brugere er uenige.
Manuel undersøgelse tager timer
Segmenter dataene. Opstil en hypotese. Kør en trace. Bekræft. Skitser et fiks. En senior performance-ingeniør bruger 2 til 4 timer per problem. Gang det med hver eneste langsomme side på dit site.
INP kan overhovedet ikke simuleres i et lab Interaction to Next Paint måler, hvordan rigtige brugere interagerer med din side. Intet syntetisk værktøj kan genskabe rigtig brugeradfærd: hvor de trykker, hvor hurtigt de scroller, hvilken enhed de holder. Lighthouse rapporterer ikke engang INP. Hvis din AI-agent kører Lighthouse, er den blind over for dine værste interaktivitetsproblemer. Field data er den eneste kilde.
To sandhedskilder: Field data møder browserbeviser
CWV Superpowers kombinerer reelle brugerdata fra CoreDash med målrettede Chrome-traces. Field data fortæller den, hvad der er langsomt. Chrome fortæller den, hvorfor.
CoreDash fortæller agenten, hvad der er langsomt
CoreDash sporer hver enkelt sideindlæsning fra alle reelle brugere. Hver metrik tilskrives det præcise element, der forårsager problemet. Ingen sampling, ingen begrænsninger.
Når CoreDash rapporterer en LCP på 4,2 sekunder, hvor Load Delay forbruger 52 % af den samlede tid på div.hero > img.main, ved agenten præcis, hvor den skal kigge. Ikke et gæt. En måling fra millioner af reelle sessioner.
Skill'en forespørger 25+ CoreDash-dimensioner: LCP-element, elementtype, prioritetsstatus, faseopdeling, INP-interaktionsmål, LOAF-scripts, skiftende CLS-element, enhedstype, besøgstype, netværkshastighed, 7-dages tendenser.
Chrome fortæller agenten, hvorfor det er langsomt
CWV Superpowers besøger siden med mobilemulering: Fast 3G, 4x CPU-throttling. Den tracer kun den flaskehalsfase, som CoreDash identificerede.
Er Load Delay flaskehalsen? Agenten undersøger netværks-waterfall'et for huller i opdagelsen. Render Delay? Den kigger efter blokerende scripts og forsinkelser i fontindlæsning.
Resultatet: filmstrip-screenshots, netværks-waterfall og målrettede beviser, der forklarer den rodårsag, dine field data afslørede.
Proportional tænkning, ikke absolutte tærskelværdier
Lighthouse fortæller dig: "Render Delay er 350 ms." Er det problemet? Ingen idé. CWV Superpowers identificerer flaskehalsen som den fase, der forbruger den største procentdel af den samlede tid.
INP er 350 ms. Input Delay 70 ms (20 %), Processing 80 ms (23 %), Presentation 200 ms (57 %). Presentation er flaskehalsen, selvom 200 ms lyder fint isoleret set. At fikse det gør en reel forskel. Optimering af Input Delay kan knap nok registreres.
Dette forhindrer den mest almindelige fejl i performance-arbejde: at fikse det forkerte.
Fem trin: Fra "noget er langsomt" til koderettelse
Stil den et spørgsmål. Fem trin senere har du en rettelse underbygget af reelle brugerdata.
1. Opdagelse
Scanner dine CoreDash-data for de værste sider og målinger. Prioriterer dårlige vurderinger, mobil, sider med høj trafik og p75-scorer, der skjuler en lang, dårlig hale.
2. Diagnose
Opdeler målingen i faser. LCP: TTFB, indlæsningsforsinkelse, indlæsningstid, renderingsforsinkelse. INP: input-forsinkelse, behandling, præsentation. Udpeger flaskehalsen i procent.
3. Chrome Trace
Besøger siden med mobil-emulering. Tracer kun flaskehalsfasen fra trin 2. Indsamler netværks-waterfall, filmstrip og beviser på blokerende ressourcer.
4. Rodårsag
Kombinerer begge beviskilder i én formulering: elementet, årsagen, CoreDash-målingerne og det, Chrome bekræftede. Ingen tvetydighed.
5. Rettelse eller rapport
Dit valg. Anvend koderettelsen med fil, linje, element og før/efter. Generer en selvstændig HTML-rapport med diagrammer og beviser. Eller begge dele.
25+ dimensioner: Hver vinkel, dine field data dækker
Dette er de faktiske CoreDash-dimensioner, agenten forespørger. Ikke et resumé. Det fulde billede.
LCP (Largest Contentful Paint)
LCP-element Elementtype Prioritetstilstand TTFB-fase Indlæsningsforsinkelse Indlæsningstid RenderingsforsinkelseINP (Interaction to Next Paint)
INP-mål Input-forsinkelse Behandling Præsentation LOAF-scripts IndlæsningstilstandCLS (Cumulative Layout Shift)
Skiftende element Årsag til skift Timing af skiftSegmenter
Enhedstype Land Browser OS Forbindelse Besøgendetype SidestiTendenser
7-dages delta 28-dages baseline RegressionsdetekteringDiagnose: Faseopdeling for hver Core Web Vital
Ikke kun scores. Hver metrik er opdelt i faser med attribuering fra rigtige brugere fra CoreDash.
Fiks LCP med AI: Diagnose af Largest Contentful Paint
4-faseopdeling: TTFB, indlæsningsforsinkelse, indlæsningstid, render-forsinkelse. Identificerer, hvilken fase der tager den største del af den samlede tid.
Elementattribuering: det præcise LCP-element, dets type (billede, tekst, baggrundsbillede, video) og prioritetstilstand (fetchpriority, lazy loading).
Typiske rettelser: tilføj preload-hint, fjern lazy loading fra hero, optimér billedformat, fiks render blocking-script.
Fiks INP med AI: Diagnose af Interaction to Next Paint
3-faseopdeling: input-forsinkelse, behandlingstid, præsentationsforsinkelse. Den eneste metrik, du ikke kan simulere i et laboratorium. Field data er den eneste kilde.
Script-attribuering: Long Animation Frames (LOAF) angiver den præcise JavaScript-fil og varighed. Plus sidens indlæsningstilstand, da interaktionen skete.
Typiske rettelser: yield til main thread, udskyd evaluering, opdel event-handlere, content-visibility til store DOM'er.
CLS: Cumulative Layout Shift
5 årsagsmønstre: billeder uden dimensioner, font-skift, dynamisk indsat indhold, sent indlæste ressourcer, CSS-animationer af layout-egenskaber.
Krydsdimensionel: sammenligner mobil vs. desktop, nye vs. tilbagevendende besøgende, hurtige vs. langsomme netværk for at indsnævre årsagen.
Typiske rettelser: tilføj width/height, font-display: optional, min-height-reservation, brug transform i stedet for top/left.
Sådan ser en root cause-beskrivelse ud
Ikke "overvej at optimere dine billeder." Dette er det faktiske output. Specifikt nok til at reviewe og merge.
Root cause:
LCP-billedet div.hero-banner > img.product-main på /product/running-shoes-42 opdages 1.980ms for sent, fordi det mangler et preload-hint og ikke har fetchpriority="high".
CoreDash-bevis:
LCP er 3.820ms (dårlig) på mobil, p75. Load Delay er flaskehalsen med 1.980ms (52% af den samlede tid). Prioritetsstatus: 3 (ikke preloaded). Trend: forringes med +340ms over 7 dage.
Chrome-bevis:
Netværks-waterfall viser et gab på 1.940ms mellem første HTML-byte og billedanmodningen. Billedet refereres kun i CSS og er usynligt for preload-scanneren.
Fiks:
Tilføj <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> til templates/product.html linje 12. Sæt fetchpriority="high" på img-elementet på linje 47.
Generisk AI-råd:
"Overvej at tilføje fetchpriority til dit LCP-billede og sørg for korrekt preloading af kritiske ressourcer."
CWV-superkræfter:
Element: div.hero-banner > img.product-main
Fil: templates/product.html, linje 47
Bevis: 52% af LCP-tiden ligger i Load Delay (CoreDash p75). 1.940ms opdagelsesgab (Chrome-waterfall).
Fiks: Kodeændring på 2 linjer med før/efter-diff.
Sammenlign: Sådan klarer CWV Superpowers sig
Forskellige værktøjer løser forskellige problemer. Her er, hvad de hver især faktisk gør.
| Funktion | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Datakilde | Rigtige brugere (28 dages field data) | Enkelt lab-session | Simuleret enkelt indlæsning |
| INP-måling | ✓ Rigtige interaktioner | ✗ Ingen rigtige brugere | ✗ Ikke målt |
| Faseopdeling | ✓ LCP-, INP- og CLS-faser | ~ Manuel analyse | ✗ Kun score |
| Elementtilskrivning | ✓ Præcist element + prioritet | ~ Hvis du ved, hvor du skal lede | ~ Generiske forslag |
| Proportionel logik | ✓ Flaskehals efter % | ✗ Absolutte værdier | ✗ Absolutte værdier |
| Sammenligning af segmenter | ✓ Enhed, land, browser | ✗ Enkelt konfiguration | ✗ Enkelt konfiguration |
| Trendregistrering | ✓ 7-dages delta | ✗ Øjebliksbillede | ✗ Øjebliksbillede |
| Chrome-tracing | ✓ Målrettet efter fase | ✓ Fuld adgang | ✗ Ingen browser |
| Koderettelser | ✓ Fil + linje + diff | ~ Agent-afhængig | ~ Generiske råd |
Bemærk: Chrome DevTools MCP er komplementært. CWV Superpowers bruger det til målrettet tracing, efter field data har identificeret flaskehalsen. De fungerer bedst sammen.
Rapporter: Smid dem i Slack, vedhæft til Jira
Selvstændig HTML. Ingen afhængigheder. Intet build-trin. Én fil med alt inline.
Fuld rapport (med Chrome)
Farvekodede metrikkort, diagrammer med faseopdeling, filmstrip-skærmbilleder ved nøgletidspunkter (first paint, LCP, indlæst), netværksvandfald-SVG, årsagsanalyse og den anbefalede løsning med før/efter-kode.
RUM-only rapport
Samme metrikkort og faseopdeling plus elementattribuering og årsagsanalyse. Intet filmstrip eller netværksvandfald, men kvaliteten af diagnosen er den samme, fordi field data er sandhedskilden.
Fungerer med enhver MCP-klient
Claude Code: Fuld skill med automatiseret arbejdsgang. Opdagelse, diagnose, Chrome-tracing, koderettelser og rapporter. Anbefales.
Cursor: Plugin-installation med CoreDash MCP. Fuld diagnose og koderettelser direkte i din editor.
VS Code, Windsurf, Gemini CLI: Enhver klient, der understøtter HTTP-MCP-servere, forbinder til CoreDash. Samme field data, samme attribuering.
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."
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."
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 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."
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."
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 Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
Kørende på 2 minutter
Automatiseret Core Web Vitals-diagnose i din terminal. Du skal bruge en CoreDash-konto med dataflow. Den gratis plan virker.
Claude Code
# 1. Tilføj CoreDash MCP-server (browser-login, ingen API-nøgle) claude mcp add --transport http coredash https://app.coredash.app/api/mcp # 2. Installer CWV Superpowers /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpowers # 3. Start med Chrome (valgfrit, anbefales) claude --chrome # 4. Kør Find mit største CWV-problem og fiks det.
Kør /mcp første gang du forbinder, vælg coredash og vælg Authenticate. Din browser åbner CoreDash-login, du vælger et projekt og godkender, og Claude Code gemmer et kortvarigt OAuth-token. Det opdateres automatisk (1 times adgang, 30 dages refresh) og kan altid tilbagekaldes. Ingen nøgle at indsætte.
Foretrækker du en API-nøgle til headless eller CI-brug? Tilføj --header "Authorization: Bearer cdk_YOUR_API_KEY" til kommandoen, genereret fra CoreDash → Project Settings → API Keys (MCP). Vises én gang. Gemmes som SHA-256-hash. Skrivebeskyttet.
Cursor
# Installer pluginnet
/plugin-add cwv-superpowers
Tilføj CoreDash til .cursor/mcp.json:
{
"mcpServers": {
"coredash": {
"url": "https://app.coredash.app/api/mcp",
"headers": {
"Authorization": "Bearer cdk_YOUR_API_KEY"
}
}
}
}
Andre MCP-klienter
Endpoint: https://app.coredash.app/api/mcp
Header: Authorization: Bearer cdk_YOUR_API_KEY
Fungerer med VS Code (Copilot agent-mode), Windsurf, Gemini CLI, Claude Desktop og enhver HTTP MCP-klient. Ét MCP-endpoint til webperformance, alle agenter.
Ofte stillede spørgsmål
Skal Chrome køre for at bruge CWV Superpowers?
Nej. Chrome-tracing er valgfrit. Uden det får du fuld field data-diagnose, faseopdelinger, elementattribuering og forslag til kodeændringer udelukkende baseret på CoreDash-data. Chrome tilføjer filmstrip-skærmbilleder, netværksvandfald og visuel bekræftelse af rodårsagen. Begge tilstande genererer rapporter.
Hvordan adskiller det sig fra at køre Lighthouse i min AI-agent?
Lighthouse kører en enkelt syntetisk indlæsning på din maskine. CWV Superpowers bruger 28 dages rigtige brugerdata fra CoreDash: faktiske enheder, faktiske netværk, faktiske interaktioner. Det måler INP ud fra rigtige brugertryk (det kan Lighthouse ikke). Det sammenligner segmenter (mobil vs. desktop, Indien vs. USA). Og det bruger proportional logik til at finde flaskehals-fasen, ikke kun absolutte scorer.
Hvilke AI-kodningsagenter understøttes?
Enhver AI-kodningsagent til webperformance, der understøtter MCP-servere (Model Context Protocol). Claude Code har en dedikeret skill med et automatiseret 5-trins workflow. Cursor, VS Code (Copilot-agenttilstand), Windsurf, Gemini CLI og Claude Desktop forbinder via CoreDash HTTP MCP-endpointet. Field data og attribuering er identisk på tværs af alle klienter.
Er CoreDash gratis?
CoreDash har en gratis version, der fungerer med CWV Superpowers. Du skal have data til at strømme fra dit site (tilføj CoreDash-script-tagget). Den gratis version har ingen sampling og intet loft over sidevisninger. API-nøgler til MCP-adgang er tilgængelige på alle abonnementer.
Kan jeg bruge det til kundesites?
Ja. For hvert CoreDash-projekt kan du oprette ubegrænsede dedikerede MVP-API-nøgler . Tilføj CoreDash til hvert kundesite, generer en skrivebeskyttet API-nøgle og konfigurer din MCP-klient. Agenten ser kun data for det projekt. CWV Superpowers er MIT-licenseret, så der er ingen restriktioner på kommerciel brug.
Open source. Ingen binding.
Core Web Vitals-automatisering, du kan inspicere og udvide. Orchestratoren, diagnosemodulerne, Chrome tracing-logikken og rapportskabelonerne ligger alle på GitHub. Læs, hvordan det virker. Fork det. Udvid det. Bidrag.
Start din gratis prøveperiode Se på GitHub