CWV Superpowers : diagnostic automatisé des Core Web Vitals

CWV Superpowers est un skill Claude Code gratuit et open source qui se connecte à vos field data CoreDash et aux outils du navigateur Chrome pour diagnostiquer les problèmes de Core Web Vitals. Il identifie votre pire goulot d'étranglement dans vos données d'utilisateurs réels, retrace la cause racine et génère le correctif de code. Pas une liste de suggestions Lighthouse. L'élément, le fichier, la ligne de code.

Dernière révision par Arjen Karel en mars 2026

Démarrage rapide :

Le code est disponible sur GitHub. Installez-le dans Claude Code avec deux commandes :

/* Installez la Marketplace et le skill CWV Superpowers */
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers

/* Lancez maintenant la superpower IA Core Web Vitals */
Pourquoi mon site est-il lent ?

Ajoutez ensuite CoreDash comme serveur MCP et lancez claude --chrome. C'est tout.

Ce que fait le skill CWV Superpowers

CWV Superpowers combine deux sources de données qui, ensemble, répondent à la fois à ce qui est lent et à pourquoi.

Le Real User Monitoring de CoreDash vous dit ce qui est réellement lent. Utilisateurs réels, appareils réels, réseaux réels. CoreDash suit chaque chargement de page et attribue chaque métrique à l'élément exact à l'origine du problème. Quand il indique que votre LCP est de 4,2 secondes et que l'élément goulot d'étranglement est div.hero > img.main, c'est ce que vivent vos utilisateurs réels.

Le traçage du navigateur Chrome vous dit pourquoi. Le skill visite la page avec une émulation mobile (4G, bridage CPU 4x), enregistre le waterfall réseau et trace les phases exactes identifiées par les données RUM. Pas tout, seulement la partie dont il est prouvé qu'elle ralentit vos pages !

Voilà l'astuce ! Les données RUM vous disent ce qui est lent, mais pas pourquoi. Une trace Chrome vous donne le pourquoi, mais sans field data, vous étudiez la mauvaise page ou la mauvaise métrique. CWV Superpowers combine les deux.

Il diagnostique les trois Core Web Vitals : LCP (décomposition en quatre phases), INP (décomposition en trois phases avec attribution du script) et CLS (pattern matching par rapport à des causes connues). Pour les workflows complets spécifiques à chaque métrique, consultez le guide de diagnostic LCP et le guide de diagnostic INP.

Le workflow en 5 étapes

Chaque investigation suit cinq étapes.

Étape 1 : Intention. Vous lui indiquez quoi analyser (« LCP sur mes pages produit ») ou vous lui demandez de trouver le problème (« Que dois-je corriger en premier ? »). Si vous nommez quelque chose de spécifique, il clarifie le périmètre. Si vous souhaitez une découverte, il passe à l'Étape 2.

Étape 2 : Découverte. Le skill scanne votre site via CoreDash. Il récupère l'état de santé général, sur mobile, les pires URL par LCP et les pires par INP. Il sélectionne ensuite le problème majeur : les évaluations « poor » avant « needs improvement », le mobile avant le desktop, et le volume de trafic le plus élevé. Une page avec un LCP au p75 de 2,4 secondes qui « passe » mais compte 18 % d'utilisateurs dans la zone « poor » reste un problème. CWV Superpowers le détecte.

Étape 3 : Diagnostic. Pour le LCP, il effectue 5 à 7 appels API CoreDash : l'élément LCP, le type d'élément, l'état de priorité, la décomposition en quatre phases (TTFB, Load Delay, Load Time, Render Delay) et la tendance sur 7 jours. Il identifie le goulot d'étranglement par raisonnement proportionnel : la phase qui consomme la plus grande part du temps total, et non celle qui dépasse un seuil absolu. Pour l'INP, il récupère l'élément d'interaction lent, les scripts LOAF et la décomposition en trois phases. Pour le CLS, il recherche des correspondances parmi cinq motifs de causes connus.

Étape 4 : Trace Chrome. Si Chrome est disponible, le skill visite la page et trace uniquement la phase du goulot d'étranglement identifiée à l'Étape 3. Une trace ciblée génère des preuves. Une trace complète de tout génère du bruit.

Étape 5 : Résultat. Appliquez le correctif de code, générez un rapport HTML, ou faites les deux. Le correctif indique le fichier, la ligne, l'élément, et montre le code avant et après.

À quoi ressemble le résultat

Le skill génère un constat de cause racine qui relie les field data, les preuves fournies par Chrome et le correctif spécifique :

Cause racine : L'image LCP div.hero-banner > img.product-main sur /product/running-shoes-42 est découverte avec 1 980 ms de retard car elle n'a pas de directive de preload et n'a pas de fetchpriority="high". Données CoreDash : le LCP est de 3 820 ms (poor) sur mobile, au p75. Le Load Delay est le goulot d'étranglement à hauteur de 52 % du total. La trace Chrome le confirme : un écart de 1 940 ms sépare le premier octet HTML de la requête de l'image dans le waterfall réseau.

Le correctif en découle directement : ajoutez une directive de preload, définissez fetchpriority="high". Une solution spécifique à l'élément, au fichier et à la cause. Pas un conseil générique.

Les rapports complets incluent des cartes de métriques avec des codes couleur d'évaluation, des graphiques de décomposition des phases et, si Chrome a été utilisé, des captures d'écran de type filmstrip ainsi qu'un SVG du waterfall réseau. Les deux types de rapports sont des fichiers HTML autonomes que vous pouvez glisser dans une discussion Slack ou joindre à un ticket.

Astuce : Chrome est optionnel. Sans lui, vous bénéficiez tout de même du diagnostic RUM complet, de l'identification des goulots d'étranglement et des correctifs de code. Vous n'aurez pas les visuels du filmstrip et du waterfall, mais la qualité du diagnostic reste identique car les données d'utilisateurs réels constituent la principale source de vérité.

Pour commencer

Vous avez besoin d'un compte CoreDash alimenté en données d'utilisateurs réels. L'offre gratuite suffit. Pour une utilisation interactive, aucune clé API n'est requise : Claude Code s'authentifie directement via le navigateur. Si vous souhaitez tout de même une clé (pour des exécutions headless ou de CI), récupérez-en une dans Project Settings > API Keys (MCP). Les clés ne sont affichées qu'une seule fois, sont stockées sous forme de hash SHA-256 et restent en lecture seule.

Claude Code (recommandé)

# Ajoutez le serveur MCP CoreDash (connexion via navigateur, sans clé API)
claude mcp add --transport http coredash https://app.coredash.app/api/mcp

# Ajoutez le skill depuis la marketplace
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower

# Lancez avec Chrome pour une analyse complète
claude --chrome

Lors de la première connexion, exécutez /mcp, sélectionnez coredash et choisissez Authenticate. Votre navigateur ouvre la page de connexion et de consentement de CoreDash ; connectez-vous, choisissez un projet et acceptez. Claude Code stocke un token OAuth à courte durée de vie qui se régénère automatiquement (accès de 1 heure, rafraîchissement sur 30 jours) et reste révocable. Demandez ensuite : « Quels sont mes Core Web Vitals ? » S'il renvoie vos données réelles LCP, INP et CLS, vous êtes prêt.

Vous préférez utiliser une clé API, ou travailler en mode headless sans navigateur ? Passez plutôt l'en-tête Bearer :

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

Cursor

Ajoutez CoreDash dans .cursor/mcp.json :

{
  "mcpServers": {
    "coredash": {
      "url": "https://app.coredash.app/api/mcp",
      "headers": {
        "Authorization": "Bearer cdk_YOUR_API_KEY"
      }
    }
  }
}

Autres clients MCP

Le serveur MCP CoreDash fonctionne avec tous les clients qui supportent HTTP MCP : VS Code (mode agent Copilot), Windsurf, Gemini CLI, Cline et les IDE JetBrains. L'endpoint est https://app.coredash.app/api/mcp avec un en-tête de token Bearer. Consultez le guide de configuration sur GitHub pour le détail par client.

Pour comprendre pourquoi les field data sont indispensables au travail des agents IA sur les Core Web Vitals, et pourquoi les agents basés uniquement sur Lighthouse produisent des correctifs rejetés dans un tiers des cas, lisez l'article de présentation.