पब्लिश होने की तारीख: 10 नवंबर, 2026
WeTV, Tencent का अंतरराष्ट्रीय वीडियो स्ट्रीमिंग प्लैटफ़ॉर्म है. यह दक्षिण-पूर्व एशिया और दुनिया के अन्य देशों में रहने वाले दर्शकों को ड्रामा सीरीज़, ऐनमे, और तरह-तरह के टीवी शो दिखाता है. वीडियो के लिए बनाई गई साइट की परफ़ॉर्मेंस से यह तय होता है कि दर्शक साइट पर बने रहेंगे या नहीं, सर्च इंजन कॉन्टेंट दिखाएंगे या नहीं, और वीडियो आसानी से चलेगा या नहीं.
WeTV की वेब इंजीनियरिंग टीम, ऐसा कोड शिप नहीं करती जो परफ़ॉर्मेंस के टारगेट को पूरा न करता हो. लंबे समय तक, इस लाइन को बनाए रखने का मतलब था कि डेवलपर को अपना काम रोकना पड़ता था, Chrome खोलना पड़ता था, और हर बार बिल्ड की जांच न होने पर पेज को मैन्युअल तरीके से प्रोफ़ाइल करना पड़ता था. एक रिग्रेशन को ट्रैक करने और उसे ठीक करने में करीब चार घंटे लगते थे.
आज के समय में, एआई कोडिंग एजेंट सीआई/सीडी पाइपलाइन के हिस्से के तौर पर यह काम करता है. एजेंट के लिए Chrome DevTools की मदद से, एजेंट लाइव ब्राउज़र में पेज की जांच करता है. मॉडर्न वेब गाइडेंस की मदद से, यह मौजूदा वेब प्लैटफ़ॉर्म के स्टैंडर्ड के मुताबिक कोड में सुधार करता है. अब वर्कफ़्लो, परफ़ॉर्मेंस की जांच में फ़ेल हुए 90% टेस्ट का विश्लेषण करता है और उन्हें अपने-आप ठीक करता है. साथ ही, जांच में फ़ेल होने से लेकर समस्या को ठीक करने में लगने वाला समय, चार घंटे से घटकर 30 मिनट हो गया है. इसमें पूरा बिल्ड और मैन्युअल तरीके से की जाने वाली जांच भी शामिल है.
चुनौती: एडिटर और ब्राउज़र के बीच फंसा एक डेवलपर
WeTV के इंजीनियर, अपने आईडीई में पहले से ही एआई कोडिंग टूल इस्तेमाल कर रहे थे. ये टूल कोड लिख सकते थे, लेकिन ब्राउज़र में कोड चलाने के बाद, वे यह नहीं देख पाते थे कि कोड ने क्या किया. इसलिए, काम को दो हिस्सों में बांट दिया गया. इंजीनियर, एडिटर में कोड लिखते हैं. इसके बाद, वे कोड को डिप्लॉय करने, उसकी जांच करने, और उसकी पुष्टि करने के लिए Chrome पर स्विच करते हैं. हर बार सुधार करने का मतलब था कि उस लूप को फिर से हाथ से ठीक करना.
इस बंटवारे का सबसे ज़्यादा असर, रिलीज़ गेट पर पड़ा. WeTV की सीआई/सीडी पाइपलाइन, हर रिलीज़ पर परफ़ॉर्मेंस ट्रेस चलाती है. साथ ही, लेआउट शिफ़्ट होने में लगने वाले समय (सीएलएस) को 0.1 या इससे कम पर रखती है. जब कोई बिल्ड उस लाइन को पार करता था, तो पाइपलाइन उसे फ़्लैग कर देती थी. हालांकि, इसकी वजह का पता लगाने के लिए अब भी मैन्युअल तरीके से काम करना पड़ता था. इसके लिए, Chrome DevTools खोलना पड़ता था, ट्रेस रिकॉर्ड करना पड़ता था, और उस एलिमेंट को ढूंढना पड़ता था जो अपनी जगह से हट गया था. इसके बाद, उस एलिमेंट को एडिटर में वापस लाना पड़ता था, उसे ठीक करने के लिए कोड लिखना पड़ता था, और फिर से जांच करनी पड़ती थी. सीएलएस में एक बार गिरावट आने पर, उसे ठीक करने में करीब चार घंटे का समय लगता है.
टीम को एक ऐसा एजेंट चाहिए था जो दोनों काम कर सके: चल रहे पेज को देखना और फिर कोड को किसी जाने-माने स्टैंडर्ड के हिसाब से ठीक करना.
समाधान: एजेंट को ब्राउज़र और वेब स्टैंडर्ड से कनेक्ट करना
WeTV ने परफ़ॉर्मेंस की पुष्टि करने की प्रोसेस को मर्ज रिक्वेस्ट (एमआर) फ़्लो में शामिल किया. जब कोई डेवलपर एमआर खोलता है, तो सीआई/सीडी पाइपलाइन एक ऐसा एनवायरमेंट शुरू करती है जहां एआई कोडिंग एजेंट स्थानीय तौर पर चलता है. इसमें दो ऐसी सुविधाएं होती हैं जो टीम के आईडीई टूल में नहीं होतीं:
- एजेंट के लिए Chrome DevTools: यह मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) सर्वर को चलाता है और एजेंट को Chrome के लाइव इंस्टेंस से कनेक्ट करता है. एजेंट, परफ़ॉर्मेंस ट्रेस रिकॉर्ड कर सकता है. साथ ही, यह देख सकता है कि फ़्रंटएंड कोड असल में कैसे रेंडर होता है. यह DevTools में मौजूद अन्य सुविधाओं का भी इस्तेमाल कर सकता है. ठीक उसी तरह जैसे कोई डेवलपर DevTools में करता है.
- मॉडर्न वेब गाइडेंस: यह एजेंट की एक स्किल है. इसमें वेब प्लैटफ़ॉर्म के सबसे सही तरीके और ब्राउज़र के साथ काम करने का डेटा शामिल होता है. यह एजेंट को पुराने पैटर्न से दूर रखता है और आधुनिक वेब प्लैटफ़ॉर्म की सुविधाओं पर आधारित समाधानों की ओर ले जाता है.
एजेंट के लिए DevTools, एजेंट को बताता है कि क्या गड़बड़ी हुई है. मॉडर्न वेब गाइडेंस, इस समस्या को ठीक करने का तरीका तय करता है.
असल दुनिया का उदाहरण: एपिसोड चलाने वाले पेज पर लेआउट शिफ़्ट होना
मर्ज करने के एक अनुरोध के दौरान, एजेंट ने डेस्कटॉप एपिसोड प्लेबैक पेज पर performance_start_trace टूल चलाया. ट्रेस में 0.39 का सीएलएस रिकॉर्ड किया गया, जो 0.1 की सीमा से करीब चार गुना ज़्यादा है.
एजेंट को बदलाव करने से पहले, विश्लेषण करने के लिए कहें
WeTV, एजेंट को अपने हिसाब से काम करने की अनुमति नहीं देता. वर्कफ़्लो को चलाने वाले प्रॉम्प्ट में, कोड में कोई भी बदलाव करने से पहले समस्या का विश्लेषण करने के लिए कहा जाता है. साथ ही, मॉडल से डिफ़ॉल्ट रूप से जनरेट होने वाले कोड पर भरोसा करने के बजाय, मॉडर्न वेब गाइडेंस के हिसाब से कोड की जांच करने के लिए कहा जाता है.
यहां एक प्रॉम्प्ट का उदाहरण दिया गया है, जिसका इस्तेमाल 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.
इस प्रॉम्प्ट के दो हिस्से सबसे अहम हैं. "पहले विश्लेषण करें, फिर कोड में बदलाव करें" से एजेंट, लक्षणों को पैच करने से बचता है. दूसरे चरण में, एजेंट को insightName: 'CLSCulprits' के साथ performance_analyze_insight का इस्तेमाल करने के लिए कहा जाता है. इससे एजेंट, किसी सामान्य संदेह के बजाय सटीक एलिमेंट, समय, और स्कोर की रिपोर्ट करता है.
यहां दिए गए वीडियो में, प्रॉम्प्ट को लागू करने पर एजेंट, मॉडर्न वेब गाइडेंस में काम की गाइड खोजता है. इससे वह सीएलएस से जुड़ी मॉडर्न वेब सुविधाओं की मदद से, गड़बड़ियों को ठीक कर पाता है. साथ ही, एजेंट के लिए Chrome DevTools का इस्तेमाल करके, Chrome ब्राउज़र का इंस्टेंस खोलता है और परफ़ॉर्मेंस ट्रेस को रिकॉर्ड करता है.
रनटाइम डाइग्नोस्टिक्स और स्ट्रक्चर्ड गाइडेंस के इस कॉम्बिनेशन से, लेआउट में होने वाले मुश्किल बदलावों को अपने-आप ठीक किया जा सकता है. यहां एक उदाहरण दिया गया है, जिसमें अपने-आप काम करने वाले वर्कफ़्लो की मदद से समस्या को ठीक किया गया है.
असल वजह का पता लगाना
ट्रेस से पता चला कि समस्या वीडियो प्लेयर में है. WeTV, प्लेयर को सर्वर पर रेंडर करता है. हालांकि, प्लेयर के कंटेनर ने इसके लिए कोई ऊंचाई रिज़र्व नहीं की. जब क्लाइंट ने पेज को हाइड्रेट किया, तो कंटेनर की ऊंचाई बढ़ गई और उसके आस-पास का कॉन्टेंट शिफ़्ट हो गया.
मानकों के आधार पर समस्या को ठीक करना
इसका समाधान यह है कि सर्वर-साइड रेंडरिंग के दौरान स्पेस रिज़र्व कर लिया जाए, ताकि हाइड्रेशन से पहले ही कंटेनर की ऊंचाई सही हो. यहां एक उदाहरण दिया गया है, जिसमें एजेंट ने मॉडर्न वेब गाइडेंस की सीएसएस-लेआउट गाइड का इस्तेमाल करके, कोड को ठीक किया है:
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
एजेंट ने सीएसएस लागू करने के बाद, पाइपलाइन ने पेज को फिर से बनाया. इसके बाद, एजेंट ने उसी ट्रेस को फिर से चलाया. जब सीएलएस 0.1 से कम हो गया, तब पैच को मैन्युअल समीक्षा के लिए भेजा गया.
असर: तेज़ी से रिलीज़ और स्टेबल लेआउट
WeTV ने अपने सीआई/सीडी वर्कफ़्लो में, एजेंट के लिए Chrome DevTools और मॉडर्न वेब गाइडेंस को जोड़ा. इससे उसे इंजीनियरिंग की परफ़ॉर्मेंस और लेआउट की स्थिरता में काफ़ी सुधार देखने को मिला:
- डीबग करने और समस्या हल करने में लगने वाले समय में 87% की कमी (चार घंटे से 30 मिनट).
- बार-बार होने वाली 90% परफ़ॉर्मेंस रिग्रेशन का विश्लेषण और समाधान अपने-आप हो जाता है.
इंजीनियरों को अब प्रोफ़ाइलिंग के लिए, आधा कामकाजी दिन नहीं गंवाना पड़ता. जब कोई बिल्ड थ्रेशोल्ड को पार कर जाता है, तो एजेंट ट्रेस को पढ़ता है, गड़बड़ी को ठीक करने के लिए कोड लिखता है, उसकी जांच करता है, और पुष्टि किए गए पैच को समीक्षा करने वाले व्यक्ति को सौंपता है. हालांकि, आखिरी फ़ैसला लोग ही लेते हैं, लेकिन वे उस समस्या को ठीक करने से शुरुआत करते हैं जो पहले ही उस जांच को पास कर चुकी है जिसमें वह फ़ेल हो गई थी.
सीएलएस रिग्रेशन को मर्ज रिक्वेस्ट में ही ठीक कर दिया जाता है. इसलिए, वे प्रोडक्शन तक नहीं पहुंचते. इससे पेज, 0.1 के टारगेट से कम रहते हैं और खोज के नतीजों में WeTV की विज़िबिलिटी बनी रहती है. साथ ही, रिलीज़ साइकल के आखिर में रिलीज़ को ब्लॉक करने की एक आम वजह भी हट जाती है.
आपकी टीम के लिए लेसन
WeTV का सेटअप उसके स्टैक के हिसाब से है. हालांकि, इसके पीछे का पैटर्न उन ज़्यादातर टीमों पर लागू होता है जो परफ़ॉर्मेंस के आधार पर रिलीज़ को रोकती हैं:
- उस एजेंट को रन करें जिसमें गड़बड़ी हुई है. WeTV, मर्ज करने के अनुरोध से एजेंट को ट्रिगर करता है. इससे किसी को भी जांच पूरी न होने पर ध्यान देने और मैन्युअल तरीके से सेशन शुरू करने की ज़रूरत नहीं पड़ती.
- एजेंट से कहें कि वह बदलाव करने से पहले, समस्या का विश्लेषण करे. ट्रेस और गड़बड़ी की वजह बनने वाले एलिमेंट का नाम पूछने से, सबसे पहले ऐसे समाधान मिलते हैं जो अनुमान लगाने के बजाय, असल एलिमेंट को टारगेट करते हैं.
- रनटाइम डेटा को स्टैंडर्ड के साथ जोड़ें. ट्रेस से एजेंट को पता चलता है कि कौनसा एलिमेंट मूव हुआ है. मॉडर्न वेब गाइडेंस से यह पता चलता है कि कौनसा तरीका, मौजूदा प्लैटफ़ॉर्म के सबसे सही तरीके के मुताबिक है.
- सबूत की ज़रूरत होती है. जिस ट्रेस को चलाने में गड़बड़ी हुई थी उसे फिर से चलाना, एजेंट के लिए इस बात का सबूत है कि गड़बड़ी ठीक हो गई है. P2ER, अनुभव के आधार पर पुष्टि करने के ज़रूरी नियम में भी इसी सिद्धांत का पालन करता है.
- निगरानी में काम करने वाले एआई मॉडल का इस्तेमाल करें. एजेंट जांच करता है और इंजीनियर उस पैच की समीक्षा करता है जो जांच में पहले ही पास हो चुका है.
सुझाव/राय और आने वाले समय के लिए प्लान
WeTV को पता चला कि एजेंट के लिए Chrome DevTools से लाइव रनटाइम टेलीमेट्री को, मॉडर्न वेब गाइडेंस में मौजूद स्टैंडर्ड नियमों के साथ जोड़ने से, रिलीज़ की प्रोसेस से मैन्युअल तरीके से परफ़ॉर्मेंस का विश्लेषण करने की ज़रूरत नहीं पड़ी. साथ ही, एजेंट के कोड में किए गए बदलाव, मौजूदा वेब प्लैटफ़ॉर्म के स्टैंडर्ड के मुताबिक बने रहे.
"स्पीड और क्वालिटी, दोनों के मामले में नतीजे बहुत असरदार रहे हैं. एजेंट के लिए Chrome DevTools और मॉडर्न वेब गाइडेंस से मिली डाइग्नोस्टिक इनसाइट की मदद से, हमें लेआउट से जुड़ी जटिल समस्याओं को ठीक करने के लिए भरोसेमंद रेफ़रंस मिले. हम हर समस्या को ठीक करने के बाद, उसकी बारीकी से जांच करते हैं. मौजूदा सक्सेस रेट और स्थिरता की वजह से, हमें रिलीज़ करने का भरोसा मिला है."
—यांगजी झेंग, हेड ऑफ़ इंजीनियरिंग, WeTV (Tencent)
WeTV की इंजीनियरिंग टीम, आने वाले समय में रिलीज़ होने वाले कोड की एंड-टू-एंड टेस्टिंग के लिए, एजेंट के लिए Chrome DevTools और मॉडर्न वेब गाइडेंस को उपलब्ध कराने का प्लान बना रही है.
संसाधन
इसी तरह का वर्कफ़्लो सेट अप करने के लिए, ये संसाधन देखें: