การโหลดแบบปรับอัตโนมัติ: ปรับปรุงประสิทธิภาพของเว็บในอุปกรณ์ที่ช้า

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

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

ในการพูดคุยเรื่อง Chrome Dev Summit Addy Osmani จาก Google และ Nate Schloss จาก Facebook ได้สำรวจวิธีแก้ปัญหาดังกล่าว ซึ่งเป็นรูปแบบในการนำเสนอหน้าเว็บที่รองรับข้อจำกัดต่างๆ ของผู้ใช้ได้ดีขึ้น ซึ่งเรียกว่าการโหลดแบบปรับอัตโนมัติ

การโหลดแบบปรับอัตโนมัติคืออะไร

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

• ประสบการณ์หลักที่รวดเร็วสำหรับผู้ใช้ทุกคน (รวมถึงอุปกรณ์ระดับล่าง)

• ค่อยๆ เพิ่มฟีเจอร์ระดับไฮเอนด์เท่านั้น หากเครือข่ายและฮาร์ดแวร์ของผู้ใช้จัดการได้

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

• การแสดงรูปภาพและวิดีโอคุณภาพต่ำในเครือข่ายที่ช้า

• การควบคุมอัตราเฟรมของภาพเคลื่อนไหวในอุปกรณ์ระดับล่าง

• หลีกเลี่ยงการดำเนินการคำนวณที่มีราคาแพงในอุปกรณ์ระดับล่าง

• การบล็อกสคริปต์ของบุคคลที่สามในอุปกรณ์ที่ช้า

• การโหลด JavaScript ที่ไม่สำคัญสำหรับการโต้ตอบบน CPU ที่เร็วเท่านั้น

การรองรับเบราว์เซอร์และวิธีใช้งานการโหลดแบบปรับอัตโนมัติ

สัญญาณที่คุณสามารถใช้สำหรับการโหลดแบบปรับอัตโนมัติมีดังนี้ นอกจากนี้ ยังมีการรองรับเบราว์เซอร์ในแต่ละสัญญาณด้วย ดังนี้

Navigator.deviceMemory

พร็อพเพอร์ตี้ navigator.deviceMemory ใช้เพื่อลดการใช้หน่วยความจำในอุปกรณ์ระดับล่าง

Navigator.hardwareConcurrency

พร็อพเพอร์ตี้ navigator.hardwareConcurrency คือจำนวนแกนของ CPU ช่วยจำกัดการเรียกใช้ JavaScript ที่มีค่าใช้จ่ายสูงและลดตรรกะที่ใช้ CPU มากเมื่ออุปกรณ์จัดการได้ไม่ดี

NetworkInformation.effectiveType

พร็อพเพอร์ตี้ navigator.connection.effectiveType ใช้ในการปรับแต่งการโอนข้อมูลให้ใช้แบนด์วิดท์น้อยลง

NetworkInformation.saveData

พร็อพเพอร์ตี้ navigator.connection.saveData ใช้เพื่อใช้ประโยชน์จากค่ากำหนดการประหยัดอินเทอร์เน็ตของผู้ใช้

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

การโหลดแบบปรับอัตโนมัติใน React

React Adaptive Load Hook & Utillities เป็นชุดสำหรับระบบนิเวศของ React ที่ช่วยให้คุณปรับเปลี่ยนเว็บไซต์ให้เหมาะกับอุปกรณ์ระดับล่างได้ง่ายขึ้น แอปประกอบด้วย

• ฮุก useNetworkStatus() สำหรับการปรับให้เข้ากับสถานะเครือข่าย (slow-2g, 2g, 3g หรือ 4g)

• ฮุก useSaveData() สำหรับปรับเปลี่ยนตามค่ากำหนดการประหยัดอินเทอร์เน็ตของผู้ใช้

• ฮุก useHardwareConcurrency() สำหรับการปรับตามจำนวนแกนประมวลผล CPU เชิงตรรกะในอุปกรณ์ของผู้ใช้

• ฮุก useMemoryStatus() สำหรับการปรับให้เข้ากับหน่วยความจำอุปกรณ์ของผู้ใช้ (RAM)

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

ตะขอและยูทิลิตีของการโหลดแบบปรับอัตโนมัติรีแอ็กชันได้รับการติดตั้งใช้งานโดยใช้ API แพลตฟอร์มเว็บ (ข้อมูล เครือข่าย หน่วยความจำของอุปกรณ์ และการเกิดขึ้นพร้อมกันของฮาร์ดแวร์) คุณใช้ API เดียวกันเพื่อนำแนวคิดการโหลดแบบปรับอัตโนมัติไปใช้กับเฟรมเวิร์กและไลบรารีอื่นๆ ได้ เช่น Angular, Vue และอื่นๆ

การทำงานของการโหลดแบบปรับอัตโนมัติ

ส่วนนี้จะสำรวจการสาธิตวิธีใช้การโหลดแบบปรับอัตโนมัติและตัวอย่างการใช้งานจริงจากเว็บไซต์ต่างๆ เช่น Facebook, eBay, Tinder และอื่นๆ

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

Twitter มีโหมดการประหยัดอินเทอร์เน็ตที่ออกแบบมาเพื่อลดปริมาณการใช้อินเทอร์เน็ต ในโหมดนี้ ตัวอย่างรูปภาพจะโหลดความละเอียดต่ำ และรูปภาพขนาดใหญ่จะโหลดเฉพาะเมื่อคุณแตะตัวอย่าง เมื่อเปิดใช้ตัวเลือกนี้ ผู้ใช้ใน iOS และ Android ประหยัดการใช้ข้อมูลจากรูปภาพ 50% และผู้ใช้บนเว็บประหยัดได้ถึง 80% นี่เป็นการสาธิตรีแอ็กชันที่ใช้ฮุก "บันทึกข้อมูล" เพื่อจำลองไทม์ไลน์ของ Twitter ลองเปิดแผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บ แล้วดูความแตกต่างของปริมาณข้อมูลที่โอนขณะที่คุณเลื่อนดูในขณะที่ปิดใช้การ "บันทึกข้อมูล" เทียบกับเมื่อเปิดใช้

eBay เปิดและปิดฟีเจอร์ต่างๆ อย่างมีเงื่อนไข เช่น การซูมเมื่อฮาร์ดแวร์หรือสภาพเครือข่ายของผู้ใช้ไม่รองรับ ซึ่งทำได้ผ่านการแยกโค้ดและการโหลดโค้ดแบบปรับเปลี่ยนได้ วิธีนี้ช่วยโหลดคอมโพเนนต์แบบอินเทอร์แอกทีฟที่มีการโต้ตอบสูงแบบมีเงื่อนไขหรือเรียกใช้การดำเนินการคำนวณหนักๆ ในอุปกรณ์ระดับไฮเอนด์ได้มากขึ้น โดยที่ไม่ส่งสคริปต์เหล่านั้นลงไปยังผู้ใช้อุปกรณ์ที่ช้า ดูวิดีโอได้ที่เวลา 16 นาที ซึ่ง Addy แสดงรูปแบบนี้ที่มีการใช้งาน React.lazy() และ Suspense ในหน้าผลิตภัณฑ์ eBay สำหรับสาธิต

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

การโหลดแบบปรับอัตโนมัติที่ Facebook

ปัญหาหนึ่งที่เกิดขึ้นกับการโหลดแบบปรับอัตโนมัติคือการจัดกลุ่มอุปกรณ์เป็นคลาสระดับไฮเอนด์และคลาสโลว์เอนด์ตามสัญญาณที่มีอยู่ สตริง User Agent (UA) ในอุปกรณ์เคลื่อนที่จะระบุชื่ออุปกรณ์ที่ช่วยให้ Facebook ใช้ข้อมูลที่เผยแพร่แบบสาธารณะในอุปกรณ์เพื่อจัดกลุ่มอุปกรณ์เคลื่อนที่ออกเป็นคลาสได้ อย่างไรก็ตาม ข้อมูลที่เกี่ยวข้องเพียงอย่างเดียวซึ่ง UA ให้มาในอุปกรณ์เดสก์ท็อปคือระบบปฏิบัติการของอุปกรณ์

สำหรับการจัดกลุ่มอุปกรณ์เดสก์ท็อป Facebook จะบันทึกข้อมูลเกี่ยวกับระบบปฏิบัติการ, แกน CPU (จาก navigator.hardwareConcurrency) และหน่วยความจำ RAM (navigator.deviceMemory) ในการตรวจสอบประสิทธิภาพ เมื่อดูความสัมพันธ์ระหว่างฮาร์ดแวร์ประเภทต่างๆ และประสิทธิภาพ อุปกรณ์เหล่านี้ได้แบ่งอุปกรณ์ออกเป็น 5 หมวดหมู่ คลาสฮาร์ดแวร์ที่ผสานรวมกับการตรวจสอบประสิทธิภาพช่วยให้เห็นภาพวิธีที่ผู้คนใช้ผลิตภัณฑ์ของ Facebook บนอุปกรณ์ของผู้ใช้ได้สมบูรณ์ยิ่งขึ้น และระบุการถดถอยได้ง่ายขึ้น

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการโหลดแบบปรับอัตโนมัติ

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