คุณควรเข้าใจว่าการใช้แอปหรือเว็บไซต์ของคุณเมื่อการเชื่อมต่อไม่ดีหรือไม่เสถียรนั้นเป็นอย่างไร แล้วสร้างให้เหมาะสม มีเครื่องมือมากมายที่ช่วย คุณได้
ทดสอบแบนด์วิดท์ต่ำและเวลาในการตอบสนองสูง
มีผู้ใช้ สัดส่วนที่เพิ่มขึ้นในการใช้งานเว็บในอุปกรณ์เคลื่อนที่ แม้จะอยู่ที่บ้าน ผู้คนจำนวนมากเลิกใช้บรอดแบนด์แบบคงที่สำหรับอุปกรณ์เคลื่อนที่
ในบริบทนี้ คุณจึงต้องเข้าใจว่าการใช้แอปหรือเว็บไซต์ของคุณเป็นอย่างไรเมื่อการเชื่อมต่อไม่ดีหรือไม่เสถียร เครื่องมือซอฟต์แวร์ที่หลากหลายจะช่วยให้คุณจำลองและจำลองแบนด์วิดท์ต่ำและเวลาในการตอบสนองสูงได้
จำลองการควบคุมเครือข่าย
เมื่อสร้างหรืออัปเดตเว็บไซต์ คุณต้องตรวจสอบให้แน่ใจว่าเว็บไซต์มีประสิทธิภาพดีพอในสภาพการเชื่อมต่อต่างๆ มีเครื่องมือมากมายที่ช่วยคุณได้
เครื่องมือของเบราว์เซอร์
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ให้คุณทดสอบเว็บไซต์ด้วยความเร็วในการอัปโหลด/ดาวน์โหลดและเวลารับส่งที่หลากหลาย โดยใช้ค่าที่กำหนดล่วงหน้าหรือที่กำหนดเองจากแผงเครือข่าย ดูเริ่มต้นใช้งานการวิเคราะห์ประสิทธิภาพเครือข่ายเพื่อเรียนรู้พื้นฐาน
เครื่องมือของระบบ
Network Link Conditioner คือแผงค่ากำหนดที่ให้บริการบน Mac หากคุณติดตั้ง ฮาร์ดแวร์ IO Tools สำหรับ Xcode
การจำลองอุปกรณ์
Android Emulator ช่วยให้คุณจำลองสภาพเครือข่ายแบบต่างๆ ไปพร้อมกับใช้งานแอป (รวมถึงเว็บเบราว์เซอร์และเว็บแอปแบบผสม) ใน 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 ช่วยให้มีวิธีการที่เชื่อถือได้มากขึ้นในการตั้งค่าระยะหมดเวลาของเครือข่าย ซึ่งทำได้โดยใช้กล่องจดหมายโดยใช้โค้ดเพียงไม่กี่บรรทัด ดังนี้
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Workbox ในการพูดคุยเรื่อง Chrome Dev Summit ของ Jeff Posnick หัวข้อ Workbox: แบบยืดหยุ่น PWA Libraries
นอกจากนี้ เรายังพัฒนาฟังก์ชันการหมดเวลาสําหรับ Fetch API ด้วย และ Streams API น่าจะช่วยด้วยการเพิ่มประสิทธิภาพการส่งเนื้อหาและหลีกเลี่ยงคําขอที่มีขนาดใหญ่มาก Jake Archibald ให้รายละเอียดเพิ่มเติมเกี่ยวกับการรับมือ Lie-Fi ในเพิ่มประสิทธิภาพการโหลดหน้าเว็บ