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

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

Sriram Krishnan
Sriram Krishnan

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

PageSpeed Insights ที่แสดงข้อมูลรายงาน UX ของ Chrome
หน้าดูวิดีโอของ YouTube สำหรับเว็บบนอุปกรณ์เคลื่อนที่ผ่านเกณฑ์ Core Web Vitals

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

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

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

ปรับปรุง Core Web Vitals

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

แผนภูมิ FCP และ LCP ที่แสดงอัตราผ่านของหน้าสำหรับดูของ YouTube รวมถึงต้นทางของ YouTube

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

รายงาน Lighthouse สําหรับ YouTube บนอุปกรณ์เคลื่อนที่
Chrome กําหนดเป้าหมายที่ 1.8 วินาทีสําหรับ FCP และ 2.5 วินาทีสําหรับ LCP เป็นมาตรฐานทอง FCP และ LCP อยู่ในสีเหลืองและสีแดงอย่างชัดเจนที่ 3.5 วินาทีและ 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 ของหน้าเว็บสําหรับเว็บบนอุปกรณ์เคลื่อนที่ที่แสดงกลุ่มควบคุม การทดสอบ ก (ภาพขนาดย่อ) และการทดสอบ ข (ภาพขนาดย่อสีดํา)
ในเวอร์ชันทดลอง เราสังเกตเห็นการปรับปรุง FCP และ LCP จาก 4.4 วินาทีเป็น 1.1 วินาทีหลังจากการเปลี่ยนแปลงนี้ การทดสอบ ก: การใช้ภาพปกวิดีโอจริงได้ผลดีในหน้าเว็บที่วิดีโอเริ่มเล่นแบบหยุดชั่วคราว แต่สำหรับหน้าวิดีโอที่เล่นอัตโนมัติ เช่น หน้า "ดู" กลับมีประสิทธิภาพต่ำในการทดสอบผู้ใช้ และส่งผลให้ผู้ใช้ที่ใช้งานอยู่ลดลงด้วย การทดสอบ ข: การใช้ภาพโปสเตอร์สีดําล้วนให้ผลลัพธ์ดีที่สุดในการศึกษาผู้ใช้ ผู้ใช้พบว่าการเปลี่ยนจากสีดําสนิทเป็นเฟรมแรกของวิดีโอเป็นประสบการณ์การใช้งานวิดีโอเล่นอัตโนมัติที่กระอักกระอ่วนน้อยลง
เราได้ติดตั้งใช้งานภาพขนาดย่อสีดําในเวอร์ชันที่ใช้งานจริงสําหรับผู้ใช้เว็บบนอุปกรณ์เคลื่อนที่ทุกคนในเดือนกรกฎาคม 2021 ซึ่งแสดงให้เห็นถึงการปรับปรุงที่ชัดเจนใน FCP และ LCP ดังที่เห็นในการวิเคราะห์ RUM ด้านบน
เราได้ติดตั้งใช้งานภาพขนาดย่อสีดําในเวอร์ชันที่ใช้งานจริงสําหรับผู้ใช้เว็บบนอุปกรณ์เคลื่อนที่ทั้งหมดในเดือนกรกฎาคม 2021 ซึ่งแสดงให้เห็นถึงการปรับปรุงที่ชัดเจนใน FCP และ LCP ดังที่เห็นในการวิเคราะห์ RUM ด้านบน

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

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

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

เหตุการณ์ 21.17 มิลลิวินาทีที่แสดงในไทม์ไลน์ประสิทธิภาพ
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่ทํางานด้วยประสิทธิภาพที่ช้าลง 4 เท่าของ CPU

ทีมได้อัปเดต 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 ที่ให้ความร่วมมือในงานนี้