กรณีศึกษาเกี่ยวกับการเปลี่ยนแปลงที่ทีมเว็บของ YouTube ทำเพื่อปรับปรุงประสิทธิภาพ เพิ่มอัตราที่ผ่าน Core Web Vitals และเพิ่มเมตริกทางธุรกิจที่สำคัญ
ทีม Chrome มักจะพูดถึง "การสร้างเว็บที่ดีขึ้น" แต่นั่นหมายความว่าอย่างไร ประสบการณ์การใช้งานเว็บควรรวดเร็ว เข้าถึงได้ และใช้ความสามารถของอุปกรณ์ในเวลาที่ผู้ใช้ต้องการมากที่สุด การลองใช้เวอร์ชันทดลองกับตนเองเป็นส่วนหนึ่งของวัฒนธรรมของ Google ทีม Chrome จึงร่วมมือกับ YouTube เพื่อแชร์สิ่งที่ได้เรียนรู้ตลอดเส้นทางในซีรีส์ใหม่ชื่อ "การสร้างเว็บที่ดีขึ้น" ส่วนแรกของซีรีส์นี้จะเจาะลึกวิธีที่ YouTube สร้างประสบการณ์การใช้งานเว็บที่เร็วขึ้น
สำหรับ YouTube ประสิทธิภาพหมายถึงความเร็วในการโหลดวิดีโอและเนื้อหาอื่นๆ เช่น วิดีโอแนะนำและความคิดเห็น ในหน้าเว็บ นอกจากนี้ เรายังวัดประสิทธิภาพด้วยความเร็วที่ YouTube ตอบสนองต่อการโต้ตอบของผู้ใช้ เช่น การค้นหา การควบคุมโปรแกรมเล่น การกดชอบ และการแชร์
ตลาดที่กำลังเติบโตและพัฒนา เช่น บราซิล อินเดีย และอินโดนีเซีย มีความสำคัญอย่างยิ่งสำหรับ YouTube บนเว็บในอุปกรณ์เคลื่อนที่ เนื่องจากผู้ใช้จํานวนมากในภูมิภาคเหล่านี้มีอุปกรณ์ที่ช้ากว่าและมีแบนด์วิดท์เครือข่ายจํากัด เป้าหมายที่สําคัญคือการมอบประสบการณ์การใช้งานที่รวดเร็วและราบรื่น
YouTube มุ่งมั่นที่จะปรับปรุงเมตริกประสิทธิภาพ เช่น Core Web Vitals ผ่านการโหลดแบบเลื่อนเวลาและการปรับโค้ดให้ทันสมัย เพื่อมอบประสบการณ์การใช้งานที่ครอบคลุมสำหรับผู้ใช้ทุกคน
ปรับปรุง Core Web Vitals
ทีม YouTube ใช้รายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) เพื่อดูว่าผู้ใช้จริงได้รับประสบการณ์การใช้งานหน้าผลการค้นหาและหน้าวิดีโออย่างไรบนอุปกรณ์เคลื่อนที่ในภาคสนาม เพื่อระบุจุดที่ต้องปรับปรุง พวกเขาพบว่าเมตริก Core Web Vitals ยังมีจุดที่ต้องปรับปรุงอีกมาก โดยเมตริก Largest Contentful Paint (LCP) แสดงผลที่ 4-6 วินาทีในบางกรณี ซึ่งสูงกว่าเป้าหมายที่ 2.5 วินาทีอย่างมาก
เพื่อหาจุดที่ต้องปรับปรุง ทีมจึงหันมาใช้ Lighthouse ในการตรวจสอบหน้าดูวิดีโอของ YouTube ซึ่งพบว่า Lighthouse (ห้องทดลอง) มีคะแนนต่ำ โดยมี First Contentful Paint (FCP) อยู่ที่ 3.5 วินาทีและ LCP อยู่ที่ 8.5 วินาที
ทีม YouTube ได้ทำการทดสอบหลายอย่างเพื่อเพิ่มประสิทธิภาพ FCP และ LCP ซึ่งทำให้ค้นพบสิ่งสำคัญ 2 อย่าง
การค้นพบแรกคือสามารถปรับปรุงประสิทธิภาพได้โดยย้าย HTML ของวิดีโอเพลเยอร์ไว้เหนือสคริปต์ที่ทำให้วิดีโอเพลเยอร์เป็นแบบอินเทอร์แอกทีฟ การทดสอบในแล็บระบุว่าวิธีนี้สามารถปรับปรุงทั้ง FCP และ LCP จาก 4.4 วินาทีเป็น 1.1 วินาที
การค้นพบที่ 2 คือ LCP พิจารณาเฉพาะรูปภาพโปสเตอร์องค์ประกอบ
<video>
เท่านั้น โดยไม่พิจารณาเฟรมจากสตรีมวิดีโอ เดิมที YouTube เพิ่มประสิทธิภาพเพื่อให้วิดีโอเริ่มเล่นเร็วที่สุด ดังนั้นทีมจึงเริ่มเพิ่มประสิทธิภาพความเร็วในการนำส่งรูปภาพโปสเตอร์ด้วยเพื่อปรับปรุง LCP พวกเขาทดสอบภาพโปสเตอร์หลายรูปแบบและเลือกภาพที่ได้รับคะแนนสูงสุดในการทดสอบกับผู้ใช้ ผลลัพธ์ของการทำงานนี้ทำให้ทั้ง FCP และ LCP ดีขึ้นอย่างมาก โดย LCP ภาคสนามดีขึ้นจาก 4.6 วินาทีเป็น 2.0 วินาที
แม้ว่าการเพิ่มประสิทธิภาพเหล่านี้จะช่วยปรับปรุง LCP ได้ แต่ทีมรู้สึกว่าคําจํากัดความปัจจุบันของเมตริก LCP ไม่ได้แสดงถึงมุมมองของผู้ใช้อย่างเต็มรูปแบบเมื่อ "เนื้อหาหลัก" ของหน้าเว็บโหลดแล้ว ซึ่งเป็นเป้าหมายของ LCP
ทีม YouTube จึงร่วมมือกับทีม Chrome เพื่อหาวิธีปรับปรุงเมตริก LCP ให้เหมาะกับกรณีการใช้งานของ YouTube หลังจากพิจารณาความเป็นไปได้และผลกระทบของตัวเลือก 2-3 รายการแล้ว ทีมได้ข้อสรุปในข้อเสนอที่จะพิจารณาเวลาในการแสดงผลของเฟรมแรกขององค์ประกอบวิดีโอเป็น LCP ที่เป็นไปได้
เมื่อการเปลี่ยนแปลงนี้มีผลใน Chrome ทีม YouTube ก็พร้อมที่จะเพิ่มประสิทธิภาพ LCP ต่อไป และเมตริกเวอร์ชันที่อัปเดตแล้วจะทำให้การเพิ่มประสิทธิภาพเหล่านี้ส่งผลต่อประสบการณ์ของผู้ใช้จริงโดยตรงมากขึ้น
การแยกโมดูลโดยใช้การโหลดแบบ Lazy Loading
หน้า YouTube มีโมดูลจำนวนมากที่โหลดอย่างกระตือรือร้น ทีมสร้างแผนที่คอมโพเนนต์ไปยังโมดูล JS เพื่อบอกลูกค้าว่าควรโหลดโมดูลใด เพื่อเพิ่มประสิทธิภาพการแสดงผลคอมโพเนนต์กว่า 50 รายการ การทำเครื่องหมายคอมโพเนนต์เป็น Lazy จะโหลดโมดูล JS ในภายหลัง ซึ่งจะช่วยลดเวลาในการโหลดครั้งแรกของหน้าเว็บและจำนวน JavaScript ที่ไม่ได้ใช้งานซึ่งส่งไปยังไคลเอ็นต์
อย่างไรก็ตาม หลังจากใช้การโหลดแบบ Lazy Loading แล้ว ทีมสังเกตเห็นผล Waterfall ที่คอมโพเนนต์ที่โหลดแบบ Lazy Loading และทรัพยากรที่เกี่ยวข้องจะโหลดในเวลาที่ไม่เหมาะสม
ทีมแก้ปัญหานี้โดยกำหนดชุดคอมโพเนนต์ขั้นต่ำที่จำเป็นในมุมมองและจัดกลุ่มไว้ในคำขอเครือข่ายเดียว ผลลัพธ์ที่ได้คือความเร็วหน้าเว็บที่ดีขึ้น เวลาในการแยกวิเคราะห์ JavaScript ที่ลดลง และเวลาในการแสดงผลครั้งแรกที่ดีขึ้น
การจัดการสถานะในคอมโพเนนต์ต่างๆ
YouTube พบปัญหาด้านประสิทธิภาพเนื่องจากการควบคุมโปรแกรมเล่น โดยเฉพาะในอุปกรณ์รุ่นเก่า การวิเคราะห์โค้ดแสดงให้เห็นว่าโปรแกรมเล่นซึ่งช่วยให้ผู้ใช้ควบคุมฟีเจอร์ต่างๆ เช่น ความเร็วในการเล่นและขั้นตอนต่างๆ นั้น มีคอมโพเนนต์มากเกินไปเมื่อเวลาผ่านไป
เหตุการณ์การแตะแถบความคืบหน้าแต่ละรายการทริกเกอร์การคำนวณสไตล์เพิ่มเติม 2 ครั้งและใช้เวลา 21.17 มิลลิวินาทีในระหว่างการทดสอบประสิทธิภาพในห้องทดลอง เมื่อมีการเพิ่มการควบคุมใหม่เมื่อเวลาผ่านไป รูปแบบการควบคุมแบบกระจายอำนาจมักจะทําให้เกิดข้อกําหนดซึ่งกันและกันและหน่วยความจํารั่วไหล ซึ่งส่งผลเสียต่อประสิทธิภาพของหน้าวิดีโอ
ทีมได้อัปเดต UI ของเพลเยอร์เพื่อซิงค์การอัปเดตทั้งหมด ซึ่งโดยพื้นฐานแล้วเป็นการรีแฟกทอริงเพลเยอร์เป็นคอมโพเนนต์ระดับบนสุดรายการเดียวที่จะส่งต่อข้อมูลไปยังคอมโพเนนต์ย่อย วิธีนี้ช่วยให้มั่นใจได้ว่าจะมีรอบการอัปเดต (แสดงผล) UI เพียงรอบเดียวสําหรับการเปลี่ยนแปลงสถานะใดๆ ซึ่งจะช่วยลดการอัปเดตแบบเชน เหตุการณ์การแตะแถบความคืบหน้าของเพลเยอร์แบบใหม่ไม่มีการคํานวณสไตล์ใหม่ระหว่างการเรียกใช้ JavaScript และตอนนี้ใช้เวลาเพียง 25% ของเพลเยอร์แบบเก่า
การปรับปรุงโค้ดนี้ยังส่งผลให้ประสิทธิภาพดีขึ้นด้วย เช่น เวลาในการโหลดนาฬิกาในอุปกรณ์รุ่นเก่าดีขึ้น การเล่นที่หยุดกลางคันน้อยลง และจำนวนข้อผิดพลาดที่ไม่ร้ายแรงลดลง
ผลลัพธ์และการเพิ่มประสิทธิภาพ
การลงทุนด้านประสิทธิภาพของ YouTube ทำให้หน้าสำหรับดูโหลดเร็วขึ้นมาก โดยตอนนี้ URL ของเว็บไซต์ YouTube บนอุปกรณ์เคลื่อนที่ 76% ผ่านเกณฑ์เมตริก Core Web Vitals ในช่องนี้แล้ว ในเดสก์ท็อป LCP ของหน้านาฬิกาในเวอร์ชันที่ใช้ทดสอบลดลงจากประมาณ 4.6 วินาทีเหลือ 1.6 วินาที ประสิทธิภาพการโต้ตอบและการเรนเดอร์ของเว็บไซต์ โดยเฉพาะในโปรแกรมเล่นวิดีโอ YouTube ใช้เวลาในการเรียกใช้ JavaScript น้อยลงถึง 75% เมื่อเทียบกับก่อนหน้านี้
การปรับปรุงประสิทธิภาพของเว็บ YouTube ในช่วงปีที่ผ่านมายังช่วยปรับปรุงเมตริกทางธุรกิจด้วย เช่น เวลาในการรับชมและผู้ใช้ที่ใช้งานอยู่รายวัน เราวางแผนที่จะสำรวจวิธีเพิ่มประสิทธิภาพเพิ่มเติมในอนาคตโดยอิงตามความสำเร็จของแนวทางเหล่านี้
ขอขอบคุณ Gilberto Cocchi, Lauren Usui, Benji Bear, Bo Aye, Bogdan Balas, Kenny Tran, Matthew Smith, Phil Harnish, Leena Sahoni, Jeremy Wagner, Philip Walton, Harleen Batra และทีม YouTube และ Chrome ที่ให้ความร่วมมือในงานนี้