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 bland miljontals sidvisningar, spårar grundorsaken i Chrome och skriver korrigeringen. Agentdriven webbprestanda är inte en rapport, utan den faktiska kodraden som behöver ändras.
Installera på 2 minuter Starta din gratis provperiod på CoreDash »Trusted by market leaders · Client results
AI-verktyg för prestanda har ett dataproblem
De flesta AI-agenter optimerar för Lighthouse. Ett syntetiskt betyg 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, opålitliga uppkopplingar och kontinenter din utvecklingsdator aldrig har sett.
Lighthouse är inte din rankningssignal
Google rankar baserat på CrUX-fältdata från verkliga Chrome-användare över 28 dagar. Ett perfekt Lighthouse-betyg och ett underkänt fältbetyg 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 fix hjälpte. Den optimerar en simulering och anser sig vara klar. Dina faktiska användare håller inte med.
Manuell undersökning tar timmar
Segmentera datan. Ställ upp hypoteser. Kör en spårning. Bekräfta. Utforma en lösning. 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 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 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å sanningar: 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 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 där Load Delay tar upp 52 % av den totala tiden på div.hero > img.main, vet agenten exakt var den ska titta. Inte en gissning. En mätning från miljontals verkliga sessioner.
Färdigheten frågar efter 25+ CoreDash-dimensioner: LCP-element, elementtyp, prioritetstillstånd, fasuppdelning, mål för INP-interaktion, LOAF-skript, CLS-förskjutande element, enhetstyp, besökstyp, nätverkshastighet, 7-dagarstrender.
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 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 den grundorsak din fältdata avslöjade.
Proportionellt resonemang, inte absoluta tröskelvärden
Lighthouse säger "Render Delay är 350 ms." Är det problemet? Ingen aning. CWV Superpowers identifierar flaskhalsen som den fas som förbrukar 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 isolerat. Att åtgärda det gör verklig 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 till den. Fem steg senare har du en fix uppbackad av verkliga användarbevis.
1. Upptäckt
Skannar din CoreDash-data efter de värsta sidorna och mätvärdena. Prioriterar dåliga betyg, mobilt, sidor med mycket trafik och p75-värden 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, mätvärdena från CoreDash och vad Chrome bekräftade. Ingen tvetydighet.
5. Fix 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 både och.
25+ dimensioner: Varje vinkel din fältdata täcker
Detta är de faktiska CoreDash-dimensionerna agenten efterfrågar. 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 Orsak till förskjutning Tidpunkt för förskjutningSegment
Enhetstyp Land Webbläsare OS Uppkoppling Besökstyp SidvägTrender
7-dagars delta 28-dagars baslinje RegressionsdetekteringDiagnostisera: Uppdelning på fasnivå för varje Core Web Vital
Inte bara poäng. Varje mätvärde bryts ner i faser med hjälp av verklig användarattribuering från CoreDash.
Fixa 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.
Elementattribuering: det exakta LCP-elementet, dess typ (bild, text, bakgrundsbild, video) och prioritetstillstånd (fetchpriority, latladdning).
Typiska fixar: lägg till preload-tips, ta bort latladdning från hero, optimera bildformat, fixa render-blockerande skript.
Fixa 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.
Skriptattribuering: Long Animation Frames (LOAF) namnger den exakta JavaScript-filen och varaktigheten. Plus sidans laddningstillstånd när interaktionen inträffade.
Typiska fixar: yield till huvudtråden, fördröj utvärdering, dela upp händelsehanterare, content-visibility för stora DOM:er.
CLS: Cumulative Layout Shift
5 orsaksmönster: bilder utan dimensioner, teckensnittsbyten, dynamiskt injicerat innehåll, senladdande resurser, CSS-animationer på layoutegenskaper.
Tvärdimensionell: jämför mobil vs desktop, nya vs återkommande besökare, snabba vs långsamma nätverk för att ringa in orsaken.
Typiska fixar: lägg till bredd/höjd, font-display: optional, reservera min-höjd, använd transform istället för top/left.
Hur ett grundorsaksutlåtande ser ut
Inte "överväg att optimera dina bilder." Detta är den faktiska utdatan. Tillräckligt specifik för att granska och slå samman.
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 på 1 980 ms (52 % av totalen). Prioritetstillstånd: 3 (inte förladdad). Trend: försämras +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, osynlig för preload-skannern.
Fix:
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.
Allmänt AI-råd:
"Överväg att lägga till fetchpriority på din LCP-bild och säkerställ korrekt förladdning (preloading) 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äcktsglapp (Chrome vattenfall).
Fix: 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 varje verktyg faktiskt gör.
| Förmåga | 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 |
| Elementattribuering | ✓ Exakt element + prioritet | ~ Om du vet var du ska leta | ~ Allmänna 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 | ✗ Vid en specifik tidpunkt | ✗ Vid en specifik tidpunkt |
| Chrome-spårning | ✓ Riktad per fas | ✓ Full åtkomst | ✗ Ingen webbläsare |
| Kodkorrigeringar | ✓ Fil + rad + diff | ~ Agentberoende | ~ Allmänt råd |
Obs: Chrome DevTools MCP är kompletterande. CWV Superpowers använder det för riktad spårning efter att fältdata har identifierat flaskhalsen. De fungerar bäst tillsammans.
Rapporter: Släpp 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 mätvärdeskort, diagram för fasuppdelning, filmremseskärmdumpar vid viktiga ögonblick (first paint, LCP, loaded), SVG-nätverksvattenfall, grundorsaksanalys och den rekommenderade fixen med före/efter-kod.
Rapport för endast RUM
Samma mätvärdeskort och fasuppdelning, plus elementattribuering och grundorsaksanalys. Ingen filmremsa eller vattenfall, men diagnostikkvaliteten är identisk eftersom fältdata är sanningen.
Fungerar med vilken MCP-klient som helst
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: Vilken klient som helst som stöder HTTP MCP-servrar ansluter till CoreDash. Samma fältdata, samma attribuering.
Client Success
Don't just take my word for it
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."
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."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
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."
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.
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."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
Igång på 2 minuter
Automatiserad diagnostik av Core Web Vitals i din terminal. Du behöver ett CoreDash-konto med data som flödar in. Gratisnivån fungerar.
Claude Code
# 1. Lägg till CoreDash MCP-server claude mcp add --transport http coredash \ https://app.coredash.app/api/mcp \ --header "Authorization: Bearer cdk_YOUR_API_KEY" # 2. Installera CWV Superpowers /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpower # 3. Starta med Chrome (frivilligt, rekommenderas) claude --chrome # 4. Kör Hitta mitt största CWV-problem och fixa det.
Hämta din API-nyckel från CoreDash → Project Settings → API Keys (MCP). Visas en gång. Lagras som SHA-256-hash. Skrivskyddad (read-only).
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
Ändpunkt (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 vilken HTTP MCP-klient som helst. En enda MCP-ändpunkt 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, elementattribuering och förslag på kodkorrigeringar baserat enbart 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 enskild syntetisk laddning på din maskin. 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ändarklick (vilket Lighthouse inte kan). Det jämför segment (mobil vs desktop, Indien vs USA). Och det använder proportionellt resonemang för att hitta flaskhalsfasen, inte bara absoluta poäng.
Vilka AI-kodningsagenter stöds?
Vilken AI-kodningsagent som helst 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-agentläge), Windsurf, Gemini CLI och Claude Desktop ansluter via HTTP MCP-ändpunkten för CoreDash. Fältdatan och attribueringen ä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 finns tillgängliga i alla abonnemang.
Kan jag använda detta för kunders webbplatser?
Ja. För varje CoreDash-projekt kan du skapa obegränsat antal dedikerade MVP API-nycklar . Lägg till CoreDash på varje klientsajt, generera en skrivskyddad API-nyckel och konfigurera din MCP-klient. Agenten ser bara datan för det projektet. CWV Superpowers är MIT-licensierat, så det finns inga restriktioner för kommersiell användning.
Open Source. Ingen inlåsning.
Automatisering av Core Web Vitals som du kan granska och bygga vidare på. Orkestratorn, diagnostikmodulerna, logiken för Chrome-spårning 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