การสร้างเว็บที่ดีขึ้น: 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 ยังมีจุดที่ต้องปรับปรุงอีกมาก โดยเมตริก Largest Contentful Paint (LCP) แสดงผลที่ 4-6 วินาทีในบางกรณี ซึ่งสูงกว่าเป้าหมายที่ 2.5 วินาทีอย่างมาก

เพื่อระบุจุดที่ต้องปรับปรุง ทีมจึงหันมาใช้ Lighthouse ในการตรวจสอบหน้าดูวิดีโอของ YouTube ซึ่งพบว่า Lighthouse (ห้องทดลอง) มีคะแนนต่ำ โดยมี 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 ที่ให้ความร่วมมือในงานนี้