Votre Agent IA Vient de Recevoir des Superpouvoirs pour les Core Web Vitals
Connectez Claude Code aux données de terrain de votre CoreDash. Il trouve votre pire goulot d'étranglement parmi des millions de chargements de pages, trace la cause racine dans Chrome et écrit le correctif. La performance web agentique, pas un rapport, mais la ligne de code exacte qui doit changer.
Installer en 2 Minutes Démarrer 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 le classement. Un agent IA de performance web utile part des mêmes données que Google : des utilisateurs réels sur des téléphones économiques, 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 en fonction des données de terrain CrUX provenant d'utilisateurs réels de Chrome sur 28 jours. Un score parfait sur Lighthouse et un score de terrain défaillant arrivent tout le temps. 52 % des sites mobiles échouent à au moins un Core Web Vital sur le terrain.
Des agents aveugles font 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, ou si son correctif a aidé. Il optimise une simulation et s'arrête là. Vos utilisateurs réels ne sont pas de cet avis.
L'investigation manuelle prend des heures
Segmentez les données. Émettez des hypothèses. Lancez une trace. Confirmez. Rédigez le correctif. Un ingénieur de performance senior passe 2 à 4 heures par problème. Multipliez cela par chaque page lente de votre site.
L'INP ne peut absolument pas être simulé en laboratoire L'Interaction to Next Paint mesure comment les utilisateurs réels interagissent avec votre page. Aucun outil synthétique ne peut reproduire le comportement d'un utilisateur réel : où il appuie, à quelle vitesse il fait défiler, quel appareil il tient. Lighthouse ne signale même pas l'INP. Si votre agent IA exécute Lighthouse, il est aveugle à vos pires problèmes d'interactivité. Les données de terrain sont la seule source.
Deux sources de vérité : Les données de terrain rencontrent les preuves du navigateur
CWV Superpowers combine les données d'utilisateurs réels de CoreDash avec des traces Chrome ciblées. Les données de terrain lui disent ce qui est lent. Chrome lui dit pourquoi.
CoreDash dit à 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 causant le problème. Aucun échantillonnage, aucune limite.
Lorsque 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 une supposition. Une mesure issue de millions de sessions réelles.
La skill interroge plus de 25 dimensions CoreDash : élément LCP, type d'élément, état de priorité, décomposition des phases, cible d'interaction INP, scripts LOAF, élément de décalage CLS, type d'appareil, type de visiteur, vitesse du réseau, tendances sur 7 jours.
Chrome dit à l'agent pourquoi c'est lent
CWV Superpowers visite la page avec une émulation mobile : Fast 3G, limitation du CPU 4x. Il trace uniquement la phase de goulot d'étranglement que CoreDash a identifiée.
Le Load Delay est le goulot d'étranglement ? L'agent examine la cascade réseau pour trouver les lacunes de découverte. Le Render Delay ? Il recherche les scripts bloquants et les retards de chargement des polices.
Le résultat : des captures d'écran en pellicule, une cascade réseau et des preuves ciblées qui expliquent la cause racine exposée par vos données de terrain.
Raisonnement proportionnel, pas de seuils absolus
Lighthouse vous dit "Render Delay is 350ms." Est-ce le problème ? Aucune idée. CWV Superpowers identifie le goulot d'étranglement comme la phase consommant 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 fait bouger les choses. L'optimisation de l'Input Delay est à peine perceptible.
Cela évite l'erreur la plus courante dans le travail de performance : corriger la mauvaise chose.
Cinq étapes : De "quelque chose est lent" au correctif de code
Posez-lui une question. Cinq étapes plus tard, vous obtenez un correctif soutenu par des preuves d'utilisateurs réels.
1. Découverte
Analyse vos données CoreDash pour trouver les pires pages et métriques. Donne la priorité aux mauvaises évaluations, au mobile, aux pages à fort trafic et aux scores p75 qui cachent une longue traîne de mauvaises performances.
2. Diagnostic
Décompose la métrique en phases. LCP : TTFB, Load Delay, Load Time, Render Delay. INP : Input Delay, Processing, Presentation. Nomme le goulot d'étranglement par pourcentage.
3. Trace Chrome
Visite la page avec l'émulation mobile. Trace uniquement la phase de goulot d'étranglement de l'étape 2. Capture la cascade réseau, la pellicule et les preuves de ressources bloquantes.
4. Cause Racine
Combine les deux sources de preuves en une seule déclaration : l'élément, la cause, les métriques CoreDash, et ce que Chrome a confirmé. Aucune ambiguïté.
5. Correctif ou Rapport
À vous de choisir. Appliquez le correctif de code avec le fichier, la ligne, l'élément, avant/après. Générez un rapport HTML autonome avec des graphiques et des preuves. Ou les deux.
Plus de 25 dimensions : Chaque angle couvert par vos données de terrain
Ce sont les dimensions CoreDash réelles que l'agent interroge. Pas un résumé. L'image complète.
LCP (Largest Contentful Paint)
Élément LCP Type d'élément État de priorité Phase TTFB Load Delay Load Time Render DelayINP (Interaction to Next Paint)
Cible INP Input Delay Processing Presentation Scripts LOAF État de chargementCLS (Cumulative Layout Shift)
Élément de décalage Cause du décalage Timing du décalageSegments
Type d'appareil Pays Navigateur Système d'exploitation Connexion Type de visiteur Chemin de la pageTendances
Delta sur 7 jours Base de référence sur 28 jours Détection de régressionDiagnostiquer : Décomposition par phase pour chaque Core Web Vital
Pas seulement des scores. Chaque métrique est décomposée en phases à l'aide de l'attribution d'utilisateurs réels provenant de CoreDash.
Corriger le LCP avec l'IA : diagnostic du Largest Contentful Paint
Décomposition en 4 phases : TTFB, Load Delay, Load Time, Render Delay. Identifie quelle phase consomme la plus grande part du temps total.
Attribution d'élément : l'élément LCP exact, son type (image, texte, image de fond, vidéo), et l'état de priorité (fetchpriority, lazy loading).
Correctifs typiques : ajouter un hint de preload, retirer le lazy loading du hero, optimiser le format d'image, corriger le script bloquant le rendu.
Corriger l'INP avec l'IA : diagnostic de l'Interaction to Next Paint
Décomposition en 3 phases : Input Delay, Processing, Presentation. La seule métrique que vous ne pouvez pas simuler en laboratoire. Les données de terrain sont la seule source.
Attribution de script : Les Long Animation Frames (LOAF) nomment le fichier JavaScript exact et la durée. Plus l'état de chargement de la page lorsque l'interaction s'est produite.
Correctifs typiques : yield vers le thread principal, différer l'évaluation, fractionner les gestionnaires d'événements, content-visibility pour les grands DOM.
CLS : Cumulative Layout Shift
5 modèles de causes : images sans dimensions, swaps de polices, contenu injecté dynamiquement, ressources à chargement tardif, animations CSS sur les propriétés de layout.
Inter-dimensionnel : compare le mobile au desktop, les nouveaux visiteurs aux habitués, les réseaux rapides aux lents pour restreindre la cause.
Correctifs typiques : ajouter width/height, font-display: optional, réservation de min-height, utiliser transform au lieu de top/left.
À quoi ressemble une déclaration de cause racine
Pas "envisagez d'optimiser vos images." Voici la sortie réelle. Suffisamment spécifique pour être examinée et fusionnée.
Cause racine :
L'image LCP div.hero-banner > img.product-main sur /product/running-shoes-42 est découverte 1 980 ms en retard car elle manque d'un hint preload et n'a pas de fetchpriority="high".
Preuves CoreDash :
Le LCP est de 3 820 ms (médiocre) sur mobile, p75. Le Load Delay est le goulot d'étranglement à 1 980 ms (52 % du total). État de priorité : 3 (non préchargé). Tendance : détérioration de +340 ms sur 7 jours.
Preuves 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 référencée uniquement en CSS, invisible pour le scanner de préchargement.
Correctif :
Ajoutez <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> dans templates/product.html à la ligne 12. Définissez fetchpriority="high" sur l'élément img à la ligne 47.
Conseil IA générique :
"Envisagez d'ajouter fetchpriority à votre image LCP et assurez un préchargement approprié des ressources critiques."
CWV Superpowers :
Élément : div.hero-banner > img.product-main
Fichier : templates/product.html, ligne 47
Preuves : 52 % du temps LCP dans le Load Delay (CoreDash p75). Écart de découverte de 1 940 ms (cascade Chrome).
Correctif : Modification de 2 lignes de code avec diff avant/après.
Comparer : Comment CWV Superpowers se positionne
Différents outils résolvent différents problèmes. Voici ce que chacun fait réellement.
| Capacité | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Source de données | Utilisateurs réels (28 jours de données de terrain) | Session labo unique | Chargement unique simulé |
| Mesure de l'INP | ✓ Interactions réelles | ✗ Pas d'utilisateurs réels | ✗ Non mesuré |
| Décomposition des phases | ✓ Phases LCP, INP, CLS | ~ Analyse manuelle | ✗ Score uniquement |
| Attribution d'élément | ✓ Élément exact + priorité | ~ Si vous savez où regarder | ~ Suggestions génériques |
| Raisonnement proportionnel | ✓ Goulot d'étranglement en % | ✗ Valeurs absolues | ✗ Valeurs absolues |
| Comparaison de segments | ✓ Appareil, pays, navigateur | ✗ Configuration unique | ✗ Configuration unique |
| Détection de tendance | ✓ Delta sur 7 jours | ✗ Moment précis | ✗ Moment précis |
| Traçage Chrome | ✓ Ciblé par phase | ✓ Accès complet | ✗ Pas de navigateur |
| Correctifs de code | ✓ Fichier + ligne + diff | ~ Dépendant de l'agent | ~ Conseils génériques |
Note : Chrome DevTools MCP est complémentaire. CWV Superpowers l'utilise pour un traçage ciblé après que les données de terrain ont identifié le goulot d'étranglement. Ils fonctionnent mieux ensemble.
Rapports : Déposez-les sur Slack, joignez-les à Jira
HTML autonome. Aucune dépendance. Aucune étape de build. Un seul fichier avec tout en ligne.
Rapport Complet (avec Chrome)
Cartes de métriques avec code couleur, graphiques de décomposition des phases, captures d'écran en pellicule aux moments clés (premier affichage, LCP, chargé), cascade réseau SVG, analyse de la cause racine et le correctif recommandé avec code avant/après.
Rapport RUM Uniquement
Mêmes cartes de métriques et décomposition des phases, plus attribution d'élément et analyse de la cause racine. Pas de pellicule ni de cascade, mais la qualité du diagnostic est identique car les données de terrain sont la source de vérité.
Fonctionne avec n'importe quel client MCP
Claude Code : Skill complète avec flux de travail automatisé. Découverte, diagnostic, traçage Chrome, correctifs de code et rapports. Recommandé.
Cursor : Installation de plugin avec CoreDash MCP. Diagnostic complet et correctifs de code dans votre éditeur.
VS Code, Windsurf, Gemini CLI : Tout client prenant en charge les serveurs MCP HTTP se connecte à CoreDash. Mêmes données de terrain, même attribution.
Client Success
Don't just take my word for it
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
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."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
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."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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."
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.
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."
En Fonctionnement en 2 Minutes
Diagnostic automatisé des Core Web Vitals dans votre terminal. Vous avez besoin d'un compte CoreDash avec des données actives. Le plan gratuit fonctionne.
Claude Code
# 1. Ajouter le serveur MCP CoreDash claude mcp add --transport http coredash \ https://app.coredash.app/api/mcp \ --header "Authorization: Bearer cdk_YOUR_API_KEY" # 2. Installer CWV Superpowers /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpower # 3. Démarrer avec Chrome (optionnel, recommandé) claude --chrome # 4. C'est parti Trouve mon plus gros problème CWV et corrige-le.
Obtenez votre clé API depuis CoreDash → Paramètres du Projet → Clés API (MCP). Affichée une fois. Stockée sous forme de hachage SHA-256. Lecture seule.
Cursor
# Installer 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
Endpoint : 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 endpoint de performance web MCP, pour chaque agent.
Foire Aux Questions
Dois-je faire tourner Chrome pour utiliser CWV Superpowers ?
Non. Le traçage Chrome est optionnel. Sans lui, vous obtenez un diagnostic complet des données de terrain, la décomposition des phases, l'attribution d'éléments et des suggestions de correctifs de code basées uniquement sur les données CoreDash. Chrome ajoute des captures d'écran en pellicule, 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 l'exécution de Lighthouse dans mon 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 provenant de CoreDash : appareils réels, réseaux réels, interactions réelles. Il mesure l'INP à partir des appuis réels des utilisateurs (ce que Lighthouse ne peut pas faire). Il compare des segments (mobile vs desktop, Inde vs États-Unis). Et il utilise un raisonnement proportionnel pour trouver la phase du goulot d'étranglement, et pas seulement des scores absolus.
Quels agents de codage IA sont pris en charge ?
Tout agent de codage IA pour la performance web qui prend en charge les serveurs MCP (Model Context Protocol). Claude Code dispose d'une skill dédiée avec un flux de travail automatisé en 5 étapes. Cursor, VS Code (mode agent Copilot), Windsurf, Gemini CLI et Claude Desktop se connectent via l'endpoint MCP HTTP de CoreDash. Les données de terrain et l'attribution sont identiques sur tous les clients.
Est-ce que CoreDash est gratuit ?
CoreDash propose un plan gratuit qui fonctionne avec CWV Superpowers. Vous avez besoin que des données circulent depuis votre site (ajoutez la balise script CoreDash). Le plan gratuit ne comporte aucun échantillonnage ni limite de pages vues. Les clés API pour l'accès MCP sont disponibles sur tous les plans.
Puis-je l'utiliser pour les sites de clients ?
Oui. Pour chaque projet CoreDash, vous pouvez créer un nombre illimité de clés API 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 quant à son utilisation commerciale.
Open Source. Sans engagement.
L'automatisation des Core Web Vitals que vous pouvez inspecter et étendre. L'orchestrateur, les modules de diagnostic, la logique de traçage Chrome et les modèles de rapport sont tous sur GitHub. Lisez comment ça marche. Forkez-le. Étendez-le. Contribuez.
Démarrez votre essai gratuit Voir sur GitHub