Din AI-agent har lige fået Core Web Vitals Superkræfter
Forbind Claude Code til dine CoreDash feltdatamålinger. Den finder din værste flaskehals på tværs af millioner af sidevisninger, sporer årsagen i Chrome og skriver rettelsen. Ikke en rapport. Den faktiske kodelinje, der skal ændres.
Installer på 2 minutter Start gratis CoreDash-prøveperiode »Trusted by market leaders · Client results
AI Performance Tools har et dataproblem
De fleste AI-agenter optimerer til Lighthouse. En syntetisk score på en simuleret enhed, som Google ikke bruger til placeringer. Dine rigtige brugere er på budgettelefoner, upålidelige forbindelser og kontinenter, som din udviklingsmaskine aldrig har set.
Lighthouse er ikke dit rangeringssignal
Google rangerer på CrUX feltdatamålinger fra rigtige Chrome-brugere over 28 dage. En perfekt Lighthouse-score og en dumpende feltscore sker hele tiden. 52% af mobilsider dumper på mindst én Core Web Vital i felten.
Blinde agenter laver blinde rettelser
Uden real user data 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 undersøgelse tager timer
Segmentér dataene. Opstil en hypotese. Kør en sporing (trace). Bekræft. Udkast til rettelsen. En senior performance engineer bruger 2 til 4 timer per problem. Gang det med hver langsom side på dit website.
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. Feltdatamålinger er den eneste kilde.
To kilder til sandhed: Feltdatamålinger møder browser-beviser
CWV Superpowers kombinerer CoreDash real user data med målrettede Chrome-spor (traces). Feltdatamålingerne fortæller hvad der er langsomt. Chrome fortæller hvorfor.
CoreDash fortæller agenten, hvad der er langsomt
CoreDash sporer hver eneste sideindlæsning fra hver eneste rigtige bruger. Hver metrik tilskrives det præcise element, der forårsager problemet. Ingen stikprøver (sampling), ingen grænser.
Når CoreDash rapporterer en LCP på 4,2 sekunder, hvor Load Delay bruger 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.
Denne skill forespørger 25+ CoreDash-dimensioner: LCP-element, elementtype, prioritetstilstand, fasedeling, 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: Hurtig 3G, 4x CPU-drosling (throttling). Den sporer kun den flaskehals-fase, som CoreDash identificerede.
Er Load Delay flaskehalsen? Agenten undersøger netværkets vandfald for discovery-huller. Render Delay? Den leder efter blokerende scripts og forsinkelser ved indlæsning af skrifttyper.
Resultatet: filmstrip-skærmbilleder, netværksvandfald og målrettede beviser, der forklarer den grundlæggende årsag, som dine feltdatamålinger afslørede.
Proportional ræsonnering, ikke absolutte grænseværdier
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 dette flytter nålen. At optimere Input Delay registreres knap nok.
Dette forhindrer den mest almindelige fejl i performance-arbejde: at rette det forkerte problem.
Fem trin: Fra "noget er langsomt" til koderettelse
Stil den et spørgsmål. Fem trin senere har du en rettelse bakket op af beviser fra rigtige brugere.
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 resultater.
2. Diagnose
Opdeler metrikken i faser. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Navngiver flaskehalsen ud fra procentdel.
3. Chrome Trace
Besøger siden med mobilemulering. Sporer kun flaskehals-fasen fra trin 2. Fanger netværksvandfald, filmstrip og beviser for blokerende ressourcer.
4. Grundlæggende årsag
Kombinerer begge beviskilder til én udtalelse: elementet, årsagen, CoreDash-metrikkerne og hvad Chrome bekræftede. Ingen tvetydighed.
5. Rettelse eller rapport
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 feltdatamålinger 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 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 ForskydningstidspunktSegmenter
Enhedstype Land Browser OS Forbindelse Besøgstype SidestiTendenser
7-dages delta 28-dages basislinje Registrering af regressionDiagnose: Fasedeling for hver Core Web Vital
Ikke kun scores. Hver metrik er opdelt i faser ved hjælp af real user tilskrivning fra CoreDash.
LCP: Largest Contentful Paint
4-fase opdeling: TTFB, Load Delay, Load Time, Render Delay. Identificerer hvilken fase der forbruger den største del 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-tip, fjern lazy loading fra hero, optimer billedformat, ret render-blokerende script.
INP: Interaction to Next Paint
3-fase opdeling: Input Delay, Processing, Presentation. Den eneste metrik, du ikke kan simulere i et laboratorium. Feltdatamålinger 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 hovedtråden, udskyd evaluering, opdel hændelseshåndteringer (event handlers), content-visibility til 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ærdimentionel: 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 udtalelse om den grundlæggende årsag ser ud
Ikke "overvej at optimere dine billeder." Dette er det faktiske output. Specifikt nok til at gennemgå og flette (merge).
Grundlæggende årsag:
LCP-billedet div.hero-banner > img.product-main på /product/running-shoes-42 opdages 1.980ms for sent, fordi det mangler et preload-tip og ikke har fetchpriority="high".
CoreDash beviser:
LCP er 3.820ms (dårlig) på mobil, p75. Load Delay er flaskehalsen på 1.980ms (52% af totalen). Prioritetstilstand: 3 (ikke preloaded). Tendens: forværret +340ms over 7 dage.
Chrome beviser:
Netværksvandfald viser et hul på 1.940ms mellem HTML first byte og billedanmodning. Billede refereres kun i CSS, usynligt for preload-scanneren.
Rettelse:
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ådgivning:
"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, linje 47
Beviser: 52% af LCP-tid i Load Delay (CoreDash p75). 1.940ms discovery-hul (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 de hver især rent faktisk gør.
| Funktion | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Datakilde | Rigtige brugere (28 dages feltdatamålinger) | Enkelt laboratoriesession | Simuleret enkeltindlæsning |
| INP-måling | ✓ Rigtige interaktioner | ✗ Ingen rigtige brugere | ✗ Ikke målt |
| Fasedeling | ✓ LCP, INP, CLS faser | ~ Manuel analyse | ✗ Kun score |
| Elementtilskrivning | ✓ Præcist element + prioritet | ~ Hvis du ved, hvor du skal lede | ~ Generiske forslag |
| Proportional ræsonnering | ✓ Flaskehals i % | ✗ Absolutte værdier | ✗ Absolutte værdier |
| Segment-sammenligning | ✓ Enhed, land, browser | ✗ Enkelt konfiguration | ✗ Enkelt konfiguration |
| Tendens-registrering | ✓ 7-dages delta | ✗ Øjebliksbillede | ✗ Øjebliksbillede |
| Chrome-sporing (tracing) | ✓ Målrettet efter fase | ✓ Fuld adgang | ✗ Ingen browser |
| Koderettelser | ✓ Fil + linje + diff | ~ Agent-afhængig | ~ Generisk rådgivning |
Bemærk: Chrome DevTools MCP er komplementær. CWV Superpowers bruger den til målrettet sporing, efter at feltdatamålinger 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 over fasedeling, filmstrip-skærmbilleder på vigtige tidspunkter (first paint, LCP, loaded), netværksvandfald SVG, analyse af grundlæggende årsag og den anbefalede rettelse med før/efter-kode.
Kun-RUM-rapport
Samme metrikkort og fasedeling plus elementtilskrivning og analyse af grundlæggende årsag. Ingen filmstrip eller vandfald, men diagnosekvaliteten er identisk, fordi feltdatamålinger er kilden til sandhed.
Fungerer med enhver MCP-klient
Claude Code: Fuld skill med automatiseret workflow. Opdagelse, diagnose, Chrome-sporing, koderettelser og rapporter. Anbefales.
Cursor: Plugin-installation med CoreDash MCP. Fuld diagnose og koderettelser inde i din editor.
VS Code, Windsurf, Gemini CLI: Enhver klient, der understøtter HTTP MCP-servere, forbinder til CoreDash. Samme feltdatamålinger, samme tilskrivning.
Client Success
Don't just take my word for it
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.
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."
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."
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 Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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."
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."
Kører på 2 minutter
Du skal bruge en CoreDash-konto, hvor der strømmer data ind. Den gratis version fungerer fint.
Claude Code
claude mcp add --transport http coredash \
https://app.coredash.app/api/mcp \
--header "Authorization: Bearer cdk_YOUR_API_KEY"
/install corewebvitals/cwv-superpowers
claude --chrome
Find my biggest CWV issue and fix it. Hent din API-nøgle fra CoreDash → Project Settings → API Keys (MCP). Vises kun én gang. Gemmes som SHA-256 hash. Read-only.
Cursor
/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.
Ofte stillede spørgsmål
Skal jeg have Chrome kørende for at bruge CWV Superpowers?
Nej. Chrome-sporing er valgfrit. Uden det får du fuld diagnose med feltdatamålinger, fasedeling, elementtilskrivning og forslag til koderettelser udelukkende baseret på CoreDash-data. Chrome tilføjer filmstrip-skærmbilleder, netværksvandfald og visuel bekræftelse af den grundlæggende å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 (hvilket Lighthouse ikke kan). Den sammenligner segmenter (mobil vs. desktop, Indien vs. USA). Og den bruger proportional ræsonnering til at finde flaskehals-fasen, ikke kun absolutte scores.
Hvilke AI-kodningsagenter understøttes?
Enhver agent, der understøtter MCP-servere (Model Context Protocol). Claude Code har en dedikeret skill med et automatiseret workflow i 5 trin. Cursor, VS Code (Copilot agent mode), Windsurf, Gemini CLI og Claude Desktop forbinder via CoreDash HTTP MCP-endpointet. Feltdatamålingerne og tilskrivningen 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 website (tilføj CoreDash-script-tagget). Den gratis version har ingen stikprøver (sampling) og ingen begrænsninger på sidevisninger. API-nøgler til MCP-adgang er tilgængelige på alle planer.
Kan jeg bruge dette til kundesites?
Ja. Hvert CoreDash-projekt har sin egen API-nøgle. Tilføj CoreDash til hvert kundesite, generer en read-only 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 fastlåsning.
Orkestratoren, diagnosemodulerne, Chrome-sporingslogikken og rapportskabelonerne. Alt sammen på GitHub. Læs, hvordan det fungerer. Fork det. Udvid det. Bidrag.
Stop med at gætte. Begynd at diagnosticere.
Den undersøgelse, der tager en senior performance engineer 2 til 4 timer, sker nu i en samtale. Agenten gør benarbejdet. Du gennemgår og fletter (merger).
Start din gratis prøveperiode Vis på GitHub