คุณต้องเข้าใจว่าการใช้แอปหรือเว็บไซต์ของคุณเมื่อการเชื่อมต่อไม่ดีหรือไม่เสถียรนั้นเป็นอย่างไร แล้วค่อยๆ สร้างเครือข่ายนี้ตามประสิทธิภาพนั้น มีเครื่องมือมากมาย ที่ช่วยคุณได้
ทดสอบด้วยแบนด์วิดท์ต่ำและเวลาในการตอบสนองสูง
ผู้คนใช้เว็บบนอุปกรณ์เคลื่อนที่มากขึ้น แม้แต่ที่บ้าน ผู้คนจํานวนมากก็เลิกใช้บรอดแบนด์แบบใช้สายแล้วหันมาใช้บรอดแบนด์เคลื่อนที่
ในบริบทนี้ คุณต้องเข้าใจว่าประสบการณ์การใช้งานแอปหรือเว็บไซต์เป็นอย่างไรเมื่อการเชื่อมต่อไม่ดีหรือไม่เสถียร มีเครื่องมือซอฟต์แวร์มากมายที่ช่วยให้คุณจำลองและจำลองแบนด์วิดท์ต่ำและเวลาในการตอบสนองสูงได้
จำลองการควบคุมปริมาณการใช้เครือข่าย
เมื่อสร้างหรืออัปเดตเว็บไซต์ คุณต้องตรวจสอบว่าเว็บไซต์มีประสิทธิภาพเพียงพอในการเชื่อมต่อที่หลากหลาย เครื่องมือหลายอย่างช่วยคุณได้
เครื่องมือของเบราว์เซอร์
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณทดสอบเว็บไซต์ด้วยความเร็วการอัปโหลด/ดาวน์โหลดและเวลาในการตอบสนองที่หลากหลายได้โดยใช้ค่าที่กำหนดล่วงหน้าหรือการตั้งค่าที่กำหนดเองจากแผงเครือข่าย ดูเริ่มต้นใช้งาน Analyze ประสิทธิภาพเครือข่ายเพื่อเรียนรู้พื้นฐาน
เครื่องมือของระบบ
Network Link Conditioner เป็นแผงการตั้งค่าที่มีให้ใน Mac หากคุณติดตั้งเครื่องมือ IO ของฮาร์ดแวร์สำหรับ Xcode
การจำลองอุปกรณ์
โปรแกรมจําลอง Android ช่วยให้คุณจําลองเงื่อนไขเครือข่ายต่างๆ ขณะเรียกใช้แอป (รวมถึงเว็บเบราว์เซอร์และเว็บแอปแบบผสม) ใน Android ได้ ดังนี้
สำหรับ iPhone คุณสามารถใช้เครื่องมือปรับสภาพลิงก์เครือข่ายเพื่อจำลองสภาพเครือข่ายที่บกพร่อง (ดูด้านบน)
ทดสอบจากตำแหน่งและเครือข่ายต่างๆ
ประสิทธิภาพการเชื่อมต่อขึ้นอยู่กับตำแหน่งเซิร์ฟเวอร์และประเภทเครือข่าย
WebPagetest เป็นบริการออนไลน์ที่ช่วยให้สามารถเรียกใช้ชุดการทดสอบประสิทธิภาพสําหรับเว็บไซต์โดยใช้เครือข่ายและตำแหน่งโฮสต์ที่หลากหลาย ตัวอย่างเช่น คุณอาจลองใช้เว็บไซต์จากเซิร์ฟเวอร์ในอินเดียบนเครือข่าย 2G หรือผ่านสายเคเบิลจากเมืองในสหรัฐอเมริกา
เลือกตำแหน่ง แล้วเลือกประเภทการเชื่อมต่อจากการตั้งค่าขั้นสูง คุณยังทำการทดสอบโดยอัตโนมัติได้โดยใช้สคริปต์ (เช่น เพื่อเข้าสู่ระบบเว็บไซต์) หรือใช้ RESTful API ซึ่งจะช่วยให้คุณรวมการทดสอบการเชื่อมต่อไว้ในกระบวนการสร้างหรือการบันทึกประสิทธิภาพได้
Fiddler รองรับการพร็อกซีทั่วโลกผ่าน GeoEdge และคุณสามารถใช้กฎที่กำหนดเองเพื่อจำลองความเร็วของโมดูลได้ ดังนี้
ทดสอบในเครือข่ายที่ทำงานขัดข้อง
พร็อกซีซอฟต์แวร์และฮาร์ดแวร์ช่วยให้คุณจำลองสภาพเครือข่ายมือถือที่มีปัญหาได้ เช่น การจำกัดแบนด์วิดท์ ความล่าช้าของแพ็กเก็ต และการสูญหายของแพ็กเก็ตแบบสุ่ม พร็อกซีที่แชร์หรือเครือข่ายที่ทำงานได้ไม่เต็มประสิทธิภาพจะช่วยให้ทีมนักพัฒนาแอปรวมการทดสอบเครือข่ายในชีวิตจริงไว้ในเวิร์กโฟลว์ได้
Augmented Traffic Control (ATC) ของ Facebook คือชุดแอปพลิเคชันที่ได้รับอนุญาตจาก BSD และใช้เพื่อกำหนดการเข้าชมและจำลองสภาพเครือข่ายที่บกพร่องได้
Facebook ยังได้จัดตั้งวันอังคาร 2G เพื่อช่วยให้เข้าใจวิธีที่ผู้ใช้ 2G ใช้ผลิตภัณฑ์ ในวันอังคาร พนักงานจะเห็นป๊อปอัปที่ให้ตัวเลือกในการจําลองการเชื่อมต่อ 2G
คุณสามารถใช้พร็อกซี HTTP/HTTPS ของ Charles เพื่อปรับแบนด์วิดท์และเวลาในการตอบสนอง Charles เป็นซอฟต์แวร์เชิงพาณิชย์ แต่มีช่วงทดลองใช้ฟรี
ดูข้อมูลเพิ่มเติมเกี่ยวกับ Charles ได้จาก codewithchris.com
จัดการการเชื่อมต่อที่ไม่เสถียรและ "อินเทอร์เน็ตมือถือที่ไม่น่าเชื่อถือ"
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: ไลบรารี PWA ที่ยืดหยุ่น
นอกจากนี้ เรายังพัฒนาฟังก์ชันการหมดเวลาสำหรับ Fetch API และ Streams API ควรช่วยเพิ่มประสิทธิภาพการส่งเนื้อหาและหลีกเลี่ยงคำขอแบบโมโนลิธิก Jake Archibald ให้รายละเอียดเพิ่มเติมเกี่ยวกับการรับมือกับ Lie-Fi ในบทความเร่งการโหลดหน้าเว็บ