Veröffentlicht: 10. November 2026
WeTV ist die internationale Videostreaming-Plattform von Tencent. Das Unternehmen bietet Zuschauern in Südostasien und anderen globalen Märkten Dramaserien, Animes und Varietéshows an. Bei einer Website, die auf Videos basiert, entscheidet die Leistung darüber, ob Zuschauer bleiben, ob Suchmaschinen die Inhalte anzeigen und ob die Wiedergabe flüssig ist.
Das Web-Engineering-Team von WeTV veröffentlicht keinen Code, der die Leistungsziele nicht erreicht. Lange Zeit bedeutete das Einhalten dieser Linie, dass ein Entwickler seine Arbeit unterbrechen, Chrome öffnen und die Seite jedes Mal manuell profilieren musste, wenn ein Build die Prüfung nicht bestand. Das Aufspüren und Beheben einer Regression dauerte etwa vier Stunden.
Heute übernimmt ein KI-Coding-Agent diese Arbeit im Rahmen der CI/CD-Pipeline. Mit den Chrome-Entwicklertools für KI-Agenten prüft der KI-Agent die Seite in einem Live-Browser. Mit Modern Web Guidance werden Korrekturen geschrieben, die den aktuellen Standards der Webplattform entsprechen. Der Workflow diagnostiziert und behebt jetzt 90 % der fehlgeschlagenen Leistungstests automatisch. Die Zeit von einer fehlgeschlagenen Prüfung bis zu einer verifizierten Fehlerbehebung ist von vier Stunden auf 30 Minuten gesunken, einschließlich vollständigem Build und manueller Bewertung.
Die Herausforderung: Ein Entwickler, der zwischen Editor und Browser feststeckt
Die Entwickler von WeTV haben bereits KI-Tools für die Programmierung in ihrer IDE verwendet. Diese Tools konnten zwar Code schreiben, aber nicht sehen, was der Code im Browser bewirkte. Die Arbeit wurde also in zwei Teile aufgeteilt. Entwickler schreiben Code im Editor und wechseln dann zu Chrome, um ihn bereitzustellen, zu prüfen und zu verifizieren. Jede Korrektur bedeutete, dass die Schleife noch einmal manuell durchlaufen werden musste.
Die Aufteilung war am Release-Gate am schmerzhaftesten. Die CI/CD-Pipeline von WeTV führt bei jedem Release Leistungstraces aus und hält den Cumulative Layout Shift (CLS) bei 0,1 oder niedriger. Wenn ein Build diese Grenze überschritt, wurde er von der Pipeline markiert, aber die Ursache musste immer noch manuell ermittelt werden. Ein Entwickler musste die Chrome-Entwicklertools öffnen, einen Trace aufzeichnen, das verschobene Element finden, das Ergebnis im Editor öffnen, eine Korrektur schreiben und die Prüfung noch einmal ausführen. Eine einzelne CLS-Regression kostete etwa vier Stunden Entwicklungszeit.
Das Team benötigte einen Agenten, der beide Aufgaben erledigen konnte: die laufende Seite analysieren und dann den Code gemäß einem bekannten Standard korrigieren.
Die Lösung: Den KI-Agenten mit dem Browser und Webstandards verbinden
WeTV hat die Leistungsüberprüfung in den Merge-Request-Ablauf (MR) verschoben. Wenn ein Entwickler einen MR öffnet, startet die CI/CD-Pipeline eine Umgebung, in der der KI-Codierungs-Agent lokal mit zwei Funktionen ausgeführt wird, die den IDE-Tools des Teams fehlten:
- Chrome-Entwicklertools für KI-Agenten: Führt einen MCP-Server (Model Context Protocol) aus und verbindet den Agenten mit einer aktiven Chrome-Instanz. Der Agent kann unter anderem Leistungs-Traces aufzeichnen und prüfen, wie der Frontend-Code tatsächlich gerendert wird, genau wie ein Entwickler in den Entwicklertools.
- Modern Web Guidance: Ein Agent-Skill, der Best Practices für Webplattformen und Daten zur Browserkompatibilität enthält. Der Agent wird von Legacy-Mustern weg und hin zu Korrekturen geführt, die auf modernen Webplattformfunktionen basieren.
Die Entwicklertools für KI-Agenten teilen dem KI-Agenten mit, was nicht funktioniert hat. Modern Web Guidance bestimmt, wie der Fehler behoben wird.
Beispiel aus der Praxis: Layoutverschiebung auf der Wiedergabeseite einer Folge
Während eines Zusammenführungsantrags hat der Agent das Tool performance_start_trace auf der Wiedergabeseite für Desktop-Folgen ausgeführt. Der Trace hat einen CLS von 0,39 aufgezeichnet, fast das Vierfache des Grenzwerts von 0,1.
KI-Agenten anweisen, vor dem Bearbeiten eine Diagnose durchzuführen
WeTV lässt den KI-Agenten nicht improvisieren. Der Prompt, der den Workflow steuert, weist ihn an, das Problem zu diagnostizieren, bevor er Code ändert, und seine Ergebnisse mit Modern Web Guidance abzugleichen, anstatt sich auf das zu verlassen, was das Modell standardmäßig generieren würde.
Hier ist ein Beispiel für einen Prompt, den das WeTV-Team verwendet hat:
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.
Zwei Teile dieses Prompts sind besonders wichtig. „Erst diagnostizieren, dann den Code ändern“ verhindert, dass der Agent Symptome behebt. In Schritt 2 wird der Agent angewiesen, performance_analyze_insight mit insightName: 'CLSCulprits' zu verwenden, damit er das genaue Element, den Zeitpunkt und die Punktzahl meldet, anstatt nur einen allgemeinen Verdacht zu äußern.
Im folgenden Video sucht der KI-Agent nach der Ausführung des Prompts in Modern Web Guidance nach dem relevanten Leitfaden, um Fehler mit modernen Webfunktionen im Zusammenhang mit CLS zu beheben. Außerdem verwendet er die Chrome-Entwicklertools für KI-Agenten, um eine Chrome-Browserinstanz zu öffnen und einen Leistungstrace aufzuzeichnen.
Diese Kombination aus Laufzeitdiagnose und strukturierter Anleitung ermöglicht automatisierte Korrekturen für komplexe Layoutverschiebungen. Hier ist ein Beispiel für ein Problem, das durch den automatisierten Workflow behoben wurde.
Ursache finden
Der Trace zeigte auf den Videoplayer. WeTV rendert den Player auf dem Server, aber der Container des Players hat keine Höhe dafür reserviert. Als der Client die Seite hydratisiert hat, wurde die Höhe des Containers vergrößert und der Inhalt um ihn herum verschoben.
Standardbasierte Korrektur anwenden
Die Lösung besteht darin, den Platz während des serverseitigen Renderings zu reservieren, damit der Container vor der Hydratation bereits die richtige Höhe hat. Hier ist ein Beispiel für eine Korrektur, die der Agent mit Bezug auf den Leitfaden zum CSS-Layout aus der Modern Web Guidance geschrieben hat:
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
Nachdem der Agent das CSS angewendet hatte, wurde die Seite von der Pipeline neu erstellt und der Agent hat denselben Trace noch einmal ausgeführt. Erst wenn der CLS-Wert unter 0,1 lag, wurde der Patch zur manuellen Überprüfung weitergeleitet.
Auswirkung: Schnellere Releases und stabile Layouts
WeTV konnte die Effizienz der Entwicklung und die Stabilität des Layouts messbar verbessern, indem Chrome-Entwicklertools für KI-Agenten und Modern Web Guidance in den CI/CD-Workflow integriert wurden:
- 87 % weniger Zeit für die End-to-End-Fehlerbehebung und -Lösung (von 4 Stunden auf 30 Minuten).
- 90 % aller wiederkehrenden Leistungsregressionen werden automatisch diagnostiziert und behoben.
Die Entwickler verlieren nicht mehr einen halben Arbeitstag mit der Profilerstellung. Wenn ein Build den Schwellenwert überschreitet, liest der Agent den Trace, schreibt einen Fix, testet ihn und übergibt einen verifizierten Patch an einen menschlichen Prüfer. Die endgültige Entscheidung liegt immer noch beim Menschen, aber er beginnt mit einer Korrektur, die die fehlgeschlagene Prüfung bereits bestanden hat.
Da CLS-Regressionen im Merge-Request behoben werden, erreichen sie die Produktion nicht. So bleiben die Seiten unter dem Zielwert von 0, 1, die Sichtbarkeit von WeTV in der Suche wird geschützt und ein häufiger Grund für die Blockierung einer Veröffentlichung am Ende des Zyklus wird beseitigt.
Lektionen für Ihr Team
Die Einrichtung von WeTV ist spezifisch für den Stack, aber das Muster dahinter lässt sich auf die meisten Teams übertragen, die Releases von der Leistung abhängig machen:
- Führen Sie den Agenten dort aus, wo der Fehler auftritt. WeTV löst den Agenten über die Zusammenführungsanfrage aus, sodass niemand eine fehlgeschlagene Prüfung bemerken und eine Sitzung manuell starten muss.
- Lassen Sie den KI-Agenten eine Diagnose erstellen, bevor er Änderungen vornimmt. Wenn Sie zuerst nach einem Trace und einem benannten Verursacher fragen, erhalten Sie Korrekturen, die auf das tatsächliche Element abzielen, anstatt auf eine Vermutung.
- Laufzeitdaten mit einem Standard verknüpfen. Ein Trace teilt dem Agenten mit, welches Element sich bewegt hat. Modern Web Guidance gibt an, welche Korrektur der aktuellen Plattformpraxis entspricht.
- Nachweis erforderlich. Wenn der Agent den fehlgeschlagenen Trace noch einmal ausführt, kann er nachweisen, dass die Korrektur funktioniert. P2ER folgt demselben Prinzip in seiner Regel zur obligatorischen empirischen Überprüfung.
- Sorgen Sie für eine menschliche Komponente durch Human in the Loop. Der KI-Agent führt die Untersuchung durch und ein Entwickler prüft einen Patch, der die Prüfung bereits bestanden hat.
Feedback und Zukunftspläne
WeTV stellte fest, dass durch die Kombination von Live-Laufzeittelemetrie aus den Chrome-Entwicklertools für KI-Agenten mit den standardisierten Regeln in Modern Web Guidance die manuelle Leistungsanalyse aus dem Releaseprozess entfernt werden konnte. Gleichzeitig blieben die Codeänderungen des KI-Agenten im Einklang mit den aktuellen Standards der Webplattform.
„Die Ergebnisse waren sowohl in Bezug auf die Geschwindigkeit als auch auf die Qualität sehr gut. Die Diagnosedaten, die von den Chrome-Entwicklertools für KI-Agenten und Modern Web Guidance bereitgestellt wurden, gaben uns zuverlässige Referenzen für die Behebung komplexer Layoutprobleme. Nach jeder Fehlerbehebung führen wir eine strenge Überprüfung durch. Die aktuelle Erfolgsquote und Stabilität haben unser Vertrauen in die Releases deutlich verbessert.“
—Yangjie Zheng, Head of Engineering, WeTV (Tencent)
Als Nächstes plant das WeTV-Entwicklungsteam, die Chrome-Entwicklertools für KI-Agenten und Modern Web Guidance für End-to-End-Tests für anstehende Code-Releases einzusetzen.
Ressourcen
Wenn Sie einen ähnlichen Workflow einrichten möchten, sehen Sie sich die folgenden Ressourcen an: