Il tuo agente AI ha appena ottenuto i superpoteri per i Core Web Vitals
Collega Claude Code ai tuoi field data 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. Web performance agenziale non è un report, ma la riga di codice esatta che devi cambiare.
Installa in 2 minuti Inizia la prova gratuita di CoreDash »Trusted by market leaders · Client results
I tool AI per le performance hanno un problema di dati
La maggior parte degli agenti AI ottimizza per Lighthouse. Un punteggio sintetico su un dispositivo simulato che Google non usa per il ranking. Un agente AI utile per le web performance 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 ranking
Google posiziona in base ai field data CrUX di utenti Chrome reali su 28 giorni. Un punteggio perfetto in Lighthouse e uno insufficiente nei field data capitano di continuo. Il 52% dei siti mobile fallisce almeno un Core Web Vital sul campo.
Agenti ciechi fanno correzioni cieche
Senza dati di utenti reali, un agente AI non sa quale pagina è lenta, quale elemento è il collo di bottiglia o se la sua correzione ha funzionato. Ottimizza una simulazione e si ferma lì. I tuoi utenti reali non sono d'accordo.
L'indagine manuale richiede ore
Segmenta i dati. Fai un'ipotesi. Esegui una traccia. Conferma. Scrivi 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 lab 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 usano. Lighthouse non riporta nemmeno l'INP. Se il tuo agente AI esegue Lighthouse, è cieco ai tuoi peggiori problemi di interattività. I field data sono l'unica fonte.
Due fonti di verità: I field data incontrano le prove del browser
CWV Superpowers combina i dati di utenti reali di CoreDash con tracce mirate di Chrome. I field data gli dicono cosa è lento. Chrome gli dice perché.
CoreDash dice all'agente cosa è lento
CoreDash traccia ogni caricamento di pagina di ogni utente reale. Ogni metrica, attribuita all'elemento esatto che causa il problema. Nessun campionamento, nessun limite.
Quando CoreDash riporta un LCP di 4,2 secondi con il 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à, breakdown delle fasi, target di interazione INP, script LOAF, elemento shiftante per il 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 a 4x. Traccia solo la fase del collo di bottiglia identificata da CoreDash.
Il Load Delay è il collo di bottiglia? L'agente esamina il network waterfall cercando gap di scoperta. Render Delay? Cerca script bloccanti e ritardi nel caricamento dei font.
Il risultato: screenshot filmstrip, network waterfall e prove mirate che spiegano la causa principale esposta dai tuoi field data.
Ragionamento proporzionale, non soglie assolute
Lighthouse ti dice "Il Render Delay è 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 è 350ms. Input Delay 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). La Presentation è il collo di bottiglia, anche se 200ms suona bene isolatamente. Correggerlo fa la differenza. Ottimizzare l'Input Delay è a malapena percettibile.
Questo previene l'errore più comune nel lavoro sulle performance: correggere la cosa sbagliata.
Cinque passi: Da "qualcosa è lento" alla correzione del codice
Fagli una domanda. Cinque passi dopo hai una correzione supportata da prove di utenti reali.
1. Scoperta
Scansiona i tuoi dati CoreDash cercando le pagine e le metriche peggiori. Dà priorità a valutazioni scarse, mobile, pagine ad alto traffico e punteggi p75 che nascondono una lunga coda di prestazioni scadenti.
2. Diagnosi
Suddivide la metrica in fasi. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Nomina il collo di bottiglia per percentuale.
3. Traccia Chrome
Visita la pagina con l'emulazione mobile. Traccia solo la fase del collo di bottiglia dal passo 2. Cattura network waterfall, filmstrip e le prove delle risorse bloccanti.
4. Causa principale
Combina entrambe le fonti di prova in una sola dichiarazione: l'elemento, la causa, le metriche CoreDash e ciò che Chrome ha confermato. Nessuna ambiguità.
5. Correzione o Report
Scegli tu. Applica la correzione del codice con file, riga, elemento, prima/dopo. Genera un report HTML autonomo con grafici e prove. O entrambi.
Oltre 25 dimensioni: Ogni angolazione coperta dai tuoi field data
Queste sono le dimensioni effettive di CoreDash che l'agente interroga. 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 shiftante Causa dello shift Timing dello shiftSegmenti
Tipo di dispositivo Paese Browser OS Connessione Tipo di visitatore Percorso paginaTrend
Delta a 7 giorni Baseline a 28 giorni Rilevamento regressioniDiagnosi: Breakdown a livello di fase per ogni Core Web Vital
Non solo punteggi. Ogni metrica scomposta in fasi usando l'attribuzione di utenti reali da CoreDash.
Correggi il LCP con l'AI: diagnosi del Largest Contentful Paint
Breakdown in 4 fasi: TTFB, Load Delay, Load Time, Render Delay. Identifica quale fase consuma la fetta maggiore del tempo totale.
Attribuzione dell'elemento: l'esatto elemento LCP, il suo tipo (immagine, testo, immagine di background, video) e lo stato di priorità (fetchpriority, lazy loading).
Correzioni tipiche: aggiungi preload hint, rimuovi il lazy loading dall'hero, ottimizza il formato dell'immagine, correggi lo script render blocking.
Correggi l'INP con l'AI: diagnosi dell'Interaction to Next Paint
Breakdown in 3 fasi: Input Delay, Processing, Presentation. L'unica metrica che non puoi simulare in lab. I field data sono l'unica fonte.
Attribuzione dello script: I Long Animation Frames (LOAF) nominano il file JavaScript esatto e la durata. Più lo stato di caricamento della pagina quando è avvenuta l'interazione.
Correzioni tipiche: yielding al main thread, deferisci la valutazione, dividi gli event handler, content-visibility per DOM grandi.
CLS: Cumulative Layout Shift
5 pattern di cause: immagini senza dimensioni, swap di font, contenuto iniettato dinamicamente, risorse a caricamento tardivo, animazioni CSS su proprietà di layout.
Cross-dimensionale: confronta mobile vs desktop, visitatori nuovi vs di ritorno, reti veloci vs lente per restringere la causa.
Correzioni tipiche: aggiungi larghezza/altezza, font-display: optional, prenotazione 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 unito.
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 di un preload hint e non ha fetchpriority="high".
Prove di CoreDash:
Il LCP è 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 di +340ms su 7 giorni.
Prove di Chrome:
Il network waterfall mostra un gap di 1.940ms tra il primo byte dell'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"> a templates/product.html riga 12. Imposta fetchpriority="high" sull'elemento img alla riga 47.
Consiglio AI generico:
"Considera di aggiungere fetchpriority alla tua immagine LCP e assicurati un precaricamento adeguato delle risorse critiche."
CWV Superpowers:
Elemento: div.hero-banner > img.product-main
File: templates/product.html, riga 47
Prove: 52% del tempo LCP nel Load Delay (CoreDash p75). Gap di scoperta di 1.940ms (network 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 davvero ciascuno.
| Capacità | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Fonte dati | Utenti reali (28 giorni di field data) | Sessione lab singola | Caricamento singolo simulato |
| Misurazione dell'INP | ✓ Interazioni reali | ✗ Nessun utente reale | ✗ Non misurato |
| Breakdown delle fasi | ✓ Fasi LCP, INP, CLS | ~ Analisi manuale | ✗ Solo punteggio |
| Attribuzione dell'elemento | ✓ Elemento esatto + priorità | ~ Se sai dove guardare | ~ Suggerimenti generici |
| Ragionamento proporzionale | ✓ Collo di bottiglia per % | ✗ Valori assoluti | ✗ Valori assoluti |
| Confronto per segmenti | ✓ Dispositivo, paese, browser | ✗ Config singola | ✗ Config singola |
| Rilevamento trend | ✓ Delta a 7 giorni | ✗ Punto nel tempo | ✗ Punto nel tempo |
| Tracciamento Chrome | ✓ Mirato per fase | ✓ Accesso completo | ✗ Nessun browser |
| Correzioni del codice | ✓ File + riga + diff | ~ Dipende dall'agente | ~ Consiglio generico |
Nota: Il Chrome DevTools MCP è complementare. CWV Superpowers lo usa per il tracciamento mirato dopo che i field data identificano il collo di bottiglia. Funzionano meglio insieme.
Report: mandali su Slack, allegali su Jira
HTML autonomo. Nessuna dipendenza. Nessun build step. Un file con tutto inline.
Report completo (con Chrome)
Card delle metriche codificate a colori, grafici di breakdown delle fasi, screenshot filmstrip nei momenti chiave (first paint, LCP, loaded), network waterfall in SVG, analisi della causa principale e la correzione raccomandata con il codice prima/dopo.
Report solo RUM
Stesse card delle metriche e breakdown delle fasi, più l'attribuzione dell'elemento e l'analisi della causa principale. Nessun filmstrip o waterfall, ma la qualità della diagnosi è identica perché i field data sono la fonte di verità.
Funziona con qualsiasi client MCP
Claude Code: Skill completa con workflow automatizzato. Scoperta, diagnosi, tracciamento Chrome, correzioni del codice e report. Raccomandato.
Cursor: Installazione plugin con l'MCP di CoreDash. Diagnosi completa e correzioni del codice dentro il tuo editor.
VS Code, Windsurf, Gemini CLI: Qualsiasi client che supporti i server MCP HTTP si connette a CoreDash. Stessi field data, stessa attribuzione.
Client Success
Don't just take my word for it
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.
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."
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."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
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."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed 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."
Operativo in 2 minuti
Diagnosi automatizzata dei Core Web Vitals nel tuo terminale. Hai bisogno di un account CoreDash con dati in ingresso. Il tier gratuito funziona.
Claude Code
claude mcp add --transport http coredash https://app.coredash.app/api/mcp
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers
claude --chrome
Trova il mio problema CWV più grave e correggilo. Alla prima connessione, esegui /mcp, scegli coredash e seleziona Authenticate. Il tuo browser apre il login di CoreDash, scegli un progetto e approvi, e Claude Code salva un token OAuth a breve scadenza che si aggiorna automaticamente (accesso per 1 ora, refresh di 30 giorni) e rimane revocabile. Nessuna chiave da incollare.
Preferisci un'API key per uso headless o in CI? Aggiungi --header "Authorization: Bearer cdk_YOUR_API_KEY" al comando, generata 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 (Copilot agent mode), Windsurf, Gemini CLI, Claude Desktop e qualsiasi client MCP HTTP. Un endpoint MCP per le web performance, per ogni agente.
Domande frequenti
Devo avere Chrome in esecuzione per usare CWV Superpowers?
No. Il tracciamento Chrome è opzionale. Senza, ottieni la diagnosi completa sui field data, breakdown delle fasi, attribuzione dell'elemento e suggerimenti di correzione del codice basati solo sui dati di CoreDash. Chrome aggiunge screenshot filmstrip, network waterfall e la conferma visiva della causa principale. Entrambe le modalità generano report.
In cosa è diverso dall'eseguire Lighthouse nel mio agente AI?
Lighthouse esegue un singolo caricamento sintetico sulla tua macchina. CWV Superpowers usa 28 giorni di dati di utenti reali da CoreDash: dispositivi veri, reti vere, interazioni vere. Misura l'INP dai tap degli utenti reali (Lighthouse non può farlo). Confronta segmenti (mobile vs desktop, India vs USA). E usa il ragionamento proporzionale per trovare la fase del collo di bottiglia, non solo punteggi assoluti.
Quali agenti AI per il coding sono supportati?
Qualsiasi agente AI per il coding e le web performance che supporti i server MCP (Model Context Protocol). Claude Code ha una skill dedicata con un workflow automatizzato in 5 passi. Cursor, VS Code (Copilot agent mode), Windsurf, Gemini CLI e Claude Desktop si connettono tramite l'endpoint MCP HTTP di CoreDash. I field data e l'attribuzione sono identici per tutti i client.
CoreDash è gratuito?
CoreDash ha un tier gratuito che funziona con CWV Superpowers. Hai bisogno di dati in ingresso dal tuo sito (aggiungi il tag script di CoreDash). Il tier gratuito non ha campionamento e nessun limite alle visualizzazioni di pagina. Le API key per l'accesso MCP sono disponibili su tutti i piani.
Posso usarlo per i siti dei clienti?
Sì. Per ogni progetto CoreDash puoi creare API key MVP dedicate illimitate. Aggiungi CoreDash a ogni sito cliente, genera un'API key in 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'orchestratore, i moduli di diagnosi, la logica del tracciamento Chrome e i template dei report sono tutti su GitHub. Leggi come funziona. Fai un fork. Estendilo. Contribuisci.
Inizia la tua prova gratuita Vedi su GitHub