Din AI-agent har precis fått Core Web Vitals-superkrafter
Anslut Claude Code till din fältdata från CoreDash. Den hittar din värsta flaskhals över miljontals sidvisningar, spårar grundorsaken i Chrome och skriver korrigeringen. Agentisk webbprestanda – inte en rapport, utan den faktiska kodraden som behöver ändras.
Installera på 2 minuter Starta din gratis CoreDash-provperiod »Trusted by market leaders · Client results
AI-prestandaverktyg har ett dataproblem
De flesta AI-agenter optimerar för Lighthouse. Ett syntetiskt poängvärde på en simulerad enhet som Google inte använder för sin ranking. En användbar AI-agent för webbprestanda utgår från samma data som Google: riktiga användare med budgettelefoner, svajiga uppkopplingar och världsdelar som din utvecklingsmaskin aldrig har sett.
Lighthouse är inte din rankingsignal
Google rankar baserat på CrUX-fältdata från riktiga Chrome-användare över 28 dagar. Ett perfekt Lighthouse-resultat och ett underkänt fältresultat är något som händer hela tiden. 52 % av alla mobilsajter misslyckas med minst en Core Web Vital i fält.
Blinda agenter gör blinda korrigeringar
Utan verklig användardata vet inte en AI-agent vilken sida som är långsam, vilket element som är flaskhalsen, eller om dess korrigering överhuvudtaget 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. Ställ upp hypoteser. Kör en spårning (trace). Bekräfta. Skissa fram korrigeringen. 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 simuleras i ett labb överhuvudtaget Interaction to Next Paint mäter hur riktiga användare interagerar med din sida. Inget syntetiskt verktyg kan återskapa verkligt användarbeteende: var de klickar, hur snabbt de skrollar, vilken enhet de håller i. Lighthouse rapporterar inte ens INP. Om din AI-agent kör Lighthouse är den blind för dina värsta interaktivitetsproblem. Fältdata är den enda källan.
Två källor till sanning: Fältdata möter webbläsarbevis
CWV Superpowers kombinerar verklig användardata från CoreDash med riktade Chrome-spårningar. Fältdatan 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 riktig användare. Varje mätvärde tillskrivs exakt det element som orsakar problemet. Ingen sampling, inga tak.
När CoreDash rapporterar en LCP på 4,2 sekunder där Load Delay förbrukar 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 riktiga sessioner.
Denna skill hämtar data från 25+ CoreDash-dimensioner: LCP-element, elementtyp, prioritetstillstånd, fasuppdelning, mål för INP-interaktion, LOAF-skript, CLS-skiftande element, enhetstyp, besökartyp, nätverkshastighet och 7-dagarstrender.
Chrome berättar för agenten varför det är långsamt
CWV Superpowers besöker sidan med mobilemulering: Snabb 3G, 4x CPU-strypning. Den spårar bara den flaskhalsfas som CoreDash identifierade.
Är Load Delay flaskhalsen? Agenten undersöker nätverksvattenfallet efter luckor i upptäckten. Render Delay? Den letar efter blockerande skript och fördröjningar i teckensnittsladdningen.
Resultatet: filmremsa med skärmdumpar, nätverksvattenfall och riktade bevis som förklarar den grundorsak som din fältdata avslöjade.
Proportionerligt resonemang, inte absoluta gränsvärden
Lighthouse berättar att "Render Delay är 350 ms." Är det problemet? Ingen aning. CWV Superpowers identifierar flaskhalsen som den fas vilken förbrukar den största procentandelen 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 okej isolerat. Att åtgärda det gör verklig skillnad. Att optimera Input Delay märks knappt.
Detta förhindrar det vanligaste misstaget i prestandaarbete: att fixa fel sak.
Fem steg: Från "något är långsamt" till kodkorrigering
Ställ en fråga till den. Fem steg senare har du en lösning uppbackad av bevis från riktiga användare.
1. Upptäckt
Skannar din CoreDash-data efter de sämsta sidorna och mätvärdena. Prioriterar dåliga betyg, mobil, sidor med hög trafik och p75-resultat som döljer en lång svans av dåliga värden.
2. Diagnostik
Bryter ner mätvärdet i faser. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Namnger flaskhalsen i procent.
3. Chrome-spårning
Besöker sidan med mobilemulering. Spårar enbart flaskhalsfasen från steg 2. Fångar nätverksvattenfall, filmremsa och bevis på blockerande resurser.
4. Grundorsak
Kombinerar båda beviskällorna till ett enda utlåtande: elementet, orsaken, CoreDash-mätvärdena och vad Chrome bekräftade. Ingen tvetydighet.
5. Åtgärd eller rapport
Ditt val. Tillämpa kodkorrigeringen med fil, rad, element, före/efter. Generera en fristående HTML-rapport med diagram och bevis. Eller gör båda.
25+ dimensioner: Varje vinkel som din fältdata täcker
Detta är de faktiska CoreDash-dimensioner som agenten frågar efter. Inte en sammanfattning. Hela bilden.
LCP (Largest Contentful Paint)
LCP-element Elementtyp Prioritetstillstånd TTFB-fas Load Delay Load Time Render DelayINP (Interaction to Next Paint)
INP-mål Input Delay Processing Presentation LOAF-skript LaddningstillståndCLS (Cumulative Layout Shift)
Förskjutande element Förskjutningsorsak FörskjutningstidpunktSegment
Enhetstyp Land Webbläsare Operativsystem Anslutning Besökartyp SökvägTrender
7-dagars delta 28-dagars baslinje RegressionsdetekteringDiagnostisera: Fasuppdelning för varje Core Web Vital
Inte bara poäng. Varje mätvärde bryts ner i faser med hjälp av attributering från riktiga användare via CoreDash.
Åtgärda LCP med AI: Diagnostik av Largest Contentful Paint
4-fasuppdelning: TTFB, Load Delay, Load Time, Render Delay. Identifierar vilken fas som förbrukar störst andel av den totala tiden.
Elementattributering: det exakta LCP-elementet, dess typ (bild, text, bakgrundsbild, video) och prioritetstillstånd (fetchpriority, lazy loading).
Vanliga åtgärder: lägg till preload-tips, ta bort lazy loading från hero-sektionen, optimera bildformat, åtgärda render-blockerande skript.
Åtgärda INP med AI: Diagnostik av Interaction to Next Paint
3-fasuppdelning: Input Delay, Processing, Presentation. Det enda mätvärdet du inte kan simulera i ett labb. Fältdata är den enda källan.
Skriptattributering: Long Animation Frames (LOAF) namnger den exakta JavaScript-filen och dess varaktighet. Dessutom sidans laddningstillstånd när interaktionen skedde.
Vanliga åtgärder: yield till huvudtråden, skjut upp evaluering (defer), dela upp händelsehanterare, content-visibility för stora DOM-träd.
CLS: Cumulative Layout Shift
5 orsaksmönster: bilder utan dimensioner, teckensnittsbyten (font swaps), dynamiskt injicerat innehåll, senladdade resurser, CSS-animationer på layoutegenskaper.
Korsdimensionellt: jämför mobil vs desktop, nya vs återkommande besökare, snabba vs långsamma nätverk för att avgränsa orsaken.
Vanliga åtgärder: lägg till width/height, font-display: optional, reservera med min-height, använd transform istället för top/left.
Hur ett utlåtande om grundorsak ser ut
Inte "överväg att optimera dina bilder." Detta är den faktiska utmatningen. Specifik nog för att granskas och mergas.
Grundorsak:
LCP-bilden div.hero-banner > img.product-main på /product/running-shoes-42 upptäcks 1 980 ms för sent eftersom den saknar ett preload-tips och inte har fetchpriority="high".
CoreDash-bevis:
LCP är 3 820 ms (dåligt) på mobil, p75. Load Delay är flaskhalsen med 1 980 ms (52 % av totalen). Prioritetstillstånd: 3 (inte preloaded). Trend: försämring +340 ms över 7 dagar.
Chrome-bevis:
Nätverksvattenfallet visar ett glapp på 1 940 ms mellan HTML:s första byte och bildförfrågan. Bilden refereras endast till i CSS och är osynlig för preload-skannern.
Åtgärd:
Lägg till <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> i templates/product.html rad 12. Sätt fetchpriority="high" på img-elementet på rad 47.
Generiska AI-råd:
"Överväg att lägga till fetchpriority till din LCP-bild och säkerställ korrekt förladdning av kritiska resurser."
CWV Superpowers:
Element: div.hero-banner > img.product-main
Fil: templates/product.html, rad 47
Bevis: 52 % av LCP-tiden är i Load Delay (CoreDash p75). 1 940 ms upptäcktsglapp (Chrome-vattenfall).
Åtgärd: Kodändring på 2 rader med en diff före/efter.
Jämförelse: Så står sig CWV Superpowers
Olika verktyg löser olika problem. Här är vad varje verktyg faktiskt gör.
| Funktionalitet | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Datakälla | Riktiga användare (28 dagars fältdata) | Enskild labbsession | Simulerad enskild laddning |
| INP-mätning | ✓ Riktiga interaktioner | ✗ Inga riktiga användare | ✗ Mäts inte |
| Fasuppdelning | ✓ LCP-, INP-, CLS-faser | ~ Manuell analys | ✗ Endast poäng |
| Elementattributering | ✓ Exakt element + prioritet | ~ Om du vet var du ska leta | ~ Generiska förslag |
| Proportionerligt resonemang | ✓ Flaskhals i % | ✗ Absoluta värden | ✗ Absoluta värden |
| Segmentjämförelse | ✓ Enhet, land, webbläsare | ✗ Enskild konfiguration | ✗ Enskild konfiguration |
| Trenddetektering | ✓ 7-dagars delta | ✗ Vid en specifik tidpunkt | ✗ Vid en specifik tidpunkt |
| Chrome-spårning | ✓ Riktad per fas | ✓ Full tillgång | ✗ Ingen webbläsare |
| Kodkorrigeringar | ✓ Fil + rad + diff | ~ Agentberoende | ~ Generiska råd |
Obs: Chrome DevTools MCP är kompletterande. CWV Superpowers använder det för riktad spårning efter att fältdata identifierat flaskhalsen. De fungerar bäst tillsammans.
Rapporter: Dela dem i Slack, bifoga i Jira
Fristående HTML. Inga beroenden. Inget byggsteg. En fil med allt inline.
Fullständig rapport (med Chrome)
Färgkodade metrikkort, diagram för fasuppdelning, filmremsa med skärmdumpar vid viktiga ögonblick (first paint, LCP, färdigladdat), nätverksvattenfall i SVG, grundorsaksanalys och rekommenderad åtgärd med kod före/efter.
Endast RUM-rapport
Samma metrikkort och fasuppdelning, plus elementattributering och grundorsaksanalys. Ingen filmremsa eller vattenfall, men kvaliteten på diagnostiken är identisk eftersom fältdatan är sanningens källa.
Fungerar med alla MCP-klienter
Claude Code: Fullständig skill med automatiserat arbetsflöde. Upptäckt, diagnostik, Chrome-spårning, kodkorrigeringar och rapporter. Rekommenderas.
Cursor: Plugin-installation med CoreDash MCP. Fullständig diagnostik och kodkorrigeringar direkt i din redigerare.
VS Code, Windsurf, Gemini CLI: Vilken klient som helst med stöd för HTTP MCP-servrar ansluter till CoreDash. Samma fältdata, samma attributering.
Client Success
Don't just take my word for it
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."
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."
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."
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."
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."
Kör igång på 2 minuter
Automatiserad diagnostik av Core Web Vitals i din terminal. Du behöver ett CoreDash-konto där data flödar in. Gratisnivån fungerar bra.
Claude Code
claude mcp add --transport http coredash \
https://app.coredash.app/api/mcp \
--header "Authorization: Bearer cdk_YOUR_API_KEY"
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers
claude --chrome
Hitta mitt största CWV-problem och åtgärda det. Hämta din API-nyckel från CoreDash → Project Settings → API Keys (MCP). Visas bara en gång. Lagras som en SHA-256-hash. Skrivskyddad.
Cursor
/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 alla HTTP MCP-klienter. En MCP-endpoint för webbprestanda, för varje agent.
Vanliga frågor (FAQ)
Måste jag ha Chrome igång för att använda CWV Superpowers?
Nej. Chrome-spårning är valfritt. Utan den får du fullständig diagnostik med fältdata, fasuppdelningar, elementattributering och förslag på kodkorrigeringar baserat enbart på data från CoreDash. Chrome lägger till filmremsa med skärmdumpar, nätverksvattenfall och visuell bekräftelse på 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 maskin. CWV Superpowers använder 28 dagars riktig användardata från CoreDash: faktiska enheter, faktiska nätverk, faktiska interaktioner. Det mäter INP från riktiga användares klick (Lighthouse kan inte göra detta). Det jämför segment (mobil vs desktop, Indien vs USA). Och det använder proportionerligt 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 HTTP MCP-endpointen för CoreDash. Fältdatan och attributeringen är identisk över alla klienter.
Är CoreDash gratis?
CoreDash har en gratisnivå som fungerar med CWV Superpowers. Du behöver data som flödar in från din webbplats (lägg till script-taggen för CoreDash). Gratisnivån har ingen sampling och inga tak för sidvisningar. API-nycklar för MCP-åtkomst är tillgängliga på alla abonnemang.
Kan jag använda detta för kundsajter?
Ja. För varje CoreDash-projekt kan du skapa obegränsat med dedikerade MVP API-nycklar . Lägg till CoreDash på varje kundsajt, generera en skrivskyddad API-nyckel och konfigurera din MCP-klient. Agenten ser bara datan för just det projektet. CWV Superpowers är MIT-licensierat, så det finns inga restriktioner för kommersiell användning.
Öppen källkod. Ingen inlåsning.
Automatisering för Core Web Vitals som du kan inspektera och bygga ut. Orkestreraren, diagnostikmodulerna, logiken för Chrome-spårning och rapportmallarna finns alla på GitHub. Läs om hur det fungerar. Förgrena (fork). Bygg ut. Bidra.
Starta din gratis provperiod Visa på GitHub