การปรับปรุง Interaction to Next Paint (INP) บนสมาร์ททีวีและอุปกรณ์ Set-top box นับเป็นความท้าทายมากกว่าเบราว์เซอร์ในเดสก์ท็อปอย่างมาก เนื่องจากข้อจำกัดด้านการรองรับ API ที่จำกัดและข้อกำหนดของระบบที่ไม่ซับซ้อน ในกรณีศึกษานี้ คุณจะได้เรียนรู้ว่า Disney+ Hotstar ประสบความสำเร็จในการรับมือกับอุปสรรคเหล่านี้และสร้างประโยชน์ทางธุรกิจอย่างมีนัยสำคัญได้อย่างไร
เมื่อมีการนำอุปกรณ์ในห้องนั่งเล่นมาใช้มากขึ้น Disney+ Hotstar ตระหนักดีว่าการมอบประสบการณ์การท่องเว็บที่ราบรื่นในแอปสำหรับสมาร์ททีวีและ Set-top box เป็นข้อกำหนดทางธุรกิจที่สำคัญ อย่างไรก็ตาม สิ่งที่ทำให้แก้ไข INP สำหรับอุปกรณ์ดังกล่าวได้ยากขึ้น คือทีวีรุ่นหนึ่งๆ อาจใช้เบราว์เซอร์เวอร์ชันเก่ามาก เช่น LG TV 2020 ใช้ Chrome 68 ซึ่งเปิดตัวในปี 2018 อุปกรณ์เหล่านี้บางประเภทจัดเป็นอุปกรณ์ระดับล่างได้ด้วย ซึ่งหมายความว่าอุปกรณ์เหล่านี้ไม่สามารถตอบสนองต่อการโต้ตอบได้รวดเร็วเท่ากับอุปกรณ์แท็บเล็ตและแล็ปท็อปรุ่นหลัก
ภาพต่อไปนี้เปรียบเทียบระยะเวลาที่ใช้ในการโหลดหน้าเว็บระหว่างแล็ปท็อปที่มี CPU ทำงานช้าลงถึง 6 ครั้งเมื่อใช้กับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และสมาร์ททีวี ดังที่เห็นได้ว่าแล็ปท็อปยังคงทำงานเร็วกว่าสมาร์ททีวีที่เพิ่งผลิตขึ้นเมื่อเร็วๆ นี้
แม้ว่าการทดสอบเหล่านี้จะให้ข้อมูลในห้องปฏิบัติการ แต่ Disney+ Hotstar เริ่มรวบรวมข้อมูลภาคสนามสำหรับ Interaction to Next Paint (INP) จากผู้ใช้จริงของแอปโดยใช้ไลบรารี Web-vitals และสังเกตเห็นว่า 75% ของผู้ใช้แอปพบ INP ใน675 มิลลิวินาทีในภาคสนาม ซึ่งถือว่าได้ประสบการณ์ของผู้ใช้ "ไม่ดี" ตามเกณฑ์ INP
กรณีศึกษานี้อธิบายว่า Disney+ Hotstar ปรับปรุงการตอบสนองอย่างรวดเร็วในแอปพลิเคชันสตรีมมิงของตนได้อย่างไร โดยเฉพาะอย่างยิ่งในอุปกรณ์ระดับโลว์เอนด์ และได้รับการปรับปรุง 61% โดยการลดค่า INP ลงเหลือ 272 มิลลิวินาที ซึ่งยังคงสูงกว่าเกณฑ์ "ดี" ที่แนะนำที่ 200 มิลลิวินาที แต่มีการปรับปรุงอย่างเห็นได้ชัด
ผลการวิจัย
Disney+ Hotstar ติดตั้งตัวแอปโดยใช้เมธอด onINP จากการระบุแหล่งที่มาของไลบรารี Web-vitals ในระยะแรก ได้พบความท้าทายหลายอย่าง โดยเฉพาะในการระบุองค์ประกอบเป้าหมายที่แม่นยำ ปัญหาเกิดขึ้นเนื่องจากการอ้างอิงทั้งหมดที่ชี้ไปยังเนื้อหาเนื่องจากไลบรารีการนำทางเชิงพื้นที่ของบุคคลที่สาม ซึ่งใช้กับการปรับแต่งบางอย่างในแอป Disney+ Hotstar ไลบรารีนี้ฟังเหตุการณ์ในเนื้อหาเอกสารเท่านั้น จากนั้นจึงกำหนดองค์ประกอบที่โฟกัสจริงๆ และคาดการณ์โฟกัสถัดไปตามการกดแป้นระยะไกล
Disney+ Hotstar เริ่มต้นด้วยการแก้ปัญหาการระบุแหล่งที่มาก่อน เพื่อให้สามารถระบุการโต้ตอบที่ทำให้เกิดมูลค่า INP สูงได้ สำหรับเรื่องนี้ Disney+ Hotstar ได้บันทึกแอตทริบิวต์ focusKey ที่มีอยู่แล้วในไลบรารีการนำทางเชิงพื้นที่สำหรับองค์ประกอบที่โฟกัสอยู่ในปัจจุบัน รวมทั้งแมปขององค์ประกอบที่โฟกัสได้ทั้งหมดในหน้า ซึ่งเหมือนกับเป้าหมายการโต้ตอบที่มีอยู่ในบิลด์การระบุแหล่งที่มา Web-vitals
focusKey พร้อมเส้นทางไปยังองค์ประกอบที่ทริกเกอร์องค์ประกอบดังกล่าว
เมื่อใช้การวัดผลและการระบุแหล่งที่มาที่เหมาะสมแล้ว ผลที่ได้จากข้อมูลภาคสนามจะรายงานว่าการโต้ตอบต่อไปนี้เป็นปัญหาใหญ่ที่สุดสำหรับ INP
- การนำทางในถาดภาพสไลด์แนวนอน
- การไปยังส่วนต่างๆ ของถาดภาพสไลด์แนวตั้ง
- การโต้ตอบระหว่างการโหลดหน้าเว็บเริ่มต้น
เมื่อทำโปรไฟล์การโต้ตอบเหล่านี้กับแผงประสิทธิภาพใน Chrome Dev Tools ก็พบว่าไลบรารีการนำทางเชิงพื้นที่อ่านตำแหน่งขององค์ประกอบที่โฟกัสได้ทั้งหมดและสร้างโครงสร้างใหม่ขึ้นมา ซึ่งเป็นการดำเนินการที่มีค่าใช้จ่ายสูงซึ่งจะทำให้เกิดการสลับเลย์เอาต์ในการโต้ตอบแต่ละครั้ง เช่น การย้ายจากองค์ประกอบหนึ่งไปยังอีกองค์ประกอบหนึ่ง
สำหรับหน้าแรก โครงสร้างต้นไม้จะสร้างขึ้นโดยไลบรารีการนำทางเชิงพื้นที่ดังนี้
ซึ่งหมายความว่า หากแอปแสดงถาด 10 ถาดและแต่ละถาดมีการ์ด 7 ใบ คอนเทนเนอร์ของถาดจะมีองค์ประกอบที่โฟกัสได้ 70 รายการ ซึ่งรวมถึงรายการนำทาง นี่เป็นองค์ประกอบแบบอินเทอร์แอกทีฟจำนวนมาก นอกจากนี้ยังใช้ไลบรารีภาพสไลด์ของบุคคลที่สาม ซึ่งจะอ่านมิติข้อมูลของการ์ดแต่ละใบในระหว่างการนำทางแนวนอนเพื่อแปลคอนเทนเนอร์ ทำให้เวลาในการตอบสนองของการโต้ตอบเพิ่มมากขึ้น
การแก้ปัญหา
มีปัญหาหลายอย่างที่จะต้องจัดการแยกกันเพื่อแก้ไขปัญหาการตอบสนองของแอปโดยรวม
การปรับปรุงการไปยังส่วนต่างๆ ของถาดแนวนอน
Disney+ Hotstar ได้สร้างไลบรารีภาพสไลด์ของตัวเองภายในระบบ ซึ่งไม่ทริกเกอร์การบีบเลย์เอาต์โดยใช้ภาพเคลื่อนไหวที่ประกอบขึ้น และอ่านขนาด 1 ครั้งต่อถาด แทนที่จะเป็น 1 ครั้งต่อการ์ด
การนำทางตามพื้นที่จะเน้นเฉพาะรูทของภาพหมุน และสำหรับการนำทางในแนวนอนเพิ่มเติม ภาพหมุนที่กำหนดเองจะแทรกอยู่ในรูปภาพ วิธีนี้ทำให้ Disney+ Hotstar ยกเลิกการพึ่งพาการนำทางไปยังส่วนต่างๆ และคลังภาพสไลด์เก่าที่อ่านมิติข้อมูลในการนำทางทุกครั้ง
นี่คือวิธีที่โครงสร้างการนำทางตามพื้นที่หลังจากการเพิ่มประสิทธิภาพเหล่านี้
รูปภาพต่อไปนี้เป็นการเปรียบเทียบประสิทธิภาพที่วัดในแผงประสิทธิภาพของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome ก่อนและหลังการใช้ภาพสไลด์
จากการดำเนินงานนี้ Disney+ Hotstar พบว่า INP ของแอปในช่องลดลงอย่างมาก และยังประหยัดได้ประมาณ 35 KB (บีบอัด) ด้วยการนำไลบรารีของบุคคลที่สามออก นอกจากนี้ การปรับปรุงเหล่านี้ยังทำให้ Disney+ Hotstar สามารถลดระยะเวลาของเมตริกที่กำหนดเองซึ่งใช้ในการวัดเวลาการแสดงผลรวมสำหรับหน้าแรก เนื่องจากเลย์เอาต์จะทำงานน้อยลงเนื่องจากโหนดการนำทางเชิงพื้นที่ลดลง
การปรับปรุงการไปยังส่วนต่างๆ ของถาดแนวตั้ง
Disney+ Hotstar ยังปรับปรุงประสิทธิภาพการนำทางในถาดแนวตั้งด้วยการโหลดแบบ Lazy Loading แทนที่จะโหลดทั้งหมดไว้ด้านหน้า ดังนั้นเมื่อโหลดหน้าเว็บ แทนที่จะโหลดถาด 10 อินสแตนซ์ ซึ่งแต่ละถาดจะมีคอมโพเนนต์ภาพหมุนและรูปภาพชุดหนึ่ง แอปจะโหลดเฉพาะถาด 2 ถาดที่มองเห็นได้ในวิวพอร์ตเพิ่มเติม พร้อมกับถาดเพิ่มเติมที่ด้านบนและด้านล่าง นอกจากนี้ การแสดงผลยังแบ่งออกเป็นงานหลายๆ อย่างโดยใช้กลยุทธ์ผลตอบแทนของ setTimeout() เพื่อให้เทรดหลักมีโอกาสจัดการการโต้ตอบของผู้ใช้มากขึ้น
การโต้ตอบระหว่างการโหลดหน้าเว็บเริ่มต้น
INP จะสูงสำหรับแอปพลิเคชันที่ประมวลผลสคริปต์จำนวนมากระหว่างเปิดแอป เนื่องจากเบราว์เซอร์จะต้องดาวน์โหลด แยกวิเคราะห์ และประเมินสคริปต์เหล่านั้น แม้ว่าทั้งหมดนี้จะเกิดขึ้น แต่เทรดหลักจะมีการใช้งานเป็นเวลานานและตอบสนองการโต้ตอบของผู้ใช้ไม่ได้อย่างรวดเร็ว
Disney+ Hotstar ตระหนักว่าได้ประมวลผลสคริปต์มากเกินกว่าที่จำเป็นในการเริ่มแอปพลิเคชัน (การใช้หน้าจอแนะนำ) เพื่อให้หน้าเว็บในอนาคตโหลดได้เร็วขึ้น ทำให้เกิดงานประเมินสคริปต์เพิ่มเติม ซึ่งอาจส่งผลเสียต่อ INP
ในการแก้ปัญหานี้ Disney+ Hotstar จะพิจารณาการโหลดเนื้อหาส่วนใหญ่แบบไดนามิกเพื่อประหยัดเวลาในการเริ่มต้นแอป อย่างไรก็ตาม การดำเนินการดังกล่าวจะเพิ่มเวลาในการโหลดสำหรับการไปยังหน้าเว็บในอนาคต เนื่องจาก JavaScript นั้นจะไม่ถูกโหลดล่วงหน้าพร้อมกับการเปลี่ยนแปลงนี้อีกต่อไป เพื่อแก้ไขปัญหานี้ Disney+ Hotstar จึงพัฒนาไลบรารีตัวโหลดล่วงหน้าสำหรับชิ้นงานภายในองค์กร ซึ่งจะกำหนดว่าหน้าเว็บใดอาจเป็นหน้าต่อไปในเส้นทางของผู้ใช้ และจะโหลดชิ้นงานนั้นล่วงหน้าสำหรับหน้านั้น เช่น
- เมื่อผู้ใช้อยู่ในหน้าเข้าสู่ระบบ ไลบรารีตัวโหลดล่วงหน้าของเนื้อหาจะโหลดเนื้อหาล่วงหน้าสำหรับหน้าการเลือกโปรไฟล์
- ในหน้าการเลือกโปรไฟล์ ระบบจะโหลดเนื้อหาหน้าแรก
- ระบบจะโหลดเนื้อหาของหน้ารายละเอียดในหน้าแรก
- ขั้นตอนสุดท้าย เนื้อหาของหน้าดูวิดีโอจะโหลดขึ้นในหน้ารายละเอียด
การเพิ่มประสิทธิภาพการโหลดเนื้อหาช่วยให้ Disney+ Hotstar มี 2 สิ่งต่อไปนี้คือ ลด INP ของแอป (เนื่องจากเทรดหลักค่อนข้างฟรีสำหรับการดำเนินการโต้ตอบของผู้ใช้) และยังลดการใช้หน่วยความจำในอุปกรณ์ระดับต่ำอีกด้วย
การเปลี่ยนแปลงเหล่านี้ทำให้หมายเลข INP ที่รายงานจากช่องลดลง 32% ดังที่แสดงในภาพหน้าจอต่อไปนี้
การปรับปรุงอื่นๆ
Disney+ Hotstar ก็พบเช่นกันว่ายังมีงานที่ใช้เวลานานในกิจกรรมของผู้ใช้ 2-3 รายการ ซึ่งสามารถแบ่งได้ด้วยการให้ผลตอบแทนไปยังเทรดหลักบ่อยๆ จากนั้นก็ก้าวไปอีกขั้นด้วยการสร้างยูทิลิตีของโปรแกรมสร้างงานที่จะอนุญาตให้ผู้ใช้ยกเลิกงานระหว่างที่ดำเนินการได้
เช่น เมื่อผู้ใช้เลื่อนดูการ์ดหลายใบในถาด จะเกิดสิ่งต่อไปนี้
- โฟกัสการ์ดถัดไปแล้ว
- ระบบจะแปลการ์ดหากจำเป็น
- อัปเดตสปอตไลท์แล้ว
- ระบบจะดึงตัวอย่างและเริ่มเล่นตัวอย่าง (หากมี)
- เหตุการณ์ Analytics จะเริ่มทำงาน
หากในระหว่างกระบวนการนี้ ผู้ใช้โฟกัสที่การ์ดถัดไป คุณก็ไม่ต้องดำเนินการตามขั้นตอนที่เหลือ ตัวอย่างเช่น ไม่จำเป็นต้องใช้การดึงข้อมูลตัวอย่างและการเริ่มต้นโปรแกรมเล่นสำหรับภาพยนตร์หรือรายการทีวีหนึ่งๆ หากผู้ใช้ย้ายไปอยู่ในการ์ดถัดไป ดังนั้นจึงสามารถล้มเลิกงานเหล่านั้นเพื่อให้เทรดหลักว่างได้
ยูทิลิตีโปรแกรมสร้างงานของ Disney+ Hotstar ยอมรับฟังก์ชันที่เป็นงานที่ต้องการ และเมื่อมีงานอื่นมาแทรกไว้กลางๆ งานก่อนหน้าจะถูกล้มเลิกเพื่อช่วยลดการดำเนินงานที่ไม่จำเป็นให้เราและทำงานที่จำเป็นได้อย่างรวดเร็ว
ผลลัพธ์
โดยรวมแล้ว INP ของแอปพลิเคชันของ Disney+ Hotstar ลดลงจาก 675 มิลลิวินาทีเหลือ 272 มิลลิวินาที ซึ่งคิดเป็นเพิ่มขึ้นเกือบ 60%! นอกจากนี้ เวลาในการตอบสนองในการโต้ตอบกับถาดข้อมูลยังลดลงจากประมาณ 400 มิลลิวินาทีเป็นประมาณ 100 มิลลิวินาที
ผลกระทบทางธุรกิจ: ยอดดูการ์ดรายสัปดาห์เพิ่มขึ้นจาก 111 เป็น 226 ครั้งต่อผู้ใช้ นี่ถือเป็นการเพิ่มขึ้น 100% ซึ่งแสดงให้เห็นว่าอินเทอร์เฟซที่เร็วขึ้นและตอบสนองได้ดีขึ้นมีแนวโน้มที่จะดึงดูดผู้ใช้ได้ยาวนานขึ้น
นี่เป็นเพียงจุดเริ่มต้นเท่านั้น และ Disney+ Hotstar ได้พลิกโฉมประสบการณ์การปรับปรุงการแสดงผลและการโต้ตอบโดยใช้เมตริก INP เท่านั้น และทีมก็ตื่นเต้นมากที่จะทำให้ Disney+ Hotstar ได้รับประสบการณ์ที่ลื่นไหลไม่มีสะดุดสำหรับลูกค้าของพวกเขาในอนาคตอันใกล้
ขอขอบคุณ Ayush, Ajay, Kiran, Milan และ Richa จาก Disney+ Hotstar ที่ร่วมมือกันพลิกสถานการณ์
ขอขอบคุณเป็นพิเศษสำหรับ Ankeet Maini, หัวหน้าฝ่ายวิศวกรรม Disney+ Hotstar และ Rahul Krishnan P หัวหน้าทีมประสบการณ์ลูกค้า Disney+ Hotstar ที่ให้การสนับสนุนผลงานนวัตกรรมนี้ และขอเรียนร่วมกับ Jeremy Wagner, Gilberto, Barry Pollard และ Brendan Kenny จาก Google ที่คอยรีวิวและช่วยเผยแพร่กรณีศึกษานี้