Publié le 10 novembre 2026
WeTV est la plate-forme internationale de streaming vidéo de Tencent. Elle propose des séries dramatiques, des animes et des émissions de variétés aux spectateurs d'Asie du Sud-Est et d'autres marchés mondiaux. Pour un site axé sur la vidéo, les performances déterminent si les spectateurs restent, si les moteurs de recherche affichent le contenu et si la lecture est fluide.
L'équipe d'ingénierie Web de WeTV ne livre pas de code qui n'atteint pas ses objectifs de performances. Pendant longtemps, pour maintenir cette ligne, un développeur devait arrêter ce qu'il faisait, ouvrir Chrome et profiler la page manuellement chaque fois qu'un build échouait. La détection et la correction d'une régression prenaient environ quatre heures.
Aujourd'hui, un agent de codage IA effectue ce travail dans le cadre du pipeline CI/CD. Avec les Outils de développement Chrome pour les agents, l'agent inspecte la page dans un navigateur en direct. Avec Modern Web Guidance, il écrit des correctifs qui respectent les normes actuelles de la plate-forme Web. Le workflow diagnostique et résout désormais automatiquement 90 % des échecs de tests de performances, et le délai entre un échec de vérification et un correctif validé est passé de quatre heures à 30 minutes, y compris la compilation complète et l'évaluation manuelle.
Le défi : un développeur coincé entre l'éditeur et le navigateur
Les ingénieurs de WeTV utilisaient déjà des outils de codage IA dans leur IDE. Ces outils pouvaient écrire du code, mais ils ne pouvaient pas voir ce que le code faisait une fois exécuté dans un navigateur. Le travail a donc été divisé en deux. Les ingénieurs écrivent du code dans l'éditeur, puis passent à Chrome pour le déployer, l'inspecter et le vérifier. Chaque correction nécessitait de parcourir à nouveau cette boucle manuellement.
La division a été particulièrement douloureuse au moment de la mise en production. Le pipeline CI/CD de WeTV exécute des traces de performances à chaque version et maintient le Cumulative Layout Shift (CLS) à 0,1 ou moins. Lorsqu'un build franchissait cette ligne, le pipeline le signalait, mais la recherche de la cause restait manuelle. Un ingénieur devait ouvrir les outils pour les développeurs Chrome, enregistrer une trace, trouver l'élément qui avait bougé, reporter ce résultat dans l'éditeur, écrire un correctif et exécuter à nouveau la vérification. Une seule régression CLS coûte environ quatre heures de temps d'ingénierie.
L'équipe avait besoin d'un agent capable de gérer les deux aspects de la tâche : examiner la page en cours d'exécution, puis corriger le code pour qu'il respecte une norme connue.
La solution : connecter l'agent au navigateur et aux standards du Web
WeTV a intégré la vérification des performances à son flux de demande de fusion (MR). Lorsqu'un développeur ouvre une demande de fusion, le pipeline CI/CD démarre un environnement dans lequel l'agent de codage IA s'exécute localement avec deux fonctionnalités qui manquaient aux outils IDE de l'équipe :
- Outils de développement Chrome pour les agents : exécute un serveur MCP (Model Context Protocol) et connecte l'agent à une instance Chrome active. L'agent peut enregistrer des traces de performances (entre autres fonctionnalités des outils pour les développeurs Chrome) et vérifier comment le code de l'interface s'affiche, de la même manière qu'un développeur le ferait dans les outils pour les développeurs.
- Modern Web Guidance : compétence d'agent qui contient les bonnes pratiques de la plate-forme Web et les données de compatibilité des navigateurs. Il éloigne l'agent des modèles obsolètes et l'oriente vers des correctifs basés sur les fonctionnalités des plates-formes Web modernes.
Les outils de développement pour les agents indiquent à l'agent ce qui ne fonctionne pas. Modern Web Guidance détermine la manière dont il le corrige.
Exemple concret : décalage de mise en page sur la page de lecture d'un épisode
Lors d'une demande de fusion, l'agent a exécuté l'outil performance_start_trace sur la page de lecture de l'épisode pour ordinateur. La trace a enregistré un CLS de 0,39, soit près de quatre fois la limite de 0,1.
Demander à l'agent de diagnostiquer avant de modifier
WeTV ne laisse pas l'agent improviser. La requête qui pilote le workflow lui demande de diagnostiquer le problème avant de toucher au code, et de vérifier ses résultats par rapport à Modern Web Guidance au lieu de se fier à ce que le modèle générerait par défaut.
Voici un exemple de prompt utilisé par l'équipe WeTV :
Context:
"The CLS (Cumulative Layout Shift) of this page needs inspection. Diagnose
first, then modify the code, do not guess."
Mandatory Execution Steps:
1. Performance Trace: Use Chrome DevTools for agents to run performance traces
on both Desktop and Mobile views.
2. Identify Culprits: Use CLSCulprits insight to pinpoint the exact DOM elements
causing shifts (capture class/id, timing, and score).
3. Use web best practices for performance and CSS to optimize CLS.
4. Multi-Agent Parallelism: Enable parallel agents for efficiency:
- Agent A: Investigate Player/Main Layout SSR placeholders.
- Agent B: Investigate Sidebar Ads, VIP buttons, Tabs, and late-injected
lists.
- Agent C: Investigate Fonts and other minor factors.
Constraint: Each agent modifies only files within its scope to prevent
conflicts.
5. Root Cause Confirmation: Confirm the root cause before applying fixes.
Prioritize reserving space over changing interaction semantics just to fix
CLS.
6. Verification: After modification, re-test CLS via equivalent CSS injection
or local build. Target: CLS < 0.1.
Deux parties de cette requête sont particulièrement importantes. "Diagnostiquez d'abord, puis modifiez le code" empêche l'agent de corriger les symptômes. L'étape 2 indique à l'agent d'utiliser performance_analyze_insight avec insightName: 'CLSCulprits', afin qu'il signale l'élément, le moment et le score exacts au lieu d'une suspicion générale.
Dans la vidéo suivante, lorsque la requête est exécutée, l'agent recherche le guide approprié dans Modern Web Guidance pour implémenter des correctifs avec des fonctionnalités Web modernes liées au CLS. Il utilise les outils de développement Chrome pour les agents afin d'ouvrir une instance du navigateur Chrome et d'enregistrer une trace des performances.
Cette combinaison de diagnostics d'exécution et de conseils structurés permet de corriger automatiquement les décalages de mise en page complexes. Voici un exemple de problème résolu par le workflow automatisé.
Identifier la cause principale
La trace pointait vers le lecteur vidéo. WeTV affiche le lecteur sur le serveur, mais le conteneur du lecteur ne lui a pas réservé de hauteur. Lorsque le client a hydraté la page, la hauteur du conteneur a augmenté et le contenu qui l'entoure s'est déplacé.
Appliquer un correctif basé sur des normes
La solution consiste à réserver l'espace lors de l'affichage côté serveur, de sorte que le conteneur ait déjà la bonne hauteur avant l'hydratation. Voici un exemple de correction écrite par l'agent en référence au guide css-layout de Modern Web Guidance :
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
Une fois que l'agent a appliqué le CSS, le pipeline a recompilé la page et l'agent a exécuté à nouveau la même trace. Le correctif n'était soumis à un examen manuel que lorsque le CLS était inférieur à 0,1.
Impact : publications plus rapides et mises en page stables
WeTV a constaté des améliorations mesurables de l'efficacité de l'ingénierie et de la stabilité de la mise en page lorsqu'il a ajouté les outils de développement Chrome pour les agents et Modern Web Guidance à son workflow CI/CD :
- Réduction de 87 % du temps de débogage et de résolution de bout en bout (de 4 heures à 30 minutes).
- 90 % des régressions de performances récurrentes sont diagnostiquées et résolues automatiquement.
Les ingénieurs ne perdent plus une demi-journée de travail à profiler. Lorsqu'un build dépasse le seuil, l'agent lit la trace, écrit un correctif, le teste et transmet un correctif vérifié à un examinateur humain. Les humains prennent toujours la décision finale, mais ils partent d'un correctif qui a déjà réussi la vérification qui avait échoué.
Comme les régressions CLS sont corrigées dans la demande de fusion, elles n'atteignent pas la production. Cela permet de maintenir les pages sous l'objectif de 0, 1, de protéger la visibilité de WeTV dans la recherche et de supprimer une raison courante de bloquer une version tardivement dans le cycle.
Cours pour votre équipe
La configuration de WeTV est spécifique à sa pile, mais le modèle sous-jacent s'applique à la plupart des équipes qui conditionnent les versions en fonction des performances :
- Exécutez l'agent là où l'échec se produit. WeTV déclenche l'agent à partir de la demande de fusion. Ainsi, personne n'a besoin de remarquer un échec de vérification et de démarrer une session manuellement.
- Faites en sorte que l'agent établisse un diagnostic avant d'apporter des modifications. Demander d'abord une trace et un coupable nommé permet de produire des correctifs qui ciblent l'élément réel plutôt qu'une supposition.
- Associez les données d'exécution à une norme. Une trace indique à l'agent quel élément a été déplacé. Modern Web Guidance lui indique quel correctif suit les pratiques actuelles de la plate-forme.
- Exigez des preuves. Réexécuter la même trace qui a échoué permet à l'agent de prouver que le correctif fonctionne. Le P2ER suit le même principe dans sa règle de vérification empirique obligatoire.
- Gardez une intervention humaine. L'agent effectue l'investigation, et un ingénieur examine un correctif qui a déjà réussi la vérification.
Commentaires et projets
WeTV a constaté que l'association de la télémétrie d'exécution en direct des Outils de développement Chrome pour les agents aux règles standardisées de Modern Web Guidance permettait de supprimer l'analyse manuelle des performances du processus de publication, tout en maintenant les modifications de code de l'agent conformes aux normes actuelles de la plate-forme Web.
"Les résultats ont été très efficaces, tant en termes de rapidité que de qualité. Les insights de diagnostic fournis par les Outils de développement Chrome pour les agents et Modern Web Guidance nous ont fourni des références fiables pour résoudre les problèmes de mise en page complexes. Nous effectuons une validation stricte après chaque correction, et le taux de réussite et la stabilité actuels ont considérablement amélioré notre confiance dans les versions."
— Yangjie Zheng, responsable de l'ingénierie, WeTV (Tencent)
L'équipe d'ingénierie de WeTV prévoit ensuite d'intégrer les outils de développement Chrome pour les agents et Modern Web Guidance aux tests de bout en bout pour les prochaines versions de code.
Ressources
Pour configurer un workflow similaire, consultez les ressources suivantes :
- Premiers pas avec les Outils de développement Chrome pour les agents
- Premiers pas avec Modern Web Guidance
- Optimize Cumulative Layout Shift (Optimiser le Cumulative Layout Shift)
- Comment P2ER a créé un environnement de confiance pour le codage agentique avec les Outils de développement Chrome pour les agents