Din AI-agent har lige fået Core Web Vitals-superkræfter
Forbind Claude Code til dine CoreDash-feltdata. Den finder din værste flaskehals på tværs af millioner af sidevisninger, sporer den underliggende årsag i Chrome og skriver rettelsen. Agent-drevet web performance – 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 Performance-værktøjer har et dataproblem
De fleste AI-agenter optimerer mod Lighthouse. En syntetisk score på en simuleret enhed, som Google ikke bruger til placeringer. En nyttig web performance AI-agent starter med de samme data som Google gør: rigtige brugere på budgettelefoner, ustabile forbindelser og kontinenter, din dev-maskine aldrig har set.
Lighthouse er ikke dit rangeringssignal
Google rangerer baseret på CrUX-feltdata fra rigtige Chrome-brugere over 28 dage. En perfekt Lighthouse-score og en dumpende felt-score forekommer hele tiden. 52 % af alle mobilsites dumper på mindst én Core Web Vitals-metrik i felten.
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 rettelse hjalp. Den optimerer en simulering og kalder det en dag. Dine faktiske brugere er uenige.
Manuel efterforskning tager timer
Segmenter dataene. Opstil en hypotese. Kør en trace. Bekræft. Udkast til rettelsen. En senior performance engineer bruger 2 til 4 timer pr. problem. Gang det med hver eneste langsomme side på dit site.
INP kan slet ikke simuleres i et laboratorium Interaction to Next Paint måler, hvordan rigtige brugere interagerer med din side. Intet syntetisk værktøj kan kopiere 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. Feltdata er den eneste kilde.
To sandhedskilder: Feltdata møder browserbeviser
CWV Superpowers kombinerer real user-data fra CoreDash med målrettede Chrome-traces. Feltdataene fortæller den, hvad der er langsomt. Chrome fortæller den, hvorfor.
CoreDash fortæller agenten, hvad der er langsomt
CoreDash sporer hver eneste sideindlæsning fra hver eneste rigtige bruger. Hver metrik, tilskrevet det præcise element, der forårsager problemet. Ingen stikprøver, ingen lofter.
Når CoreDash rapporterer en LCP på 4,2 sekunder med en Load Delay, der forbruger 52 % af den samlede tid på div.hero > img.main, ved agenten præcis, hvor den skal lede. Ikke et gæt. En måling fra millioner af rigtige sessioner.
Denne skill forespørger 25+ CoreDash-dimensioner: LCP-element, elementtype, prioritetstilstand, faseopdeling, INP-interaktionsmål, LOAF-scripts, CLS-forskydende 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 sporer kun den flaskehalsfase, som CoreDash identificerede.
Er Load Delay flaskehalsen? Agenten undersøger netværksvandfaldet for opdagelseshuller. Render Delay? Den leder efter blokerende scripts og forsinkelser i indlæsning af skrifttyper.
Resultatet: filmstrip-skærmbilleder, netværksvandfald og målrettede beviser, der forklarer den underliggende årsag, som dine feltdata afslørede.
Proportional ræsonnering, ikke absolutte tærskler
Lighthouse fortæller dig "Render Delay er 350ms." Er det problemet? Ingen anelse. CWV Superpowers identificerer flaskehalsen som den fase, der forbruger den største procentdel af den samlede tid.
INP er 350ms. Input Delay 70ms (20 %), Processing 80ms (23 %), Presentation 200ms (57 %). Presentation er flaskehalsen, selvom 200ms lyder fint isoleret set. At rette det gør en forskel. Optimering af Input Delay kan knap nok mærkes.
Dette forhindrer den mest almindelige fejl i performance-arbejde: at rette det forkerte.
Fem trin: Fra "noget er langsomt" til koderettelse
Stil den et spørgsmål. Fem trin senere har du en rettelse bakket op af rigtige brugerbeviser.
1. Opdagelse
Scanner dine CoreDash-data for de værste sider og metrikker. Prioriterer dårlige bedømmelser, mobil, sider med høj trafik og p75-scores, der skjuler en lang hale af dårlige oplevelser.
2. Diagnostik
Opdeler metrikken i faser. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Navngiver flaskehalsen i procent.
3. Chrome Trace
Besøger siden med mobilemulering. Sporer kun flaskehalsfasen fra trin 2. Indfanger netværksvandfald, filmstrip og beviser for blokerende ressourcer.
4. Underliggende årsag
Kombinerer begge beviskilder i én erklæring: elementet, årsagen, CoreDash-metrikkerne, og hvad Chrome bekræftede. Ingen tvetydighed.
5. Ret eller rapporter
Dit valg. Anvend koderettelsen med fil, linje, element, før/efter. Generer en selvstændig HTML-rapport med diagrammer og beviser. Eller begge dele.
25+ dimensioner: Hver vinkel dine feltdata dækker
Dette er de faktiske CoreDash-dimensioner, som agenten forespørger. Ikke et resumé. Det fulde billede.
LCP (Largest Contentful Paint)
LCP-element Elementtype Prioritetstilstand TTFB-fase Load Delay Load Time Render DelayINP (Interaction to Next Paint)
INP-mål Input Delay Processing Presentation LOAF-scripts IndlæsningstilstandCLS (Cumulative Layout Shift)
Forskydende element Forskydningsårsag ForskydningstimingSegmenter
Enhedstype Land Browser OS Forbindelse Besøgstype SidestiTendenser
7-dages delta 28-dages baseline RegressionsdetektionDiagnose: Fase-niveau opdeling for hver Core Web Vitals-metrik
Ikke kun scores. Hver metrik opdelt i faser ved hjælp af real user-tilskrivning fra CoreDash.
Ret LCP med AI: Largest Contentful Paint-diagnose
4-fase opdeling: TTFB, Load Delay, Load Time, Render Delay. Identificerer hvilken fase der forbruger den største andel af den samlede tid.
Elementtilskrivning: 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, optimer billedformat, ret render-blocking script.
Ret INP med AI: Interaction to Next Paint-diagnose
3-fase opdeling: Input Delay, Processing, Presentation. Den eneste metrik, du ikke kan simulere i et laboratorium. Feltdata er den eneste kilde.
Script-tilskrivning: Long Animation Frames (LOAF) navngiver den præcise JavaScript-fil og varighed. Plus sidens indlæsningstilstand da interaktionen fandt sted.
Typiske rettelser: yield til main thread, udskyd evaluering, opdel event handlers, content-visibility for store DOM'er.
CLS: Cumulative Layout Shift
5 årsagsmønstre: billeder uden dimensioner, udskiftning af skrifttyper, dynamisk indsat indhold, ressourcer der indlæses sent, CSS-animationer på layoutegenskaber.
Tværdimensionel: 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.
Hvordan en erklæring om underliggende årsag ser ud
Ikke "overvej at optimere dine billeder". Dette er det faktiske output. Specifikt nok til at blive gennemgået og flettet.
Underliggende årsag:
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-beviser:
LCP er 3.820ms (dårlig) på mobil, p75. Load Delay er flaskehalsen ved 1.980ms (52 % af det samlede). Prioritetstilstand: 3 (ikke preloaded). Tendens: forværres +340ms over 7 dage.
Chrome-beviser:
Netværksvandfald viser et 1.940ms hul mellem HTML's første byte og billedanmodningen. Billedet refereres kun i CSS, usynligt for preload-scanneren.
Rettelse:
Tilføj <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> i templates/product.html på linje 12. Angiv fetchpriority="high" på img-elementet på linje 47.
Generelt AI-råd:
"Overvej at tilføje fetchpriority til dit LCP-billede, og sørg for korrekt preloading af kritiske ressourcer."
CWV Superpowers:
Element: div.hero-banner > img.product-main
Fil: templates/product.html, line 47
Bevis: 52 % af LCP-tiden i Load Delay (CoreDash p75). 1.940ms opdagelseshul (Chrome-vandfald).
Rettelse: 2-linjers kodeændring med før/efter diff.
Sammenlign: Hvordan CWV Superpowers klarer sig
Forskellige værktøjer løser forskellige problemer. Her er, hvad hver enkelt rent faktisk gør.
| Funktion | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Datakilde | Rigtige brugere (28 dages feltdata) | Enkelt lab-session | Simuleret enkelt indlæsning |
| INP-måling | ✓ Rigtige interaktioner | ✗ Ingen rigtige brugere | ✗ Ikke målt |
| Faseopdeling | ✓ LCP-, INP-, CLS-faser | ~ Manuel analyse | ✗ Kun score |
| Elementtilskrivning | ✓ Præcist element + prioritet | ~ Hvis du ved, hvor du skal lede | ~ Generelle forslag |
| Proportional ræsonnering | ✓ Flaskehals i % | ✗ Absolutte værdier | ✗ Absolutte værdier |
| Segmentsammenligning | ✓ Enhed, land, browser | ✗ Enkelt konfiguration | ✗ Enkelt konfiguration |
| Tendensdetektion | ✓ 7-dages delta | ✗ Øjebliksbillede | ✗ Øjebliksbillede |
| Chrome-tracing | ✓ Målrettet efter fase | ✓ Fuld adgang | ✗ Ingen browser |
| Koderettelser | ✓ Fil + linje + diff | ~ Agentafhængig | ~ Generelt råd |
Bemærk: Chrome DevTools MCP er komplementær. CWV Superpowers bruger den til målrettet tracing, efter feltdata 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 metrik-kort, faseopdelingsdiagrammer, filmstrip-skærmbilleder på vigtige tidspunkter (first paint, LCP, indlæst), netværksvandfald-SVG, analyse af underliggende årsag og den anbefalede rettelse med før/efter-kode.
RUM-Only rapport
Samme metrik-kort og faseopdeling, plus elementtilskrivning og analyse af underliggende årsag. Ingen filmstrip eller vandfald, men diagnosekvaliteten er identisk, fordi feltdata er sandhedskilden.
Fungerer med enhver MCP-klient
Claude Code: Fuld skill med automatiseret workflow. Opdagelse, diagnostik, Chrome-tracing, koderettelser og rapporter. Anbefalet.
Cursor: Plugin-installation med CoreDash MCP. Fuld diagnostik og koderettelser direkte i din editor.
VS Code, Windsurf, Gemini CLI: Enhver klient, der understøtter HTTP MCP-servere, kan oprette forbindelse til CoreDash. Samme feltdata, samme tilskrivning.
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."
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."
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.
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, 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."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
Kører på 2 minutter
Automatiseret Core Web Vitals-diagnostik i din terminal. Du skal have en CoreDash-konto med dataflow. Den gratis version fungerer.
Claude Code
# 1. Tilføj CoreDash MCP-server claude mcp add --transport http coredash \ https://app.coredash.app/api/mcp \ --header "Authorization: Bearer cdk_YOUR_API_KEY" # 2. Installer CWV Superpowers /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpower # 3. Start med Chrome (valgfrit, anbefales) claude --chrome # 4. Kør Find my biggest CWV issue and fix it.
Få din API-nøgle fra CoreDash → Project Settings → API Keys (MCP). Vises kun én gang. Gemmes som SHA-256 hash. Skrivebeskyttet.
Cursor
# Installer plugin
/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 web performance-endpoint, til enhver agent.
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 feltdata-diagnose, faseopdelinger, elementtilskrivning og forslag til koderettelser udelukkende baseret på CoreDash-data. Chrome tilføjer filmstrip-skærmbilleder, netværksvandfald og visuel bekræftelse af den underliggende årsag. Begge tilstande genererer rapporter.
Hvordan adskiller dette 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 real user-data fra CoreDash: faktiske enheder, faktiske netværk, faktiske interaktioner. Den måler INP fra rigtige brugertryk (Lighthouse kan ikke). Den sammenligner segmenter (mobil vs. desktop, Indien vs. USA). Og den bruger proportional ræsonnering til at finde flaskehalsfasen, ikke kun absolutte scores.
Hvilke AI-kodeagenter understøttes?
Enhver AI-kodeagent til web performance, der understøtter MCP-servere (Model Context Protocol). Claude Code har en dedikeret skill med et automatiseret 5-trins workflow. Cursor, VS Code (Copilot agent mode), Windsurf, Gemini CLI og Claude Desktop forbinder via CoreDash HTTP MCP-endpointet. Feltdataene og tilskrivningen er identiske på tværs af alle klienter.
Er CoreDash gratis?
CoreDash har en gratis version, der fungerer med CWV Superpowers. Du skal have dataflow fra dit site (tilføj CoreDash-script-tagget). Den gratis version har ingen stikprøver og ingen sidevisningslofter. API-nøgler til MCP-adgang er tilgængelige i alle abonnementer.
Kan jeg bruge dette 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 specifikke projekt. CWV Superpowers er MIT-licenseret, så der er ingen begrænsninger for kommerciel brug.
Open Source. Ingen lock-in.
Core Web Vitals-automatisering, du kan inspicere og udvide. Orkestratoren, diagnosemodulerne, Chrome-tracing-logikken og rapportskabelonerne findes alle på GitHub. Læs hvordan det virker. Fork det. Udvid det. Bidrag.
Start din gratis prøveperiode Se på GitHub