AI-agenten din fikk nettopp Core Web Vitals-superkrefter
Koble Claude Code til dine CoreDash-feltdata. Den finner din verste flaskehals på tvers av millioner av sidevisninger, sporer rotårsaken i Chrome og skriver inn fiksene. Agentdrevet web performance – ikke en rapport, men den faktiske kodelinjen som må endres.
Installer på 2 minutter Start gratis CoreDash-prøveperiode »Trusted by market leaders · Client results
AI-verktøy for ytelse har et dataproblem
De fleste AI-agenter optimaliserer for Lighthouse. En syntetisk score på en simulert enhet som Google ikke bruker for rangering. En nyttig AI-agent for web performance starter med de samme dataene som Google gjør: ekte brukere på billige telefoner, ustabile tilkoblinger, og kontinenter utviklermaskinen din aldri har sett.
Lighthouse er ikke ditt rangeringssignal
Google rangerer på CrUX-feltdata fra ekte Chrome-brukere over 28 dager. En perfekt Lighthouse-score og en strykkarakter i feltet skjer hele tiden. 52 % av mobilsider stryker på minst én Core Web Vital i feltet.
Blinde agenter gjør blinde fikser
Uten ekte brukerdata vet ikke en AI-agent hvilken side som er treg, hvilket element som er flaskehalsen, eller om fiksen faktisk hjalp. Den optimaliserer en simulering og sier seg ferdig. Dine faktiske brukere er uenige.
Manuelle undersøkelser tar timer
Segmenter dataene. Lag hypoteser. Kjør en trace. Bekreft. Skriv fiksen. En senior performance engineer bruker 2 til 4 timer per problem. Ganger du det med hver trege side på nettstedet ditt, blir det mange timer.
INP kan overhodet ikke simuleres i en lab. Interaction to Next Paint måler hvordan ekte brukere samhandler med siden din. Ingen syntetiske verktøy kan replikere ekte brukeratferd: hvor de trykker, hvor fort de scroller, hvilken enhet de holder. Lighthouse rapporterer ikke engang INP. Hvis AI-agenten din kjører Lighthouse, er den blind for dine verste interaktivitetsproblemer. Feltdata er den eneste kilden.
To sannhetskilder: Feltdata møter nettleserbevis
CWV Superpowers kombinerer ekte brukerdata fra CoreDash med målrettede Chrome-traces. Feltdataene forteller hva som er tregt. Chrome forteller hvorfor.
CoreDash forteller agenten hva som er tregt
CoreDash sporer hver sidevisning fra hver ekte bruker. Hver metrikk tilskrives det nøyaktige elementet som forårsaker problemet. Ingen sampling, ingen begrensninger.
Når CoreDash rapporterer en LCP på 4,2 sekunder, der Load Delay forbruker 52 % av den totale tiden på div.hero > img.main, vet agenten nøyaktig hvor den skal lete. Ikke gjetting. En måling fra millioner av ekte økter.
Skillen spør etter mer enn 25 CoreDash-dimensjoner: LCP-element, elementtype, prioritetstilstand, fasefordeling, INP-interaksjonsmål, LOAF-scripts, CLS-forskyvningselement, enhetstype, besøkstype, nettverkshastighet og 7-dagerstrender.
Chrome forteller agenten hvorfor det er tregt
CWV Superpowers besøker siden med mobilemulering: Fast 3G, 4x CPU-throttling. Den sporer kun den flaskehalsfasen som CoreDash identifiserte.
Er Load Delay flaskehalsen? Agenten undersøker nettverksfossen for oppdagelseshull. Render Delay? Den ser etter blokkerende scripts og forsinkelser ved innlasting av fonter.
Resultatet: filmstripe-skjermbilder, nettverksfoss og målrettede bevis som forklarer rotårsaken som feltdataene dine avdekket.
Proporsjonal resonnering, ikke absolutte terskler
Lighthouse forteller deg: "Render Delay er 350ms." Er det problemet? Aner ikke. CWV Superpowers identifiserer flaskehalsen som den fasen som forbruker den største prosentandelen av den totale tiden.
INP er 350ms. Input Delay 70ms (20 %), Processing 80ms (23 %), Presentation 200ms (57 %). Presentation er flaskehalsen, selv om 200ms høres greit ut isolert sett. Å fikse det vil utgjøre en forskjell. Å optimalisere Input Delay merkes knapt.
Dette forhindrer den vanligste feilen i performance-arbeid: å fikse feil ting.
Fem trinn: Fra "noe er tregt" til kodefiks
Still den et spørsmål. Fem trinn senere har du en fiks støttet av bevis fra ekte brukere.
1. Oppdagelse
Skanner CoreDash-dataene dine etter de verste sidene og metrikkene. Prioriterer dårlige vurderinger, mobil, sider med høy trafikk og p75-scorer som skjuler en lang hale av dårlige opplevelser.
2. Diagnostisering
Deler metrikken inn i faser. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Navngir flaskehalsen i prosent.
3. Chrome Trace
Besøker siden med mobilemulering. Sporer kun flaskehalsfasen fra trinn 2. Fanger opp nettverksfoss, filmstripe og bevis for blokkerende ressurser.
4. Rotårsak
Kombinerer begge beviskildene til én konklusjon: elementet, årsaken, CoreDash-metrikkene og hva Chrome bekreftet. Ingen tvetydighet.
5. Fiks eller Rapport
Ditt valg. Påfør kodefiksen med fil, linje, element, før/etter. Generer en selvstendig HTML-rapport med diagrammer og bevis. Eller begge deler.
25+ dimensjoner: Hver vinkel feltdataene dine dekker
Dette er de faktiske CoreDash-dimensjonene agenten spør etter. Ikke et sammendrag. Hele bildet.
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 LastetilstandCLS (Cumulative Layout Shift)
Forskyvende element Forskyvningsårsak ForskyvningstidspunktSegmenter
Enhetstype Land Nettleser Operativsystem Tilkobling Besøkstype SidestiTrender
7-dagers delta 28-dagers grunnlinje RegresjonsdeteksjonDiagnostiser: Fasefordeling for hver Core Web Vital
Ikke bare scorer. Hver metrikk brytes ned i faser ved bruk av attribusjon fra ekte brukere fra CoreDash.
Fiks LCP med AI: Largest Contentful Paint-diagnostisering
4-fasefordeling: TTFB, Load Delay, Load Time, Render Delay. Identifiserer hvilken fase som forbruker størst andel av den totale tiden.
Elementattribusjon: det nøyaktige LCP-elementet, elementets type (bilde, tekst, bakgrunnsbilde, video), og prioritetstilstand (fetchpriority, lazy loading).
Typiske fikser: legg til preload-hint, fjern lazy loading fra hero, optimaliser bildeformat, fiks render-blokkerende script.
Fiks INP med AI: Interaction to Next Paint-diagnostisering
3-fasefordeling: Input Delay, Processing, Presentation. Den eneste metrikken du ikke kan simulere i en lab. Feltdata er den eneste kilden.
Script-attribusjon: Long Animation Frames (LOAF) navngir den nøyaktige JavaScript-filen og varigheten. Samt sidens lastetilstand da interaksjonen skjedde.
Typiske fikser: yield til hovedtråden, utsett evaluering, splitt hendelseshåndterere, content-visibility for store DOM-er.
CLS: Cumulative Layout Shift
5 årsaksmønstre: bilder uten dimensjoner, fontbytter, dynamisk injisert innhold, ressurser som lastes sent, CSS-animasjoner på layout-egenskaper.
Kryssdimensjonal: sammenligner mobil vs. desktop, nye vs. tilbakevendende besøkende, raske vs. trege nettverk for å snevre inn årsaken.
Typiske fikser: legg til width/height, font-display: optional, reservasjon av min-height, bruk transform i stedet for top/left.
Hvordan en rotårsakskonklusjon ser ut
Ikke "vurder å optimalisere bildene dine." Dette er det faktiske resultatet. Spesifikt nok til å gjennomgås og merges.
Rotårsak:
LCP-bildet div.hero-banner > img.product-main på /product/running-shoes-42 oppdages 1980 ms for sent fordi det mangler et preload-hint og ikke har fetchpriority="high".
CoreDash-bevis:
LCP er 3820 ms (dårlig) på mobil, p75. Load Delay er flaskehalsen med 1980 ms (52 % av totalen). Prioritetstilstand: 3 (ikke preloadet). Trend: forverret med +340 ms over 7 dager.
Chrome-bevis:
Nettverksfossen viser et gap på 1940 ms mellom HTML first byte og bildeforespørselen. Bildet refereres kun i CSS, og er usynlig for preload-skanneren.
Fiks:
Legg til <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> i templates/product.html linje 12. Sett fetchpriority="high" på img-elementet på linje 47.
Generisk AI-råd:
"Vurder å legge til fetchpriority på LCP-bildet ditt og sørg for riktig preloading av kritiske ressurser."
CWV Superpowers:
Element: div.hero-banner > img.product-main
Fil: templates/product.html, linje 47
Bevis: 52 % av LCP-tiden i Load Delay (CoreDash p75). 1940 ms oppdagelsesgap (Chrome nettverksfoss).
Fiks: 2-linjers kodeendring med diff før/etter.
Sammenlign: Hvordan CWV Superpowers måler seg
Ulike verktøy løser ulike problemer. Her er hva hver enkelt faktisk gjør.
| Funksjonalitet | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Datakilde | Ekte brukere (28 dager med feltdata) | Enkel lab-økt | Simulert enkel lasting |
| INP-måling | ✓ Ekte interaksjoner | ✗ Ingen ekte brukere | ✗ Ikke målt |
| Fasefordeling | ✓ LCP-, INP-, CLS-faser | ~ Manuell analyse | ✗ Kun score |
| Elementattribusjon | ✓ Nøyaktig element + prioritet | ~ Hvis du vet hvor du skal lete | ~ Generiske forslag |
| Proporsjonal resonnering | ✓ Flaskehals i % | ✗ Absolutte verdier | ✗ Absolutte verdier |
| Segmentsammenligning | ✓ Enhet, land, nettleser | ✗ Enkel konfigurasjon | ✗ Enkel konfigurasjon |
| Trenddeteksjon | ✓ 7-dagers delta | ✗ Øyeblikksbilde | ✗ Øyeblikksbilde |
| Chrome tracing | ✓ Målrettet etter fase | ✓ Full tilgang | ✗ Ingen nettleser |
| Kodefikser | ✓ Fil + linje + diff | ~ Agent-avhengig | ~ Generisk råd |
Merk: Chrome DevTools MCP er komplementært. CWV Superpowers bruker det for målrettet tracing etter at feltdataene identifiserer flaskehalsen. De fungerer best sammen.
Rapporter: Legg dem i Slack, legg ved i Jira
Selvstendig HTML. Ingen avhengigheter. Ingen byggeprosess. Én fil med alt inkludert (inline).
Fullstendig rapport (med Chrome)
Fargekodede metrikk-kort, diagrammer for fasefordeling, filmstripe-skjermbilder ved viktige tidspunkter (first paint, LCP, ferdig lastet), nettverksfoss i SVG, rotårsaksanalyse og den anbefalte fiksen med før/etter-kode.
Rapport med kun RUM
Samme metrikk-kort og fasefordeling, pluss elementattribusjon og rotårsaksanalyse. Ingen filmstripe eller nettverksfoss, men diagnosekvaliteten er identisk fordi feltdataene er sannhetskilden.
Fungerer med alle MCP-klienter
Claude Code: Fullstendig skill med automatisert arbeidsflyt. Oppdagelse, diagnostisering, Chrome tracing, kodefikser og rapporter. Anbefales.
Cursor: Plugin-installasjon med CoreDash MCP. Full diagnostisering og kodefikser direkte i editoren din.
VS Code, Windsurf, Gemini CLI: Enhver klient som støtter HTTP MCP-servere, kan koble seg til CoreDash. Samme feltdata, samme attribusjon.
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."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
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 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."
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."
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."
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
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."
I gang på 2 minutter
Automatisert Core Web Vitals-diagnostisering i terminalen din. Du trenger en CoreDash-konto der data strømmer inn. Gratisversjonen fungerer utmerket.
Claude Code
# 1. Legg til 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 (valgfritt, anbefalt) claude --chrome # 4. Kjør Finn mitt største CWV-problem og fiks det.
Hent API-nøkkelen din fra CoreDash → Project Settings → API Keys (MCP). Vises kun én gang. Lagres som en SHA-256-hash. Skrivebeskyttet (read-only).
Cursor
# Installer pluginen
/plugin-add cwv-superpowers
Legg til CoreDash i .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-modus), Windsurf, Gemini CLI, Claude Desktop og alle HTTP MCP-klienter. Ett MCP-endepunkt for web performance, alle agenter.
Ofte stilte spørsmål
Trenger jeg å ha Chrome kjørende for å bruke CWV Superpowers?
Nei. Chrome tracing er valgfritt. Uten det får du full diagnostisering av feltdata, fasefordelinger, elementattribusjon og forslag til kodefikser utelukkende basert på CoreDash-data. Chrome tilfører filmstripe-skjermbilder, nettverksfoss og visuell bekreftelse på rotårsaken. Begge modusene genererer rapporter.
Hvordan er dette forskjellig fra å kjøre Lighthouse i AI-agenten min?
Lighthouse kjører én enkelt syntetisk innlasting på maskinen din. CWV Superpowers bruker 28 dager med ekte brukerdata fra CoreDash: faktiske enheter, faktiske nettverk, faktiske interaksjoner. Den måler INP fra ekte brukertrykk (noe Lighthouse ikke kan). Den sammenligner segmenter (mobil vs. desktop, India vs. USA). Og den bruker proporsjonal resonnering for å finne flaskehalsfasen, ikke bare absolutte scorer.
Hvilke AI-kodeagenter støttes?
Enhver AI-kodeagent for web performance som støtter MCP-servere (Model Context Protocol). Claude Code har en dedikert skill med en automatisert 5-trinns arbeidsflyt. Cursor, VS Code (Copilot agent-modus), Windsurf, Gemini CLI og Claude Desktop kobler seg til via CoreDash sitt HTTP MCP-endepunkt. Feltdataene og attribusjonen er identiske på tvers av alle klienter.
Er CoreDash gratis?
CoreDash har en gratisversjon som fungerer med CWV Superpowers. Du trenger data som strømmer fra nettstedet ditt (legg til CoreDash sin script-tag). Gratisversjonen har ingen sampling og ingen tak på sidevisninger. API-nøkler for MCP-tilgang er tilgjengelige på alle abonnementer.
Kan jeg bruke dette for kundesider?
Ja. For hvert CoreDash-prosjekt kan du opprette ubegrenset antall dedikerte MCP API-nøkler. Legg til CoreDash på hver kundeside, generer en skrivebeskyttet API-nøkkel og konfigurer MCP-klienten din. Agenten ser kun dataene for det spesifikke prosjektet. CWV Superpowers er MIT-lisensiert, så det er ingen begrensninger for kommersiell bruk.
Åpen kildekode. Ingen lock-in.
Automatisering av Core Web Vitals som du kan inspisere og utvide. Orkestratoren, diagnosemodulene, logikken for Chrome tracing, og rapportmalene ligger alle på GitHub. Les hvordan det fungerer. Fork det. Utvid det. Bidra.
Start din gratis prøveperiode Se på GitHub