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. Web performance agentica — 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 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 utilizza per il posizionamento. Un agente AI utile per le web performance 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 posiziona i siti in base ai dati sul campo CrUX di utenti Chrome reali su un periodo di 28 giorni. Un punteggio Lighthouse perfetto accompagnato da un punteggio sul campo insufficiente è un caso frequente. 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 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 veri utenti non sono d'accordo.
L'Indagine Manuale Richiede Ore
Segmenta i dati. Ipotizza. Esegui un tracciamento. Conferma. Prepara la correzione. Un performance engineer senior impiega dalle 2 alle 4 ore per ogni problema. Moltiplicalo per ogni pagina lenta del tuo sito.
L'INP non può essere simulato in alcun modo in laboratorio 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, che dispositivo usano. 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 tracciamenti mirati 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'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 della priorità, scomposizione delle fasi, target di interazione dell'INP, script LOAF, elemento di shift del 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 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 la network waterfall per trovare ritardi di scoperta (discovery gaps). È il 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 dati sul campo.
Ragionamento proporzionale, non soglie assolute
Lighthouse ti dice "Il Render Delay è di 350ms". È questo 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%). Presentation è il collo di bottiglia, anche se 200ms sembrano accettabili se presi singolarmente. Correggerlo fa la differenza. L'ottimizzazione dell'Input Delay si nota a malapena.
Questo previene l'errore più comune nel lavoro sulle performance: correggere la cosa sbagliata.
Cinque passaggi: Da "qualcosa è lento" alla correzione del codice
Fagli una domanda. Cinque passaggi dopo avrai una correzione supportata da prove di utenti reali.
1. Scoperta
Scansiona i tuoi dati CoreDash alla ricerca delle pagine e delle metriche peggiori. Dà priorità a valutazioni scarse, dispositivi mobili, pagine ad alto traffico e punteggi p75 che nascondono una lunga coda di prestazioni scadenti.
2. Diagnosi
Scompone la metrica in fasi. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Identifica il collo di bottiglia in percentuale.
3. Tracciamento Chrome
Visita la pagina con l'emulazione mobile. Traccia solo la fase del collo di bottiglia emersa al passaggio 2. Cattura la network waterfall, la filmstrip e le prove delle risorse bloccanti.
4. Causa Principale
Combina entrambe le fonti di prova in un'unica dichiarazione: l'elemento, la causa, le metriche di CoreDash e ciò che Chrome ha confermato. Nessuna ambiguità.
5. Correzione o Report
A te la scelta. Applica la correzione al codice con file, riga, elemento, prima/dopo. Genera un report HTML autonomo con grafici e prove. O entrambi.
Oltre 25 dimensioni: Ogni prospettiva coperta dai tuoi dati sul campo
Queste sono le reali dimensioni di CoreDash che l'agente interroga. Non un riassunto. Il quadro completo.
LCP (Largest Contentful Paint)
Elemento LCP Tipo di elemento Stato della 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 delle regressioniDiagnostica: Scomposizione a livello di fase per ogni Core Web Vital
Non solo punteggi. Ogni metrica è scomposta in fasi utilizzando l'attribuzione da utenti reali di CoreDash.
Risolvi 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 background, video) e lo stato della priorità (fetchpriority, lazy loading).
Correzioni tipiche: aggiungere l'hint preload, rimuovere il lazy loading dalla hero, ottimizzare il formato dell'immagine, correggere gli script render-blocking.
Risolvi 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) identificano l'esatto file JavaScript e la sua durata. Oltre allo stato di caricamento della pagina al momento dell'interazione.
Correzioni tipiche: yield al main thread, differire la valutazione, dividere gli event handler, content-visibility per DOM di grandi dimensioni.
CLS: Cumulative Layout Shift
5 pattern di cause: immagini senza dimensioni, font swaps, contenuti iniettati dinamicamente, risorse a caricamento ritardato, animazioni CSS su proprietà di layout.
Cross-dimensionale: confronta mobile vs desktop, visitatori nuovi vs di ritorno, reti veloci vs lente per restringere il campo della causa.
Correzioni tipiche: aggiungere width/height, font-display: optional, prenotare lo spazio con min-height, usare transform invece di top/left.
Come si Presenta un'Analisi della Causa Principale
Non "considera di ottimizzare le tue immagini." Questo è l'output reale. Abbastanza specifico da essere revisionato e unito (merge).
Causa principale:
L'immagine LCP div.hero-banner > img.product-main in /product/running-shoes-42 viene scoperta in ritardo di 1.980ms perché non possiede un hint preload e non ha fetchpriority="high".
Prove CoreDash:
LCP è di 3.820ms (scarso) su mobile, p75. Il Load Delay è il collo di bottiglia a 1.980ms (52% del totale). Stato della priorità: 3 (non precaricato). Trend: in peggioramento di +340ms su 7 giorni.
Prove Chrome:
La network waterfall mostra un divario di 1.940ms tra il first 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"> in 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 di precaricare adeguatamente le 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). Divario di scoperta (discovery gap) di 1.940ms (Chrome waterfall).
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 realmente ciascuno di essi.
| Funzionalità | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Fonte dati | Utenti reali (28 giorni di dati sul campo) | Singola sessione di laboratorio | Singolo caricamento simulato |
| Misurazione INP | ✓ Interazioni reali | ✗ Nessun utente reale | ✗ Non misurato |
| Scomposizione delle fasi | ✓ Fasi LCP, INP, CLS | ~ Analisi manuale | ✗ Solo punteggio |
| Attribuzione dell'elemento | ✓ Esatto elemento + priorità | ~ Se sai dove guardare | ~ Suggerimenti generici |
| Ragionamento proporzionale | ✓ Collo di bottiglia in % | ✗ Valori assoluti | ✗ Valori assoluti |
| Confronto dei segmenti | ✓ Dispositivo, paese, browser | ✗ Configurazione singola | ✗ Configurazione singola |
| Rilevamento dei trend | ✓ Delta a 7 giorni | ✗ Puntuale nel tempo | ✗ Puntuale nel tempo |
| Tracciamento Chrome | ✓ Mirato in base alla fase | ✓ Accesso completo | ✗ Nessun browser |
| Correzioni del codice | ✓ File + riga + diff | ~ Dipendente dall'agente | ~ Consigli generici |
Nota: Il Chrome DevTools MCP è complementare. CWV Superpowers lo usa per tracciamenti mirati dopo che i dati sul campo hanno identificato il collo di bottiglia. Funzionano 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)
Schede metriche con codice colore, grafici di scomposizione delle fasi, screenshot filmstrip nei momenti chiave (first paint, LCP, loaded), SVG della network waterfall, analisi della causa principale e la correzione consigliata con codice prima/dopo.
Report Solo-RUM
Stesse schede metriche e scomposizione delle fasi, più attribuzione degli elementi 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. 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 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."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
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."
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."
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 ricezione. Il piano gratuito è sufficiente.
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
Trova il mio più grande problema nei CWV e risolvilo. Ottieni la tua chiave API da CoreDash → Project Settings → API Keys (MCP). Mostrata una sola volta. Salvata come hash SHA-256. In 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à Copilot agent), Windsurf, Gemini CLI, Claude Desktop e qualsiasi client MCP HTTP. Un singolo endpoint MCP per le web performance, ogni agente.
Domande Frequenti
Ho bisogno di Chrome in esecuzione per usare CWV Superpowers?
No. Il tracciamento tramite Chrome è opzionale. Senza di esso ottieni comunque una diagnosi completa dai dati sul campo, scomposizione delle fasi, attribuzione dell'elemento e suggerimenti per la correzione del codice basati esclusivamente sui dati di CoreDash. Chrome aggiunge gli screenshot della filmstrip, la network waterfall e la conferma visiva della causa principale. Entrambe le modalità generano report.
In che modo è diverso dall'eseguire Lighthouse nel mio agente AI?
Lighthouse esegue un singolo caricamento sintetico sulla tua macchina. CWV Superpowers utilizza 28 giorni di dati di utenti reali provenienti da CoreDash: dispositivi reali, reti reali, interazioni reali. Misura l'INP dai tap degli utenti reali (Lighthouse non può farlo). Confronta segmenti (mobile vs desktop, India vs USA). E usa un ragionamento proporzionale per trovare la fase del collo di bottiglia, non solo punteggi assoluti.
Quali agenti AI per la programmazione sono supportati?
Qualsiasi agente AI per la programmazione orientato alle web performance 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à Copilot agent), Windsurf, Gemini CLI e Claude Desktop si connettono tramite l'endpoint MCP HTTP 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 dati in flusso dal tuo sito (aggiungi lo script tag di CoreDash). Il piano gratuito non ha campionamento e non ha limiti di visualizzazione di pagina. Le chiavi API per l'accesso MCP sono disponibili in tutti i piani.
Posso usarlo per i siti dei clienti?
Sì. Per ogni progetto CoreDash puoi creare un numero illimitato di Chiavi API MVP dedicate . Aggiungi CoreDash a ogni sito 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 è rilasciato con 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 in Chrome e i template dei report sono tutti su GitHub. Leggi come funziona. Fai un fork. Estendilo. Contribuisci.
Inizia la Tua Prova Gratuita Visualizza su GitHub