CWV Superpowers: diagnosi automatizzata dei Core Web Vitals

CWV Superpowers è una skill open source gratuita per Claude Code che si connette ai tuoi field data di CoreDash e agli strumenti del browser Chrome per diagnosticare i problemi di Core Web Vitals. Identifica il peggior collo di bottiglia nei dati degli utenti reali, traccia la causa radice e genera la correzione del codice. Non un elenco di suggerimenti di Lighthouse. L'elemento, il file, la riga di codice.

Ultima revisione di Arjen Karel a marzo 2026

Quickstart:

Il codice è su GitHub. Installalo in Claude Code con due comandi:

/* Installa il Marketplace e la skill CWV SuperPower */
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers

/* ora avvia la superpower AI di Core Web Vitals */
Perché il mio sito è lento?

Poi aggiungi CoreDash come server MCP ed esegui claude --chrome. Tutto qui.

Cosa fa la skill CWV Superpowers

CWV Superpowers combina due fonti di dati che insieme rispondono sia a cosa è lento sia al perché.

Il Real User Monitoring di CoreDash ti dice cosa è effettivamente lento. Utenti reali, dispositivi reali, reti reali. CoreDash traccia ogni caricamento di pagina e attribuisce ogni metrica all'esatto elemento che causa il problema. Quando dice che il tuo LCP è di 4,2 secondi e l'elemento collo di bottiglia è div.hero > img.main, questo è ciò che sperimentano i tuoi utenti reali.

Il tracciamento del browser Chrome ti dice il perché. La skill visita la pagina con emulazione mobile (4G, throttling della CPU 4x), registra il waterfall di rete e traccia le esatte fasi identificate dai dati RUM. Non tutto, solo la parte che si è dimostrata causa del rallentamento delle tue pagine!

Questo è il trucco! I dati RUM ti dicono cosa è lento, ma non perché. Un trace di Chrome ti dà il perché, ma senza field data analizzi la pagina sbagliata o la metrica sbagliata. CWV Superpowers combina entrambi.

Diagnostica tutti e tre i Core Web Vitals: LCP (suddivisione in quattro fasi), INP (suddivisione in tre fasi con attribuzione degli script) e CLS (pattern matching rispetto a cause note). Per i workflow completi specifici per metrica, vedi la guida alla diagnosi del LCP e la guida alla diagnosi dell'INP.

Il workflow in 5 step

Ogni analisi segue cinque step.

Step 1: Intent. Gli dici cosa guardare ("LCP sulle mie pagine prodotto") o gli chiedi di trovare il problema ("Cosa devo correggere per primo?"). Se indichi qualcosa di specifico, ne chiarisce l'ambito. Se vuoi la discovery, passa allo Step 2.

Step 2: Discovery. La skill scansiona il tuo sito tramite CoreDash. Recupera lo stato di salute generale, quello mobile, i peggiori URL per LCP e i peggiori per INP. Poi sceglie il problema principale: valutazioni "poor" rispetto a "needs improvement", mobile rispetto a desktop, volume di traffico maggiore. Una pagina con un LCP p75 di 2,4 secondi che "supera il test" ma ha il 18% di utenti nella fascia "poor" è comunque un problema. CWV Superpowers lo rileva.

Step 3: Diagnosis. Per il LCP, effettua da 5 a 7 chiamate API a CoreDash: l'elemento LCP, il tipo di elemento, lo stato di priorità, la suddivisione in quattro fasi (TTFB, Load Delay, Load Time, Render Delay) e il trend a 7 giorni. Identifica il collo di bottiglia usando il ragionamento proporzionale: la fase che consuma la quota maggiore del tempo totale, non la fase che supera una soglia assoluta. Per l'INP, recupera l'elemento dell'interazione lenta, gli script LOAF e la suddivisione in tre fasi. Per il CLS, cerca corrispondenze con cinque pattern di cause note.

Step 4: Chrome trace. Se Chrome è disponibile, la skill visita la pagina e traccia solo la fase del collo di bottiglia dello Step 3. Un trace mirato genera prove. Un trace completo di tutto genera solo rumore.

Step 5: Output. Applica la correzione del codice, genera un report HTML o entrambi. La correzione indica il file, la riga, l'elemento e mostra il prima e il dopo.

Come appare l'output

La skill genera una dichiarazione sulla causa radice che collega field data, prove di Chrome e la correzione specifica:

Causa radice: L'immagine LCP div.hero-banner > img.product-main su /product/running-shoes-42 viene scoperta con 1.980 ms di ritardo perché non ha un suggerimento di preload e non ha fetchpriority="high". Dati CoreDash: il LCP è 3.820 ms (poor) su mobile, p75. Load Delay è il collo di bottiglia al 52% del totale. Il trace di Chrome conferma: un intervallo di 1.940 ms tra il primo byte dell'HTML e la richiesta dell'immagine nel waterfall di rete.

La correzione segue direttamente: aggiungi un suggerimento di preload e imposta fetchpriority="high". Specifica per l'elemento, il file e la causa. Non un consiglio generico.

I report completi includono schede delle metriche con valutazioni con codice colore, grafici di suddivisione delle fasi e, quando è stato usato Chrome, gli screenshot del filmstrip e un SVG del waterfall di rete. Entrambi i tipi di report sono file HTML autonomi che puoi inserire in un thread di Slack o allegare a un ticket.

Consiglio: Chrome è opzionale. Senza di esso ottieni comunque la diagnosi RUM completa, l'identificazione del collo di bottiglia e le correzioni del codice. Perdi gli elementi visivi del filmstrip e del waterfall, ma la qualità della diagnosi è la stessa perché i dati degli utenti reali sono la fonte primaria di verità.

Per iniziare

Ti serve un account CoreDash con dati degli utenti reali attivi. Il piano gratuito è sufficiente. Per l'uso interattivo non serve alcuna chiave API: Claude Code effettua l'accesso tramite browser. Se vuoi comunque una chiave (per esecuzioni headless o CI), ottienila da Project Settings > API Keys (MCP). Le chiavi vengono mostrate una sola volta, memorizzate come hash SHA-256 e sono di sola lettura.

Claude Code (consigliato)

# Aggiungi il server MCP di CoreDash (accesso tramite browser, nessuna chiave API)
claude mcp add --transport http coredash https://app.coredash.app/api/mcp

# Aggiungi la skill dal marketplace
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower

# Avvia con Chrome per un'analisi completa
claude --chrome

Al primo collegamento, esegui /mcp, seleziona coredash e scegli Authenticate. Il tuo browser aprirà la pagina di login e consenso di CoreDash; accedi, seleziona un progetto e accetta. Claude Code memorizza un token OAuth a breve termine che si aggiorna automaticamente (durata di 1 ora, rinnovo di 30 giorni) e rimane revocabile. Poi chiedi: "What are my Core Web Vitals?". Se restituisce i tuoi dati reali di LCP, INP e CLS, sei pronto.

Preferisci una chiave API, o esegui in modalità headless senza browser? Passa invece l'header Bearer:

claude mcp add --transport http coredash https://app.coredash.app/api/mcp \
  --header "Authorization: Bearer cdk_YOUR_API_KEY"

Cursor

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

Il server MCP di CoreDash funziona con qualsiasi client che supporta HTTP MCP: VS Code (modalità agente di Copilot), Windsurf, Gemini CLI, Cline e gli IDE JetBrains. L'endpoint è https://app.coredash.app/api/mcp con un header Bearer token. Vedi la guida all'installazione su GitHub per la configurazione di ciascun client.

Per comprendere perché i field data sono importanti per il lavoro degli agenti AI sui Core Web Vitals e perché gli agenti basati solo su Lighthouse producono correzioni che vengono rifiutate un terzo delle volte, leggi l'articolo di panoramica.