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

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

Addy Osmani

Sriram Krishnan

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

สร้างเว็บที่เร็วขึ้น

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

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

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

การปรับปรุง Core Web Vitals

ทีม YouTube ระบุจุดที่ควรปรับปรุงโดยใช้รายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) เพื่อดูว่าผู้ใช้จริงได้รับประสบการณ์การรับชมวิดีโอและหน้าผลการค้นหาจากการใช้งานบนอุปกรณ์เคลื่อนที่อย่างไรบ้าง ทางบริษัทพบว่าเมตริก Core Web Vitals ยังมีสิ่งที่ต้องปรับปรุงอีกมาก เนื่องจากเมตริก Largest Contentful Paint (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 ทีมจึงเริ่มเพิ่มความเร็วในการแสดงภาพโปสเตอร์ด้วย พวกเขาทดลองด้วยภาพโปสเตอร์ 2-3 แบบและเลือกภาพที่ได้คะแนนสูงสุดในการทดสอบโดยผู้ใช้ จากการดำเนินการนี้ ทั้ง FCP และ LCP แสดงการปรับปรุงที่ชัดเจน โดย LCP ของสนามมีประสิทธิภาพมากขึ้นจาก 4.6 วินาทีเป็น 2.0 วินาที

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

ทีม YouTube ได้ร่วมมือกับสมาชิกในทีม Chrome เพื่อหาวิธีปรับปรุงเมตริก LCP เพื่อจัดการกับ Use Case เพื่อแก้ไขข้อกังวลเหล่านี้ หลังจากพิจารณาความเป็นไปได้และผลจากตัวเลือก 2-3 ตัวเลือกแล้ว ทีมก็ได้พิจารณาข้อเสนอที่จะพิจารณาเวลาในการระบายสีของเฟรมแรกขององค์ประกอบวิดีโอในฐานะผู้สมัคร LCP

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

การแยกส่วนที่มีการโหลดแบบ Lazy Loading

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

แต่หลังจากใช้การโหลดแบบ Lazy Loading แล้ว ทีมก็สังเกตเห็นว่าคอมโพเนนต์ที่โหลดแบบ Lazy Loading และองค์ประกอบ Dependency จะโหลดในเวลาที่ต่ำกว่ามาตรฐาน

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

การจัดการสถานะในองค์ประกอบต่างๆ

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

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

เพื่อแก้ไขปัญหาที่เกิดจากการควบคุมแบบกระจายศูนย์ ทีมได้อัปเดต UI ของโปรแกรมเล่นเพื่อซิงค์ข้อมูลการอัปเดตทั้งหมด โดยการเปลี่ยนโครงสร้างโปรแกรมเล่นเป็นองค์ประกอบระดับบนสุดหน่วยเดียวที่จะส่งข้อมูลลงให้แก่บุตรหลาน วิธีนี้ช่วยให้มั่นใจได้ว่าจะมีรอบการอัปเดต UI (การแสดงผล) เพียงรอบเดียวสำหรับการเปลี่ยนแปลงสถานะใดๆ จึงจะขจัดการอัปเดตแบบเชน เหตุการณ์การย้ายระบบสัมผัสแถบความคืบหน้าของโปรแกรมเล่นใหม่จะไม่มีการคำนวณรูปแบบใหม่ในระหว่างการดำเนินการ JavaScript และตอนนี้ต้องใช้เวลาเพียง 25% ของโปรแกรมเล่นเดิม

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

บทสรุป

การลงทุนด้านประสิทธิภาพของ YouTube ทำให้หน้าดูวิดีโอโหลดได้เร็วขึ้นมาก โดย 76% ของ URL เว็บไซต์ YouTube ในอุปกรณ์เคลื่อนที่ซึ่งตอนนี้ผ่านเกณฑ์เมตริก Core Web Vitals ในวงการแล้ว บนเดสก์ท็อป LCP ในห้องทดลองสำหรับหน้าดูวิดีโอลดลงจากประมาณ 4.6 วินาทีเหลือ 1.6 วินาที ประสิทธิภาพการโต้ตอบและการแสดงผลของเว็บไซต์ โดยเฉพาะในโปรแกรมเล่นวิดีโอ YouTube ช่วยให้เรียกใช้ JavaScript ได้เร็วขึ้นถึง 75%

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

ในตอนที่ 2 ของซีรีส์นี้ "การสร้างเว็บที่เข้าถึงได้" คุณจะได้อ่านวิธีที่ 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 ที่มีส่วนร่วมในงานนี้