Votre agent IA a désormais des superpouvoirs Core Web Vitals
Connectez Claude Code à vos field data CoreDash. Il trouve votre pire goulot d'étranglement sur des millions de chargements de page, remonte à la cause racine dans Chrome et écrit le correctif. La performance web agentique n'est pas un rapport, mais la ligne de code exacte à modifier.
Installez en 2 minutes Démarrez l'essai gratuit de CoreDash »Trusted by market leaders · Client results
Les outils de performance IA ont un problème de données
La plupart des agents IA optimisent pour Lighthouse. Un score synthétique sur un appareil simulé que Google n'utilise pas pour ses classements. Un agent IA de performance web utile part des mêmes données que Google : des utilisateurs réels sur des téléphones d'entrée de gamme, des connexions instables, et des continents que votre machine de développement n'a jamais vus.
Lighthouse n'est pas votre signal de classement
Google classe selon les field data de CrUX issues de vrais utilisateurs de Chrome sur 28 jours. Un score Lighthouse parfait et un score field insuffisant arrivent tout le temps. 52 % des sites mobiles échouent à au moins un Core Web Vital dans le field.
Des agents aveugles appliquent des correctifs aveugles
Sans données d'utilisateurs réels, un agent IA ne sait pas quelle page est lente, quel élément est le goulot d'étranglement, ni si son correctif a fonctionné. Il optimise une simulation et s'arrête là. Vos utilisateurs réels ne sont pas d'accord.
L'investigation manuelle prend des heures
Segmenter les données. Émettre des hypothèses. Lancer une trace. Confirmer. Rédiger le correctif. Un ingénieur performance senior passe 2 à 4 heures par problème. Multipliez cela par chaque page lente de votre site.
L'INP ne peut pas du tout être simulé en lab Interaction to Next Paint mesure la façon dont les utilisateurs réels interagissent avec votre page. Aucun outil synthétique ne peut répliquer le comportement des utilisateurs réels : où ils tapent, à quelle vitesse ils défilent, quel appareil ils tiennent. Lighthouse ne rapporte même pas l'INP. Si votre agent IA utilise Lighthouse, il est aveugle à vos pires problèmes d'interactivité. Les field data sont la seule source.
Deux sources de vérité : le field data rencontre les preuves du navigateur
CWV Superpowers combine les données d'utilisateurs réels de CoreDash avec des traces Chrome ciblées. Le field data lui indique ce qui est lent. Chrome lui explique pourquoi.
CoreDash indique à l'agent ce qui est lent
CoreDash suit chaque chargement de page de chaque utilisateur réel. Chaque métrique est attribuée à l'élément exact à l'origine du problème. Aucun échantillonnage, aucune limite.
Quand CoreDash signale un LCP de 4,2 secondes avec un Load Delay consommant 52 % du temps total sur div.hero > img.main, l'agent sait exactement où regarder. Pas d'estimation. Une mesure issue de millions de sessions réelles.
La compétence interroge plus de 25 dimensions CoreDash : l'élément LCP, le type d'élément, l'état de priorité, la répartition des phases, la cible d'interaction INP, les scripts LOAF, l'élément à l'origine du déplacement CLS, le type d'appareil, le type de visiteur, la vitesse du réseau et les tendances sur 7 jours.
Chrome indique à l'agent pourquoi c'est lent
CWV Superpowers visite la page avec une émulation mobile : Fast 3G, bridage CPU 4x. Il ne trace que la phase de goulot d'étranglement identifiée par CoreDash.
Le Load Delay est le goulot d'étranglement ? L'agent examine la cascade réseau à la recherche de retards de découverte. Le Render Delay ? Il recherche les scripts bloquants et les retards de chargement des polices.
Le résultat : captures d'écran filmstrip, cascade réseau et preuves ciblées qui expliquent la cause racine mise en évidence par votre field data.
Un raisonnement proportionnel, pas des seuils absolus
Lighthouse vous indique : « Le Render Delay est de 350 ms. » Est-ce le problème ? Aucune idée. CWV Superpowers identifie le goulot d'étranglement comme la phase qui consomme le plus grand pourcentage du temps total.
L'INP est de 350 ms. Input Delay 70 ms (20 %), Processing 80 ms (23 %), Presentation 200 ms (57 %). Presentation est le goulot d'étranglement, même si 200 ms semble correct isolément. Le corriger change la donne. Optimiser l'Input Delay n'aura presque aucun impact.
Cela évite l'erreur la plus courante en performance : corriger le mauvais problème.
Cinq étapes : de « c'est lent » à la correction du code
Posez-lui une question. Cinq étapes plus tard, vous obtenez une correction basée sur des preuves d'utilisateurs réels.
1. Découverte
Scanne vos données CoreDash pour trouver les pires pages et métriques. Priorise les mauvaises évaluations, le mobile, les pages à fort trafic et les scores p75 qui cachent une longue traîne médiocre.
2. Diagnostic
Décompose la métrique en phases. LCP : TTFB, délai de chargement, temps de chargement, délai de rendu. INP : délai d'entrée, temps de traitement, délai de présentation. Identifie le goulot d'étranglement par son pourcentage.
3. Trace Chrome
Visite la page avec une émulation mobile. Trace uniquement la phase du goulot d'étranglement de l'étape 2. Capture la cascade réseau, le filmstrip et les preuves de ressources bloquantes.
4. Cause racine
Combine les deux sources de preuves en un seul constat : l'élément, la cause, les métriques CoreDash et ce que Chrome a confirmé. Aucune ambiguïté.
5. Correction ou rapport
À vous de choisir. Appliquez la correction de code avec fichier, ligne, élément, avant/après. Générez un rapport HTML autonome avec graphiques et preuves. Ou les deux.
25+ dimensions : tous les angles couverts par vos field data
Voici les dimensions CoreDash réelles que l'agent interroge. Pas un résumé. La vue complète.
LCP (Largest Contentful Paint)
Élément LCP Type d'élément État de priorité Phase du TTFB Délai de chargement Temps de chargement Délai de renduINP (Interaction to Next Paint)
Cible de l'INP Délai de saisie Temps de traitement Délai de présentation Scripts LOAF État de chargementCLS (Cumulative Layout Shift)
Élément décalé Cause du décalage Moment du décalageSegments
Type d'appareil Pays Navigateur OS Connexion Type de visiteur Chemin de la pageTendances
Delta sur 7 jours Référence sur 28 jours Détection des régressionsDiagnostic : répartition par phase de chaque Core Web Vital
Pas seulement des scores. Chaque métrique est découpée en phases grâce à l'attribution des utilisateurs réels de CoreDash.
Corrigez le LCP avec l'IA : diagnostic du Largest Contentful Paint
Décomposition en 4 phases : TTFB, délai de chargement, temps de chargement, délai de rendu. Identifie la phase qui consomme la plus grande partie du temps total.
Attribution de l'élément : l'élément LCP exact, son type (image, texte, image d'arrière-plan, vidéo) et son état de priorité (fetchpriority, lazy loading).
Corrections types : ajouter une directive de préchargement, supprimer le lazy loading de l'élément hero, optimiser le format de l'image, corriger le script render blocking.
Corrigez l'INP avec l'IA : diagnostic de l'Interaction to Next Paint
Décomposition en 3 phases : délai d'attente, traitement, délai d'affichage. La seule métrique impossible à simuler en laboratoire. Le field data est l'unique source.
Attribution du script : Long Animation Frames (LOAF) indique le fichier JavaScript exact et sa durée, ainsi que l'état de chargement de la page lors de l'interaction.
Corrections types : yield au main thread, différer l'évaluation, diviser les gestionnaires d'événements, content-visibility pour les DOM volumineux.
CLS : Cumulative Layout Shift
5 causes types : images sans dimensions, changements de polices (font swaps), contenu injecté dynamiquement, ressources chargées tardivement, animations CSS sur des propriétés de mise en page.
Analyse croisée : compare mobile vs desktop, nouveaux visiteurs vs récurrents, et réseaux rapides vs lents pour isoler la cause.
Corrections types : ajouter les attributs width/height, font-display: optional, réservation de min-height, utiliser transform au lieu de top/left.
À quoi ressemble un énoncé de cause racine
Pas de « pensez à optimiser vos images ». C'est le résultat réel. Assez précis pour être relu et fusionné.
Cause racine :
L'image LCP div.hero-banner > img.product-main sur /product/running-shoes-42 est découverte 1 980 ms trop tard car elle n'a pas d'indice de préchargement et n'a pas de fetchpriority="high".
Preuve CoreDash :
Le LCP est de 3 820 ms (mauvais) sur mobile, p75. Le délai de chargement est le goulot d'étranglement à 1 980 ms (52 % du total). État de priorité : 3 (non préchargé). Tendance : dégradation de +340 ms sur 7 jours.
Preuve Chrome :
La cascade réseau montre un écart de 1 940 ms entre le premier octet HTML et la requête de l'image. L'image est uniquement référencée dans le CSS, invisible pour le preload scanner.
Correction :
Ajoutez <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> à la ligne 12 de templates/product.html. Définissez fetchpriority="high" sur l'élément img à la ligne 47.
Conseil IA générique :
« Pensez à ajouter fetchpriority à votre image LCP et assurez-vous du bon préchargement des ressources critiques. »
Superpouvoirs CWV :
Élément : div.hero-banner > img.product-main
Fichier : templates/product.html, ligne 47
Preuve : 52 % du temps LCP dans le délai de chargement (CoreDash p75). Écart de découverte de 1 940 ms (cascade Chrome).
Correction : modification de code en 2 lignes avec un diff avant/après.
Comparez : CWV Superpowers face aux autres
Chaque outil répond à un problème différent. Voici ce que chacun fait réellement.
| Fonctionnalités | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Source de données | Utilisateurs réels (28 jours de field data) | Session lab unique | Chargement unique simulé |
| Mesure de l'INP | ✓ Interactions réelles | ✗ Aucun utilisateur réel | ✗ Non mesuré |
| Découpage par phase | ✓ Phases LCP, INP, CLS | ~ Analyse manuelle | ✗ Score uniquement |
| Attribution de l'élément | ✓ Élément exact + priorité | ~ Si vous savez où chercher | ~ Suggestions génériques |
| Analyse proportionnelle | ✓ Goulots par % | ✗ Valeurs absolues | ✗ Valeurs absolues |
| Comparaison par segment | ✓ Appareil, pays, navigateur | ✗ Configuration unique | ✗ Configuration unique |
| Détection des tendances | ✓ Delta sur 7 jours | ✗ Mesure ponctuelle | ✗ Mesure ponctuelle |
| Chrome tracing | ✓ Ciblé par phase | ✓ Accès complet | ✗ Sans navigateur |
| Correctifs de code | ✓ Fichier + ligne + diff | ~ Dépend de l'agent | ~ Conseils génériques |
Note : Chrome DevTools MCP est complémentaire. CWV Superpowers l'utilise pour un tracing ciblé une fois que la field data a identifié le goulot d'étranglement. Ils fonctionnent idéalement ensemble.
Rapports : déposez-les dans Slack, joignez-les à Jira
HTML autonome. Sans dépendance. Pas d'étape de build. Un seul fichier avec tout inline.
Rapport complet (avec Chrome)
Cartes de métriques avec code couleur, graphiques de répartition par phase, captures d'écran du filmstrip aux moments clés (premier affichage, LCP, page chargée), SVG de la cascade réseau, analyse des causes racines et correction recommandée avec le code avant/après.
Rapport RUM uniquement
Mêmes cartes de métriques et même répartition par phase, plus l'attribution des éléments et l'analyse des causes racines. Pas de filmstrip ni de cascade, mais la qualité du diagnostic est identique car les field data sont la source de vérité.
Fonctionne avec n'importe quel client MCP
Claude Code : Skill complète avec workflow automatisé. Découverte, diagnostic, tracing Chrome, corrections de code et rapports. Recommandé.
Cursor : Installation du plugin avec CoreDash MCP. Diagnostic complet et corrections de code directement dans votre éditeur.
VS Code, Windsurf, Gemini CLI : Tout client supportant les serveurs MCP HTTP se connecte à CoreDash. Mêmes field data, même attribution.
Client Success
Don't just take my word for it
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
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."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
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."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
Prêt en 2 minutes
Diagnostic automatisé des Core Web Vitals dans votre terminal. Vous devez avoir un compte CoreDash alimenté en données. L'offre gratuite fonctionne.
Claude Code
# 1. Ajoutez le serveur MCP CoreDash (connexion via le navigateur, sans clé API) claude mcp add --transport http coredash https://app.coredash.app/api/mcp # 2. Installez CWV Superpowers /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpowers # 3. Lancez avec Chrome (optionnel, recommandé) claude --chrome # 4. Lancez Trouvez mon plus gros problème de CWV et corrigez-le.
Lors de la première connexion, lancez /mcp, choisissez coredash et sélectionnez Authenticate. Votre navigateur ouvre la page de connexion de CoreDash, vous choisissez un projet et vous validez, puis Claude Code stocke un jeton OAuth temporaire qui s'actualise automatiquement (accès d'une heure, renouvellement de 30 jours) et reste révocable. Aucune clé à coller.
Vous préférez une clé API pour un usage headless ou CI ? Ajoutez --header "Authorization: Bearer cdk_YOUR_API_KEY" à la commande, générée depuis CoreDash → Project Settings → API Keys (MCP). Affichée une seule fois. Stockée sous forme de hachage SHA-256. Lecture seule.
Cursor
# Installez le plugin
/plugin-add cwv-superpowers
Ajoutez CoreDash à .cursor/mcp.json :
{
"mcpServers": {
"coredash": {
"url": "https://app.coredash.app/api/mcp",
"headers": {
"Authorization": "Bearer cdk_YOUR_API_KEY"
}
}
}
}
Autres clients MCP
Point de terminaison : https://app.coredash.app/api/mcp
En-tête : Authorization: Bearer cdk_YOUR_API_KEY
Fonctionne avec VS Code (mode agent Copilot), Windsurf, Gemini CLI, Claude Desktop et tout client MCP HTTP. Un seul point de terminaison de performance web MCP pour tous les agents.
Questions fréquentes
Devez-vous lancer Chrome pour utiliser CWV Superpowers ?
Non. Le tracing Chrome est facultatif. Sans lui, vous obtenez un diagnostic complet des field data, le détail des phases, l'attribution des éléments et des suggestions de correction de code basées uniquement sur les données CoreDash. Chrome ajoute des captures d'écran filmstrip, la cascade réseau et la confirmation visuelle de la cause racine. Les deux modes génèrent des rapports.
En quoi est-ce différent de lancer Lighthouse dans votre agent IA ?
Lighthouse exécute un seul chargement synthétique sur votre machine. CWV Superpowers utilise 28 jours de données d'utilisateurs réels issues de CoreDash : appareils réels, réseaux réels, interactions réelles. Il mesure l'INP à partir des appuis d'utilisateurs réels (Lighthouse ne le peut pas). Il compare les segments (mobile vs desktop, Inde vs États-Unis). Et il utilise un raisonnement proportionnel pour identifier la phase goulot d'étranglement, pas seulement des scores absolus.
Quels agents de codage IA sont supportés ?
Tout agent de codage IA pour la performance web qui supporte les serveurs MCP (Model Context Protocol). Claude Code dispose d'une skill dédiée avec un workflow automatisé en 5 étapes. Cursor, VS Code (mode agent Copilot), Windsurf, Gemini CLI et Claude Desktop se connectent via l'endpoint HTTP MCP de CoreDash. Les field data et l'attribution sont identiques sur tous les clients.
CoreDash est-il gratuit ?
CoreDash propose une offre gratuite qui fonctionne avec CWV Superpowers. Vous devez avoir des données en provenance de votre site (ajoutez la balise script CoreDash). L'offre gratuite ne comporte aucun échantillonnage ni limite de pages vues. Les clés API pour l'accès MCP sont disponibles sur tous les plans.
Pouvez-vous l'utiliser pour des sites clients ?
Oui. Pour chaque projet CoreDash, vous pouvez créer un nombre illimité de clés API MVP dédiées. Ajoutez CoreDash à chaque site client, générez une clé API en lecture seule et configurez votre client MCP. L'agent ne voit que les données de ce projet. CWV Superpowers est sous licence MIT, il n'y a donc aucune restriction d'utilisation commerciale.
Open source. Sans verrouillage.
Une automatisation des Core Web Vitals que vous pouvez inspecter et étendre. L'orchestrateur, les modules de diagnostic, la logique de tracing Chrome et les modèles de rapports sont tous sur GitHub. Découvrez le fonctionnement. Forkez-le. Étendez-le. Contribuez.
Commencez votre essai gratuit Voir sur GitHub