Publicación: 10 de noviembre de 2026
WeTV es la plataforma internacional de transmisión de video de Tencent. Ofrece series dramáticas, anime y programas de variedades a los usuarios del Sudeste Asiático y otros mercados globales. En un sitio creado en torno a videos, el rendimiento determina si los usuarios se quedan, si los motores de búsqueda muestran el contenido y si la reproducción es fluida.
El equipo de ingeniería web de WeTV no envía código que no cumpla con sus objetivos de rendimiento. Durante mucho tiempo, mantener esa línea significaba que un desarrollador tenía que detener lo que estaba haciendo, abrir Chrome y generar un perfil de la página de forma manual cada vez que una compilación fallaba en la verificación. Detectar y corregir una regresión tardaba unas cuatro horas.
Hoy en día, un agente de programación con IA realiza ese trabajo como parte de la canalización de CI/CD. Con las Herramientas para desarrolladores de Chrome para agentes, el agente inspecciona la página en un navegador en vivo. Con Modern Web Guidance, escribe correcciones que siguen los estándares actuales de la plataforma web. Ahora, el flujo de trabajo diagnostica y resuelve automáticamente el 90% de las pruebas de rendimiento fallidas, y el tiempo que transcurre desde una verificación fallida hasta una corrección verificada se redujo de cuatro horas a 30 minutos, lo que incluye la compilación completa y la evaluación manual.
El desafío: Un desarrollador atrapado entre el editor y el navegador
Los ingenieros de WeTV ya usaban herramientas de programación con IA en su IDE. Esas herramientas podían escribir código, pero no podían ver lo que hacía el código una vez que se ejecutaba en un navegador. Por lo tanto, el trabajo se dividió en dos. Los ingenieros escriben código en el editor y, luego, cambian a Chrome para implementarlo, inspeccionarlo y verificarlo. Cada corrección implicaba volver a recorrer ese bucle de forma manual.
La división dolió más en la puerta de lanzamiento. La canalización de CI/CD de WeTV ejecuta seguimientos de rendimiento en cada versión y mantiene el Cumulative Layout Shift (CLS) en 0.1 o menos. Cuando una compilación cruzaba esa línea, la canalización la marcaba, pero encontrar la causa seguía siendo un proceso manual. Un ingeniero tuvo que abrir las Herramientas para desarrolladores de Chrome, registrar un seguimiento, encontrar el elemento que se movió, llevar ese hallazgo al editor, escribir una corrección y volver a ejecutar la verificación. Una sola regresión de CLS costó alrededor de cuatro horas de tiempo de ingeniería.
El equipo necesitaba un agente que pudiera encargarse de ambas partes del trabajo: mirar la página en ejecución y, luego, corregir el código según un estándar conocido.
La solución: Conectar el agente al navegador y a los estándares web
WeTV trasladó la verificación del rendimiento a su flujo de solicitud de combinación (MR). Cuando un desarrollador abre una MR, la canalización de CI/CD inicia un entorno en el que el agente de programación de IA se ejecuta de forma local con dos capacidades que no tenían las herramientas de IDE del equipo:
- Herramientas para desarrolladores de Chrome para agentes: Ejecuta un servidor de Protocolo de contexto del modelo (MCP) y conecta el agente a una instancia de Chrome activa. El agente puede registrar seguimientos de rendimiento (entre otras funciones de las Herramientas para desarrolladores de Chrome) y verificar cómo se renderiza realmente el código de frontend, de la misma manera que lo haría un desarrollador en las Herramientas para desarrolladores.
- Modern Web Guidance: Es una habilidad de agente que contiene prácticas recomendadas para plataformas web y datos de compatibilidad con navegadores. Aleja al agente de los patrones heredados y lo dirige hacia correcciones basadas en funciones modernas de la plataforma web.
DevTools para agentes le indica al agente qué se rompió. Modern Web Guidance determina cómo lo corrige.
Ejemplo del mundo real: Un cambio de diseño en la página de reproducción de episodios
Durante una solicitud de combinación, el agente ejecutó la herramienta performance_start_trace en
la página de reproducción de episodios para computadoras de escritorio. El registro de seguimiento mostró un CLS de 0.39, casi cuatro veces el límite de 0.1.
Indícale al agente que realice un diagnóstico antes de editar
WeTV no permite que el agente improvise. La instrucción que impulsa el flujo de trabajo le indica que diagnostique el problema antes de tocar cualquier código y que verifique sus hallazgos con la guía de Modern Web Guidance en lugar de confiar en lo que el modelo generaría de forma predeterminada.
Este es un ejemplo de una instrucción que usó el equipo de 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.
Dos partes de esta instrucción tienen la mayor parte del peso. "Diagnostica primero y, luego, modifica
el código" evita que el agente parchee los síntomas. En el paso 2, se indica al agente que use
performance_analyze_insight con insightName: 'CLSCulprits', de modo que informe
el elemento, el tiempo y la puntuación exactos en lugar de una sospecha general.
En el siguiente video, cuando se ejecuta la instrucción, el agente busca la guía pertinente en Modern Web Guidance para implementar correcciones con funciones web modernas relacionadas con el CLS y usa las Herramientas para desarrolladores de Chrome para agentes para abrir una instancia del navegador Chrome y registrar un seguimiento del rendimiento.
Esta combinación de diagnósticos del entorno de ejecución y orientación estructurada permite realizar correcciones automatizadas para los cambios de diseño complejos. Este es un ejemplo de un problema corregido por el flujo de trabajo automatizado.
Encuentra la causa raíz
El seguimiento apuntaba al reproductor de video. WeTV renderiza el reproductor en el servidor, pero el contenedor del reproductor no reservó ninguna altura para él. Cuando el cliente hidrató la página, la altura del contenedor se expandió y el contenido que lo rodeaba se desplazó.
Aplica una corrección basada en estándares
La solución es reservar el espacio durante la renderización del servidor, de modo que el contenedor ya tenga la altura correcta antes de la hidratación. El siguiente es un ejemplo de una corrección que escribió el agente con referencia a la guía de diseño de CSS de Modern Web Guidance:
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
Después de que el agente aplicó el CSS, la canalización volvió a compilar la página y el agente ejecutó el mismo seguimiento de nuevo. Solo cuando el CLS era inferior a 0.1, el parche pasaba a la revisión humana.
Impacto: Lanzamientos más rápidos y diseños estables
WeTV logró mejoras medibles en la eficiencia de la ingeniería y la estabilidad del diseño cuando agregó las Herramientas para desarrolladores de Chrome para agentes y Modern Web Guidance a su flujo de trabajo de CI/CD:
- Reducción del 87% en el tiempo de depuración y resolución de extremo a extremo (de 4 horas a 30 minutos)
- El 90% de todas las regresiones de rendimiento recurrentes se diagnostican y resuelven automáticamente.
Los ingenieros ya no pierden medio día de trabajo en la generación de perfiles. Cuando una compilación supera el umbral, el agente lee el seguimiento, escribe una corrección, la prueba y entrega un parche verificado a un revisor humano. Las personas siguen tomando la decisión final, pero comienzan con una corrección que ya pasó la verificación que falló.
Debido a que las regresiones de CLS se corrigen dentro de la solicitud de combinación, no llegan a producción. Esto mantiene las páginas por debajo del objetivo de 0.1, protege la visibilidad de la búsqueda de WeTV y quita un motivo común para bloquear un lanzamiento al final del ciclo.
Lecciones para tu equipo
La configuración de WeTV es específica de su pila, pero el patrón detrás de ella se aplica a la mayoría de los equipos que controlan las versiones según el rendimiento:
- Ejecuta el agente donde se produce la falla. WeTV activa el agente desde la solicitud de combinación, por lo que nadie tiene que notar una verificación fallida y, luego, iniciar una sesión de forma manual.
- Haz que el agente realice un diagnóstico antes de editar. Pedir un seguimiento y un culpable con nombre primero produce correcciones que se dirigen al elemento real en lugar de una suposición.
- Vincula los datos del entorno de ejecución con un estándar. Un seguimiento le indica al agente qué elemento se movió. Modern Web Guidance le indica qué corrección sigue la práctica actual de la plataforma.
- Exige pruebas. Volver a ejecutar el mismo seguimiento que falló es la evidencia del agente de que la corrección funciona. El P2ER sigue el mismo principio en su regla de verificación empírica obligatoria.
- Mantén la interacción humana. El agente realiza la investigación y un ingeniero revisa un parche que ya pasó la verificación.
Comentarios y planes futuros
WeTV descubrió que vincular la telemetría de tiempo de ejecución en vivo de las Herramientas para desarrolladores de Chrome para agentes con las reglas estandarizadas de Modern Web Guidance eliminó el análisis de rendimiento manual del proceso de lanzamiento, a la vez que mantuvo los cambios de código del agente en línea con los estándares actuales de la plataforma web.
"Los resultados han sido muy eficaces en términos de velocidad y calidad. Las estadísticas de diagnóstico que proporcionaron las Herramientas para desarrolladores de Chrome para agentes y Modern Web Guidance nos brindaron referencias confiables para corregir problemas de diseño complejos. Realizamos una verificación estricta después de cada corrección, y la tasa de éxito y la estabilidad actuales mejoraron significativamente nuestra confianza en los lanzamientos".
—Yangjie Zheng, director de Ingeniería, WeTV (Tencent)
A continuación, el equipo de ingeniería de WeTV planea incorporar las Herramientas para desarrolladores de Chrome para agentes y Modern Web Guidance en las pruebas de extremo a extremo para las próximas versiones de código.
Recursos
Para configurar un flujo de trabajo similar, explora estos recursos: