Din AI-agent har precis fått Core Web Vitals-superkrafter
Anslut Claude Code till din CoreDash-fältdata. Den hittar din värsta flaskhals över miljontals sidvisningar, spårar grundorsaken i Chrome och skriver korrigeringen. Agentdriven webbprestanda – inte en rapport, utan den faktiska kodraden som behöver ändras.
Installera på 2 minuter Starta en 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 rankning. En användbar AI-agent för webbprestanda utgår från samma data som Google: verkliga användare på budgettelefoner, svajiga uppkopplingar och kontinenter som din utvecklingsmaskin aldrig har sett.
Lighthouse är inte din rankningssignal
Google rankar baserat på CrUX-fältdata från verkliga Chrome-användare under 28 dagar. En perfekt Lighthouse-poäng och en underkänd fältpoäng inträffar hela tiden. 52 % av alla mobilsajter misslyckas med minst en Core Web Vitals i fält.
Blinda agenter gör blinda korrigeringar
Utan data från verkliga användare vet inte en AI-agent vilken sida som är långsam, vilket element som är flaskhalsen, eller om dess korrigering hjälpte. Den optimerar en simulering och nöjer sig med det. Dina faktiska användare håller inte med.
Manuell utredning tar timmar
Segmentera data. Ställ upp hypoteser. Kör en spårning. Bekräfta. Skriv utkast till korrigering. En senior prestandaingenjör lägger 2 till 4 timmar per problem. Multiplicera det med varje långsam sida på din webbplats.
INP kan inte simuleras i ett labb överhuvudtaget Interaction to Next Paint mäter hur verkliga användare interagerar med din sida. Inget syntetiskt verktyg kan replikera verkligt användarbeteende: var de trycker, hur snabbt de skrollar, 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. Fältdata är den enda källan.
Två källor till sanning: Fältdata möter webbläsarbevis
CWV Superpowers kombinerar data från verkliga användare 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 verklig användare. Varje mätvärde tillskrivs det exakta elementet som orsakar problemet. Ingen sampling, inga tak.
När CoreDash rapporterar en LCP på 4,2 sekunder med Load Delay som förbrukar 52 % av den totala tiden på div.hero > img.main, vet agenten exakt var den ska titta. Ingen gissning. En mätning från miljontals verkliga sessioner.
Färdigheten frågar efter över 25 CoreDash-dimensioner: LCP-element, elementtyp, prioritetstillstånd, fasnedbrytning, INP-interaktionsmål, LOAF-skript, CLS-skiftande element, enhetstyp, besökartyp, nätverkshastighet, 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 teckensnittsladdning.
Resultatet: filmremseskärmdumpar, nätverksvattenfall och riktade bevis som förklarar grundorsaken som din fältdata avslöjade.
Proportionellt resonemang, inte absoluta tröskelvärden
Lighthouse säger till dig "Render Delay är 350 ms." Är det problemet? Ingen aning. CWV Superpowers identifierar flaskhalsen som den fas som 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 bra isolerat sett. Att fixa 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 kodkorrigering
Ställ en fråga. Fem steg senare har du en lösning uppbackad av bevis från verkliga användare.
1. Upptäckt
Skannar din CoreDash-data efter de värsta sidorna och mätvärdena. Prioriterar dåliga betyg, mobil, sidor med mycket trafik och p75-poäng som döljer en lång svans av dåliga resultat.
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 bara 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. Fixa eller rapportera
Ditt val. Tillämpa kodkorrigeringen med fil, rad, element, före/efter. Generera en fristående HTML-rapport med diagram och bevis. Eller både och.
Över 25 dimensioner: Varje vinkel som din fältdata täcker
Detta är de faktiska CoreDash-dimensionerna som agenten frågar efter. Inte en sammanfattning. Den fullständiga 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)
Skiftande element Skiftorsak SkifttimingSegment
Enhetstyp Land Webbläsare OS Uppkoppling Besökartyp SökvägTrender
7-dagars delta 28-dagars baslinje RegressionsdetekteringDiagnostisera: Fasuppdelning för varje Core Web Vitals
Inte bara poäng. Varje mätvärde bryts ner i faser med hjälp av tillskrivning från verkliga användare från CoreDash.
Fixa LCP med AI: Diagnostik av Largest Contentful Paint
Uppdelning i 4 faser: TTFB, Load Delay, Load Time, Render Delay. Identifierar vilken fas som förbrukar störst andel av den totala tiden.
Elementtillskrivning: det exakta LCP-elementet, dess typ (bild, text, bakgrundsbild, video) och prioritetstillstånd (fetchpriority, latladdning).
Typiska korrigeringar: lägg till preload-tips, ta bort latladdning från hero-sektionen, optimera bildformat, fixa render-blockerande skript.
Fixa INP med AI: Diagnostik av Interaction to Next Paint
Uppdelning i 3 faser: Input Delay, Processing, Presentation. Det enda mätvärdet du inte kan simulera i ett labb. Fältdata är den enda källan.
Skripttillskrivning: Long Animation Frames (LOAF) anger den exakta JavaScript-filen och varaktigheten. Plus sidans laddningstillstånd när interaktionen inträffade.
Typiska korrigeringar: yield till huvudtråden, skjut upp evaluering, dela upp händelsehanterare, content-visibility för stora DOM:ar.
CLS: Cumulative Layout Shift
5 orsaksmönster: bilder utan dimensioner, teckensnittsbyten, dynamiskt injicerat innehåll, sent laddande resurser, CSS-animationer på layout-egenskaper.
Korsdimensionell: jämför mobil mot skrivbord, nya mot återkommande besökare, snabba mot långsamma nätverk för att ringa in orsaken.
Typiska korrigeringar: lägg till bredd/höjd, font-display: optional, reservering av minsta höjd, 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. Tillräckligt specifik för att granska och merga.
Grundorsak:
LCP-bilden div.hero-banner > img.product-main på /product/running-shoes-42 upptäcks 1 980 ms 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 på 1 980 ms (52 % av totalen). Prioritetstillstånd: 3 (ej förladdad). Trend: försämras +340 ms över 7 dagar.
Chrome-bevis:
Nätverksvattenfallet visar en lucka på 1 940 ms mellan HTML-kodens första byte och bildbegäran. Bilden refereras endast i CSS, osynlig för preload-skannern.
Korrigering:
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 på 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 i Load Delay (CoreDash p75). 1 940 ms upptäcktslucka (Chrome-vattenfall).
Korrigering: Kodändring på 2 rader med före/efter-diff.
Jämför: Hur CWV Superpowers står sig
Olika verktyg löser olika problem. Här är vad var och en faktiskt gör.
| Kapacitet | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Datakälla | Verkliga användare (28 dagars fältdata) | Enskild labbsession | Simulerad enskild laddning |
| INP-mätning | ✓ Verkliga interaktioner | ✗ Inga verkliga användare | ✗ Mäts inte |
| Fasuppdelning | ✓ LCP-, INP-, CLS-faser | ~ Manuell analys | ✗ Endast poäng |
| Elementtillskrivning | ✓ Exakt element + prioritet | ~ Om du vet var du ska leta | ~ Generiska förslag |
| Proportionellt resonemang | ✓ Flaskhals i % | ✗ Absoluta värden | ✗ Absoluta värden |
| Segmentjämförelse | ✓ Enhet, land, webbläsare | ✗ Enskild konfiguration | ✗ Enskild konfiguration |
| Trenddetektering | ✓ 7-dagars delta | ✗ Tidpunkt | ✗ Tidpunkt |
| Chrome-spårning | ✓ Riktad efter fas | ✓ Full åtkomst | ✗ Ingen webbläsare |
| Kodkorrigeringar | ✓ Fil + rad + diff | ~ Agentberoende | ~ Generiska råd |
Obs: Chrome DevTools MCP är kompletterande. CWV Superpowers använder den för riktad spårning efter att fältdata har identifierat flaskhalsen. De fungerar bäst tillsammans.
Rapporter: Släpp in dem i Slack, bifoga till Jira
Fristående HTML. Inga beroenden. Inget byggsteg. En fil med allt inbäddat.
Fullständig rapport (med Chrome)
Färgkodade mätvärdeskort, diagram för fasuppdelning, filmremseskärmdumpar vid viktiga ögonblick (first paint, LCP, laddad), nätverksvattenfall som SVG, grundorsaksanalys och den rekommenderade korrigeringen med före/efter-kod.
Endast RUM-rapport
Samma mätvärdeskort och fasuppdelning, plus elementtillskrivning och grundorsaksanalys. Ingen filmremsa eller vattenfall, men diagnostikens kvalitet är identisk eftersom fältdata är källan till sanning.
Fungerar med valfri MCP-klient
Claude Code: Fullständig färdighet 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 inuti din editor.
VS Code, Windsurf, Gemini CLI: Alla klienter som stöder HTTP MCP-servrar ansluter till CoreDash. Samma fältdata, samma tillskrivning.
Client Success
Don't just take my word for it
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed 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."
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 Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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."
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 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.
Igång på 2 minuter
Automatiserad Core Web Vitals-diagnostik i din terminal. Du behöver ett CoreDash-konto med data som flödar in. Den kostnadsfria nivån fungerar.
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-superpower
claude --chrome
Find my biggest CWV issue and fix it. Hämta din API-nyckel från CoreDash → Project Settings → API Keys (MCP). Visas en gång. Lagras som 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"
}
}
}
} Övriga MCP-klienter
Ändpunkt: https://app.coredash.app/api/mcp
Rubrik: Authorization: Bearer cdk_YOUR_API_KEY
Fungerar med VS Code (Copilot agent-läge), Windsurf, Gemini CLI, Claude Desktop och valfri HTTP MCP-klient. En MCP-ändpunkt för webbprestanda, varje agent.
Vanliga frågor
Behöver jag ha Chrome igång för att använda CWV Superpowers?
Nej. Chrome-spårning är valfritt. Utan det får du fullständig diagnostik av fältdata, fasuppdelningar, elementtillskrivning och kodkorrigeringsförslag enbart baserat på CoreDash-data. Chrome lägger till filmremseskä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 data från verkliga användare från CoreDash: faktiska enheter, faktiska nätverk, faktiska interaktioner. Det mäter INP från verkliga användarklick (Lighthouse kan inte det). Det jämför segment (mobil mot skrivbord, 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 färdighet med ett automatiserat arbetsflöde i 5 steg. Cursor, VS Code (Copilot agent-läge), Windsurf, Gemini CLI och Claude Desktop ansluter via HTTP MCP-ändpunkten för CoreDash. Fältdatan och tillskrivningen ä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 CoreDash-skripttaggen). 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 klientwebbplatser?
Ja. För varje CoreDash-projekt kan du skapa obegränsat antal dedikerade MVP API-nycklar . Lägg till CoreDash på varje klientsite, generera en skrivskyddad API-nyckel och konfigurera din MCP-klient. Agenten ser bara data för det projektet. CWV Superpowers är MIT-licensierat, så det finns inga restriktioner för kommersiell användning.
Öppen källkod. Ingen inlåsning.
Core Web Vitals-automation som du kan granska och utöka. Orkestreraren, diagnostikmodulerna, Chrome-spårningslogiken och rapportmallarna finns alla på GitHub. Läs om hur det fungerar. Forka det. Utöka det. Bidra.
Starta din gratis provperiod Visa på GitHub