Il Tuo Agente AI Ha Appena Ottenuto i Superpoteri dei Core Web Vitals
Collega Claude Code ai tuoi dati sul campo di CoreDash. Trova il tuo peggior collo di bottiglia tra milioni di caricamenti di pagina, traccia la causa principale su Chrome e scrive la correzione. Prestazioni web agentiche, non un report, ma l'effettiva riga di codice che deve essere modificata.
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 usa per il posizionamento. Un agente AI utile per le prestazioni web parte dagli stessi dati che usa 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 classifica in base ai dati sul campo CrUX degli utenti reali di Chrome su 28 giorni. Un punteggio perfetto su Lighthouse e un punteggio scarso sul campo si verificano continuamente. Il 52% dei siti mobile fallisce almeno un Core Web Vitals sul campo.
Agenti Ciechi Fanno Correzioni Cieche
Senza dati degli utenti reali, un agente AI non sa quale pagina è lenta, quale elemento è il collo di bottiglia o se la sua correzione ha aiutato. Ottimizza una simulazione e si ferma lì. I tuoi utenti reali non sono d'accordo.
L'Indagine Manuale Richiede Ore
Segmenta i dati. Ipotizza. Esegui una traccia. Conferma. Prepara la correzione. Un ingegnere delle prestazioni senior impiega dalle 2 alle 4 ore per ogni problema. Moltiplicalo per ogni pagina lenta del tuo sito.
L'INP non può essere simulato affatto in laboratorio Interaction to Next Paint misura come gli utenti reali interagiscono con la tua pagina. Nessun strumento 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 di fronte ai tuoi peggiori problemi di interattività. I dati sul campo sono l'unica fonte.
Due fonti di verità: I dati sul campo incontrano le prove del browser
CWV Superpowers combina i dati degli utenti reali di CoreDash con tracce mirate di Chrome. 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'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à, scomposizione delle fasi, target di interazione INP, script LOAF, elemento di spostamento CLS, tipo di dispositivo, tipo di visitatore, velocità di rete, tendenze a 7 giorni.
Chrome dice all'agente perché è lento
CWV Superpowers visita la pagina con l'emulazione mobile: Fast 3G, CPU limitata 4x. Traccia solo la fase del collo di bottiglia identificata da CoreDash.
Il Load Delay è il collo di bottiglia? L'agente esamina il waterfall di rete per individuare ritardi nella scoperta. Render Delay? Cerca script bloccanti e ritardi nel caricamento dei font.
Il risultato: screenshot filmstrip, waterfall di rete e prove mirate che spiegano la causa principale esposta dai tuoi dati sul campo.
Ragionamento proporzionale, non soglie assolute
Lighthouse ti dice "Render Delay is 350ms." È quello il problema? Nessuna idea. CWV Superpowers identifica il collo di bottiglia come la fase che consuma la percentuale più grande del tempo totale.
L'INP è 350ms. Input Delay 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). Presentation è il collo di bottiglia, anche se 200ms sembrano accettabili isolatamente. Risolverlo sposta l'ago della bilancia. Ottimizzare l'Input Delay viene a malapena registrato.
Questo previene l'errore più comune nel lavoro sulle prestazioni: 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
Analizza i tuoi dati CoreDash per trovare 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 in percentuale.
3. Traccia di Chrome
Visita la pagina con l'emulazione mobile. Traccia solo la fase del collo di bottiglia del passo 2. Cattura il waterfall di rete, la filmstrip e le prove delle risorse bloccanti.
4. Causa Principale
Combina entrambe le fonti di prova in una singola dichiarazione: l'elemento, la causa, le metriche di 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 e prove. O entrambi.
25+ dimensioni: Ogni angolazione coperta dai tuoi dati sul campo
Queste sono le dimensioni effettive di CoreDash che l'agente interroga. Non un riepilogo. 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 spostamento Causa dello spostamento Tempistica dello spostamentoSegmenti
Tipo di dispositivo Paese Browser OS Connessione Tipo di visitatore Percorso paginaTendenze
Delta a 7 giorni Baseline a 28 giorni Rilevamento regressioneDiagnosi: Scomposizione a livello di fase per ogni Core Web Vitals
Non solo punteggi. Ogni metrica è suddivisa in fasi utilizzando l'attribuzione degli utenti reali di CoreDash.
Correggi LCP con 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 dall'hero, ottimizza il formato dell'immagine, correggi lo script render-blocking.
Correggi INP con 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 sua durata. Più lo stato di caricamento della pagina quando si è verificata l'interazione.
Correzioni tipiche: yield al thread principale, differire la valutazione, dividere i gestori di eventi, content-visibility per DOM di grandi dimensioni.
CLS: Cumulative Layout Shift
5 pattern di cause: immagini senza dimensioni, font swap, contenuti iniettati dinamicamente, risorse caricate in ritardo, animazioni CSS su proprietà di layout.
Multidimensionale: confronta mobile e desktop, visitatori nuovi e di ritorno, reti veloci e lente per restringere la causa.
Correzioni tipiche: aggiungi width/height, font-display: optional, riserva min-height, usa transform invece di top/left.
Come Appare una Dichiarazione della Causa Principale
Non "considera di ottimizzare le tue immagini". Questo è l'output effettivo. Abbastanza specifico da essere revisionato e integrato.
Causa principale:
L'immagine LCP div.hero-banner > img.product-main su /product/running-shoes-42 viene scoperta in ritardo di 1.980ms perché manca di un preload hint e non ha fetchpriority="high".
Prove CoreDash:
LCP è 3.820ms (scarso) su mobile, p75. Load Delay è il collo di bottiglia a 1.980ms (52% del totale). Stato di priorità: 3 (non precaricato). Tendenza: peggioramento di +340ms su 7 giorni.
Prove Chrome:
Il waterfall di rete mostra un divario di 1.940ms tra il primo 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"> a templates/product.html alla 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 in Load Delay (CoreDash p75). Divario di scoperta di 1.940ms (Chrome waterfall).
Correzione: Modifica del codice di 2 righe con diff prima/dopo.
Confronto: Come si posiziona CWV Superpowers
Diversi strumenti risolvono problemi diversi. Ecco cosa fa effettivamente ciascuno.
| Capacità | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Fonte dati | Utenti reali (28 giorni dati sul campo) | Singola sessione di 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 | ✓ Elemento esatto + priorità | ~ Se sai dove guardare | ~ Suggerimenti generici |
| Ragionamento proporzionale | ✓ Collo di bottiglia per % | ✗ Valori assoluti | ✗ Valori assoluti |
| Confronto segmenti | ✓ Dispositivo, paese, browser | ✗ Configurazione singola | ✗ Configurazione singola |
| Rilevamento tendenze | ✓ Delta a 7 giorni | ✗ Punto nel tempo | ✗ Punto nel tempo |
| Tracciamento Chrome | ✓ Mirato per fase | ✓ Accesso completo | ✗ Nessun browser |
| Correzioni codice | ✓ File + riga + diff | ~ Dipende dall'agente | ~ Consiglio generico |
Nota: Chrome DevTools MCP è complementare. CWV Superpowers lo usa per tracciamenti mirati dopo che i dati sul campo identificano il collo di bottiglia. Funzionano al meglio insieme.
Report: Inseriscili su Slack, allegali a Jira
HTML autonomo. Nessuna dipendenza. Nessun passo di build. Un file con tutto in linea.
Report Completo (con Chrome)
Schede delle metriche codificate a colori, grafici di scomposizione delle fasi, screenshot filmstrip in momenti chiave (first paint, LCP, caricato), waterfall di rete SVG, analisi della causa principale e la correzione consigliata con codice prima/dopo.
Report solo RUM
Stesse schede delle metriche e scomposizione delle fasi, più attribuzione degli elementi e analisi della causa principale. Niente 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. Scoperta, diagnosi, tracciamento Chrome, correzioni del codice e report. Consigliato.
Cursor: Installazione del plugin con CoreDash MCP. Diagnosi completa e correzioni del codice all'interno del tuo editor.
VS Code, Windsurf, Gemini CLI: Qualsiasi client che supporti server MCP HTTP si connette a CoreDash. Stessi dati sul campo, 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."
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
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.
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
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, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment 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."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
Operativo in 2 Minuti
Diagnosi automatizzata dei Core Web Vitals nel tuo terminale. Hai bisogno di un account CoreDash con dati in afflusso. Il piano gratuito funziona.
Claude Code
# 1. Add CoreDash MCP server claude mcp add --transport http coredash \ https://app.coredash.app/api/mcp \ --header "Authorization: Bearer cdk_YOUR_API_KEY" # 2. Install CWV Superpowers /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpower # 3. Start with Chrome (optional, recommended) claude --chrome # 4. Go Find my biggest CWV issue and fix it.
Ottieni la tua chiave API da CoreDash → Project Settings → API Keys (MCP). Mostrata una sola volta. Memorizzata come hash SHA-256. Sola lettura.
Cursor
# Install the plugin
/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 MCP HTTP. Un endpoint di prestazioni web MCP, ogni agente.
Domande Frequenti
Ho bisogno che Chrome sia in esecuzione per utilizzare CWV Superpowers?
No. Il tracciamento Chrome è facoltativo. Senza di esso ottieni la diagnosi completa sui dati sul campo, scomposizioni delle fasi, 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.
Come differisce questo 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 reali, reti reali, interazioni reali. Misura l'INP dai tocchi degli utenti reali (Lighthouse non può farlo). Confronta segmenti (mobile vs desktop, India vs US). E usa il ragionamento proporzionale per trovare la fase del collo di bottiglia, non solo punteggi assoluti.
Quali agenti di codifica AI sono supportati?
Qualsiasi agente di codifica AI per le prestazioni web che supporti 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. Devi avere dati in afflusso dal tuo sito (aggiungi il tag script di CoreDash). Il piano gratuito non ha campionamento e nessun limite di visualizzazioni di pagina. Le chiavi API per l'accesso MCP sono disponibili su tutti i piani.
Posso usare questo per i siti dei clienti?
Sì. Per ogni progetto CoreDash puoi creare un numero illimitato di chiavi API MVP dedicate. Aggiungi CoreDash a ciascun sito client, genera una chiave API 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 di 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