การสร้างเว็บที่ดีขึ้น: YouTube ที่เร็วขึ้น

กรณีศึกษาเกี่ยวกับการเปลี่ยนแปลงที่ทีมเว็บของ YouTube ทำเพื่อปรับปรุงประสิทธิภาพ เพิ่มอัตราผ่าน Core Web Vitals และเพิ่มเมตริกทางธุรกิจที่สำคัญ

Addy Osmani

Sriram Krishnan

ทีม Chrome มักจะพูดถึง "การสร้างเว็บที่ดีขึ้น" แต่นั่นหมายความว่าอย่างไร ประสบการณ์การใช้งานเว็บควรรวดเร็ว เข้าถึงได้ และใช้ความสามารถของอุปกรณ์ในเวลาที่ผู้ใช้ต้องการมากที่สุด การลองใช้เป็นวัฒนธรรมหนึ่งของ Google ทีม Chrome จึงได้ร่วมมือกับ YouTube เพื่อแชร์บทเรียนที่ได้รับการเรียนรู้ตลอดเส้นทางในซีรีส์ใหม่ที่ชื่อ "การสร้างเว็บที่ดียิ่งขึ้น" ส่วนแรกของซีรีส์นี้จะเจาะลึกวิธีที่ YouTube สร้างประสบการณ์การใช้งานเว็บที่เร็วขึ้น

สำหรับ YouTube ประสิทธิภาพหมายถึงความเร็วในการโหลดวิดีโอและเนื้อหาอื่นๆ เช่น วิดีโอแนะนำและความคิดเห็น ในหน้าเว็บ นอกจากนี้ เรายังวัดประสิทธิภาพด้วยความเร็วที่ YouTube ตอบสนองต่อการโต้ตอบของผู้ใช้ เช่น การค้นหา การควบคุมโปรแกรมเล่น การกดชอบ และการแชร์

ตลาดที่กำลังเติบโตและพัฒนา เช่น บราซิล อินเดีย และอินโดนีเซีย มีความสำคัญอย่างยิ่งสำหรับ YouTube บนเว็บในอุปกรณ์เคลื่อนที่ เนื่องจากผู้ใช้จํานวนมากในภูมิภาคเหล่านี้มีอุปกรณ์ที่ช้ากว่าและมีแบนด์วิดท์เครือข่ายจํากัด เป้าหมายที่สําคัญคือการมอบประสบการณ์การใช้งานที่รวดเร็วและราบรื่น

YouTube มุ่งมั่นที่จะปรับปรุงเมตริกประสิทธิภาพ เช่น Core Web Vitals ผ่านการโหลดแบบเลื่อนดูและการปรับโค้ดให้ทันสมัย เพื่อมอบประสบการณ์การใช้งานที่ครอบคลุมสำหรับผู้ใช้ทุกคน

ปรับปรุง Core Web Vitals

ทีม YouTube ระบุสิ่งที่ควรปรับปรุงโดยใช้รายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) เพื่อดูว่าผู้ใช้จริงได้รับประสบการณ์การรับชมวิดีโอและหน้าผลการค้นหาบนอุปกรณ์เคลื่อนที่ในภาคสนามอย่างไร บริษัทพบว่าเมตริก Core Web Vitals มีช่องทางในการปรับปรุงมากมาย เนื่องจากเมตริก การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP) จะใช้เวลา 4-6 วินาทีในบางกรณี ซึ่งสูงกว่าเป้าหมายที่ 2.5 วินาทีอย่างมาก

เพื่อหาจุดที่ต้องปรับปรุง ทีมจึงหันมาใช้ Lighthouse ในการตรวจสอบหน้าดูวิดีโอของ YouTube ซึ่งพบว่า Lighthouse (Lab) มีคะแนนต่ำ โดยมี First Contentful Paint (FCP) อยู่ที่ 3.5 วินาทีและ LCP อยู่ที่ 8.5 วินาที

ทีม YouTube ได้ทำการทดสอบหลายอย่างเพื่อเพิ่มประสิทธิภาพ FCP และ LCP ซึ่งทำให้ค้นพบสิ่งสำคัญ 2 อย่าง

1. การค้นพบแรกคือสามารถปรับปรุงประสิทธิภาพได้โดยย้าย HTML ของวิดีโอเพลเยอร์ไว้เหนือสคริปต์ที่ทำให้วิดีโอเพลเยอร์เป็นแบบอินเทอร์แอกทีฟ การทดสอบในแล็บระบุว่าวิธีนี้สามารถปรับปรุงทั้ง FCP และ LCP จาก 4.4 วินาทีเป็น 1.1 วินาที

2. การค้นพบที่ 2 คือ LCP พิจารณาเฉพาะรูปภาพโปสเตอร์องค์ประกอบ <video> เท่านั้น ไม่ใช่เฟรมจากสตรีมวิดีโอ เดิมที YouTube มีการเพิ่มประสิทธิภาพสำหรับช่วงเวลาที่เร็วที่สุดจนกระทั่งวิดีโอเริ่มเล่น ดังนั้นเพื่อปรับปรุง LCP ทีมจึงเริ่มเพิ่มประสิทธิภาพความเร็วในการแสดงโปสเตอร์ด้วย พวกเขาทดสอบภาพโปสเตอร์หลายรูปแบบและเลือกภาพที่ได้รับคะแนนสูงสุดในการทดสอบกับผู้ใช้ ผลลัพธ์ของการทำงานนี้ทำให้ทั้ง FCP และ LCP ดีขึ้นอย่างมาก โดย LCP ภาคสนามดีขึ้นจาก 4.6 วินาทีเป็น 2.0 วินาที

แม้ว่าการเพิ่มประสิทธิภาพเหล่านี้จะช่วยปรับปรุง LCP แต่ทีมรู้สึกว่าคําจํากัดความปัจจุบันของเมตริก LCP ไม่ได้แสดงถึงมุมมองของผู้ใช้อย่างเต็มรูปแบบเมื่อ "เนื้อหาหลัก" ของหน้าเว็บโหลดแล้ว ซึ่งเป็นเป้าหมายของ LCP

ทีม YouTube จึงร่วมมือกับสมาชิกทีม Chrome เพื่อหาวิธีปรับปรุงเมตริก LCP เพื่อจัดการกับกรณีการใช้งานดังกล่าวเพื่อแก้ไขข้อกังวลเหล่านี้ หลังจากพิจารณาความเป็นไปได้และผลกระทบของตัวเลือก 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 ที่ให้ความร่วมมือในงานนี้