Il tuo Agente AI ha appena ottenuto i Superpoteri per i Core Web Vitals
Connetti Claude Code ai tuoi dati sul campo di CoreDash. Trova il tuo peggior collo di bottiglia su milioni di caricamenti di pagina, traccia la causa principale in Chrome e scrive la correzione. Prestazioni web agentiche: non un report, ma l'effettiva riga di codice che deve essere cambiata.
Installa in 2 Minuti Inizia la Prova Gratuita di CoreDash »Trusted by market leaders · Client results
Gli Strumenti AI per le Prestazioni Hanno un Problema di Dati
La maggior parte degli agenti AI ottimizza per Lighthouse. Un punteggio sintetico su un dispositivo simulato che Google non utilizza per i posizionamenti. Un agente AI utile per le prestazioni web parte dagli stessi dati di Google: utenti reali su telefoni economici, connessioni instabili e continenti che la tua macchina di sviluppo non ha mai visto.
Lighthouse Non è il Tuo Segnale di Posizionamento
Google posiziona in base ai dati sul campo CrUX di utenti Chrome reali su 28 giorni. Un punteggio perfetto su Lighthouse e un punteggio fallimentare sul campo si verificano continuamente. Il 52% dei siti mobile fallisce almeno un Core Web Vital sul campo.
Agenti Ciechi Fanno Correzioni Cieche
Senza dati degli utenti reali, un agente AI non sa quale pagina sia lenta, quale elemento sia il collo di bottiglia o se la sua correzione abbia aiutato. Ottimizza una simulazione e si ferma lì. I tuoi utenti effettivi non sono d'accordo.
L'Indagine Manuale Richiede Ore
Segmenta i dati. Ipotizza. Esegui un trace. Conferma. Abbozza la correzione. Un performance engineer senior impiega da 2 a 4 ore per problema. Moltiplicalo per ogni pagina lenta del tuo sito.
L'INP non può essere affatto simulato in laboratorio L 'Interaction to Next Paint misura come gli utenti reali interagiscono con la tua pagina. Nessun tool sintetico può replicare il comportamento degli utenti reali: dove toccano, quanto velocemente scorrono, quale dispositivo tengono in mano. Lighthouse non riporta nemmeno l'INP. Se il tuo agente AI esegue Lighthouse, è cieco ai tuoi peggiori problemi di interattività. I dati sul campo sono l'unica fonte.
Due fonti di verità: I dati sul campo incontrano l'evidenza del browser
CWV Superpowers combina i dati degli utenti reali di CoreDash con tracce Chrome mirate. I dati sul campo gli dicono cosa è lento. Chrome gli dice perché.
CoreDash dice all'agente cosa è lento
CoreDash traccia ogni caricamento di pagina da ogni utente reale. Ogni metrica, attribuita all'esatto elemento che causa il problema. Nessun campionamento, nessun limite.
Quando CoreDash riporta un LCP di 4.2 secondi con un Load Delay che consuma il 52% del tempo totale su div.hero > img.main, l'agente sa esattamente dove guardare. Non è un'ipotesi. Una misurazione da milioni di sessioni reali.
La skill interroga oltre 25 dimensioni di CoreDash: elemento LCP, tipo di elemento, stato di priorità, scomposizione in fasi, target di interazione INP, script LOAF, elemento che causa lo shift CLS, tipo di dispositivo, tipo di visitatore, velocità di rete, trend a 7 giorni.
Chrome dice all'agente perché è lento
CWV Superpowers visita la pagina con l'emulazione mobile: Fast 3G, throttling della CPU 4x. Traccia solo la fase di collo di bottiglia che CoreDash ha identificato.
Il Load Delay è il collo di bottiglia? L'agente esamina il waterfall di rete alla ricerca di discovery gap. Il Render Delay? Cerca script bloccanti e ritardi nel caricamento dei font.
Il risultato: screenshot filmstrip, waterfall di rete ed evidenze mirate che spiegano la causa principale esposta dai tuoi dati sul campo.
Ragionamento proporzionale, non soglie assolute
Lighthouse ti dice "Il Render Delay è di 350ms." È quello il problema? Nessuna idea. CWV Superpowers identifica il collo di bottiglia come la fase che consuma la percentuale maggiore del tempo totale.
L'INP è di 350ms. Input Delay 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). La Presentation è il collo di bottiglia, anche se 200ms sembrano buoni isolatamente. Correggerlo fa la differenza. Ottimizzare l'Input Delay viene a malapena registrato.
Questo previene l'errore più comune nel lavoro sulle prestazioni: correggere la cosa sbagliata.
Cinque passaggi: Da "qualcosa è lento" alla correzione del codice
Fagli una domanda. Cinque passaggi dopo hai una correzione supportata dall'evidenza degli utenti reali.
1. Scoperta
Scansiona i tuoi dati CoreDash alla ricerca delle pagine e delle metriche peggiori. Dà priorità a valutazioni scarse, mobile, pagine ad alto traffico e punteggi p75 che nascondono una lunga coda scarsa.
2. Diagnosi
Scompone la metrica in fasi. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Nomina il collo di bottiglia in percentuale.
3. Chrome Trace
Visita la pagina con emulazione mobile. Traccia solo la fase del collo di bottiglia dal passaggio 2. Cattura il waterfall di rete, la filmstrip e l'evidenza della risorsa bloccante.
4. Causa Principale
Combina entrambe le fonti di evidenza in un'unica dichiarazione: l'elemento, la causa, le metriche CoreDash e ciò che Chrome ha confermato. Nessuna ambiguità.
5. Correzione o Report
La tua scelta. Applica la correzione del codice con file, riga, elemento, prima/dopo. Genera un report HTML autonomo con grafici ed evidenze. O entrambi.
25+ dimensioni: Ogni angolazione coperta dai tuoi dati sul campo
Queste sono le reali dimensioni CoreDash interrogate dall'agente. Non un riassunto. Il quadro completo.
LCP (Largest Contentful Paint)
Elemento LCP Tipo di elemento Stato di priorità Fase TTFB Load Delay Load Time Render DelayINP (Interaction to Next Paint)
Target INP Input Delay Processing Presentation Script LOAF Stato di caricamentoCLS (Cumulative Layout Shift)
Elemento di shift Causa dello shift Tempismo dello shiftSegmenti
Tipo di dispositivo Paese Browser OS Connessione Tipo di visitatore Percorso della paginaTrend
Delta a 7 giorni Baseline a 28 giorni Rilevamento regressioniDiagnostica: Scomposizione a livello di fase per ogni Core Web Vital
Non solo punteggi. Ogni metrica scomposta in fasi utilizzando l'attribuzione degli utenti reali di CoreDash.
Correggi l'LCP con l'AI: Diagnosi del Largest Contentful Paint
Scomposizione in 4 fasi: TTFB, Load Delay, Load Time, Render Delay. Identifica quale fase consuma la quota maggiore del tempo totale.
Attribuzione dell'elemento: l'esatto elemento LCP, il suo tipo (immagine, testo, immagine di sfondo, video) e lo stato di priorità (fetchpriority, lazy loading).
Correzioni tipiche: aggiungi preload hint, rimuovi il lazy loading dalla hero, ottimizza il formato dell'immagine, correggi script render-blocking.
Correggi l'INP con l'AI: Diagnosi dell'Interaction to Next Paint
Scomposizione in 3 fasi: Input Delay, Processing, Presentation. L'unica metrica che non puoi simulare in laboratorio. I dati sul campo sono l'unica fonte.
Attribuzione dello script: i Long Animation Frames (LOAF) nominano l'esatto file JavaScript e la durata. Più lo stato di caricamento della pagina quando si è verificata l'interazione.
Correzioni tipiche: yield al main thread, posticipa la valutazione, dividi gli event handler, content-visibility per DOM grandi.
CLS: Cumulative Layout Shift
5 pattern di cause: immagini senza dimensioni, font swap, contenuto iniettato dinamicamente, risorse a caricamento tardivo, animazioni CSS su proprietà di layout.
Multi-dimensionale: confronta mobile vs desktop, visitatori nuovi vs di ritorno, reti veloci vs lente per restringere la causa.
Correzioni tipiche: aggiungi width/height, font-display: optional, prenotazione di min-height, usa transform invece di top/left.
Come si presenta una Dichiarazione della Causa Principale
Non "considera di ottimizzare le tue immagini." Questo è l'output effettivo. Abbastanza specifico per essere revisionato e mergiato.
Causa principale:
L'immagine LCP div.hero-banner > img.product-main su /product/running-shoes-42 viene scoperta con 1.980ms di ritardo perché manca un preload hint e non ha fetchpriority="high".
Evidenza CoreDash:
L'LCP è di 3.820ms (scarso) su mobile, p75. Il Load Delay è il collo di bottiglia a 1.980ms (52% del totale). Stato di priorità: 3 (non precaricato). Trend: in peggioramento +340ms su 7 giorni.
Evidenza Chrome:
Il waterfall di rete mostra un gap di 1.940ms tra il first byte HTML e la richiesta dell'immagine. L'immagine è referenziata solo nel CSS, invisibile al preload scanner.
Correzione:
Aggiungi <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> in templates/product.html riga 12. Imposta fetchpriority="high" sull'elemento img alla riga 47.
Consiglio AI generico:
"Considera l'aggiunta di fetchpriority alla tua immagine LCP e assicurati un corretto preloading delle risorse critiche."
CWV Superpowers:
Elemento: div.hero-banner > img.product-main
File: templates/product.html, riga 47
Evidenza: 52% del tempo LCP in Load Delay (CoreDash p75). Gap di scoperta di 1.940ms (waterfall di Chrome).
Correzione: modifica del codice di 2 righe con diff prima/dopo.
Confronta: Come si posiziona CWV Superpowers
Strumenti diversi risolvono problemi diversi. Ecco cosa fa effettivamente ciascuno di essi.
| Funzionalità | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Fonte dei dati | Utenti reali (dati sul campo di 28 giorni) | Singola sessione in laboratorio | Singolo caricamento simulato |
| Misurazione INP | ✓ Interazioni reali | ✗ Nessun utente reale | ✗ Non misurato |
| Scomposizione in fasi | ✓ Fasi LCP, INP, CLS | ~ Analisi manuale | ✗ Solo punteggio |
| Attribuzione elemento | ✓ Esatto elemento + priorità | ~ Se sai dove guardare | ~ Suggerimenti generici |
| Ragionamento proporzionale | ✓ Collo di bottiglia in % | ✗ Valori assoluti | ✗ Valori assoluti |
| Confronto segmenti | ✓ Dispositivo, paese, browser | ✗ Configurazione singola | ✗ Configurazione singola |
| Rilevamento trend | ✓ Delta a 7 giorni | ✗ Singolo momento | ✗ Singolo momento |
| Chrome tracing | ✓ Mirato per fase | ✓ Accesso completo | ✗ Nessun browser |
| Correzioni di codice | ✓ File + riga + diff | ~ Dipende dall'agente | ~ Consiglio generico |
Nota: Chrome DevTools MCP è complementare. CWV Superpowers lo usa per il tracing mirato dopo che i dati sul campo identificano il collo di bottiglia. Funzionano al meglio insieme.
Report: Condividili su Slack, allegali a Jira
HTML autonomo. Nessuna dipendenza. Nessun passaggio di build. Un solo file con tutto inline.
Report Completo (con Chrome)
Card delle metriche codificate a colori, grafici della scomposizione in fasi, screenshot filmstrip nei momenti chiave (first paint, LCP, loaded), waterfall di rete SVG, analisi della causa principale e la correzione consigliata con il codice prima/dopo.
Report Solo-RUM
Stesse card delle metriche e scomposizione in fasi, più attribuzione dell'elemento e analisi della causa principale. Nessuna filmstrip o waterfall, ma la qualità della diagnosi è identica perché i dati sul campo sono la fonte di verità.
Funziona con qualsiasi client MCP
Claude Code: Skill completa con flusso di lavoro automatizzato. Discovery, diagnosi, Chrome tracing, correzioni del codice e report. Consigliato.
Cursor: Installazione plugin con CoreDash MCP. Diagnosi completa e correzioni di codice all'interno del tuo editor.
VS Code, Windsurf, Gemini CLI: Qualsiasi client che supporti server HTTP MCP si connette a CoreDash. Stessi dati sul campo, stessa attribuzione.
Client Success
Don't just take my word for it
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
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."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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.
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, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
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."
In Esecuzione in 2 Minuti
Diagnosi automatizzata dei Core Web Vitals nel tuo terminale. Hai bisogno di un account CoreDash con dati in arrivo. Il piano gratuito funziona.
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
Trova il mio più grande problema CWV e correggilo. Ottieni la tua chiave API da CoreDash → Project Settings → API Keys (MCP). Mostrata una sola volta. Salvata come hash SHA-256. Sola lettura.
Cursor
/plugin-add cwv-superpowers
Aggiungi CoreDash a .cursor/mcp.json:
{
"mcpServers": {
"coredash": {
"url": "https://app.coredash.app/api/mcp",
"headers": {
"Authorization": "Bearer cdk_YOUR_API_KEY"
}
}
}
} Altri Client MCP
Endpoint: https://app.coredash.app/api/mcp
Header: Authorization: Bearer cdk_YOUR_API_KEY
Funziona con VS Code (modalità agente Copilot), Windsurf, Gemini CLI, Claude Desktop e qualsiasi client HTTP MCP. Un endpoint MCP per le prestazioni web, per ogni agente.
Domande Frequenti
Ho bisogno di Chrome in esecuzione per usare CWV Superpowers?
No. Il Chrome tracing è opzionale. Senza di esso ottieni la diagnosi completa dei dati sul campo, le scomposizioni in fasi, l'attribuzione degli elementi e suggerimenti per la correzione del codice basati solo sui dati di CoreDash. Chrome aggiunge screenshot filmstrip, waterfall di rete e conferma visiva della causa principale. Entrambe le modalità generano report.
In che modo questo è diverso dall'eseguire Lighthouse nel mio agente AI?
Lighthouse esegue un singolo caricamento sintetico sulla tua macchina. CWV Superpowers utilizza 28 giorni di dati degli utenti reali da CoreDash: dispositivi effettivi, reti effettive, interazioni effettive. Misura l'INP dai tocchi degli utenti reali (Lighthouse non può farlo). Confronta segmenti (mobile vs desktop, India vs Stati Uniti). E usa il ragionamento proporzionale per trovare la fase che funge da collo di bottiglia, non solo punteggi assoluti.
Quali agenti AI per la programmazione sono supportati?
Qualsiasi agente AI per la programmazione e le prestazioni web che supporti i server MCP (Model Context Protocol). Claude Code ha una skill dedicata con un flusso di lavoro automatizzato in 5 passaggi. Cursor, VS Code (modalità agente Copilot), Windsurf, Gemini CLI e Claude Desktop si connettono tramite l'endpoint HTTP MCP di CoreDash. I dati sul campo e l'attribuzione sono identici per tutti i client.
CoreDash è gratuito?
CoreDash ha un piano gratuito che funziona con CWV Superpowers. Hai bisogno di un flusso di dati dal tuo sito (aggiungi il tag script di CoreDash). Il piano gratuito non ha campionamenti o limiti di visualizzazione delle pagine. Le chiavi API per l'accesso MCP sono disponibili su tutti i piani.
Posso usarlo per i siti dei clienti?
Sì. Per ogni progetto CoreDash puoi creare Chiavi API MVP dedicate illimitate . Aggiungi CoreDash al sito di ogni cliente, genera una chiave API di sola lettura e configura il tuo client MCP. L'agente vede solo i dati per quel progetto. CWV Superpowers ha licenza MIT, quindi non ci sono restrizioni sull'uso commerciale.
Open Source. Nessun Lock-in.
Automazione dei Core Web Vitals che puoi ispezionare ed estendere. L'orchestrazione, i moduli di diagnosi, la logica del Chrome tracing e i template per i report sono tutti su GitHub. Leggi come funziona. Fai un fork. Estendilo. Contribuisci.
Inizia la Tua Prova Gratuita Vedi su GitHub