Disney+ Hotstar เพิ่มยอดดูการ์ดรายสัปดาห์ในอุปกรณ์ในห้องนั่งเล่นได้ถึง 100% ด้วยการลด INP 61% ได้อย่างไร

การปรับปรุง Interaction to Next Paint (INP) บนสมาร์ททีวีและอุปกรณ์ Set-top box นับเป็นความท้าทายมากกว่าเบราว์เซอร์ในเดสก์ท็อปอย่างมาก เนื่องจากข้อจำกัดด้านการรองรับ API ที่จำกัดและข้อกำหนดของระบบที่ไม่ซับซ้อน ในกรณีศึกษานี้ คุณจะได้เรียนรู้ว่า Disney+ Hotstar ประสบความสำเร็จในการรับมือกับอุปสรรคเหล่านี้และสร้างประโยชน์ทางธุรกิจอย่างมีนัยสำคัญได้อย่างไร

Bhuvaneswaran Mohan
Bhuvaneswaran Mohan
Saurabh Rajpal
Saurabh Rajpal

เมื่อมีการนำอุปกรณ์ในห้องนั่งเล่นมาใช้มากขึ้น Disney+ Hotstar ตระหนักดีว่าการมอบประสบการณ์การท่องเว็บที่ราบรื่นในแอปสำหรับสมาร์ททีวีและ Set-top box เป็นข้อกำหนดทางธุรกิจที่สำคัญ อย่างไรก็ตาม สิ่งที่ทำให้แก้ไข INP สำหรับอุปกรณ์ดังกล่าวได้ยากขึ้น คือทีวีรุ่นหนึ่งๆ อาจใช้เบราว์เซอร์เวอร์ชันเก่ามาก เช่น LG TV 2020 ใช้ Chrome 68 ซึ่งเปิดตัวในปี 2018 อุปกรณ์เหล่านี้บางประเภทจัดเป็นอุปกรณ์ระดับล่างได้ด้วย ซึ่งหมายความว่าอุปกรณ์เหล่านี้ไม่สามารถตอบสนองต่อการโต้ตอบได้รวดเร็วเท่ากับอุปกรณ์แท็บเล็ตและแล็ปท็อปรุ่นหลัก

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

ภาพหน้าจอของเครื่องมือสร้างโปรไฟล์ประสิทธิภาพใน Chrome DevTools ที่แสดงโปรไฟล์ประสิทธิภาพการโหลดของแอป Disney+ HotStar บนแล็ปท็อป เมตริกที่กำหนดเองชื่อ PAGE_RENDER_TIME จะเข้ามาในเวลา 1.39 วินาที
โปรไฟล์ (เวลาในการแสดงผลหน้า 1.3 วินาที) จากแล็ปท็อปที่ใช้ CPU ช้าลง 6 เท่าเพื่อจำลองการกำหนดค่าเบราว์เซอร์ของทีวี PAGE_RENDER_TIME เป็นเมตริกที่กำหนดเองที่ใช้ในการบันทึกช่วงเวลาที่ใช้ระหว่างการแสดงองค์ประกอบแรกของหน้าเว็บจนเสร็จกับการแยกวิเคราะห์ HTML
ภาพหน้าจอของเครื่องมือสร้างโปรไฟล์ประสิทธิภาพใน Chrome DevTools ที่ใช้โปรไฟล์ประสิทธิภาพการโหลดของแอป Disney+ HotStar ในอุปกรณ์สมาร์ททีวีจริง เมตริกที่กำหนดเองชื่อ PAGE_RENDER_TIME จะเข้ามาในเวลา 6.47 วินาที
โปรไฟล์ (การแสดงผลหน้า 6.47 วินาที) จากทีวีจริงโดยใช้การแก้ไขข้อบกพร่องจากระยะไกลกับแอปทีวีที่ทำงานใน 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 รวมถึงเวลาในการตอบสนองของการโต้ตอบแต่ละรายการ
กำลังบันทึก focusKey พร้อมเส้นทางไปยังองค์ประกอบที่ทริกเกอร์องค์ประกอบดังกล่าว

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

  1. การนำทางในถาดภาพสไลด์แนวนอน
  2. การไปยังส่วนต่างๆ ของถาดภาพสไลด์แนวตั้ง
  3. การโต้ตอบระหว่างการโหลดหน้าเว็บเริ่มต้น
ภาพหน้าจอขององค์ประกอบที่รับผิดชอบการไปยังส่วนต่างๆ ในภาพสไลด์ของถาดด้วยแป้นโฟกัส
รายการแดชบอร์ดที่แสดงการมีส่วนร่วมใน INP ด้วยการนำทางแบบภาพสไลด์ในถาดข้อมูล

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

สำหรับหน้าแรก โครงสร้างต้นไม้จะสร้างขึ้นโดยไลบรารีการนำทางเชิงพื้นที่ดังนี้

ต้นไม้ตัวอย่างที่สร้างขึ้นโดยไลบรารีการนำทางเชิงพื้นที่ ที่ด้านล่างรูทคือโหนด Navbar และ Tray Container โดยเฉพาะอย่างยิ่งโหนด Tray Container ประกอบด้วยโหนดการ์ด 3 โหนด ซึ่งแต่ละโหนดมีโหนดย่อยจำนวนมากที่ทำให้เกิด DOM ขนาดใหญ่
แผนผังการนำทางเชิงพื้นที่ก่อนหน้าของหน้าแรก

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

การแก้ปัญหา

มีปัญหาหลายอย่างที่จะต้องจัดการแยกกันเพื่อแก้ไขปัญหาการตอบสนองของแอปโดยรวม

การปรับปรุงการไปยังส่วนต่างๆ ของถาดแนวนอน

Disney+ Hotstar ได้สร้างไลบรารีภาพสไลด์ของตัวเองภายในระบบ ซึ่งไม่ทริกเกอร์การบีบเลย์เอาต์โดยใช้ภาพเคลื่อนไหวที่ประกอบขึ้น และอ่านขนาด 1 ครั้งต่อถาด แทนที่จะเป็น 1 ครั้งต่อการ์ด

การนำทางตามพื้นที่จะเน้นเฉพาะรูทของภาพหมุน และสำหรับการนำทางในแนวนอนเพิ่มเติม ภาพหมุนที่กำหนดเองจะแทรกอยู่ในรูปภาพ วิธีนี้ทำให้ Disney+ Hotstar ยกเลิกการพึ่งพาการนำทางไปยังส่วนต่างๆ และคลังภาพสไลด์เก่าที่อ่านมิติข้อมูลในการนำทางทุกครั้ง

นี่คือวิธีที่โครงสร้างการนำทางตามพื้นที่หลังจากการเพิ่มประสิทธิภาพเหล่านี้

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

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

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

จากการดำเนินงานนี้ Disney+ Hotstar พบว่า INP ของแอปในช่องลดลงอย่างมาก และยังประหยัดได้ประมาณ 35 KB (บีบอัด) ด้วยการนำไลบรารีของบุคคลที่สามออก นอกจากนี้ การปรับปรุงเหล่านี้ยังทำให้ Disney+ Hotstar สามารถลดระยะเวลาของเมตริกที่กำหนดเองซึ่งใช้ในการวัดเวลาการแสดงผลรวมสำหรับหน้าแรก เนื่องจากเลย์เอาต์จะทำงานน้อยลงเนื่องจากโหนดการนำทางเชิงพื้นที่ลดลง

อนุกรมเวลาของเมตริกที่กำหนดเองเวลาแสดงผลของหน้าเว็บสำหรับทั้ง tizentv และ Webos ซึ่งลดลงทั้ง 31% และ 25.2% ตามลำดับ โดยเริ่มตั้งแต่กรอบเวลา 13-19 มีนาคม
แนวโน้มขาลงของเวลาในการแสดงผลหน้าเว็บตามระบบปฏิบัติการ TV (Samsung-Tizen และ WebOS-LG)

การปรับปรุงการไปยังส่วนต่างๆ ของถาดแนวตั้ง

Disney+ Hotstar ยังปรับปรุงประสิทธิภาพการนำทางในถาดแนวตั้งด้วยการโหลดแบบ Lazy Loading แทนที่จะโหลดทั้งหมดไว้ด้านหน้า ดังนั้นเมื่อโหลดหน้าเว็บ แทนที่จะโหลดถาด 10 อินสแตนซ์ ซึ่งแต่ละถาดจะมีคอมโพเนนต์ภาพหมุนและรูปภาพชุดหนึ่ง แอปจะโหลดเฉพาะถาด 2 ถาดที่มองเห็นได้ในวิวพอร์ตเพิ่มเติม พร้อมกับถาดเพิ่มเติมที่ด้านบนและด้านล่าง นอกจากนี้ การแสดงผลยังแบ่งออกเป็นงานหลายๆ อย่างโดยใช้กลยุทธ์ผลตอบแทนของ setTimeout() เพื่อให้เทรดหลักมีโอกาสจัดการการโต้ตอบของผู้ใช้มากขึ้น

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

การโต้ตอบระหว่างการโหลดหน้าเว็บเริ่มต้น

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

Disney+ Hotstar ตระหนักว่าได้ประมวลผลสคริปต์มากเกินกว่าที่จำเป็นในการเริ่มแอปพลิเคชัน (การใช้หน้าจอแนะนำ) เพื่อให้หน้าเว็บในอนาคตโหลดได้เร็วขึ้น ทำให้เกิดงานประเมินสคริปต์เพิ่มเติม ซึ่งอาจส่งผลเสียต่อ INP

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

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

การเพิ่มประสิทธิภาพการโหลดเนื้อหาช่วยให้ Disney+ Hotstar มี 2 สิ่งต่อไปนี้คือ ลด INP ของแอป (เนื่องจากเทรดหลักค่อนข้างฟรีสำหรับการดำเนินการโต้ตอบของผู้ใช้) และยังลดการใช้หน่วยความจำในอุปกรณ์ระดับต่ำอีกด้วย

การเปลี่ยนแปลงเหล่านี้ทำให้หมายเลข INP ที่รายงานจากช่องลดลง 32% ดังที่แสดงในภาพหน้าจอต่อไปนี้

อนุกรมเวลาของค่า INP เริ่มตั้งแต่วันที่ 13 สิงหาคมถึง 11 กันยายน ในช่วงเวลานี้ คุณจะเห็น INP ลดลง 32%
การลด INP สำหรับการปรับปรุงถาด

การปรับปรุงอื่นๆ

Disney+ Hotstar ก็พบเช่นกันว่ายังมีงานที่ใช้เวลานานในกิจกรรมของผู้ใช้ 2-3 รายการ ซึ่งสามารถแบ่งได้ด้วยการให้ผลตอบแทนไปยังเทรดหลักบ่อยๆ จากนั้นก็ก้าวไปอีกขั้นด้วยการสร้างยูทิลิตีของโปรแกรมสร้างงานที่จะอนุญาตให้ผู้ใช้ยกเลิกงานระหว่างที่ดำเนินการได้

เช่น เมื่อผู้ใช้เลื่อนดูการ์ดหลายใบในถาด จะเกิดสิ่งต่อไปนี้

  • โฟกัสการ์ดถัดไปแล้ว
  • ระบบจะแปลการ์ดหากจำเป็น
  • อัปเดตสปอตไลท์แล้ว
  • ระบบจะดึงตัวอย่างและเริ่มเล่นตัวอย่าง (หากมี)
  • เหตุการณ์ Analytics จะเริ่มทำงาน

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

ยูทิลิตีโปรแกรมสร้างงานของ Disney+ Hotstar ยอมรับฟังก์ชันที่เป็นงานที่ต้องการ และเมื่อมีงานอื่นมาแทรกไว้กลางๆ งานก่อนหน้าจะถูกล้มเลิกเพื่อช่วยลดการดำเนินงานที่ไม่จำเป็นให้เราและทำงานที่จำเป็นได้อย่างรวดเร็ว

ผลลัพธ์

โดยรวมแล้ว INP ของแอปพลิเคชันของ Disney+ Hotstar ลดลงจาก 675 มิลลิวินาทีเหลือ 272 มิลลิวินาที ซึ่งคิดเป็นเพิ่มขึ้นเกือบ 60%! นอกจากนี้ เวลาในการตอบสนองในการโต้ตอบกับถาดข้อมูลยังลดลงจากประมาณ 400 มิลลิวินาทีเป็นประมาณ 100 มิลลิวินาที

ค่า INP ของอนุกรมเวลาเริ่มตั้งแต่วันที่ 23 สิงหาคมถึง 21 กันยายน พบว่า INP ลดลง 61% ในช่วงเวลานี้

ผลกระทบทางธุรกิจ: ยอดดูการ์ดรายสัปดาห์เพิ่มขึ้นจาก 111 เป็น 226 ครั้งต่อผู้ใช้ นี่ถือเป็นการเพิ่มขึ้น 100% ซึ่งแสดงให้เห็นว่าอินเทอร์เฟซที่เร็วขึ้นและตอบสนองได้ดีขึ้นมีแนวโน้มที่จะดึงดูดผู้ใช้ได้ยาวนานขึ้น

ภาพหน้าจอของอนุกรมเวลาที่แสดงยอดดูการ์ดรายสัปดาห์ในแอป Disney+ HotStar เพิ่มขึ้น 100% สำหรับทั้ง tizentv และ Webos การเพิ่มขึ้นนี้เกิดขึ้นอย่างมากหลังจากวันที่ 4 เมษายน 2004

นี่เป็นเพียงจุดเริ่มต้นเท่านั้น และ 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 ที่คอยรีวิวและช่วยเผยแพร่กรณีศึกษานี้