Dipublikasikan: 10 Nov 2026
WeTV adalah platform streaming video internasional Tencent. Viu menyajikan serial drama, anime, dan variety show kepada penonton di Asia Tenggara dan pasar global lainnya. Untuk situs yang dibuat berdasarkan video, performa menentukan apakah penonton tetap bertahan, apakah mesin telusur menampilkan konten, dan apakah pemutaran terasa lancar.
Tim rekayasa web WeTV tidak mengirimkan kode yang tidak mencapai target performanya. Selama ini, mempertahankan batas tersebut berarti developer harus menghentikan pekerjaan mereka, membuka Chrome, dan membuat profil halaman secara manual setiap kali build gagal dalam pemeriksaan. Melacak dan memperbaiki satu regresi memerlukan waktu sekitar empat jam.
Saat ini, agen coding AI melakukan pekerjaan tersebut sebagai bagian dari pipeline CI/CD. Dengan Chrome DevTools untuk agen, agen akan memeriksa halaman di browser aktif. Dengan Modern Web Guidance, Gemini menulis perbaikan yang mengikuti standar platform web saat ini. Alur kerja ini sekarang mendiagnosis dan menyelesaikan 90% pengujian performa yang gagal secara otomatis, dan waktu dari pemeriksaan yang gagal hingga perbaikan yang diverifikasi turun dari empat jam menjadi 30 menit—termasuk build lengkap dan evaluasi manual.
Tantangan: Developer terjebak di antara editor dan browser
Engineer WeTV sudah menggunakan alat coding AI di IDE mereka. Alat tersebut dapat menulis kode, tetapi tidak dapat melihat apa yang dilakukan kode setelah dijalankan di browser. Jadi, pekerjaan dibagi menjadi dua. Engineer menulis kode di editor, lalu beralih ke Chrome untuk men-deploy, memeriksa, dan memverifikasinya. Setiap perbaikan berarti mengulangi siklus tersebut lagi secara manual.
Pemisahan ini paling merugikan di gerbang rilis. Pipeline CI/CD WeTV menjalankan pelacakan performa pada setiap rilis dan mempertahankan Cumulative Layout Shift (CLS) pada 0,1 atau lebih rendah. Saat build melewati batas tersebut, pipeline akan menandainya, tetapi menemukan penyebabnya masih dilakukan secara manual. Engineer harus membuka Chrome DevTools, merekam rekaman aktivitas, menemukan elemen yang berpindah, membawa temuan tersebut kembali ke editor, menulis perbaikan, dan menjalankan pemeriksaan lagi. Satu regresi CLS memerlukan waktu sekitar empat jam waktu engineering.
Tim memerlukan agen yang dapat menangani kedua bagian tugas: Melihat halaman yang berjalan, lalu memperbaiki kode ke standar yang diketahui.
Solusi: Hubungkan agen ke browser dan ke standar web
WeTV memindahkan verifikasi performa ke dalam alur merge request (MR). Saat developer membuka MR, pipeline CI/CD memulai lingkungan tempat agen coding AI berjalan secara lokal dengan dua kemampuan yang tidak dimiliki alat IDE tim:
- Chrome DevTools untuk agen: Menjalankan server Model Context Protocol (MCP) dan menghubungkan agen ke instance Chrome live. Agen dapat merekam rekaman aktivitas performa (di antara fitur Chrome DevTools lainnya) dan memeriksa cara kode frontend dirender, sama seperti yang dilakukan developer di DevTools.
- Modern Web Guidance: Kemampuan agen yang berisi praktik terbaik platform web dan data kompatibilitas browser. Agen ini mengarahkan agen menjauh dari pola lama dan menuju perbaikan yang dibangun di atas fitur platform web modern.
DevTools untuk agen memberi tahu agen apa yang rusak. Modern Web Guidance membentuk cara memperbaikinya.
Contoh di dunia nyata: Pergeseran tata letak di halaman pemutaran episode
Selama satu permintaan penggabungan, agen menjalankan alat performance_start_trace di
halaman pemutaran episode desktop. Rekaman pelacakan mencatat CLS sebesar 0,39, hampir empat kali lipat dari batas 0,1.
Memerintahkan agen untuk mendiagnosis sebelum mengedit
WeTV tidak mengizinkan agen berimprovisasi. Perintah yang mendorong alur kerja memberi tahu agen untuk mendiagnosis masalah sebelum menyentuh kode apa pun, dan untuk memeriksa temuannya berdasarkan Modern Web Guidance, bukan mengandalkan apa pun yang akan dihasilkan model secara default.
Berikut adalah contoh perintah yang digunakan tim 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.
Dua bagian dari perintah ini memiliki bobot paling besar. "Diagnose first, then modify the code" mencegah agen menambal gejala. Langkah 2 mengarahkan agen untuk menggunakan
performance_analyze_insight dengan insightName: 'CLSCulprits', sehingga agen melaporkan
elemen, pengaturan waktu, dan skor yang tepat, bukan kecurigaan umum.
Dalam video berikut, saat perintah dijalankan, agen akan menelusuri panduan yang relevan di Modern Web Guidance untuk menerapkan perbaikan dengan fitur web modern yang terkait dengan CLS, dan menggunakan Chrome DevTools untuk agen guna membuka instance browser Chrome dan merekam rekaman aktivitas performa.
Kombinasi diagnostik runtime dan panduan terstruktur ini memungkinkan perbaikan otomatis untuk pergeseran tata letak yang kompleks. Berikut adalah contoh masalah yang diperbaiki oleh alur kerja otomatis.
Menemukan akar masalah
Jejak tersebut mengarah ke pemutar video. WeTV merender pemutar di server, tetapi penampung pemutar tidak menyediakan tinggi untuknya. Saat klien melakukan hidrasi halaman, tinggi penampung akan bertambah dan konten di sekitarnya akan bergeser.
Menerapkan perbaikan berbasis standar
Perbaikannya adalah dengan mencadangkan ruang selama rendering sisi server, sehingga penampung sudah memiliki tinggi yang tepat sebelum hidrasi. Berikut adalah contoh perbaikan yang ditulis agen dengan mengacu pada panduan css-layout Modern Web Guidance:
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
Setelah agen menerapkan CSS, pipeline membangun ulang halaman dan agen menjalankan trace yang sama lagi. Hanya jika CLS berada di bawah 0,1, patch akan dilanjutkan ke peninjauan manual.
Dampak: Rilis lebih cepat dan tata letak yang stabil
WeTV mencapai peningkatan terukur dalam efisiensi teknis dan stabilitas tata letak saat menambahkan Chrome DevTools untuk agen dan Modern Web Guidance ke alur kerja CI/CD-nya:
- Pengurangan waktu proses debug dan penyelesaian menyeluruh sebesar 87% (dari 4 jam menjadi 30 menit).
- 90% dari semua regresi performa berulang didiagnosis dan diselesaikan secara otomatis.
Engineer tidak lagi kehilangan setengah hari kerja untuk membuat profil. Saat build melanggar nilai minimum, agen akan membaca trace, menulis perbaikan, mengujinya, dan menyerahkan patch yang telah diverifikasi kepada peninjau manusia. Manusia tetap membuat keputusan akhir, tetapi mereka memulai dari perbaikan yang telah lulus pemeriksaan yang gagal.
Karena regresi CLS diperbaiki di dalam permintaan penggabungan, regresi tersebut tidak mencapai produksi. Hal ini menjaga halaman tetap berada di bawah target 0,1, melindungi visibilitas penelusuran WeTV, dan menghilangkan alasan umum untuk memblokir rilis di akhir siklus.
Pelajaran untuk tim Anda
Penyiapan WeTV bersifat spesifik untuk stack-nya, tetapi pola di baliknya berlaku untuk sebagian besar tim yang membatasi rilis berdasarkan performa:
- Jalankan agen di tempat kegagalan terjadi. WeTV memicu agen dari permintaan penggabungan, sehingga tidak ada yang perlu memperhatikan pemeriksaan yang gagal dan memulai sesi secara manual.
- Buat agen mendiagnosis sebelum mengedit. Meminta pelacakan dan pelaku yang disebutkan terlebih dahulu akan menghasilkan perbaikan yang menargetkan elemen sebenarnya, bukan tebakan.
- Gabungkan data runtime dengan standar. Trace memberi tahu agen elemen mana yang dipindahkan. Modern Web Guidance memberi tahu perbaikan mana yang mengikuti praktik platform saat ini.
- Memerlukan bukti. Menjalankan ulang trace yang sama yang gagal adalah bukti bagi agen bahwa perbaikan berhasil. P2ER mengikuti prinsip yang sama dalam aturan verifikasi empiris wajibnya.
- Selalu libatkan interaksi manusia. Agen melakukan investigasi, dan engineer meninjau patch yang telah lulus pemeriksaan.
Masukan dan rencana mendatang
WeTV mendapati bahwa menggabungkan telemetri runtime langsung dari Chrome DevTools untuk agen dengan aturan standar di Modern Web Guidance menghilangkan analisis performa manual dari proses rilis, sekaligus menjaga perubahan kode agen tetap sesuai dengan standar platform web saat ini.
"Hasilnya sangat efektif dalam hal kecepatan dan kualitas. Insight diagnostik yang diberikan oleh Chrome DevTools untuk agen dan Modern Web Guidance memberi kami referensi yang andal untuk memperbaiki masalah tata letak yang kompleks. Kami melakukan verifikasi ketat setelah setiap perbaikan, dan rasio keberhasilan serta stabilitas saat ini telah meningkatkan keyakinan kami dalam merilis."
—Yangjie Zheng, Head of Engineering, WeTV (Tencent)
Selanjutnya, tim engineering WeTV berencana menghadirkan Chrome DevTools untuk agen dan Modern Web Guidance di seluruh pengujian end-to-end untuk rilis kode mendatang.
Resource
Untuk menyiapkan alur kerja serupa, pelajari referensi berikut: