Din AI-agent fick precis Core Web Vitals-superkrafter
Anslut Claude Code till din CoreDash field data. Den hittar din värsta flaskhals bland miljontals sidladdningar, spårar rotorsaken i Chrome och skriver fixen. Agentisk webbprestanda är inte en rapport, utan den faktiska kodraden som behöver ändras.
Installera på 2 minuter Starta gratis testperiod för CoreDash »Trusted by market leaders · Client results
AI-prestandaverktyg har ett dataproblem
De flesta AI-agenter optimerar för Lighthouse. En syntetisk poäng på en simulerad enhet som Google inte använder för rankning. En användbar AI-agent för webbprestanda utgår från samma data som Google: verkliga användare på budgetmobiler, svajiga uppkopplingar och kontinenter som din utvecklardator aldrig har sett.
Lighthouse är inte din rankningssignal
Google rankar på CrUX field data från verkliga Chrome-användare under 28 dagar. En perfekt Lighthouse-poäng och ett underkänt resultat i field data händer hela tiden. 52 % av alla mobilsajter misslyckas med minst en Core Web Vital i field data.
Blinda agenter gör blinda fixar
Utan verklig användardata vet en AI-agent inte vilken sida som är långsam, vilket element som är flaskhalsen eller om dess fix hjälpte. Den optimerar en simulering och nöjer sig med det. Dina faktiska användare håller inte med.
Manuell felsökning tar timmar
Segmentera datan. Formulera en hypotes. Kör en trace. Bekräfta. Förbered en fix. En senior prestandaingenjör lägger 2 till 4 timmar per problem. Multiplicera det med varje långsam sida på din sajt.
INP kan inte alls simuleras i ett labb Interaction to Next Paint mäter hur verkliga användare interagerar med din sida. Inget syntetiskt verktyg kan återskapa verkligt användarbeteende: var de trycker, hur snabbt de scrollar, vilken enhet de håller. Lighthouse rapporterar inte ens INP. Om din AI-agent kör Lighthouse är den blind för dina värsta interaktivitetsproblem. Field data är den enda källan.
Två källor till sanning: Field data möter webbläsarbevis
CWV Superpowers kombinerar CoreDash-data från verkliga användare med riktade Chrome-spårningar. Field data berättar vad som är långsamt. Chrome berättar varför.
CoreDash berättar för agenten vad som är långsamt
CoreDash spårar varje sidladdning från varje verklig användare. Varje metrik kopplas till det exakta elementet som orsakar problemet. Ingen sampling, inga tak.
När CoreDash rapporterar en LCP på 4,2 sekunder där Load Delay utgör 52 % av den totala tiden på div.hero > img.main, vet agenten exakt var den ska leta. Ingen gissning. En mätning från miljontals verkliga sessioner.
Färdigheten analyserar 25+ CoreDash-dimensioner: LCP-element, elementtyp, prioriteringsstatus, fasuppdelning, INP-interaktionsmål, LOAF-skript, skiftande CLS-element, enhetstyp, besökartyp, nätverkshastighet, 7-dagars-trender.
Chrome berättar för agenten varför det är långsamt
CWV Superpowers besöker sidan med mobilemulering: Fast 3G, 4x CPU-strypning. Den spårar endast den flaskhalsfas som CoreDash identifierade.
Är Load Delay flaskhalsen? Agenten undersöker nätverksvattenfallet efter upptäcktsluckor. Render Delay? Den letar efter blockerande skript och fördröjningar i typsnittsinläsningen.
Resultatet: filmstrip-skärmdumpar, nätverksvattenfall och riktade bevis som förklarar den bakomliggande orsaken som din field data avslöjade.
Proportionella resonemang, inte absoluta tröskelvärden
Lighthouse berättar för dig: ”Render Delay är 350 ms.” Är det problemet? Ingen aning. CWV Superpowers identifierar flaskhalsen som den fas som tar upp störst procentandel av den totala tiden.
INP är 350 ms. Input Delay 70 ms (20 %), Processing 80 ms (23 %), Presentation 200 ms (57 %). Presentation är flaskhalsen, även om 200 ms låter bra i sig självt. Att åtgärda det gör skillnad. Att optimera Input Delay märks knappt.
Detta förhindrar det vanligaste misstaget inom prestandaarbete: att fixa fel sak.
Fem steg: Från ”något är långsamt” till kodfix
Ställ en fråga. Fem steg senare har du en fix baserad på bevis från riktiga användare.
1. Upptäckt
Skannar dina CoreDash-data efter de sämsta sidorna och mätvärdena. Prioriterar dåliga betyg, mobil, högtrafikerade sidor och p75-värden som döljer en lång, dålig svans.
2. Diagnos
Delar upp mätvärdet i faser. LCP: TTFB, Laddningsfördröjning, Laddningstid, Renderingsfördröjning. INP: Inmatningsfördröjning, Bearbetning, Presentation. Anger flaskhalsen i procent.
3. Chrome-spårning
Besöker sidan med mobil emulering. Spårar endast flaskhalsfasen från steg 2. Fångar nätverksvattenfall, filmremsa och bevis på blockerande resurser.
4. Grundorsak
Kombinerar båda beviskällorna till en beskrivning: elementet, orsaken, CoreDash-mätvärdena och vad Chrome bekräftade. Ingen tvetydighet.
5. Fixa eller rapportera
Ditt val. Applicera kodfixen med fil, rad, element, före/efter. Generera en fristående HTML-rapport med diagram och bevis. Eller båda.
25+ dimensioner: Varje vinkel din field data täcker
Det här är de faktiska CoreDash-dimensionerna agenten efterfrågar. Ingen sammanfattning. Hela bilden.
LCP (Largest Contentful Paint)
LCP-element Elementtyp Prioriteringsstatus TTFB-fas Laddningsfördröjning Laddningstid RenderingsfördröjningINP (Interaction to Next Paint)
INP-mål Inmatningsfördröjning Bearbetning Presentation LOAF-skript LaddningsstatusCLS (Cumulative Layout Shift)
Skiftande element Skiftorsak SkifttidpunktSegment
Enhetstyp Land Webbläsare OS Anslutning Besökstyp SidsökvägTrender
7-dagarsdelta 28-dagarsbaslinje RegressionsdetekteringDiagnostisera: Fasuppdelning för varje Core Web Vital
Inte bara poäng. Varje mätetal delas upp i faser med attribuering från verkliga användare i CoreDash.
Fixa LCP med AI: Diagnos för Largest Contentful Paint
Uppdelning i 4 faser: TTFB, laddningsfördröjning, laddningstid, renderingsfördröjning. Identifierar vilken fas som tar störst del av den totala tiden.
Elementattribuering: det exakta LCP-elementet, dess typ (bild, text, bakgrundsbild, video) samt prioritetsstatus (fetchpriority, lazy loading).
Typiska åtgärder: lägg till preload-ledtråd, ta bort lazy loading från hero-bilden, optimera bildformatet, åtgärda render-blocking skript.
Fixa INP med AI: Diagnos för Interaction to Next Paint
Uppdelning i 3 faser: inmatningsfördröjning, bearbetning, presentation. Det enda mätetalet du inte kan simulera i ett labb. Field data är den enda källan.
Skriptattribuering: Long Animation Frames (LOAF) anger den exakta JavaScript-filen och dess varaktighet. Plus sidans laddningstillstånd när interaktionen skedde.
Typiska åtgärder: yielda till main thread, skjut upp evalueringen, dela upp eventhanterare, content-visibility för stora DOM-träd.
CLS: Cumulative Layout Shift
5 orsaksmönster: bilder utan dimensioner, typsnittsbyten, dynamiskt injicerat innehåll, resurser som laddas sent, CSS-animeringar på layoutegenskaper.
Korsdimensionell: jämför mobil mot dator, nya mot återkommande besökare, snabba mot långsamma nätverk för att ringa in orsaken.
Typiska åtgärder: lägg till width/height, font-display: optional, min-height-reservering, använd transform istället för top/left.
Så här ser en rotorsaksbeskrivning ut
Inte ”överväg att optimera dina bilder”. Det här är det faktiska resultatet. Tillräckligt specifikt för att granska och merga.
Rotorsak:
LCP-bilden div.hero-banner > img.product-main på /product/running-shoes-42 upptäcks 1 980 ms för sent eftersom den saknar preload-hint och saknar fetchpriority="high".
CoreDash-bevis:
LCP är 3 820 ms (dålig) på mobil, p75. Laddningsfördröjningen är flaskhalsen på 1 980 ms (52 % av totalen). Prioriteringsstatus: 3 (inte preloaded). Trend: försämring på +340 ms under 7 dagar.
Chrome-bevis:
Nätverksvattenfallet visar ett glapp på 1 940 ms mellan HTML:ens första byte och bildförfrågan. Bilden refereras endast i CSS, osynlig för preload-scannern.
Åtgärd:
Lägg till <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> i templates/product.html på rad 12. Sätt fetchpriority="high" på img-elementet på rad 47.
Generiskt AI-råd:
”Överväg att lägga till fetchpriority på din LCP-bild och säkerställ korrekt preloading av kritiska resurser.”
CWV-superkrafter:
Element: div.hero-banner > img.product-main
Fil: templates/product.html, rad 47
Bevis: 52 % av LCP-tiden i laddningsfördröjning (CoreDash p75). 1 940 ms upptäcktsglapp (Chrome-vattenfall).
Åtgärd: Kodändring på 2 rader med före/efter-diff.
Jämför: Så står sig CWV Superpowers
Olika verktyg löser olika problem. Här är vad varje verktyg faktiskt gör.
| Förmåga | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Datakälla | Verkliga användare (28 dagars field data) | Enskild labbsession | Simulerad enskild laddning |
| INP-mätning | ✓ Verkliga interaktioner | ✗ Inga verkliga användare | ✗ Mäts inte |
| Fasuppdelning | ✓ LCP-, INP- och CLS-faser | ~ Manuell analys | ✗ Endast poäng |
| Elementattributering | ✓ Exakt element + prioritet | ~ Om du vet var du ska leta | ~ Generella förslag |
| Proportionell analys | ✓ Flaskhalsar i % | ✗ Absoluta värden | ✗ Absoluta värden |
| Segmentjämförelse | ✓ Enhet, land, webbläsare | ✗ Enskild konfiguration | ✗ Enskild konfiguration |
| Trenddetektering | ✓ 7-dagars delta | ✗ Ögonblicksbild | ✗ Ögonblicksbild |
| Chrome-spårning | ✓ Riktad efter fas | ✓ Full tillgång | ✗ Ingen webbläsare |
| Kodrättningar | ✓ Fil + rad + diff | ~ Agentberoende | ~ Generella råd |
Obs: Chrome DevTools MCP är komplementärt. CWV Superpowers använder det för riktad spårning efter att field data har identifierat flaskhalsen. De fungerar bäst tillsammans.
Rapporter: Dela i Slack, bifoga i Jira
Fristående HTML. Inga beroenden. Inget byggsteg. En fil med allt inline.
Fullständig rapport (med Chrome)
Färgkodade mätvärdeskort, diagram för fasuppdelning, filmstrip-skärmdumpar vid nyckelögonblick (första renderingen, LCP, laddad), nätverksvattenfall som SVG, rotorsaksanalys och den rekommenderade åtgärden med före/efter-kod.
Rapport med enbart RUM
Samma mätvärdeskort och fasuppdelning, plus elementattributering och rotorsaksanalys. Ingen filmstrip eller nätverksvattenfall, men diagnoskvaliteten är identisk eftersom field data är sanningskällan.
Fungerar med alla MCP-klienter
Claude Code: Komplett skill med automatiserat arbetsflöde. Upptäckt, diagnos, Chrome-spårning, kodrättningar och rapporter. Rekommenderas.
Cursor: Plugin-installation med CoreDash MCP. Fullständig diagnos och kodrättningar direkt i din editor.
VS Code, Windsurf, Gemini CLI: Alla klienter med stöd för HTTP MCP-servrar ansluter till CoreDash. Samma field data, samma attributering.
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.
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
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."
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."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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 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."
Igång på 2 minuter
Automatisk Core Web Vitals-diagnos i din terminal. Du behöver ett CoreDash-konto med aktivt dataflöde. Gratisnivån fungerar.
Claude Code
# 1. Lägg till CoreDash MCP-server (webbläsarinloggning, ingen API-nyckel) claude mcp add --transport http coredash https://app.coredash.app/api/mcp # 2. Installera CWV Superpowers /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpowers # 3. Starta med Chrome (valfritt, rekommenderas) claude --chrome # 4. Kör Hitta mitt största CWV-problem och fixa det.
Vid första anslutningen kör du /mcp, väljer coredash och väljer Authenticate. Din webbläsare öppnar CoreDash-inloggningen, du väljer ett projekt och godkänner, och Claude Code sparar en kortlivad OAuth-token som förnyas automatiskt (1 timmes åtkomst, 30 dagars förnyelse) och kan återkallas. Ingen nyckel att klistra in.
Föredrar du en API-nyckel för headless- eller CI-användning? Lägg till --header "Authorization: Bearer cdk_YOUR_API_KEY" i kommandot, genererad under CoreDash → Project Settings → API Keys (MCP). Visas bara en gång. Lagras som en SHA-256-hash. Skrivskyddad.
Cursor
# Installera pluginet
/plugin-add cwv-superpowers
Lägg till CoreDash i .cursor/mcp.json:
{
"mcpServers": {
"coredash": {
"url": "https://app.coredash.app/api/mcp",
"headers": {
"Authorization": "Bearer cdk_YOUR_API_KEY"
}
}
}
}
Andra MCP-klienter
Endpoint: https://app.coredash.app/api/mcp
Header: Authorization: Bearer cdk_YOUR_API_KEY
Fungerar med VS Code (Copilot-agentläge), Windsurf, Gemini CLI, Claude Desktop och valfri HTTP MCP-klient. En MCP-endpoint för webbprestanda, för varje agent.
Vanliga frågor
Behöver Chrome vara igång för att använda CWV Superpowers?
Nej. Chrome-tracing är valfritt. Utan den får du fullständig field data-diagnostik, fasuppdelningar, elementattributering och förslag på kodfixar enbart baserat på CoreDash-data. Chrome lägger till filmstrip-skärmdumpar, nätverksvattenfall och visuell bekräftelse av grundorsaken. Båda lägena genererar rapporter.
Hur skiljer sig detta från att köra Lighthouse i min AI-agent?
Lighthouse kör en enda syntetisk laddning på din dator. CWV Superpowers använder 28 dagars verklig användardata från CoreDash: faktiska enheter, faktiska nätverk, faktiska interaktioner. Det mäter INP från verkliga användartryck (Lighthouse kan inte det). Det jämför segment (mobil mot dator, Indien mot USA). Och det använder proportionellt resonemang för att hitta flaskhalsfasen, inte bara absoluta poäng.
Vilka AI-kodningsagenter stöds?
Alla AI-kodningsagenter för webbprestanda som stöder MCP-servrar (Model Context Protocol). Claude Code har en dedikerad skill med ett automatiserat arbetsflöde i 5 steg. Cursor, VS Code (Copilot-agentläge), Windsurf, Gemini CLI och Claude Desktop ansluter via CoreDash HTTP MCP-slutpunkten. Field data och attributering är identiska för alla klienter.
Är CoreDash gratis?
CoreDash har en gratisnivå som fungerar med CWV Superpowers. Du behöver ha data som flödar från din webbplats (lägg till CoreDash-scripttaggen). Gratisnivån har ingen sampling och inget tak för sidvisningar. API-nycklar för MCP-åtkomst ingår i alla planer.
Kan jag använda detta på kundwebbplatser?
Ja. För varje CoreDash-projekt kan du skapa obegränsat antal dedikerade MVP API-nycklar . Lägg till CoreDash på varje kundwebbplats, generera en skrivskyddad API-nyckel och konfigurera din MCP-klient. Agenten ser endast data för det projektet. CWV Superpowers är MIT-licensierat, så det finns inga begränsningar för kommersiell användning.
Öppen källkod. Ingen inlåsning.
Core Web Vitals-automatisering som du kan granska och bygga ut. Orkestreraren, diagnosmodulerna, Chrome tracing-logiken och rapportmallarna finns alla på GitHub. Läs hur det fungerar. Forka. Bygg ut. Bidra.
Starta din kostnadsfria provperiod Visa på GitHub