Publicado em: 10 de novembro de 2026
O WeTV é a plataforma internacional de streaming de vídeo da Tencent. Ele oferece séries de drama, anime e programas de variedades para espectadores no Sudeste Asiático e em outros mercados globais. Para um site criado com base em vídeos, o desempenho decide se os espectadores permanecem, se os mecanismos de pesquisa mostram o conteúdo e se a reprodução é tranquila.
A equipe de engenharia da Web da WeTV não envia códigos que não atingem as metas de desempenho. Por muito tempo, manter essa linha significava que um desenvolvedor precisava parar o que estava fazendo, abrir o Chrome e criar o perfil da página manualmente sempre que um build falhava na verificação. Rastrear e corrigir uma regressão levou cerca de quatro horas.
Hoje, um agente de programação de IA faz esse trabalho como parte do pipeline de CI/CD. Com o Chrome DevTools para agentes, o agente inspeciona a página em um navegador em tempo real. Com o Modern Web Guidance, ele escreve correções que seguem os padrões atuais da plataforma da Web. O fluxo de trabalho agora diagnostica e resolve automaticamente 90% dos testes de desempenho com falha, e o tempo entre uma verificação com falha e uma correção verificada caiu de quatro horas para 30 minutos, incluindo a criação completa e a avaliação manual.
O desafio: um desenvolvedor preso entre o editor e o navegador
Os engenheiros da WeTV já usavam ferramentas de programação com IA no ambiente de desenvolvimento integrado. Essas ferramentas podiam escrever código, mas não podiam ver o que o código fazia depois de ser executado em um navegador. Então, o trabalho foi dividido em dois. Os engenheiros escrevem o código no editor e, em seguida, mudam para o Chrome para implantar, inspecionar e verificar. Cada correção significava passar por esse loop novamente manualmente.
A divisão foi mais prejudicial no portão de lançamento. O pipeline de CI/CD da WeTV executa traces de desempenho em cada versão e mantém o Cumulative Layout Shift (CLS) em 0,1 ou menos. Quando um build cruzava essa linha, o pipeline o sinalizava, mas encontrar a causa ainda era um processo manual. Um engenheiro precisava abrir o Chrome DevTools, gravar um trace, encontrar o elemento que se moveu, levar essa descoberta de volta ao editor, escrever uma correção e executar a verificação novamente. Uma única regressão de CLS custou cerca de quatro horas de tempo de engenharia.
A equipe precisava de um agente que pudesse lidar com as duas partes do trabalho: analisar a página em execução e corrigir o código de acordo com um padrão conhecido.
A solução: conectar o agente ao navegador e aos padrões da Web
A WeTV moveu a verificação de desempenho para o fluxo de solicitação de mesclagem (MR, na sigla em inglês). Quando um desenvolvedor abre uma MR, o pipeline de CI/CD inicia um ambiente em que o agente de programação de IA é executado localmente com dois recursos que as ferramentas de IDE da equipe não tinham:
- Chrome DevTools para agentes: executa um servidor de Protocolo de Contexto de Modelo (MCP) e conecta o agente a uma instância ativa do Chrome. O agente pode registrar traces de desempenho (entre outros recursos do Chrome DevTools) e verificar como o código de front-end é renderizado, da mesma forma que um desenvolvedor faria no DevTools.
- Modern Web Guidance: uma habilidade de agente que contém as práticas recomendadas da plataforma da Web e dados de compatibilidade do navegador. Ele afasta o agente de padrões legados e o direciona para correções baseadas em recursos modernos da plataforma da Web.
O DevTools para agentes informa o que deu errado. O Modern Web Guidance define como ele corrige o problema.
Exemplo real: uma mudança de layout na página de reprodução do episódio
Durante uma solicitação de mesclagem, o agente executou a ferramenta performance_start_trace na
página de reprodução de episódios para computador. O trace registrou uma CLS de 0,39, quase quatro
vezes o limite de 0,1.
Diga ao agente para diagnosticar antes de editar
A WeTV não permite que o agente improvise. O comando que orienta o fluxo de trabalho diz para diagnosticar o problema antes de tocar em qualquer código e verificar as descobertas com base no Modern Web Guidance, em vez de confiar no que o modelo geraria por padrão.
Confira um exemplo de comando usado pela equipe da 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.
Duas partes desse comando têm mais peso. "Diagnosticar primeiro, depois modificar
o código" impede que o agente corrija sintomas. A etapa 2 direciona o agente para usar
performance_analyze_insight com insightName: 'CLSCulprits', para que ele informe
o elemento, o tempo e a pontuação exatos, em vez de uma suspeita geral.
No vídeo a seguir, quando o comando é executado, o agente pesquisa o guia relevante no Modern Web Guidance para implementar correções com recursos da Web modernos relacionados à CLS e usa o Chrome DevTools para agentes para abrir uma instância do navegador Chrome e registrar um rastro de desempenho.
Essa combinação de diagnósticos de ambiente de execução e orientação estruturada permite correções automatizadas para mudanças de layout complexas. Veja um exemplo de problema corrigido pelo fluxo de trabalho automatizado.
Encontrar a causa raiz
O rastro apontava para o player de vídeo. O WeTV renderiza o player no servidor, mas o contêiner do player não reservou nenhuma altura para ele. Quando o cliente hidratou a página, a altura do contêiner aumentou e o conteúdo ao redor dele mudou.
Aplicar uma correção baseada em padrões
A correção é reservar o espaço durante a renderização do lado do servidor, para que o contêiner já tenha a altura certa antes da hidratação. Confira a seguir um exemplo de uma correção que o agente escreveu com referência ao guia de layout CSS das Orientações para Web Moderna:
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
Depois que o agente aplicou o CSS, o pipeline recriou a página e o agente executou o mesmo trace novamente. Somente quando a CLS ficou abaixo de 0,1, o patch passou para a revisão humana.
Impacto: lançamentos mais rápidos e layouts estáveis
A WeTV alcançou melhorias mensuráveis na eficiência da engenharia e na estabilidade do layout ao adicionar o Chrome DevTools para agentes e o Modern Web Guidance ao fluxo de trabalho de CI/CD:
- Redução de 87% no tempo de depuração e resolução de ponta a ponta (de 4 horas para 30 minutos).
- 90% de todas as regressões de desempenho recorrentes são diagnosticadas e resolvidas automaticamente.
Os engenheiros não perdem mais metade de um dia de trabalho com a criação de perfis. Quando um build ultrapassa o limite, o agente lê o trace, escreve uma correção, testa-a e entrega um patch verificado a um revisor humano. As pessoas ainda tomam a decisão final, mas começam com uma correção que já passou na verificação que falhou.
Como as regressões de CLS são corrigidas na solicitação de mesclagem, elas não chegam à produção. Isso mantém as páginas abaixo da meta de 0, 1, protege a visibilidade da pesquisa da WeTV e remove um motivo comum para bloquear uma versão no final do ciclo.
Lições para sua equipe
A configuração do WeTV é específica para a pilha dele, mas o padrão por trás dela é válido para a maioria das equipes que controlam as versões com base no desempenho:
- Execute o agente onde a falha acontece. A WeTV aciona o agente na solicitação de mesclagem, para que ninguém precise notar uma verificação com falha e iniciar uma sessão manualmente.
- Faça o agente diagnosticar antes de editar. Pedir um trace e um culpado nomeado primeiro produz correções que visam o elemento real em vez de uma suposição.
- Parear dados de ambiente de execução com um padrão. Um rastro informa ao agente qual elemento foi movido. O Modern Web Guidance informa qual correção segue a prática atual da plataforma.
- Exija provas. Executar novamente o mesmo trace que falhou é a evidência do agente de que a correção funciona. O P2ER segue o mesmo princípio na regra de verificação empírica obrigatória.
- Mantenha a abordagem "human in the loop". O agente faz a investigação, e um engenheiro analisa um patch que já passou na verificação.
Feedback e planos futuros
A WeTV descobriu que combinar a telemetria de ambiente de execução em tempo real do Chrome DevTools para agentes com as regras padronizadas do Modern Web Guidance eliminou a análise manual de desempenho do processo de lançamento, mantendo as mudanças de código do agente alinhadas aos padrões atuais da plataforma da Web.
"Os resultados têm sido muito eficazes em termos de velocidade e qualidade. Os insights de diagnóstico fornecidos pelo Chrome DevTools para agentes e pelo Modern Web Guidance nos deram referências confiáveis para corrigir problemas complexos de layout. Fazemos uma verificação rigorosa após cada correção, e a taxa de sucesso e a estabilidade atuais melhoraram significativamente nossa confiança no lançamento."
—Yangjie Zheng, chefe de engenharia, WeTV (Tencent)
Em seguida, a equipe de engenharia do WeTV planeja usar o Chrome DevTools para agentes e o Modern Web Guidance em testes completos para as próximas versões de código.
Recursos
Para configurar um fluxo de trabalho semelhante, confira estes recursos: