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

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

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

ในการพูดคุยใน 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 เป็นชุดเครื่องมือสำหรับระบบนิเวศ React ที่ช่วยให้คุณปรับเว็บไซต์ให้เหมาะกับอุปกรณ์ระดับล่างได้ง่ายขึ้น แอปประกอบด้วย

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

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

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

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

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

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

การโหลดแบบปรับอัตโนมัติที่ทำงานอยู่

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

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

Twitter มีโหมดประหยัดอินเทอร์เน็ตที่ออกแบบมาเพื่อลดปริมาณอินเทอร์เน็ตที่ใช้ ในโหมดนี้ รูปภาพตัวอย่างจะโหลดในความละเอียดต่ำและรูปภาพขนาดใหญ่จะโหลดก็ต่อเมื่อคุณแตะตัวอย่างเท่านั้น เมื่อเปิดใช้ตัวเลือกนี้ ผู้ใช้ iOS และ Android จะประหยัดการใช้อินเทอร์เน็ตจากรูปภาพได้ 50% และผู้ใช้บนเว็บจะประหยัดได้ 80% นี่คือการสาธิต React ที่ใช้ฮุก Save Data เพื่อจำลองไทม์ไลน์ของ 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 นาที ซึ่ง Nate จะอธิบายวิธีที่ Facebook จัดการการจัดกลุ่มอุปกรณ์และใช้การโหลดแบบปรับเปลี่ยนได้สำหรับภาพเคลื่อนไหวและโหลด JavaScript

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

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