เรียนรู้วิธีทำให้ผู้ใช้ทุกคนได้รับประสบการณ์ที่ดีที่สุดโดยเพิ่มประสิทธิภาพเว็บไซต์สำหรับข้อจำกัดของฮาร์ดแวร์และเครือข่ายที่เจาะจง
ความสามารถของอุปกรณ์และการเชื่อมต่อเครือข่ายอาจแตกต่างกันอย่างมาก เว็บไซต์ที่สร้างความพึงพอใจให้กับผู้ใช้อุปกรณ์ระดับไฮเอนด์อาจใช้งานไม่ได้ในอุปกรณ์ระดับล่าง เว็บไซต์ที่โหลดอย่างราบรื่นบนเครือข่ายที่เร็วอาจหยุดชะงักเมื่อโหลดช้า ผู้ใช้ทุกคนอาจพบว่าเว็บไซต์ทำงานช้า ดังนั้นการพัฒนาโซลูชัน "ขนาดเดียวเหมาะกับทุกคน" อาจไม่ได้ผลเสมอไป
ในการพูดคุยเรื่อง 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 เพื่อให้ทุกคนได้รับประสบการณ์การใช้งานที่รวดเร็ว หากผู้ใช้อยู่ในเครือข่ายที่ช้าหรือเปิดใช้การประหยัดอินเทอร์เน็ตไว้ ผู้ใช้จะปิดใช้การเล่นวิดีโออัตโนมัติ จำกัดการกำหนดเส้นทางการดึงข้อมูลล่วงหน้า และจำกัดการโหลดรูปภาพถัดไปในภาพสไลด์ให้โหลดรูปภาพทีละรายการขณะที่ผู้ใช้ปัดดู หลังจากนำการเพิ่มประสิทธิภาพเหล่านี้ไปใช้ อัตราการปัดเฉลี่ยใน ประเทศต่างๆ เช่น อินโดนีเซีย เพิ่มขึ้นอย่างมาก
![ภาพหน้าจอของ Tinder Chat 2 เวอร์ชันที่มีวิดีโอที่เล่นอัตโนมัติและวิดีโอที่มีการวางซ้อนปุ่มเล่น ภาพหน้าจอของโปรไฟล์ Tinder พร้อมคำบรรยาย "จำกัดรูปภาพแบบภาพสไลด์ในโปรแกรมประหยัดอินเทอร์เน็ตหรือ 3G" ข้อมูลโค้ดสำหรับการดึงข้อมูลล่วงหน้าสำหรับวิดีโอในวิวพอร์ตผ่านเครือข่าย 4G เท่านั้น](https://web.dev/static/articles/adaptive-loading-cds-2019/image/a-screenshot-two-version-30856999784af.png?authuser=19&hl=th)
การโหลดแบบปรับอัตโนมัติที่ Facebook
ปัญหาหนึ่งที่เกิดขึ้นกับการโหลดแบบปรับอัตโนมัติคือการจัดกลุ่มอุปกรณ์เป็นคลาสระดับไฮเอนด์และคลาสโลว์เอนด์ตามสัญญาณที่มีอยู่ สตริง User Agent (UA) ในอุปกรณ์เคลื่อนที่จะระบุชื่ออุปกรณ์ที่ช่วยให้ Facebook ใช้ข้อมูลที่เผยแพร่แบบสาธารณะในอุปกรณ์เพื่อจัดกลุ่มอุปกรณ์เคลื่อนที่ออกเป็นคลาสได้ อย่างไรก็ตาม ข้อมูลที่เกี่ยวข้องเพียงอย่างเดียวซึ่ง UA ให้มาในอุปกรณ์เดสก์ท็อปคือระบบปฏิบัติการของอุปกรณ์
สำหรับการจัดกลุ่มอุปกรณ์เดสก์ท็อป Facebook จะบันทึกข้อมูลเกี่ยวกับระบบปฏิบัติการ, แกน CPU (จาก navigator.hardwareConcurrency
) และหน่วยความจำ RAM (navigator.deviceMemory
) ในการตรวจสอบประสิทธิภาพ เมื่อดูความสัมพันธ์ระหว่างฮาร์ดแวร์ประเภทต่างๆ และประสิทธิภาพ อุปกรณ์เหล่านี้ได้แบ่งอุปกรณ์ออกเป็น 5 หมวดหมู่ คลาสฮาร์ดแวร์ที่ผสานรวมกับการตรวจสอบประสิทธิภาพช่วยให้เห็นภาพวิธีที่ผู้คนใช้ผลิตภัณฑ์ของ Facebook บนอุปกรณ์ของผู้ใช้ได้สมบูรณ์ยิ่งขึ้น และระบุการถดถอยได้ง่ายขึ้น
ดูวิดีโอได้ที่มีความยาว 24 นาที ซึ่งเนตได้อธิบายวิธีที่ Facebook ใช้การจัดกลุ่มอุปกรณ์และใช้การโหลดแบบปรับอัตโนมัติสำหรับภาพเคลื่อนไหวและการโหลด JavaScript
ดูข้อมูลเพิ่มเติมเกี่ยวกับการโหลดแบบปรับอัตโนมัติ
การโหลดแบบปรับอัตโนมัติคือการออกแบบเว็บไซต์โดยคำนึงถึงการไม่แบ่งแยก สร้างประสบการณ์หลักที่ใช้งานได้ดีสำหรับทุกคน แล้วสลับหรือกำหนดเลเยอร์ฟีเจอร์ที่ทำให้เจ๋งขึ้นอีกหากผู้ใช้มีหน่วยความจำ, CPU เพียงพอ หรือเครือข่ายที่มีความเร็วเพียงพอ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการโหลดแบบปรับอัตโนมัติ โปรดดูการสาธิตที่มีให้และชมการพูดคุยเกี่ยวกับ Chrome Dev Summit