Yayınlanma tarihi: 10 Kasım 2026
WeTV, Tencent'in uluslararası video akış platformudur. Güneydoğu Asya ve diğer küresel pazarlardaki izleyicilere drama dizileri, anime ve varyete programları sunar. Video odaklı bir sitede performans, izleyicilerin sitede kalıp kalmayacağını, arama motorlarının içeriği gösterip göstermeyeceğini ve oynatmanın sorunsuz olup olmayacağını belirler.
WeTV web mühendisliği ekibi, performans hedeflerine ulaşamayan kodları yayınlamaz. Uzun bir süre boyunca bu çizgiyi korumak, bir derleme kontrolü her başarısız olduğunda geliştiricinin yaptığı işi bırakması, Chrome'u açması ve sayfanın profilini manuel olarak oluşturması gerektiği anlamına geliyordu. Bir gerilemeyi bulup düzeltmek yaklaşık dört saat sürüyordu.
Günümüzde bu işi CI/CD ardışık düzeninin bir parçası olarak yapay zeka kodlama temsilcisi yapıyor. Ajanlar için Chrome Geliştirici Araçları ile ajan, sayfayı canlı bir tarayıcıda inceler. Modern Web Rehberi ile mevcut web platformu standartlarına uygun düzeltmeler yazar. İş akışı artık başarısız performans testlerinin %90'ını otomatik olarak teşhis edip çözüyor. Başarısız bir kontrolden doğrulanmış bir düzeltmeye kadar geçen süre, tam derleme ve manuel değerlendirme dahil olmak üzere dört saatten 30 dakikaya düştü.
Zorluk: Editör ile tarayıcı arasında sıkışıp kalan bir geliştirici
WeTV mühendisleri, IDE'lerinde yapay zeka kodlama araçlarını zaten kullanıyordu. Bu araçlar kod yazabiliyordu ancak kodun tarayıcıda çalıştırıldıktan sonra ne yaptığını göremiyordu. Böylece iş ikiye bölündü. Mühendisler, düzenleyicide kod yazdıktan sonra kodu dağıtmak, incelemek ve doğrulamak için Chrome'a geçiş yapar. Her düzeltme, bu döngüyü manuel olarak tekrar tekrar uygulamak anlamına geliyordu.
Bu ayrılık en çok yayın aşamasında sorun yarattı. WeTV'nin CI/CD ardışık düzeni, her sürümde performans izleri çalıştırır ve Cumulative Layout Shift'i (CLS) 0,1 veya daha düşük bir değerde tutar. Bir derleme bu sınırı aştığında ardışık düzen bunu işaretliyordu ancak nedenini bulmak yine de manuel olarak yapılıyordu. Mühendislerin Chrome Geliştirici Araçları'nı açması, iz kaydetmesi, hareket eden öğeyi bulması, bu bulguyu düzenleyiciye geri taşıması, bir düzeltme yazması ve kontrolü tekrar çalıştırması gerekiyordu. Tek bir CLS gerilemesi, yaklaşık dört saatlik mühendislik çalışması gerektiriyordu.
Ekibin, işin her iki yarısını da halledebilecek bir temsilciye ihtiyacı vardı: Çalışan sayfayı incelemek ve ardından kodu bilinen bir standarda göre düzeltmek.
Çözüm: Temsilciyi tarayıcıya ve web standartlarına bağlama
WeTV, performans doğrulama sürecini birleştirme isteği (MR) akışına taşıdı. Bir geliştirici bir MR açtığında CI/CD ardışık düzeni, yapay zeka kodlama aracısının ekibin IDE araçlarında bulunmayan iki özellik ile yerel olarak çalıştığı bir ortam başlatır:
- Ajanlar için Chrome Geliştirici Araçları: Model Context Protocol (MCP) sunucusu çalıştırır ve temsilciyi canlı bir Chrome örneğine bağlar. Temsilci, performans izlerini (diğer Chrome Geliştirici Araçları özelliklerinin yanı sıra) kaydedebilir ve ön uç kodunun gerçekte nasıl oluşturulduğunu, bir geliştiricinin Geliştirici Araçları'nda yaptığı gibi kontrol edebilir.
- Modern Web Rehberi: Web platformuyla ilgili en iyi uygulamaları ve tarayıcı uyumluluğu verilerini içeren bir temsilci becerisidir. Temsilciyi eski kalıplardan uzaklaştırıp modern web platformu özelliklerine dayalı düzeltmelere yönlendirir.
Temsilciler için Geliştirici Araçları, temsilciye neyin bozulduğunu bildirir. Modern Web Rehberi, bu düzeltmenin nasıl yapılacağını belirler.
Gerçek hayattan örnek: Bölüm oynatma sayfasında düzen kayması
Bir birleştirme isteği sırasında temsilci, masaüstü bölüm oynatma sayfasında performance_start_trace aracını çalıştırdı. İz, 0,1 sınırının yaklaşık dört katı olan 0,39'luk bir CLS kaydetti.
Temsilciye düzenleme yapmadan önce teşhis koymasını söyleyin
WeTV, temsilcinin doğaçlama yapmasına izin vermez. İş akışını yönlendiren istem, modele herhangi bir koda dokunmadan önce sorunu teşhis etmesini ve bulgularını varsayılan olarak üreteceği her şeye güvenmek yerine Modern Web Rehberi'ne göre kontrol etmesini söyler.
WeTV ekibinin kullandığı bir istem örneği:
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.
Bu istemin iki bölümü en önemli kısımlarıdır. "Önce teşhis et, sonra kodu değiştir" talimatı, temsilcinin belirtileri düzeltmesini engeller. 2. adımda temsilciye, insightName: 'CLSCulprits' ile performance_analyze_insight kullanması söylenir. Böylece temsilci, genel bir şüphe yerine tam öğeyi, zamanlamayı ve puanı bildirir.
Aşağıdaki videoda, istem yürütüldüğünde temsilci, CLS ile ilgili modern web özellikleriyle düzeltmeleri uygulamak için Modern Web Rehberi'nde ilgili kılavuzu arar ve bir Chrome tarayıcı örneği açıp performans izini kaydetmek için temsilciler için Chrome Geliştirici Araçları'nı kullanır.
Çalışma zamanı teşhisleri ve yapılandırılmış rehberliğin bu kombinasyonu, karmaşık düzen kaymaları için otomatik düzeltmeler sağlar. Otomatik iş akışının düzelttiği bir soruna örnek verelim.
Temel nedeni bulma
İz, video oynatıcıyı işaret ediyordu. WeTV, oynatıcıyı sunucuda oluşturuyor ancak oynatıcının kapsayıcısı, oynatıcı için herhangi bir yükseklik ayırmadı. İstemci sayfayı doldurduğunda kapsayıcının yüksekliği genişledi ve etrafındaki içerik kaydı.
Standartlara dayalı bir düzeltme uygulayın
Bu sorunu çözmek için sunucu tarafı oluşturma sırasında alan ayırın. Böylece kapsayıcı, hidrasyondan önce doğru yüksekliğe sahip olur. Aşağıda, temsilcinin Modern Web Rehberi'ndeki css-layout kılavuzuna referans vererek yazdığı bir düzeltme örneği verilmiştir:
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
Temsilci CSS'yi uyguladıktan sonra ardışık düzen sayfayı yeniden oluşturdu ve temsilci aynı izlemeyi tekrar çalıştırdı. Yalnızca CLS 0,1'in altına düştüğünde yama, uzman incelemesine geçti.
Etki: Daha hızlı sürümler ve kararlı düzenler
WeTV, CI/CD iş akışına ajanlar için Chrome Geliştirici Araçları ve Modern Web Rehberi'ni eklediğinde mühendislik verimliliğinde ve düzen kararlılığında ölçülebilir iyileştirmeler elde etti:
- Uçtan uca hata ayıklama ve çözüm süresinde %87 azalma (4 saatten 30 dakikaya).
- Yinelenen tüm performans gerilemelerinin %90'ı otomatik olarak teşhis edilip çözülür.
Mühendisler artık profil oluşturmak için yarım iş günü kaybetmiyor. Bir derleme eşiği aştığında temsilci, izi okur, bir düzeltme yazar, test eder ve doğrulanmış bir yamayı inceleme uzmanına teslim eder. Son kararı yine insanlar verir ancak başarısız olan kontrolden geçmiş bir düzeltmeyle başlarlar.
CLS gerilemeleri birleştirme isteği içinde düzeltildiğinden üretime ulaşmaz. Bu sayede sayfalar 0, 1 hedefinin altında kalıyor, WeTV'nin arama görünürlüğü korunuyor ve döngünün sonlarında bir sürümün engellenmesine neden olan yaygın bir sorun ortadan kalkıyor.
Ekibiniz için dersler
WeTV'nin kurulumu kendi yığınına özeldir ancak bunun arkasındaki model, sürümleri performansa göre kısıtlayan çoğu ekip için geçerlidir:
- Hatanın gerçekleştiği yerde aracıyı çalıştırın. WeTV, temsilciyi birleştirme isteğinden tetikler. Böylece, başarısız bir kontrolü fark edip oturumu manuel olarak başlatmak zorunda kalmaz.
- Temsilcinin düzenleme yapmadan önce teşhis koymasını sağlayın. Önce iz ve adlandırılmış bir suçlu istemek, tahmin yerine gerçek öğeyi hedefleyen düzeltmeler üretir.
- Çalışma zamanı verilerini bir standartla eşleştirin. İz, temsilciye hangi öğenin taşındığını bildirir. Modern Web Rehberi, hangi düzeltmenin mevcut platform uygulamasına uygun olduğunu belirtir.
- Kanıt isteyin. Başarısız olan aynı izlemeyi yeniden çalıştırmak, temsilcinin düzeltmenin işe yaradığına dair kanıtıdır. P2ER, zorunlu ampirik doğrulama kuralında aynı ilkeyi uygular.
- İnsan müdahalesi gerektiren bir süreç uygulayın. Temsilci incelemeyi yapar ve bir mühendis, kontrolü geçmiş bir yamayı inceler.
Geri bildirim ve gelecek planları
WeTV, temsilciler için Chrome Geliştirici Araçları'ndan alınan canlı çalışma zamanı telemetrisini Modern Web Rehberi'ndeki standartlaştırılmış kurallarla eşleştirerek manuel performans analizini yayın sürecinden çıkardı. Aynı zamanda temsilcinin kod değişikliklerini mevcut web platformu standartlarına uygun tuttu.
"Hem hız hem de kalite açısından çok etkili sonuçlar elde ettik. Ajanlar için Chrome Geliştirici Araçları ve Modern Web Rehberi'nin sağladığı teşhis analizleri, karmaşık düzen sorunlarını düzeltmek için güvenilir referanslar sağladı. Her düzeltmeden sonra sıkı bir doğrulama süreci uyguluyoruz. Mevcut başarı oranı ve kararlılık, sürüm güvenimizi önemli ölçüde artırdı."
—Yangjie Zheng, Mühendislik Müdürü, WeTV (Tencent)
WeTV mühendislik ekibi, bir sonraki adımda, yaklaşan kod sürümleri için uçtan uca testlerde temsilciler için Chrome Geliştirici Araçları'nı ve Modern Web Rehberi'ni kullanmayı planlıyor.
Kaynaklar
Benzer bir iş akışı oluşturmak için şu kaynakları inceleyin: