เผยแพร่เมื่อ: 10 พ.ย. 2569
WeTV เป็นแพลตฟอร์มสตรีมมิงวิดีโอระหว่างประเทศของ Tencent โดยให้บริการซีรีส์ดราม่า อะนิเมะ และรายการวาไรตี้แก่ผู้ชมในเอเชียตะวันออกเฉียงใต้และตลาดอื่นๆ ทั่วโลก สำหรับเว็บไซต์ที่สร้างขึ้นเพื่อวิดีโอ ประสิทธิภาพจะเป็นตัวกำหนดว่าผู้ชมจะอยู่ต่อหรือไม่ เครื่องมือค้นหาจะแสดงเนื้อหาหรือไม่ และการเล่นจะราบรื่นหรือไม่
ทีมวิศวกรเว็บของ WeTV จะไม่ส่งโค้ดที่ไม่เป็นไปตามเป้าหมายด้านประสิทธิภาพ เป็นเวลานานแล้วที่การรักษามาตรฐานดังกล่าวหมายความว่านักพัฒนาซอฟต์แวร์ต้องหยุดสิ่งที่กำลังทำอยู่ เปิด Chrome และสร้างโปรไฟล์หน้าเว็บด้วยตนเองทุกครั้งที่บิลด์ไม่ผ่านการตรวจสอบ การติดตามและแก้ไขการถดถอย 1 ครั้งใช้เวลาประมาณ 4 ชั่วโมง
ปัจจุบัน Agent การเขียนโค้ด AI จะทำงานดังกล่าวโดยเป็นส่วนหนึ่งของไปป์ไลน์ CI/CD เมื่อใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent Agent จะตรวจสอบหน้าเว็บในเบราว์เซอร์แบบเรียลไทม์ คำแนะนำในการพัฒนาเว็บที่ทันสมัยจะช่วยเขียนโค้ดแก้ไขที่เป็นไปตามมาตรฐานแพลตฟอร์มเว็บในปัจจุบัน ตอนนี้เวิร์กโฟลว์จะวิเคราะห์และแก้ไขการทดสอบประสิทธิภาพที่ไม่สำเร็จโดยอัตโนมัติถึง 90% และเวลาตั้งแต่การตรวจสอบที่ไม่สำเร็จไปจนถึงการแก้ไขที่ได้รับการยืนยันลดลงจาก 4 ชั่วโมงเหลือเพียง 30 นาที ซึ่งรวมถึงการสร้างแบบเต็มและการประเมินด้วยตนเอง
ความท้าทาย: นักพัฒนาแอปติดอยู่ระหว่างเครื่องมือแก้ไขและเบราว์เซอร์
วิศวกรของ WeTV ใช้เครื่องมือเขียนโค้ด AI ใน IDE อยู่แล้ว เครื่องมือเหล่านั้นเขียนโค้ดได้ แต่ไม่สามารถดูสิ่งที่โค้ดทำเมื่อทำงานในเบราว์เซอร์ งานจึงแบ่งออกเป็น 2 ส่วน วิศวกรเขียนโค้ดในเครื่องมือแก้ไข จากนั้นเปลี่ยนไปใช้ Chrome เพื่อทำให้โค้ดใช้งานได้ ตรวจสอบ และยืนยันโค้ด การแก้ไขแต่ละครั้งหมายถึงการต้องวนซ้ำกระบวนการนั้นอีกครั้งด้วยตนเอง
การแยกตัวนี้ส่งผลกระทบมากที่สุดที่ประตูทางออก ไปป์ไลน์ CI/CD ของ WeTV จะเรียกใช้การติดตามประสิทธิภาพในทุกรุ่นและคง Cumulative Layout Shift (CLS) ไว้ที่ 0.1 หรือต่ำกว่า เมื่อบิลด์ข้ามเส้นนั้นไป ไปป์ไลน์จะแจ้งว่ามีปัญหา แต่การค้นหาสาเหตุยังคงต้องทำด้วยตนเอง วิศวกรต้องเปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome, บันทึกการติดตาม, ค้นหาองค์ประกอบที่ย้าย, นำสิ่งที่พบกลับไปยังเครื่องมือแก้ไข, เขียนการแก้ไข และเรียกใช้การตรวจสอบอีกครั้ง การถดถอยของ CLS เพียงครั้งเดียวทำให้เสียเวลาด้านวิศวกรรมไปประมาณ 4 ชั่วโมง
ทีมต้องการ Agent ที่สามารถจัดการงานทั้ง 2 ส่วนได้ นั่นคือดูหน้าเว็บที่ทำงานอยู่ แล้วแก้ไขโค้ดให้เป็นมาตรฐานที่รู้จัก
โซลูชัน: เชื่อมต่อ Agent กับเบราว์เซอร์และมาตรฐานเว็บ
WeTV ได้ย้ายการยืนยันประสิทธิภาพไปยังขั้นตอนคำขอผสาน (MR) เมื่อนักพัฒนาซอฟต์แวร์เปิด MR ไปป์ไลน์ CI/CD จะเริ่มสภาพแวดล้อมที่เอเจนต์การเขียนโค้ด AI ทำงานในเครื่องพร้อมความสามารถ 2 อย่างที่เครื่องมือ IDE ของทีมไม่มี ดังนี้
- เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent: เรียกใช้เซิร์ฟเวอร์ Model Context Protocol (MCP) และเชื่อมต่อ Agent กับอินสแตนซ์ Chrome แบบเรียลไทม์ Agent สามารถบันทึกการติดตามประสิทธิภาพ (รวมถึงฟีเจอร์อื่นๆ ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome) และตรวจสอบวิธีที่โค้ดฟรอนท์เอนด์แสดงผลจริงได้ เช่นเดียวกับที่นักพัฒนาซอฟต์แวร์ทำในเครื่องมือสำหรับนักพัฒนาเว็บ
- คำแนะนำในการพัฒนาเว็บที่ทันสมัย: ทักษะของ Agent ที่มีแนวทางปฏิบัติแนะนำสำหรับแพลตฟอร์มเว็บและข้อมูลความเข้ากันได้ของเบราว์เซอร์ โดยจะช่วยให้ Agent หลีกเลี่ยงรูปแบบเดิมๆ และหันไปใช้การแก้ไขที่สร้างขึ้นจากฟีเจอร์แพลตฟอร์มเว็บที่ทันสมัย
เครื่องมือสำหรับนักพัฒนาเว็บสำหรับ Agent จะบอก Agent ว่ามีอะไรเสีย คำแนะนำในการพัฒนาเว็บที่ทันสมัยจะกำหนดวิธีแก้ไขปัญหา
ตัวอย่างในโลกแห่งความเป็นจริง: การเปลี่ยนเลย์เอาต์ในหน้าการเล่นตอน
ในระหว่างคำขอรวมรายการหนึ่ง ตัวแทนได้เรียกใช้เครื่องมือ performance_start_trace ในหน้าการเล่นตอนบนเดสก์ท็อป การติดตามบันทึก CLS ได้ 0.39 ซึ่งเกือบ 4 เท่าของขีดจำกัด 0.1
บอกให้ Agent วิเคราะห์ก่อนแก้ไข
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.
พรอมต์นี้มี 2 ส่วนที่สำคัญที่สุด "วิเคราะห์ก่อน แล้วจึงแก้ไขโค้ด" ช่วยป้องกันไม่ให้ Agent แก้ไขอาการที่เกิดขึ้น ขั้นตอนที่ 2 จะชี้ให้ Agent ใช้ performance_analyze_insight กับ insightName: 'CLSCulprits' เพื่อให้รายงานองค์ประกอบ เวลา และคะแนนที่แน่นอนแทนที่จะเป็นข้อสงสัยทั่วไป
ในวิดีโอต่อไปนี้ เมื่อเรียกใช้พรอมต์ Agent จะค้นหาคำแนะนำที่เกี่ยวข้องในคำแนะนำในการพัฒนาเว็บที่ทันสมัยเพื่อใช้การแก้ไขด้วยฟีเจอร์เว็บสมัยใหม่ที่เกี่ยวข้องกับ CLS และใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เพื่อเปิดอินสแตนซ์เบราว์เซอร์ Chrome และบันทึกการติดตามประสิทธิภาพ
การผสมผสานระหว่างการวินิจฉัยรันไทม์และคำแนะนำที่มีโครงสร้างช่วยให้สามารถแก้ไขการเปลี่ยนแปลงเลย์เอาต์ที่ซับซ้อนได้โดยอัตโนมัติ ต่อไปนี้คือตัวอย่างปัญหาที่แก้ไขโดยเวิร์กโฟลว์อัตโนมัติ
ค้นหาสาเหตุของปัญหา
การติดตามชี้ไปที่วิดีโอเพลเยอร์ WeTV แสดงผลเพลเยอร์บนเซิร์ฟเวอร์ แต่คอนเทนเนอร์ของเพลเยอร์ไม่ได้สำรองความสูงไว้ เมื่อไคลเอ็นต์แสดงผลหน้าเว็บ ความสูงของคอนเทนเนอร์จะขยายออกและเนื้อหารอบๆ จะเลื่อนไป
ใช้การแก้ไขตามมาตรฐาน
วิธีแก้ไขคือการจองพื้นที่ระหว่างการแสดงผลฝั่งเซิร์ฟเวอร์ เพื่อให้คอนเทนเนอร์มีความสูงที่เหมาะสมอยู่แล้วก่อนการเติมข้อมูล ต่อไปนี้คือตัวอย่างการแก้ไขที่ Agent เขียนขึ้นโดยอ้างอิงคู่มือ css-layout ของคำแนะนำในการพัฒนาเว็บที่ทันสมัย
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
หลังจากที่ Agent ใช้ CSS แล้ว ไปป์ไลน์จะสร้างหน้าเว็บใหม่และ Agent จะเรียกใช้การติดตามเดิมอีกครั้ง เฉพาะเมื่อ CLS ต่ำกว่า 0.1 เท่านั้น แพตช์จึงจะเข้าสู่การตรวจสอบจากเจ้าหน้าที่
ผลกระทบ: เผยแพร่ได้เร็วขึ้นและเลย์เอาต์ที่เสถียร
WeTV มีประสิทธิภาพด้านวิศวกรรมและความเสถียรของเลย์เอาต์ที่ดีขึ้นอย่างเห็นได้ชัดเมื่อเพิ่มเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent และคำแนะนำในการพัฒนาเว็บที่ทันสมัยลงในเวิร์กโฟลว์ CI/CD
- ลดเวลาในการแก้ไขข้อบกพร่องและการแก้ปัญหาตั้งแต่ต้นจนจบลง 87% (จาก 4 ชั่วโมงเหลือ 30 นาที)
- 90% ของการถดถอยของประสิทธิภาพที่เกิดซ้ำทั้งหมดได้รับการวินิจฉัยและแก้ไขโดยอัตโนมัติ
วิศวกรไม่ต้องเสียเวลาทำงานครึ่งวันไปกับการทำโปรไฟล์อีกต่อไป เมื่อบิลด์เกินเกณฑ์ ตัวแทนจะอ่านการติดตาม เขียนการแก้ไข ทดสอบ และส่งแพตช์ที่ได้รับการยืนยันให้เจ้าหน้าที่ตรวจสอบ ผู้คนยังคงเป็นผู้ตัดสินใจขั้นสุดท้าย แต่จะเริ่มจากการแก้ไขที่ผ่านการตรวจสอบที่ล้มเหลวแล้ว
เนื่องจากมีการแก้ไขการถดถอยของ CLS ภายในคำขอรวม จึงไม่ส่งผลกระทบต่อเวอร์ชันที่ใช้งานจริง ซึ่งช่วยให้หน้าเว็บมีค่าต่ำกว่าเป้าหมาย 0.1, ปกป้องระดับการมองเห็นในการค้นหาของ WeTV และลดสาเหตุที่พบบ่อยในการบล็อกการเปิดตัวในช่วงท้ายของวงจร
บทเรียนสำหรับทีมของคุณ
การตั้งค่าของ WeTV เป็นแบบเฉพาะเจาะจงสำหรับสแต็กของตนเอง แต่รูปแบบเบื้องหลังนั้นใช้ได้กับทีมส่วนใหญ่ที่จำกัดการเผยแพร่ตามประสิทธิภาพ ดังนี้
- เรียกใช้ Agent ที่เกิดข้อผิดพลาด WeTV จะทริกเกอร์ Agent จากคำขอผสาน ดังนั้นจึงไม่มีใครต้องสังเกตเห็นการตรวจสอบที่ล้มเหลวและเริ่มเซสชันด้วยตนเอง
- ให้ Agent วินิจฉัยก่อนทำการแก้ไข การขอให้ติดตามและระบุตัวผู้กระทำผิดก่อนจะช่วยให้แก้ไขปัญหาที่กำหนดเป้าหมายไปยังองค์ประกอบจริงแทนการคาดเดาได้
- จับคู่ข้อมูลรันไทม์กับมาตรฐาน การติดตามจะบอก Agent ว่าองค์ประกอบใดมีการเคลื่อนไหว คำแนะนำในการพัฒนาเว็บที่ทันสมัยจะบอกว่าการแก้ไขใดเป็นไปตามแนวทางปฏิบัติของแพลตฟอร์มปัจจุบัน
- ต้องมีหลักฐาน การเรียกใช้การติดตามเดิมที่ล้มเหลวอีกครั้งเป็นหลักฐานของตัวแทนว่าการแก้ไขได้ผล P2ER ใช้หลักการเดียวกันในกฎการยืนยันเชิงประจักษ์ที่บังคับ
- ให้มีมนุษย์ร่วมดำเนินการด้วย โดย Agent จะทำการตรวจสอบ และวิศวกรจะตรวจสอบแพตช์ที่ผ่านการตรวจสอบแล้ว
ความคิดเห็นและแผนในอนาคต
WeTV พบว่าการจับคู่การวัดและส่งข้อมูลทางไกลรันไทม์แบบเรียลไทม์จากเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent กับกฎมาตรฐานในคำแนะนำในการพัฒนาเว็บที่ทันสมัยช่วยลดการวิเคราะห์ประสิทธิภาพด้วยตนเองออกจากกระบวนการเผยแพร่ ขณะเดียวกันก็ทำให้การเปลี่ยนแปลงโค้ดของ Agent สอดคล้องกับมาตรฐานแพลตฟอร์มเว็บในปัจจุบัน
"ผลลัพธ์ที่ได้มีประสิทธิภาพมากทั้งในด้านความเร็วและคุณภาพ ข้อมูลวิเคราะห์เชิงลึกที่ได้จากเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent และคำแนะนำในการพัฒนาเว็บที่ทันสมัยช่วยให้เรามีข้อมูลอ้างอิงที่เชื่อถือได้สำหรับการแก้ไขปัญหาเลย์เอาต์ที่ซับซ้อน เราทำการยืนยันอย่างเข้มงวดหลังจากการแก้ไขทุกครั้ง และอัตราความสำเร็จและความเสถียรในปัจจุบันช่วยเพิ่มความมั่นใจในการเผยแพร่ของเราได้อย่างมาก"
—Yangjie Zheng หัวหน้าฝ่ายวิศวกรรมของ WeTV (Tencent)
ถัดไป ทีมวิศวกรของ WeTV วางแผนที่จะนำเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent และคำแนะนำในการพัฒนาเว็บที่ทันสมัยมาใช้ในการทดสอบตั้งแต่ต้นจนจบสำหรับการเผยแพร่โค้ดที่กำลังจะมาถึง
แหล่งข้อมูล
หากต้องการตั้งค่าเวิร์กโฟลว์ที่คล้ายกัน โปรดดูแหล่งข้อมูลต่อไปนี้