คุณควรทำความเข้าใจว่าการใช้แอปหรือเว็บไซต์ของคุณเป็นอย่างไรเมื่อการเชื่อมต่อไม่ดีหรือไม่เสถียร และสร้างแอปหรือเว็บไซต์ให้สอดคล้องกัน เครื่องมือต่างๆ สามารถช่วยคุณได้
ทดสอบด้วยแบนด์วิดท์ต่ำและเวลาในการตอบสนองสูง
สัดส่วนที่เพิ่มขึ้นของผู้คนสัมผัสประสบการณ์การใช้งานเว็บในอุปกรณ์เคลื่อนที่ แม้จะอยู่ที่บ้าน ผู้คนจำนวนมากก็เลิกใช้บรอดแบนด์แบบคงที่และหันมาใช้มือถือแทน
ในบริบทนี้ คุณควรทำความเข้าใจว่าการใช้แอปหรือเว็บไซต์ของคุณเป็นอย่างไรเมื่อการเชื่อมต่อไม่ดีหรือไม่เสถียร เครื่องมือซอฟต์แวร์ต่างๆ สามารถช่วยคุณจำลองและสร้างสถานการณ์ที่มีแบนด์วิดท์ต่ำและเวลาในการตอบสนองสูงได้
จำลองการควบคุมเครือข่าย
เมื่อสร้างหรืออัปเดตเว็บไซต์ คุณต้องตรวจสอบว่าเว็บไซต์มีประสิทธิภาพเพียงพอในสภาวะการเชื่อมต่อที่หลากหลาย ซึ่งมีเครื่องมือหลายอย่างที่ช่วยได้
เครื่องมือเบราว์เซอร์
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณทดสอบเว็บไซต์ด้วยความเร็วในการอัปโหลด/ดาวน์โหลดและ Round-Trip Time (RTT) ที่หลากหลายได้โดยใช้ค่าที่กำหนดล่วงหน้าหรือการตั้งค่าที่กำหนดเองจากแผงเครือข่าย ดูข้อมูลพื้นฐานได้ที่เริ่มต้นใช้งานการวิเคราะห์ประสิทธิภาพเครือข่าย
เครื่องมือของระบบ
Network Link Conditioner เป็นแผงค่ากำหนดที่ใช้ได้ใน Mac หากคุณติดตั้ง Hardware IO Tools สำหรับ Xcode โดยทำดังนี้
การจำลองอุปกรณ์
โปรแกรมจำลองของ Android ช่วยให้คุณจำลองสภาพเครือข่ายต่างๆ ขณะเรียกใช้แอป (รวมถึงเว็บเบราว์เซอร์และเว็บแอปแบบไฮบริด) บน Android ได้ โดยทำดังนี้
สำหรับ iPhone คุณสามารถใช้ Network Link Conditioner เพื่อจำลองสภาพเครือข่ายที่บกพร่องได้ (ดูด้านบน)
ทดสอบจากสถานที่และเครือข่ายต่างๆ
ประสิทธิภาพการเชื่อมต่อขึ้นอยู่กับตำแหน่งของเซิร์ฟเวอร์และประเภทเครือข่าย
WebPagetest เป็นบริการออนไลน์ที่ช่วยให้คุณทำการทดสอบประสิทธิภาพชุดหนึ่งสำหรับเว็บไซต์ของคุณโดยใช้เครือข่ายและตำแหน่งโฮสต์ที่หลากหลาย เช่น คุณสามารถลองใช้เว็บไซต์จากเซิร์ฟเวอร์ในอินเดียบนเครือข่าย 2G หรือผ่านสายเคเบิลจากเมืองในสหรัฐอเมริกา
เลือกตำแหน่ง และเลือกประเภทการเชื่อมต่อจากการตั้งค่าขั้นสูง นอกจากนี้ คุณยังทำการทดสอบอัตโนมัติได้โดยใช้สคริปต์ (เช่น เพื่อเข้าสู่ระบบเว็บไซต์) หรือใช้ RESTful API ซึ่งจะช่วยให้คุณรวมการทดสอบการเชื่อมต่อไว้ในกระบวนการบิลด์หรือการบันทึกประสิทธิภาพได้
Fiddler รองรับพร็อกซีทั่วโลกผ่าน GeoEdge และสามารถใช้กฎที่กำหนดเองเพื่อจำลองความเร็วของโมเด็มได้ ดังนี้
ทดสอบในเครือข่ายที่บกพร่อง
พร็อกซีซอฟต์แวร์และฮาร์ดแวร์ช่วยให้คุณจำลองสภาพเครือข่ายมือถือที่มีปัญหาได้ เช่น การควบคุมแบนด์วิดท์ ความล่าช้าของแพ็กเก็ต และการสูญหายของแพ็กเก็ตแบบสุ่ม พร็อกซีที่ใช้ร่วมกันหรือเครือข่ายที่บกพร่องช่วยให้นักพัฒนาซอฟต์แวร์สามารถรวมการทดสอบเครือข่ายในชีวิตจริงไว้ในเวิร์กโฟลว์ได้
Augmented Traffic Control (ATC) ของ Facebook เป็นชุดแอปพลิเคชันที่ได้รับอนุญาตจาก BSD ซึ่งสามารถใช้เพื่อกำหนดรูปแบบการเข้าชมและจำลองสภาพเครือข่ายที่บกพร่องได้
Facebook ถึงกับจัดตั้ง 2G Tuesdays เพื่อช่วยให้เข้าใจว่าผู้ใช้ 2G ใช้ผลิตภัณฑ์ของตนอย่างไร ในวันอังคาร พนักงานจะเห็นป๊อปอัปที่ให้ตัวเลือกในการจำลองการเชื่อมต่อ 2G
คุณสามารถใช้พร็อกซี HTTP/HTTPS ของ Charles เพื่อปรับแบนด์วิดท์และเวลาในการตอบสนองได้ Charles เป็นซอฟต์แวร์เชิงพาณิชย์ แต่มีช่วงทดลองใช้ฟรี
ดูข้อมูลเพิ่มเติมเกี่ยวกับ Charles ได้จาก codewithchris.com
จัดการการเชื่อมต่อที่ไม่เสถียรและ "Lie-Fi"
Lie-Fi คืออะไร
คำว่า lie-fi มีมาตั้งแต่ปี 2008 เป็นอย่างน้อย (เมื่อโทรศัพท์มีหน้าตาเหมือนแบบนี้) และหมายถึงการเชื่อมต่อที่ไม่เป็นไปตามที่เห็น เบราว์เซอร์ของคุณทำงานเหมือนมีการเชื่อมต่อ แต่จริงๆ แล้วไม่มีการเชื่อมต่อไม่ว่าจะด้วยเหตุผลใดก็ตาม
การตีความการเชื่อมต่อผิดพลาดอาจส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี เนื่องจากเบราว์เซอร์ (หรือ JavaScript) พยายามดึงข้อมูลทรัพยากรต่อไปแทนที่จะยอมแพ้และเลือกทางเลือกที่เหมาะสม Lie-Fi อาจแย่กว่าการออฟไลน์ด้วยซ้ำ อย่างน้อยหากอุปกรณ์ออฟไลน์อย่างแน่นอน JavaScript ของคุณก็สามารถดำเนินการหลบเลี่ยงที่เหมาะสมได้
Lie-fi มีแนวโน้มที่จะกลายเป็นปัญหาใหญ่ขึ้นเมื่อผู้คนเปลี่ยนไปใช้มือถือและเลิกใช้บรอดแบนด์แบบคงที่ ข้อมูลสำมะโนประชากรของสหรัฐอเมริกาล่าสุดแสดงให้เห็นว่าผู้คนเลิกใช้บรอดแบนด์แบบคงที่ แผนภูมิต่อไปนี้แสดงการใช้อินเทอร์เน็ตบนมือถือที่บ้านในปี 2015 เปรียบเทียบกับปี 2013
ใช้การหมดเวลาเพื่อจัดการกับการเชื่อมต่อที่ไม่ต่อเนื่อง
ในอดีต มีการใช้วิธีแฮ็กโดยใช้ XHR เพื่อทดสอบการเชื่อมต่อเป็นระยะๆ แต่ Service Worker ช่วยให้ใช้วิธีที่เชื่อถือได้มากขึ้นในการตั้งค่าการหมดเวลาของเครือข่าย ซึ่งทำได้โดยใช้ Workbox ด้วยโค้ดเพียงไม่กี่บรรทัด ดังนี้
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
ดูข้อมูลเพิ่มเติมเกี่ยวกับ Workbox ได้ในการบรรยายของ Jeff Posnick ในงาน Chrome Dev Summit เรื่อง Workbox: Flexible PWA Libraries
นอกจากนี้ยังมีการพัฒนาฟังก์ชันการหมดเวลาสำหรับ Fetch API และ Streams API ควรช่วยเพิ่มประสิทธิภาพการส่งเนื้อหาและหลีกเลี่ยงคำขอแบบรวมศูนย์ Jake Archibald ให้รายละเอียดเพิ่มเติมเกี่ยวกับการจัดการกับ Lie-Fi ในการเพิ่มประสิทธิภาพการโหลดหน้าเว็บ